@docusaurus/mdx-loader 3.0.0-beta.0 → 3.0.0-rc.1

package/src/processor.ts

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import emoji from 'remark-emoji';
 import headings from './remark/headings';
+import contentTitle from './remark/contentTitle';
 import toc from './remark/toc';
 import transformImage from './remark/transformImage';
 import transformLinks from './remark/transformLinks';
@@ -14,8 +14,10 @@ import details from './remark/details';
 import head from './remark/head';
 import mermaid from './remark/mermaid';
 import transformAdmonitions from './remark/admonitions';
+import unusedDirectivesWarning from './remark/unusedDirectives';
 import codeCompatPlugin from './remark/mdx1Compat/codeCompatPlugin';
 import {getFormat} from './format';
+import type {WebpackCompilerName} from '@docusaurus/utils';
 import type {MDXFrontMatter} from './frontMatter';
 import type {Options} from './loader';
 import type {AdmonitionOptions} from './remark/admonitions';
@@ -28,24 +30,27 @@ import type {ProcessorOptions} from '@mdx-js/mdx';
 // See https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1517839391
 type Pluggable = any; // TODO fix this asap
 
+type SimpleProcessorResult = {content: string; data: {[key: string]: unknown}};
+
 // TODO alt interface because impossible to import type Processor (ESM + TS :/)
 type SimpleProcessor = {
   process: ({
     content,
     filePath,
+    frontMatter,
+    compilerName,
   }: {
     content: string;
     filePath: string;
-  }) => Promise<string>;
+    frontMatter: {[key: string]: unknown};
+    compilerName: WebpackCompilerName;
+  }) => Promise<SimpleProcessorResult>;
 };
 
-const DEFAULT_OPTIONS: MDXOptions = {
-  admonitions: true,
-  rehypePlugins: [],
-  remarkPlugins: [headings, emoji, toc],
-  beforeDefaultRemarkPlugins: [],
-  beforeDefaultRehypePlugins: [],
-};
+async function getDefaultRemarkPlugins(): Promise<MDXPlugin[]> {
+  const {default: emoji} = await import('remark-emoji');
+  return [headings, emoji, toc];
+}
 
 export type MDXPlugin = Pluggable;
 
