@redocly/theme 0.69.0 → 0.70.0-next.1

package/src/markdoc/tags/code-walkthrough.ts

@@ -1,4 +1,5 @@
-import markdoc, { Node, RenderableTreeNode, ValidationError } from '@markdoc/markdoc';
+import type { Node, RenderableTreeNode, ValidationError } from '@markdoc/markdoc';
+import markdoc from '@markdoc/markdoc';
 
 import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
 import type {

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

@@ -3,27 +3,7 @@ import markdoc 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;
-}
+import { EXAMPLE_CONTENT_ATTRIBUTE, MARKDOC_EXAMPLE_TAG } from '@redocly/theme/core/constants';
 
 // This custom tag prevents evaluating any children markdoc tags (no children) so we can
 // have markdoc examples in code fences
@@ -39,33 +19,70 @@ export const markdocExample: MarkdocSchemaWrapper = {
     children: ['fence'],
     transform(node: Node, config: Config) {
       const attributes = node.transformAttributes(config);
-      const { content } = node.children[0]?.attributes || {};
+      const fenceNode = node.children[0];
+      const { content } = fenceNode?.attributes || {};
       if (!content) return null;
 
       const language = 'markdoc';
 
-      const annotations = node.children[0].annotations;
+      const annotations = fenceNode.annotations;
       let title = null;
       if (annotations.length > 0) {
         const fenceWithTitle = annotations.find((annotation) => annotation.name === 'title');
         title = fenceWithTitle?.value;
       }
 
-      const demoContent = node.children[0].transformChildren(config);
-      const parsedDemoContent = parseInlineMarkdown(demoContent, config);
-
       return new markdoc.Tag(
         'MarkdocExample',
         {
           ...attributes,
           title,
           language,
-          demoContent: parsedDemoContent,
+          demoContent: transformDemoContent(fenceNode, content, config),
           rawContent: content,
         },
         [],
       );
     },
   },
-  tagName: 'markdoc-example',
+  tagName: MARKDOC_EXAMPLE_TAG,
 };
+
+// Walk through AST and look for raw markdown to parse
+function parseRawMarkdown(
+  ast: RenderableTreeNode | RenderableTreeNode[],
+  config: Config,
+): RenderableTreeNode | RenderableTreeNode[] {
+  if (Array.isArray(ast)) {
+    return ast.flatMap((child) => parseRawMarkdown(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 = parseRawMarkdown(ast.children, config);
+    return { ...ast, children } as RenderableTreeNode;
+  }
+
+  return ast;
+}
+
+function toRenderableArray(node: RenderableTreeNode | RenderableTreeNode[]): RenderableTreeNode[] {
+  return Array.isArray(node) ? node : [node];
+}
+
+function transformDemoContent(fenceNode: Node, content: string, config: Config) {
+  const parsedBody = fenceNode.attributes[EXAMPLE_CONTENT_ATTRIBUTE] as Node | undefined;
+  if (parsedBody) {
+    return toRenderableArray(markdoc.transform(parsedBody.children, config));
+  }
+
+  if (!fenceNode.children.length) {
+    return toRenderableArray(markdoc.transform(markdoc.parse(content).children, config));
+  }
+
+  return toRenderableArray(parseRawMarkdown(fenceNode.transformChildren(config), config));
+}