@redocly/theme 0.64.0-next.3 → 0.64.0-next.4

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

@@ -0,0 +1,173 @@
+import React, { useState } 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 { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
+
+type DiagramProps = {
+  id?: string;
+  diagramHtml: string;
+  diagramHtmlDark?: string;
+  diagramError?: string;
+  diagramType: string;
+  align?: 'left' | 'center' | 'right';
+  width?: string;
+  'data-source'?: string;
+  'data-hash'?: string;
+  className?: string;
+};
+
+export function Diagram({
+  id,
+  diagramHtml,
+  diagramHtmlDark,
+  diagramError,
+  diagramType,
+  align,
+  width,
+  'data-source': dataSource,
+  'data-hash': dataHash,
+  className,
+}: DiagramProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { activeColorMode } = useColorSwitcher();
+  const [isOpen, setIsOpen] = useState(false);
+  const activeDiagramHtml =
+    activeColorMode === 'dark' ? diagramHtmlDark || diagramHtml : diagramHtml;
+
+  const open = () => setIsOpen(true);
+  const close = () => setIsOpen(false);
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      open();
+    }
+  };
+
+  if (diagramError) {
+    return (
+      <ErrorWrapper id={id} className={concatClassNames('diagram-error', className)}>
+        {diagramError}
+      </ErrorWrapper>
+    );
+  }
+
+  return (
+    <>
+      <Wrapper
+        id={id}
+        $width={width}
+        className={concatClassNames(`diagram-wrapper diagram-${diagramType}`, className)}
+        data-component-name="Markdoc/Diagram/Diagram"
+        data-diagram-type={diagramType}
+        data-source={dataSource}
+        data-hash={dataHash}
+        onClick={open}
+        onKeyDown={handleKeyDown}
+        role="button"
+        tabIndex={0}
+        aria-label={translate('diagram.openFullscreen', 'Click to open diagram in fullscreen')}
+      >
+        <DiagramVariant
+          $align={align}
+          $colorMode="light"
+          className={`diagram-variant diagram-variant-light diagram-${diagramType}`}
+          dangerouslySetInnerHTML={{ __html: diagramHtml }}
+        />
+        {diagramHtmlDark ? (
+          <DiagramVariant
+            $align={align}
+            $colorMode="dark"
+            className={`diagram-variant diagram-variant-dark diagram-${diagramType}`}
+            dangerouslySetInnerHTML={{ __html: diagramHtmlDark }}
+          />
+        ) : null}
+      </Wrapper>
+      <SvgViewer
+        isOpen={isOpen}
+        onClose={close}
+        labels={{
+          zoomIn: translate('diagram.zoomIn', 'Zoom in'),
+          zoomOut: translate('diagram.zoomOut', 'Zoom out'),
+          fitToView: translate('diagram.reset', 'Fit to view'),
+          close: translate('diagram.close', 'Close'),
+          dialogLabel: translate('diagram.viewer', 'Diagram viewer'),
+        }}
+      >
+        <ViewerContent
+          className={`diagram-viewer-content diagram-${diagramType}`}
+          dangerouslySetInnerHTML={{ __html: activeDiagramHtml }}
+        />
+      </SvgViewer>
+    </>
+  );
+}
+
+const Wrapper = styled.div<{ $width?: string }>`
+  background-color: var(--diagram-bg-color);
+  border-radius: var(--diagram-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
+
+  svg {
+    max-width: 100%;
+    display: block;
+    ${({ $width }) => ($width ? `width: ${$width} !important;     height: auto !important;` : '')}
+  }
+`;
+
+const DiagramVariant = styled.div<{ $colorMode: 'light' | 'dark'; $align?: DiagramProps['align'] }>`
+  display: flex;
+  justify-content: ${({ $align }) => {
+    switch ($align) {
+      case 'center':
+        return 'center';
+      case 'right':
+        return 'flex-end';
+      default:
+        return 'flex-start';
+    }
+  }};
+  width: 100%;
+  ${({ $colorMode }) =>
+    $colorMode === 'dark'
+      ? `
+    html:not(.dark) && {
+      display: none;
+    }
+  `
+      : `
+    html.dark && {
+      display: none;
+    }
+  `}
+`;
+
+const ErrorWrapper = styled.div`
+  border: 1px solid var(--color-error-border);
+  border-radius: var(--diagram-border-radius);
+  background: var(--color-error-bg);
+  color: var(--color-error-text);
+  font-size: var(--font-size-sm);
+  padding: var(--spacing-sm);
+  white-space: pre-wrap;
+  word-break: break-word;
+`;
+
+const ViewerContent = styled.div`
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;

package/src/markdoc/components/Diagram/variables.ts

@@ -0,0 +1,12 @@
+import { css } from "styled-components";
+
+export const diagram = css`
+  /**
+  * @tokens Diagram
+  */
+
+  --diagram-bg-color: var(--bg-color-raised); // @presenter Color
+  --diagram-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+`;

package/src/markdoc/components/MarkdownLink/MarkdownLink.tsx

@@ -0,0 +1,21 @@
+import React, { useCallback, useContext } from 'react';
+
+import type { ComponentProps, ReactElement } from 'react';
+
+import { MarkdownLinkContext } from '@redocly/theme/core/contexts';
+import { Link } from '@redocly/theme/components/Link/Link';
+
+type MarkdownLinkProps = Omit<ComponentProps<typeof Link>, 'to' | 'onClick'> & {
+  href: string;
+};
+
+export function MarkdownLink({ href, ...props }: MarkdownLinkProps): ReactElement {
+  const markdownLinkContext = useContext(MarkdownLinkContext);
+  const onClick = useCallback(() => {
+    markdownLinkContext?.onMarkdownLinkClick?.();
+  }, [markdownLinkContext]);
+
+  const linkProps = { ...props, languageInsensitive: true, onClick };
+
+  return <Link to={href} {...linkProps} />;
+}

package/src/markdoc/components/default.ts

@@ -2,7 +2,7 @@ export * from '@redocly/theme/markdoc/components/Admonition/Admonition';
 export * from '@redocly/theme/markdoc/components/InlineSvg/InlineSvg';
 export * from '@redocly/theme/markdoc/components/MarkdocExample/MarkdocExample';
 export * from '@redocly/theme/markdoc/components/Heading/Heading';
-export * from '@redocly/theme/markdoc/components/Mermaid/Mermaid';
+export * from '@redocly/theme/markdoc/components/Diagram/Diagram';
 export * from '@redocly/theme/markdoc/components/HtmlBlock/HtmlBlock';
 export * from '@redocly/theme/markdoc/components/Tabs/Tab';
 export * from '@redocly/theme/markdoc/components/Tabs/TabList';
@@ -22,3 +22,4 @@ export * from '@redocly/theme/markdoc/components/CodeGroup/CodeGroup';
 export * from '@redocly/theme/markdoc/components/Icon/Icon';
 export * from '@redocly/theme/markdoc/components/ConnectMCP/ConnectMCP';
 export * from '@redocly/theme/markdoc/components/LoginButton/LoginButton';
+export * from '@redocly/theme/markdoc/components/MarkdownLink/MarkdownLink';

package/src/markdoc/default.ts

@@ -1,5 +1,6 @@
 /* Attributes */
 export * from '@redocly/theme/markdoc/attributes/code-snippet-file';
+export * from '@redocly/theme/markdoc/attributes/diagram-file';
 export * from '@redocly/theme/markdoc/attributes/img-src';
 export * from '@redocly/theme/markdoc/attributes/img-srcset';
 export * from '@redocly/theme/markdoc/attributes/relative-path';
@@ -27,6 +28,7 @@ import { codeGroup } from '@redocly/theme/markdoc/tags/code-group';
 import { icon } from '@redocly/theme/markdoc/tags/icon';
 import { connectMcp } from '@redocly/theme/markdoc/tags/connect-mcp';
 import { loginButton } from '@redocly/theme/markdoc/tags/login-button';
+import { diagram } from '@redocly/theme/markdoc/tags/diagram';
 
 export const tags = {
   [admonition.tagName]: admonition.schema,
@@ -49,4 +51,5 @@ export const tags = {
   [icon.tagName]: icon.schema,
   [connectMcp.tagName]: connectMcp.schema,
   [loginButton.tagName]: loginButton.schema,
+  [diagram.tagName]: diagram.schema,
 };

package/src/markdoc/tags/diagram.ts

@@ -0,0 +1,73 @@
+import markdoc from '@markdoc/markdoc';
+
+import type { MarkdocSchemaWrapper } from '@redocly/theme/markdoc/tags/types';
+
+import { DiagramFile } from '@redocly/theme/markdoc/attributes/diagram-file';
+
+const DIAGRAM_TYPES = ['mermaid', 'plantuml', 'excalidraw'];
+const DIAGRAM_ALIGNMENTS = ['left', 'center', 'right'];
+
+export const diagram: MarkdocSchemaWrapper = {
+  schema: {
+    attributes: {
+      file: { type: DiagramFile, required: true },
+      type: {
+        type: String,
+        required: true,
+        matches: DIAGRAM_TYPES,
+      },
+      align: {
+        type: String,
+        matches: DIAGRAM_ALIGNMENTS,
+      },
+      width: {
+        type: String,
+      },
+      rawContent: { type: String, render: false }, // internal — populated by resolver
+    },
+    render: 'Diagram',
+    selfClosing: true,
+    transform: (node, config) => {
+      const attributes = node.transformAttributes(config);
+      const rawContent = node.attributes.rawContent;
+      const diagramType = node.attributes.type;
+
+      if (typeof rawContent === 'string') {
+        return new markdoc.Tag(
+          'Diagram',
+          {
+            ...attributes,
+            diagramType,
+            diagramSource: rawContent,
+          },
+          [],
+        );
+      }
+
+      return new markdoc.Tag(node.tag, attributes, []);
+    },
+    validate(node) {
+      const errors = [];
+      const type = node.attributes.type;
+      if (type && !DIAGRAM_TYPES.includes(type)) {
+        errors.push({
+          id: 'invalid-diagram-type',
+          level: 'error' as const,
+          message: `Invalid diagram type "${type}". Must be one of: ${DIAGRAM_TYPES.join(', ')}`,
+        });
+      }
+      const align = node.attributes.align;
+      if (align && !DIAGRAM_ALIGNMENTS.includes(align)) {
+        errors.push({
+          id: 'invalid-diagram-align',
+          level: 'error' as const,
+          message: `Invalid diagram align "${align}". Must be one of: ${DIAGRAM_ALIGNMENTS.join(
+            ', ',
+          )}`,
+        });
+      }
+      return errors;
+    },
+  },
+  tagName: 'diagram',
+};

package/lib/components/SvgViewer/variables.dark.d.ts

@@ -1 +0,0 @@
-export declare const svgViewerDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/components/SvgViewer/variables.dark.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.svgViewerDarkMode = void 0;
-const styled_components_1 = require("styled-components");
-exports.svgViewerDarkMode = (0, styled_components_1.css) `
-  --svg-viewer-bg-color: var(--color-warm-grey-9);
-`;
-//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/Mermaid/Mermaid.d.ts

@@ -1,9 +0,0 @@
-import type { JSX } from 'react';
-type MermaidProps = {
-    diagramHtml: string;
-    'data-source'?: string;
-    'data-hash'?: string;
-    className?: string;
-};
-export declare function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }: MermaidProps): JSX.Element;
-export {};

package/lib/markdoc/components/Mermaid/Mermaid.js

@@ -1,94 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Mermaid = Mermaid;
-const react_1 = __importStar(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const utils_1 = require("../../../core/utils");
-const hooks_1 = require("../../../core/hooks");
-const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
-function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
-    const { useTranslate } = (0, hooks_1.useThemeHooks)();
-    const { translate } = useTranslate();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const open = () => setIsOpen(true);
-    const close = () => setIsOpen(false);
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/Mermaid/Mermaid", "data-source": dataSource, "data-hash": dataHash, onClick: open, onKeyDown: (e) => e.key === 'Enter' || (e.key === ' ' && open()), role: "button", tabIndex: 0, "aria-label": translate('mermaid.openFullscreen', 'Click to open diagram in fullscreen') }),
-        react_1.default.createElement(SvgViewer_1.SvgViewer, { isOpen: isOpen, onClose: close, labels: {
-                zoomIn: translate('mermaid.zoomIn', 'Zoom in'),
-                zoomOut: translate('mermaid.zoomOut', 'Zoom out'),
-                fitToView: translate('mermaid.reset', 'Fit to view'),
-                close: translate('mermaid.close', 'Close'),
-                dialogLabel: translate('mermaid.viewer', 'Mermaid diagram viewer'),
-            } },
-            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
-}
-const Wrapper = styled_components_1.default.div `
-  background-color: var(--mermaid-bg-color);
-  border-radius: var(--mermaid-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  * {
-    font-family: var(--mermaid-font-family) !important;
-  }
-
-  .mermaid > svg {
-    font-size: var(--font-size-base) !important;
-    max-width: 100%;
-  }
-`;
-const ViewerContent = styled_components_1.default.div `
-  * {
-    font-family: var(--mermaid-font-family) !important;
-  }
-
-  .mermaid > svg {
-    font-size: var(--font-size-base) !important;
-    display: block;
-    max-width: none !important;
-  }
-`;
-//# sourceMappingURL=Mermaid.js.map

package/lib/markdoc/components/Mermaid/variables.d.ts

@@ -1 +0,0 @@
-export declare const mermaid: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/Mermaid/variables.dark.d.ts

@@ -1 +0,0 @@
-export declare const mermaidDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/Mermaid/variables.dark.js

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mermaidDarkMode = void 0;
-const styled_components_1 = require("styled-components");
-exports.mermaidDarkMode = (0, styled_components_1.css) `
-  --mermaid-bg-color: var(--color-warm-grey-8); // @presenter Color
-`;
-//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/Mermaid/variables.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.mermaid = void 0;
-const styled_components_1 = require("styled-components");
-exports.mermaid = (0, styled_components_1.css) `
-  /**
-  * @tokens Mermaid
-  */
-
-  --mermaid-bg-color: var(--bg-color-raised); // @presenter Color
-  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --mermaid-font-family: var(--font-family-base); // @presenter FontFamily
-
-  // @tokens End
-`;
-//# sourceMappingURL=variables.js.map

package/src/components/SvgViewer/variables.dark.ts

@@ -1,5 +0,0 @@
-import { css } from 'styled-components';
-
-export const svgViewerDarkMode = css`
-  --svg-viewer-bg-color: var(--color-warm-grey-9);
-`;

package/src/markdoc/components/Mermaid/Mermaid.tsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react';
-import styled from 'styled-components';
-
-import type { JSX } from 'react';
-
-import { concatClassNames } from '@redocly/theme/core/utils';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
-
-type MermaidProps = {
-  diagramHtml: string;
-  'data-source'?: string;
-  'data-hash'?: string;
-  className?: string;
-};
-
-export function Mermaid({
-  diagramHtml,
-  'data-source': dataSource,
-  'data-hash': dataHash,
-  className,
-}: MermaidProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
-  const { translate } = useTranslate();
-  const [isOpen, setIsOpen] = useState(false);
-
-  const open = () => setIsOpen(true);
-  const close = () => setIsOpen(false);
-
-  return (
-    <>
-      <Wrapper
-        className={concatClassNames('mermaid-wrapper', className)}
-        dangerouslySetInnerHTML={{ __html: diagramHtml }}
-        data-component-name="Markdoc/Mermaid/Mermaid"
-        data-source={dataSource}
-        data-hash={dataHash}
-        onClick={open}
-        onKeyDown={(e) => e.key === 'Enter' || (e.key === ' ' && open())}
-        role="button"
-        tabIndex={0}
-        aria-label={translate('mermaid.openFullscreen', 'Click to open diagram in fullscreen')}
-      />
-      <SvgViewer
-        isOpen={isOpen}
-        onClose={close}
-        labels={{
-          zoomIn: translate('mermaid.zoomIn', 'Zoom in'),
-          zoomOut: translate('mermaid.zoomOut', 'Zoom out'),
-          fitToView: translate('mermaid.reset', 'Fit to view'),
-          close: translate('mermaid.close', 'Close'),
-          dialogLabel: translate('mermaid.viewer', 'Mermaid diagram viewer'),
-        }}
-      >
-        <ViewerContent dangerouslySetInnerHTML={{ __html: diagramHtml }} />
-      </SvgViewer>
-    </>
-  );
-}
-
-const Wrapper = styled.div`
-  background-color: var(--mermaid-bg-color);
-  border-radius: var(--mermaid-border-radius);
-  cursor: pointer;
-  transition: box-shadow 0.2s ease;
-
-  &:hover,
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--border-color-input-focus);
-  }
-
-  * {
-    font-family: var(--mermaid-font-family) !important;
-  }
-
-  .mermaid > svg {
-    font-size: var(--font-size-base) !important;
-    max-width: 100%;
-  }
-`;
-
-const ViewerContent = styled.div`
-  * {
-    font-family: var(--mermaid-font-family) !important;
-  }
-
-  .mermaid > svg {
-    font-size: var(--font-size-base) !important;
-    display: block;
-    max-width: none !important;
-  }
-`;

package/src/markdoc/components/Mermaid/variables.dark.ts

@@ -1,5 +0,0 @@
-import { css } from "styled-components";
-
-export const mermaidDarkMode = css`
-  --mermaid-bg-color: var(--color-warm-grey-8); // @presenter Color
-`;

package/src/markdoc/components/Mermaid/variables.ts

@@ -1,13 +0,0 @@
-import { css } from "styled-components";
-
-export const mermaid = css`
-  /**
-  * @tokens Mermaid
-  */
-
-  --mermaid-bg-color: var(--bg-color-raised); // @presenter Color
-  --mermaid-border-radius: var(--border-radius-lg); // @presenter BorderRadius
-  --mermaid-font-family: var(--font-family-base); // @presenter FontFamily
-
-  // @tokens End
-`;