@@ -74,11 +79,15 @@ function getAdmonitionsPlugins(
 // Need to be async due to ESM dynamic imports...
 async function createProcessorFactory() {
   const {createProcessor: createMdxProcessor} = await import('@mdx-js/mdx');
+  const {default: frontmatter} = await import('remark-frontmatter');
   const {default: rehypeRaw} = await import('rehype-raw');
   const {default: gfm} = await import('remark-gfm');
   // TODO using fork until PR merged: https://github.com/leebyron/remark-comment/pull/3
   const {default: comment} = await import('@slorber/remark-comment');
   const {default: directive} = await import('remark-directive');
+  const {VFile} = await import('vfile');
+
+  const defaultRemarkPlugins = await getDefaultRemarkPlugins();
 
   // /!\ this method is synchronous on purpose
   // Using async code here can create cache entry race conditions!
@@ -91,9 +100,11 @@ async function createProcessorFactory() {
   }): SimpleProcessor {
     const remarkPlugins: MDXPlugin[] = [
       ...(options.beforeDefaultRemarkPlugins ?? []),
+      frontmatter,
       directive,
+      [contentTitle, {removeContentTitle: options.removeContentTitle}],
       ...getAdmonitionsPlugins(options.admonitions ?? false),
-      ...DEFAULT_OPTIONS.remarkPlugins,
+      ...defaultRemarkPlugins,
       details,
       head,
       ...(options.markdownConfig.mermaid ? [mermaid] : []),
@@ -114,6 +125,7 @@ async function createProcessorFactory() {
       gfm,
       options.markdownConfig.mdx1Compat.comments ? comment : null,
       ...(options.remarkPlugins ?? []),
+      unusedDirectivesWarning,
     ].filter((plugin): plugin is MDXPlugin => Boolean(plugin));
 
     // codeCompatPlugin needs to be applied last after user-provided plugins
@@ -122,7 +134,6 @@ async function createProcessorFactory() {
 
     const rehypePlugins: MDXPlugin[] = [
       ...(options.beforeDefaultRehypePlugins ?? []),
-      ...DEFAULT_OPTIONS.rehypePlugins,
       ...(options.rehypePlugins ?? []),
     ];
 
@@ -158,13 +169,20 @@ async function createProcessorFactory() {
     });
 
     return {
-      process: async ({content, filePath}) =>
-        mdxProcessor
-          .process({
-            value: content,
-            path: filePath,
-          })
-          .then((res) => res.toString()),
+      process: async ({content, filePath, frontMatter, compilerName}) => {
+        const vfile = new VFile({
+          value: content,
+          path: filePath,
+          data: {
+            frontMatter,
+            compilerName,
+          },
+        });
+        return mdxProcessor.process(vfile).then((result) => ({
+          content: result.toString(),
+          data: result.data,
+        }));
+      },
     };
   }
 

package/src/remark/admonitions/index.ts

@@ -4,7 +4,6 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import visit from 'unist-util-visit';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer, Processor} from 'unified';
 
@@ -67,6 +66,7 @@ function parseDirective(directive: ContainerDirective): {
   contentNodes: DirectiveContent;
 } {
   const hasDirectiveLabel =
+    // @ts-expect-error: fine
     directive.children?.[0]?.data?.directiveLabel === true;
   if (hasDirectiveLabel) {
     const [directiveLabel, ...contentNodes] = directive.children;
@@ -92,6 +92,8 @@ const plugin: Plugin = function plugin(
   const {keywords} = normalizeAdmonitionOptions(optionsInput);
 
   return async (root) => {
+    const {visit} = await import('unist-util-visit');
+
     visit(root, (node) => {
       if (node.type === 'containerDirective') {
         const directive = node as ContainerDirective;

package/src/remark/contentTitle/index.ts

@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
+import type {Transformer} from 'unified';
+import type {Heading} from 'mdast';
+
+// TODO as of April 2023, no way to import/re-export this ESM type easily :/
+// TODO upgrade to TS 5.3
+// See https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1517839391
+// import type {Plugin} from 'unified';
+type Plugin = any; // TODO fix this asap
+
+interface PluginOptions {
+  removeContentTitle?: boolean;
+}
+
+/**
+ * A remark plugin to extract the h1 heading found in Markdown files
+ * This is exposed as "data.contentTitle" to the processed vfile
+ * Also gives the ability to strip that content title (used for the blog plugin)
+ */
+const plugin: Plugin = function plugin(
+  options: PluginOptions = {},
+): Transformer {
+  // content title is
+  const removeContentTitle = options.removeContentTitle ?? false;
+
+  return async (root, vfile) => {
+    const {toString} = await import('mdast-util-to-string');
+    const {visit, EXIT} = await import('unist-util-visit');
+
+    visit(root, 'heading', (headingNode: Heading, index, parent) => {
+      if (headingNode.depth === 1) {
+        vfile.data.contentTitle = toString(headingNode);
+        if (removeContentTitle) {
+          // @ts-expect-error: TODO how to fix?
+          parent!.children.splice(index, 1);
+        }
+        return EXIT; // We only handle the very first heading
+      }
+      // We only handle contentTitle if it's the very first heading found
+      if (headingNode.depth >= 1) {
+        return EXIT;
+      }
+      return undefined;
+    });
+  };
+};
+
+export default plugin;

package/src/remark/details/index.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import visit from 'unist-util-visit';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
 
@@ -15,7 +14,8 @@ import type {MdxJsxFlowElement} from 'mdast-util-mdx';
 // Transform <details> to <Details>
 // MDX 2 doesn't allow to substitute html elements with the provider anymore
 export default function plugin(): Transformer {
-  return (root) => {
+  return async (root) => {
+    const {visit} = await import('unist-util-visit');
     visit(root, 'mdxJsxFlowElement', (node: MdxJsxFlowElement) => {
       if (node.name === 'details') {
         node.name = 'Details';

package/src/remark/head/index.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import visit from 'unist-util-visit';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
 
@@ -15,7 +14,8 @@ import type {MdxJsxFlowElement} from 'mdast-util-mdx';
 // Transform <head> to <Head>
 // MDX 2 doesn't allow to substitute html elements with the provider anymore
 export default function plugin(): Transformer {
-  return (root) => {
+  return async (root) => {
+    const {visit} = await import('unist-util-visit');
     visit(root, 'mdxJsxFlowElement', (node: MdxJsxFlowElement) => {
       if (node.name === 'head') {
         node.name = 'Head';

package/src/remark/headings/index.ts

@@ -8,7 +8,6 @@
 /* Based on remark-slug (https://github.com/remarkjs/remark-slug) and gatsby-remark-autolink-headers (https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-autolink-headers) */
 
 import {parseMarkdownHeadingId, createSlugger} from '@docusaurus/utils';
-import visit from 'unist-util-visit';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
 import type {Heading, Text} from 'mdast';
@@ -16,6 +15,7 @@ import type {Heading, Text} from 'mdast';
 export default function plugin(): Transformer {
   return async (root) => {
     const {toString} = await import('mdast-util-to-string');
+    const {visit} = await import('unist-util-visit');
 
     const slugs = createSlugger();
     visit(root, 'heading', (headingNode: Heading) => {

package/src/remark/mdx1Compat/codeCompatPlugin.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import visit from 'unist-util-visit';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer, Processor} from 'unified';
 import type {Code} from 'mdast';
@@ -18,19 +17,18 @@ import type {Code} from 'mdast';
 // To make theme-classic/src/theme/MDXComponents/Pre work
 // we need to fill two properties that mdx v2 doesn't provide anymore
 export default function codeCompatPlugin(this: Processor): Transformer {
-  return (root) => {
+  return async (root) => {
+    const {visit} = await import('unist-util-visit');
+
     visit(root, 'code', (node: Code) => {
       node.data = node.data || {};
+
       node.data.hProperties = node.data.hProperties || {};
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (node.data.hProperties as any).metastring = node.meta;
+      node.data.hProperties.metastring = node.meta;
 
       // Retrocompatible support for live codeblock metastring
       // Not really the appropriate place to handle that :s
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      (node.data.hProperties as any).live = node.meta
-        ?.split(' ')
-        .includes('live');
+      node.data.hProperties.live = node.meta?.split(' ').includes('live');
     });
   };
 }

package/src/remark/mermaid/index.ts

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import visit from 'unist-util-visit';
+import {transformNode} from '../utils';
+
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
 import type {Code} from 'mdast';
@@ -15,11 +16,13 @@ import type {Code} from 'mdast';
 // https://github.com/facebook/docusaurus/issues/6370), this should be provided
 // by theme-mermaid itself
 export default function plugin(): Transformer {
-  return (root) => {
-    visit(root, 'code', (node: Code, index, parent) => {
+  return async (root) => {
+    const {visit} = await import('unist-util-visit');
+
+    visit(root, 'code', (node: Code) => {
       if (node.lang === 'mermaid') {
         // TODO migrate to mdxJsxFlowElement? cf admonitions
-        parent!.children.splice(index, 1, {
+        transformNode(node, {
           type: 'mermaidCodeBlock',
           data: {
             hName: 'mermaid',

package/src/remark/toc/index.ts

@@ -8,16 +8,19 @@
 import {parse, type ParserOptions} from '@babel/parser';
 import traverse from '@babel/traverse';
 import stringifyObject from 'stringify-object';
-import visit from 'unist-util-visit';
 import {toValue} from '../utils';
 import type {Identifier} from '@babel/types';
 import type {Node, Parent} from 'unist';
 import type {Heading, Literal} from 'mdast';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
+import type {
+  MdxjsEsm,
+  // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
+} from 'mdast-util-mdx';
 
 // TODO as of April 2023, no way to import/re-export this ESM type easily :/
-// This might change soon, likely after TS 5.2
+// TODO upgrade to TS 5.3
 // See https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1517839391
 // import type {Plugin} from 'unified';
 type Plugin = any; // TODO fix this asap
@@ -88,6 +91,8 @@ const plugin: Plugin = function plugin(
 
   return async (root) => {
     const {toString} = await import('mdast-util-to-string');
+    const {visit} = await import('unist-util-visit');
+
     const headings: TOCItem[] = [];
 
     visit(root, 'heading', (child: Heading) => {
@@ -100,11 +105,12 @@ const plugin: Plugin = function plugin(
 
       headings.push({
         value: toValue(child, toString),
-        id: child.data!.id as string,
+        id: child.data!.id!,
         level: child.depth,
       });
     });
-    const {children} = root as Parent<Literal>;
+
+    const {children} = root as Parent;
     const targetIndex = await getOrCreateExistingTargetIndex(children, name);
 
     if (headings?.length) {
@@ -115,7 +121,7 @@ const plugin: Plugin = function plugin(
 
 export default plugin;
 
-async function createExportNode(name: string, object: any) {
+async function createExportNode(name: string, object: any): Promise<MdxjsEsm> {
   const {valueToEstree} = await import('estree-util-value-to-estree');
 
   return {

package/src/remark/transformImage/index.ts

@@ -16,11 +16,10 @@ import {
   getFileLoaderUtils,
   findAsyncSequential,
 } from '@docusaurus/utils';
-import visit from 'unist-util-visit';
 import escapeHtml from 'escape-html';
 import sizeOf from 'image-size';
 import logger from '@docusaurus/logger';
-import {assetRequireAttributeValue} from '../utils';
+import {assetRequireAttributeValue, transformNode} from '../utils';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
@@ -110,14 +109,12 @@ ${(err as Error).message}`;
     }
   }
 
-  Object.keys(jsxNode).forEach(
-    (key) => delete jsxNode[key as keyof typeof jsxNode],
-  );
-
-  jsxNode.type = 'mdxJsxTextElement';
-  jsxNode.name = 'img';
-  jsxNode.attributes = attributes;
-  jsxNode.children = [];
+  transformNode(jsxNode, {
+    type: 'mdxJsxTextElement',
+    name: 'img',
+    attributes,
+    children: [],
+  });
 }
 
 async function ensureImageFileExist(imagePath: string, sourceFilePath: string) {
@@ -194,6 +191,8 @@ async function processImageNode(target: Target, context: Context) {
 
 export default function plugin(options: PluginOptions): Transformer {
   return async (root, vfile) => {
+    const {visit} = await import('unist-util-visit');
+
     const promises: Promise<void>[] = [];
     visit(root, 'image', (node: Image, index, parent) => {
       promises.push(

package/src/remark/transformLinks/index.ts

@@ -15,9 +15,8 @@ import {
   getFileLoaderUtils,
   findAsyncSequential,
 } from '@docusaurus/utils';
-import visit from 'unist-util-visit';
 import escapeHtml from 'escape-html';
-import {assetRequireAttributeValue} from '../utils';
+import {assetRequireAttributeValue, transformNode} from '../utils';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 import type {Transformer} from 'unified';
 // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
@@ -90,14 +89,12 @@ async function toAssetRequireNode(
 
   const {children} = node;
 
-  Object.keys(jsxNode).forEach(
-    (key) => delete jsxNode[key as keyof typeof jsxNode],
-  );
-
-  jsxNode.type = 'mdxJsxTextElement';
-  jsxNode.name = 'a';
-  jsxNode.attributes = attributes;
-  jsxNode.children = children;
+  transformNode(jsxNode, {
+    type: 'mdxJsxTextElement',
+    name: 'a',
+    attributes,
+    children,
+  });
 }
 
 async function ensureAssetFileExist(assetPath: string, sourceFilePath: string) {
@@ -177,6 +174,8 @@ async function processLinkNode(target: Target, context: Context) {
 
 export default function plugin(options: PluginOptions): Transformer {
   return async (root, vfile) => {
+    const {visit} = await import('unist-util-visit');
+
     const promises: Promise<void>[] = [];
     visit(root, 'link', (node: Link, index, parent) => {
       promises.push(

package/src/remark/unusedDirectives/index.ts

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import path from 'path';
+import process from 'process';
+import logger from '@docusaurus/logger';
+import {posixPath} from '@docusaurus/utils';
+import {transformNode} from '../utils';
+
+// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
+import type {Transformer, Processor, Parent} from 'unified';
+import type {
+  Directives,
+  TextDirective,
+  // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
+} from 'mdast-util-directive';
+
+// TODO as of April 2023, no way to import/re-export this ESM type easily :/
+// This might change soon, likely after TS 5.2
+// See https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1517839391
+// import type {Plugin} from 'unified';
+type Plugin = any; // TODO fix this asap
+
+type DirectiveType = Directives['type'];
+
+const directiveTypes: DirectiveType[] = [
+  'containerDirective',
+  'leafDirective',
+  'textDirective',
+];
+
+const directivePrefixMap: {[key in DirectiveType]: string} = {
+  textDirective: ':',
+  leafDirective: '::',
+  containerDirective: ':::',
+};
+
+function formatDirectiveName(directive: Directives) {
+  const prefix = directivePrefixMap[directive.type];
+  if (!prefix) {
+    throw new Error(
+      `unexpected, no prefix found for directive of type ${directive.type}`,
+    );
+  }
+  // To simplify we don't display the eventual label/props of directives
+  return `${prefix}${directive.name}`;
+}
+
+function formatDirectivePosition(directive: Directives): string | undefined {
+  return directive.position?.start
+    ? logger.interpolate`number=${directive.position.start.line}:number=${directive.position.start.column}`
+    : undefined;
+}
+
+function formatUnusedDirectiveMessage(directive: Directives) {
+  const name = formatDirectiveName(directive);
+  const position = formatDirectivePosition(directive);
+
+  return `- ${name} ${position ? `(${position})` : ''}`;
+}
+
+function formatUnusedDirectivesMessage({
+  directives,
+  filePath,
+}: {
+  directives: Directives[];
+  filePath: string;
+}): string {
+  const supportUrl = 'https://github.com/facebook/docusaurus/pull/9394';
+  const customPath = posixPath(path.relative(process.cwd(), filePath));
+  const warningTitle = logger.interpolate`Docusaurus found ${directives.length} unused Markdown directives in file path=${customPath}`;
+  const customSupportUrl = logger.interpolate`url=${supportUrl}`;
+  const warningMessages = directives
+    .map(formatUnusedDirectiveMessage)
+    .join('\n');
+
+  return `${warningTitle}
+${warningMessages}
+Your content might render in an unexpected way. Visit ${customSupportUrl} to find out why and how to fix it.`;
+}
+
+function logUnusedDirectivesWarning({
+  directives,
+  filePath,
+}: {
+  directives: Directives[];
+  filePath: string;
+}) {
+  if (directives.length > 0) {
+    const message = formatUnusedDirectivesMessage({
+      directives,
+      filePath,
+    });
+    logger.warn(message);
+  }
+}
+
+function isTextDirective(directive: Directives): directive is TextDirective {
+  return directive.type === 'textDirective';
+}
+
+// A simple text directive is one without any label/props
+function isSimpleTextDirective(
+  directive: Directives,
+): directive is TextDirective {
+  if (isTextDirective(directive)) {
+    // Attributes in MDAST = Directive props
+    const hasAttributes =
+      directive.attributes && Object.keys(directive.attributes).length > 0;
+    // Children in MDAST = Directive label
+    const hasChildren = directive.children.length > 0;
+    return !hasAttributes && !hasChildren;
+  }
+  return false;
+}
+
+function transformSimpleTextDirectiveToString(textDirective: Directives) {
+  transformNode(textDirective, {
+    type: 'text',
+    value: `:${textDirective.name}`, // We ignore label/props on purpose here
+  });
+}
+
+function isUnusedDirective(directive: Directives) {
+  // If directive data is set (notably hName/hProperties set by admonitions)
+  // this usually means the directive has been handled by another plugin
+  return !directive.data;
+}
+
+const plugin: Plugin = function plugin(this: Processor): Transformer {
+  return async (tree, file) => {
+    const {visit} = await import('unist-util-visit');
+
+    const unusedDirectives: Directives[] = [];
+
+    visit<Parent, DirectiveType[]>(
+      tree,
+      directiveTypes,
+      (directive: Directives) => {
+        // If directive data is set (hName/hProperties set by admonitions)
+        // this usually means the directive has been handled by another plugin
+        if (isUnusedDirective(directive)) {
+          if (isSimpleTextDirective(directive)) {
+            transformSimpleTextDirectiveToString(directive);
+          } else {
+            unusedDirectives.push(directive);
+          }
+        }
+      },
+    );
+
+    // We only enable these warnings for the client compiler
+    // This avoids emitting duplicate warnings in prod mode
+    // Note: the client compiler is used in both dev/prod modes
+    if (file.data.compilerName === 'client') {
+      logUnusedDirectivesWarning({
+        directives: unusedDirectives,
+        filePath: file.path,
+      });
+    }
+  };
+};
+
+export default plugin;

package/src/remark/utils/index.ts

@@ -6,7 +6,7 @@
  */
 
 import escapeHtml from 'escape-html';
-import type {Parent} from 'unist';
+import type {Parent, Node} from 'unist';
 import type {PhrasingContent, Heading} from 'mdast';
 import type {
   MdxJsxAttribute,
@@ -15,6 +15,27 @@ import type {
   // @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
 } from 'mdast-util-mdx';
 
+/**
+ * Util to transform one node type to another node type
+ * The input node is mutated in place
+ * @param node the node to mutate
+ * @param newNode what the original node should become become
+ */
+export function transformNode<NewNode extends Node>(
+  node: Node,
+  newNode: NewNode,
+): NewNode {
+  Object.keys(node).forEach((key) => {
+    // @ts-expect-error: unsafe but ok
+    delete node[key];
+  });
+  Object.keys(newNode).forEach((key) => {
+    // @ts-expect-error: unsafe but ok
+    node[key] = newNode[key];
+  });
+  return node as NewNode;
+}
+
 export function stringifyContent(
   node: Parent,
   toString: (param: unknown) => string, // TODO weird but works
@@ -53,7 +74,7 @@ function mdxJsxTextElementToHtml(
 }
 
 export function toValue(
-  node: PhrasingContent | Heading,
+  node: PhrasingContent | Heading | MdxJsxTextElement,
   toString: (param: unknown) => string, // TODO weird but works
 ): string {
   switch (node.type) {