Fix things

docs/components/Markdoc.tsx

@@ -1,6 +1,7 @@
 import React, { ElementType, ReactNode } from 'react';
-import { RenderableTreeNodes, Scalar, RenderableTreeNode, Tag } from '@markdoc/markdoc';
+import type { RenderableTreeNodes, Scalar, RenderableTreeNode, Tag } from '@markdoc/markdoc';
 import { Heading as HeadingType } from '../lib/getHeadings';
+import { isTag } from '../markdoc/isTag';
 import { Code, InlineCode } from './primitives/Code';
 import { Heading } from './docs/Heading';
 import { RelatedContent } from './RelatedContent';
@@ -50,7 +51,15 @@ export function Markdoc(props: { content: RenderableTreeNodes }) {
       return React.createElement(React.Fragment, null, ...node.map(render));
     }
 
-    if (node === null || typeof node !== 'object') return node;
+    if (
+      typeof node === 'string' ||
+      typeof node === 'number' ||
+      typeof node === 'boolean' ||
+      node === null
+    ) {
+      return node;
+    }
+    if (!isTag(node)) return null;
 
     const { name, attributes: { class: className, ...attrs } = {}, children = [] } = node;
 
@@ -77,7 +86,7 @@ export function Markdoc(props: { content: RenderableTreeNodes }) {
 export function extractHeadings(content: Tag): HeadingType[] {
   const headings: HeadingType[] = [];
   for (const child of content.children) {
-    if (typeof child !== 'string' && child !== null && child.name === 'Heading') {
+    if (isTag(child) && child.name === 'Heading') {
       headings.push({
         id: child.attributes.id,
         depth: child.attributes.level,
@@ -92,7 +101,10 @@ function stringifyDocContent(node: RenderableTreeNode): string {
   if (typeof node === 'string') {
     return node;
   }
-  if (node === null) {
+  if (Array.isArray(node)) {
+    return node.map(stringifyDocContent).join('');
+  }
+  if (!isTag(node)) {
     return '';
   }
   return node.children.map(stringifyDocContent).join('');

docs/markdoc/index.test.ts

@@ -1,16 +1,28 @@
 import { RenderableTreeNode } from '@markdoc/markdoc';
 import React, { ReactNode } from 'react';
+import { isTag } from './isTag';
 import { transformDocContent } from '.';
 
 function renderableToReactElement(node: RenderableTreeNode, key = 1): ReactNode {
-  if (typeof node === 'string' || node === null) {
+  if (
+    typeof node === 'string' ||
+    typeof node === 'number' ||
+    typeof node === 'boolean' ||
+    node === null
+  ) {
     return node;
   }
-  return React.createElement(
-    node.name,
-    { ...node.attributes, key },
-    node.children.map((child, i) => renderableToReactElement(child, i))
-  );
+  if (Array.isArray(node)) {
+    return node.map(renderableToReactElement);
+  }
+  if (isTag(node)) {
+    return React.createElement(
+      node.name,
+      { ...node.attributes, key },
+      node.children.map((child, i) => renderableToReactElement(child, i))
+    );
+  }
+  return null;
 }
 
 expect.addSnapshotSerializer({

docs/markdoc/index.ts

@@ -7,6 +7,7 @@ import { assert } from 'emery/assertions';
 import { load } from 'js-yaml';
 import { baseMarkdocConfig } from './config';
 import { showNextReleaseWithoutReplacement } from './show-next-release';
+import { isTag } from './isTag';
 
 export function printValidationError(error: ValidateError) {
   const location = error.error.location || error.location;
@@ -60,10 +61,10 @@ export function transformDocContent(errorReportingFilepath: string, content: str
   }
   const renderableNode = Markdoc.transform(node, markdocConfig);
 
-  assert(renderableNode !== null && typeof renderableNode !== 'string');
+  assert(isTag(renderableNode));
 
   // Next is annoying about not plain objects
-  return JSON.parse(JSON.stringify(renderableNode)) as typeof renderableNode;
+  return JSON.parse(JSON.stringify(renderableNode)) as Tag;
 }
 
 const frontMatterPattern = /^---[\s]+([\s\S]*?)[\s]+---/;

docs/markdoc/isTag.ts

@@ -0,0 +1,9 @@
+import type { Tag } from '@markdoc/markdoc';
+
+// this is Tag.isTag but we don't want to have to load all of markdoc client side
+// so it's duplicated
+export function isTag(tag: unknown): tag is Tag {
+  return (
+    typeof tag === 'object' && tag !== null && '$$mdtype' in tag && (tag as any).$$mdtype === 'Tag'
+  );
+}