@redocly/theme 0.69.0 → 0.70.0-next.0

package/src/layouts/OIDCForbidden.tsx

@@ -14,7 +14,7 @@ export function OIDCForbidden(): JSX.Element {
 
   // use whatever you want here
   const URL_REGEX =
-    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
   const renderText = (text: string) =>
     text.split(' ').map((part: string) =>

package/src/markdoc/components/CodeWalkthrough/CodePanelPreview.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -9,10 +9,8 @@ import {
 } from '@redocly/theme/core/contexts';
 import { CodePanel } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodePanel';
 import { useCodeWalkthrough } from '@redocly/theme/core/hooks';
-import {
-  CodeFilters,
-  GetFilterState,
-} from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
+import type { GetFilterState } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
+import { CodeFilters } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
 
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 

package/src/markdoc/components/Diagram/Diagram.tsx

@@ -1,11 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, type JSX } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
-
 import { concatClassNames } from '@redocly/theme/core/utils';
-import { useColorSwitcher } from '@redocly/theme/core/hooks';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
 import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
 
 type DiagramProps = {

package/src/markdoc/components/Tabs/Tab.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import type { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { TabButtonLink, TabItem } from '@redocly/theme/markdoc/components/Tabs/TabList';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 

package/src/markdoc/components/Tabs/TabList.tsx

@@ -5,7 +5,7 @@ import type { JSX } from 'react';
 import type { TabItemProps } from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 
 import { Tab } from '@redocly/theme/markdoc/components/Tabs/Tab';
-import { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import type { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';

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));
+}