@redocly/theme 0.46.3 → 0.46.5

package/src/markdoc/tags/markdoc-example.ts

@@ -1,8 +1,30 @@
 import markdoc from '@markdoc/markdoc';
 
-import type { Config, Node } from '@markdoc/markdoc';
+import type { Config, Node, RenderableTreeNode } from '@markdoc/markdoc';
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 
+// Walk through AST and look for raw markdown to parse
+function parseInlineMarkdown(
+  ast: RenderableTreeNode | RenderableTreeNode[],
+  config: Config,
+): RenderableTreeNode | RenderableTreeNode[] {
+  if (Array.isArray(ast)) {
+    return ast.flatMap((child) => parseInlineMarkdown(child, config));
+  }
+
+  if (typeof ast === 'string') {
+    const parsed = markdoc.parse(ast);
+    return markdoc.transform(parsed, config);
+  }
+
+  if (ast && typeof ast === 'object' && ast.$$mdtype === 'Tag') {
+    const children = parseInlineMarkdown(ast.children, config);
+    return { ...ast, children } as RenderableTreeNode;
+  }
+
+  return ast;
+}
+
 // This custom tag prevents evaluating any children markdoc tags (no children) so we can
 // have markdoc examples in code fences
 // approach copied from: https://github.com/markdoc/docs/blob/main/markdoc/tags/markdoc-example.markdoc.js
@@ -29,13 +51,16 @@ export const markdocExample: MarkdocSchemaWrapper = {
         title = fenceWithTitle?.value;
       }
 
+      const demoContent = node.children[0].transformChildren(config);
+      const parsedDemoContent = parseInlineMarkdown(demoContent, config);
+
       return new markdoc.Tag(
         'MarkdocExample',
         {
           ...attributes,
           title,
           language,
-          demoContent: node.children[0].transformChildren(config),
+          demoContent: parsedDemoContent,
           rawContent: content,
         },
         [],