fix(deps): update dependency @markdoc/markdoc to ^0.2.0 (#8056)

docs/components/Markdoc.tsx

@@ -1,5 +1,6 @@
 import React, { ElementType, ReactNode } from 'react';
-import { RenderableTreeNodes, Scalar, RenderableTreeNode, Tag } from '@markdoc/markdoc';
+import type { RenderableTreeNodes, Scalar, RenderableTreeNode, Tag } from '@markdoc/markdoc';
+import { isTag } from '../markdoc/isTag';
 import { Code, InlineCode } from './primitives/Code';
 import { Heading } from './docs/Heading';
 import { RelatedContent } from './RelatedContent';
@@ -51,7 +52,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;
 
@@ -84,7 +93,7 @@ export type HeadingType = {
 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,
@@ -99,7 +108,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 { transformContent } 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;
@@ -70,10 +71,10 @@ export function transformContent(errorReportingFilepath: string, content: string
   }
   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'
+  );
+}

docs/package.json

@@ -24,7 +24,7 @@
     "@keystone-6/fields-document": "^5.0.0",
     "@keystone-ui/core": "^5.0.1",
     "@keystone-ui/icons": "^6.0.1",
-    "@markdoc/markdoc": "^0.1.5",
+    "@markdoc/markdoc": "^0.2.0",
     "@preconstruct/next": "^4.0.0",
     "@sindresorhus/slugify": "^1.1.2",
     "@types/gtag.js": "^0.0.12",

yarn.lock

@@ -3327,10 +3327,12 @@
     globby "^11.0.0"
     read-yaml-file "^1.1.0"
 
-"@markdoc/markdoc@^0.1.5":
-  version "0.1.13"
-  resolved "https://registry.yarnpkg.com/@markdoc/markdoc/-/markdoc-0.1.13.tgz#358408d3b4edf5dae90b51c2d8d89d51743dbd18"
-  integrity sha512-zUdUpr2U3tf0uBQKr1aAiNDvwtZChAjCw3WPVv4PMKcPjYYlVHE0lizIS3NjChruRPJ2FvVQAI4ceyNpJWobiw==
+"@markdoc/markdoc@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@markdoc/markdoc/-/markdoc-0.2.0.tgz#1b7b4aaa55cb7246237c6520cbab877e2081da26"
+  integrity sha512-g5aqMY7uf3pmP50Ol7SyxT3iGD5cUwLEqMzCu5RTrOpllsrmamk1XAbsXY5rcPFPuc9m25peFOKEHfksrnPrXg==
+  optionalDependencies:
+    "@types/markdown-it" "12.2.3"
 
 "@next/[email protected]":
   version "12.3.2"
@@ -4446,7 +4448,7 @@
   resolved "https://registry.yarnpkg.com/@types/long/-/long-4.0.2.tgz#b74129719fc8d11c01868010082d483b7545591a"
   integrity sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==
 
-"@types/markdown-it@^12.2.3":
+"@types/markdown-it@12.2.3", "@types/markdown-it@^12.2.3":
   version "12.2.3"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
   integrity sha512-GKMHFfv3458yYy+v/N8gjufHO6MSZKCOXpZc5GXIWWy8uldwfmPn98vp81gZ5f9SVw8YYBctgfJ22a2d7AOMeQ==