@ai-react-markdown/mantine 2.10.1 → 2.12.0

package/README.md

@@ -69,7 +69,7 @@ yarn add @ai-react-markdown/mantine @ai-react-markdown/core
 {
   "react": ">=19",
   "react-dom": ">=19",
-  "@ai-react-markdown/core": "^2.10.1",
+  "@ai-react-markdown/core": "^2.12.0",
   "@mantine/core": "^9.0.0",
   "@mantine/code-highlight": "^9.0.0",
   "highlight.js": "^11.11.2"
@@ -150,10 +150,12 @@ The Mantine package adds one behavior group on top of core's flat props: the `co
 
 ### `codeBlock` (`Partial<MantineCodeBlockOptions>`)
 
-| Field                       | Type      | Default | Description                                                                                                                 |
-| --------------------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------------- |
-| `defaultExpanded`           | `boolean` | `true`  | Whether code blocks start in their expanded state. When `false`, long blocks are collapsed with an expand button.           |
-| `autoDetectUnknownLanguage` | `boolean` | `false` | When `true`, uses `highlight.js`'s `highlightAuto` to determine the language of code blocks lacking an explicit annotation. |
+| Field                       | Type      | Default | Description                                                                                                                          |
+| --------------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| `defaultExpanded`           | `boolean` | `true`  | Whether code blocks start in their expanded state. When `false`, long blocks are collapsed with an expand button.                    |
+| `autoDetectUnknownLanguage` | `boolean` | `false` | When `true`, uses `highlight.js`'s `highlightAuto` to determine the language of code blocks lacking an explicit annotation.          |
+| `formatJson`                | `boolean` | `true`  | Format JSON while preserving number tokens, key order and duplicate keys. Set `false` to display source text.                        |
+| `expandNestedJson`          | `boolean` | `true`  | When JSON formatting is enabled, expand string values containing JSON objects or arrays. Set `false` for whitespace formatting only. |
 
 ### Example: Collapsed Code Blocks
 
@@ -237,13 +239,15 @@ Activated by importing `@ai-react-markdown/mantine/styles.css` in your app entry
 
 The Mantine package installs a default `<pre>` renderer (`MantineAIMPreCode`) that powers all code-block features. Behavior by code-block flavor:
 
-| Code-block flavor                          | Rendered as                 | Notes                                                                                                                                                                                                                                                                              |
-| ------------------------------------------ | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| Annotated, known language (e.g. ` ```ts `) | `<CodeHighlightTabs>`       | Tab label = language name (lower-cased)                                                                                                                                                                                                                                            |
-| Annotated, unknown language identifier     | `<CodeHighlightTabs>`       | Tab label = the identifier (lower-cased); Mantine's highlight adapter degrades an unknown language to plaintext                                                                                                                                                                    |
-| No language annotation                     | `<CodeHighlight>` plaintext | Label = `"unknown"`. With `codeBlock.autoDetectUnknownLanguage: true`, `hljs.highlightAuto` guesses early, re-checks as the block grows, and settles at end of stream — label/highlighting upgrade in place                                                                        |
-| ` ```mermaid ` (any case)                  | Interactive Mermaid diagram | See [Mermaid Diagrams](#mermaid-diagrams); the language match is case-insensitive                                                                                                                                                                                                  |
-| ` ```json ` (any case)                     | Pretty-printed JSON         | As soon as the block looks complete (ends in `}`/`]` with balanced brackets outside strings), parsed, string values holding a nested JSON object/array expanded (primitive-looking strings such as `"true"` stay strings), then re-serialized with 2-space indent before rendering |
+| Code-block flavor                          | Rendered as                 | Notes                                                                                                                                                                                                                                                                                                                                                    |
+| ------------------------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Annotated, known language (e.g. ` ```ts `) | `<CodeHighlightTabs>`       | Tab label = language name (lower-cased)                                                                                                                                                                                                                                                                                                                  |
+| Annotated, unknown language identifier     | `<CodeHighlightTabs>`       | Tab label = the identifier (lower-cased); Mantine's highlight adapter degrades an unknown language to plaintext                                                                                                                                                                                                                                          |
+| No language annotation                     | `<CodeHighlight>` plaintext | Label = `"unknown"`. With `codeBlock.autoDetectUnknownLanguage: true`, `hljs.highlightAuto` guesses early, re-checks as the block grows, and settles at end of stream — label/highlighting upgrade in place                                                                                                                                              |
+| ` ```mermaid ` (any case)                  | Interactive Mermaid diagram | See [Mermaid Diagrams](#mermaid-diagrams); the language match is case-insensitive                                                                                                                                                                                                                                                                        |
+| ` ```json ` (any case)                     | Pretty-printed JSON         | As soon as the block looks complete (ends in `}`/`]` with balanced brackets outside strings), parsed, string values holding a nested JSON object/array expanded (primitive-looking strings such as `"true"` stay strings), then formatted with 2-space indent while retaining exact numeric tokens; both formatting and nested expansion can be disabled |
+
+The copy control copies the original code text, including its trailing newline, independently of JSON display formatting. Raw HTML `<pre>` structures with nested elements, sibling text, or additional attributes retain their original rendering instead of entering the code highlighter.
 
 All non-special blocks render with `withBorder` and `withExpandButton`, collapsing to `maxCollapsedHeight="320px"` until expanded.
 

package/dist/index.cjs

@@ -43,8 +43,8 @@ module.exports = __toCommonJS(index_exports);
 
 // src/MantineAIMarkdown.tsx
 var import_react5 = require("react");
-var import_core6 = __toESM(require("@ai-react-markdown/core"), 1);
-var import_core7 = require("@ai-react-markdown/core");
+var import_core7 = __toESM(require("@ai-react-markdown/core"), 1);
+var import_core8 = require("@ai-react-markdown/core");
 
 // src/components/typography/MantineTypography.tsx
 var import_react = require("react");
@@ -73,7 +73,9 @@ var import_core2 = require("@ai-react-markdown/core");
 // src/defs.tsx
 var defaultMantineCodeBlockOptions = Object.freeze({
   defaultExpanded: true,
-  autoDetectUnknownLanguage: false
+  autoDetectUnknownLanguage: false,
+  formatJson: true,
+  expandNestedJson: true
 });
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -90,6 +92,43 @@ function useMantineCodeBlockOptions() {
   }, [group]);
 }
 
+// src/components/customized/MermaidCode/renderQueue.ts
+function createRenderQueue() {
+  const pending = /* @__PURE__ */ new Map();
+  let running = false;
+  async function drain() {
+    if (running) return;
+    running = true;
+    try {
+      while (pending.size) {
+        const [owner, job] = pending.entries().next().value;
+        pending.delete(owner);
+        try {
+          await job.run();
+          job.resolve();
+        } catch (error) {
+          job.reject(error);
+        }
+      }
+    } finally {
+      running = false;
+    }
+  }
+  return {
+    enqueue(owner, run) {
+      pending.get(owner)?.resolve();
+      const promise = new Promise((resolve, reject) => pending.set(owner, { run, resolve, reject }));
+      void drain();
+      return promise;
+    },
+    cancel(owner) {
+      pending.get(owner)?.resolve();
+      pending.delete(owner);
+    }
+  };
+}
+var mermaidRenderQueue = createRenderQueue();
+
 // src/components/customized/MermaidCode/index.tsx
 var import_react3 = require("react");
 var import_code_highlight = require("@mantine/code-highlight");
@@ -211,14 +250,7 @@ var MantineAIMMermaidCode = (0, import_react3.memo)((props) => {
         if (!ref.current || cancelled || renderVersion !== renderVersionRef.current) {
           return;
         }
-        let rendered = await mermaid.render(generateMermaidUUID(), props.code);
-        if (initializedTheme !== (isDark ? "dark" : "light")) {
-          if (!ref.current || cancelled || renderVersion !== renderVersionRef.current) {
-            return;
-          }
-          ensureMermaidInitialized(mermaid, isDark);
-          rendered = await mermaid.render(generateMermaidUUID(), props.code);
-        }
+        const rendered = await mermaid.render(generateMermaidUUID(), props.code);
         const { svg, bindFunctions, diagramType } = rendered;
         if (!ref.current || cancelled || renderVersion !== renderVersionRef.current) {
           return;
@@ -246,9 +278,11 @@ var MantineAIMMermaidCode = (0, import_react3.memo)((props) => {
         applyView({ kind: "error" });
       }
     };
-    void renderMermaid();
+    const owner = renderVersionRef;
+    void mermaidRenderQueue.enqueue(owner, renderMermaid);
     return () => {
       cancelled = true;
+      mermaidRenderQueue.cancel(owner);
       if (retryTimer !== void 0) clearTimeout(retryTimer);
     };
   }, [props.code, isDark, showOriginalCode, streaming, loadAttempt]);
@@ -398,6 +432,95 @@ var MantineAIMMermaidCode = (0, import_react3.memo)((props) => {
 MantineAIMMermaidCode.displayName = "MantineAIMMermaidCode";
 var MermaidCode_default = MantineAIMMermaidCode;
 
+// src/components/customized/PreCode.tsx
+var import_core6 = require("@mantine/core");
+
+// src/components/customized/formatJson.ts
+function prettyPrintJson(text, expandNested = true) {
+  try {
+    return format(text, expandNested, 0);
+  } catch {
+    return text;
+  }
+}
+function format(text, expandNested, baseIndent) {
+  JSON.parse(text);
+  const tokens = text.match(/"(?:\\[\s\S]|[^"\\])*"|-?(?:0|[1-9]\d*)(?:\.\d+)?(?:[eE][+-]?\d+)?|true|false|null|[{}[\],:]/g) ?? [];
+  const out = [];
+  let indent = baseIndent;
+  const newline = () => out.push("\n", "  ".repeat(indent));
+  for (let i = 0; i < tokens.length; i++) {
+    const token = tokens[i];
+    if (token === "{" || token === "[") {
+      out.push(token);
+      if (tokens[i + 1] !== (token === "{" ? "}" : "]")) {
+        indent++;
+        newline();
+      }
+    } else if (token === "}" || token === "]") {
+      if (tokens[i - 1] !== (token === "}" ? "{" : "[")) {
+        indent--;
+        newline();
+      }
+      out.push(token);
+    } else if (token === ",") {
+      out.push(",");
+      newline();
+    } else if (token === ":") {
+      out.push(": ");
+    } else if (token.startsWith('"')) {
+      const value = JSON.parse(token);
+      const trimmed = value.trim();
+      if (expandNested && tokens[i + 1] !== ":" && /^[{[]/.test(trimmed) && indent < 100) {
+        try {
+          out.push(format(trimmed, true, indent));
+          continue;
+        } catch {
+        }
+      }
+      out.push(JSON.stringify(value));
+    } else {
+      out.push(token);
+    }
+  }
+  return out.join("");
+}
+
+// src/components/customized/jsonCompleteness.ts
+function createJsonCompletenessScanner() {
+  let previous = "";
+  let depth = 0;
+  let quoted = false;
+  let escaped = false;
+  let invalid = false;
+  let last = "";
+  return (text) => {
+    let from = previous.length;
+    if (!text.startsWith(previous)) {
+      from = 0;
+      depth = 0;
+      quoted = escaped = invalid = false;
+      last = "";
+    }
+    previous = text;
+    for (let i = from; i < text.length; i++) {
+      const c = text[i];
+      if (!/\s/.test(c)) last = c;
+      if (quoted) {
+        if (escaped) escaped = false;
+        else if (c === "\\") escaped = true;
+        else if (c === '"') quoted = false;
+      } else if (c === '"') quoted = true;
+      else if (c === "{" || c === "[") depth++;
+      else if (c === "}" || c === "]") {
+        depth--;
+        if (depth < 0) invalid = true;
+      }
+    }
+    return !invalid && !quoted && depth === 0 && (last === "}" || last === "]");
+  };
+}
+
 // src/components/customized/PreCode.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var hljsAutoPromise = null;
@@ -420,9 +543,15 @@ function useAutoDetectedLanguage(codeText, enabled, streaming) {
   );
   const [loadAttempt, setLoadAttempt] = (0, import_react4.useState)(0);
   const loadFailuresRef = (0, import_react4.useRef)(0);
+  const previousTextRef = (0, import_react4.useRef)(codeText);
   (0, import_react4.useEffect)(() => {
-    if (!enabled) return;
-    const prior = detected !== null && codeText.length < detected.atLength ? null : detected;
+    const appended = codeText.startsWith(previousTextRef.current);
+    previousTextRef.current = codeText;
+    if (!enabled) {
+      if (detected) setDetected(null);
+      return;
+    }
+    const prior = !appended || detected !== null && codeText.length < detected.atLength ? null : detected;
     if (prior !== detected) setDetected(null);
     if (codeText.length < AUTODETECT_MIN_CHARS) return;
     const due = prior === null || // Not streaming: the verdict must be for THIS text (end-of-stream, or a
@@ -461,54 +590,31 @@ function preloadMantineCodeAssets() {
     () => void 0
   );
 }
-function prettyPrintJson(text) {
-  let parsed;
-  try {
-    parsed = JSON.parse(text);
-  } catch {
-    return text;
-  }
-  return JSON.stringify(expandNestedJson(parsed), null, 2);
-}
-function expandNestedJson(value) {
-  if (typeof value === "string") {
-    const t = value.trim();
-    if (t.length > 1 && (t[0] === "{" || t[0] === "[")) {
-      try {
-        const inner = JSON.parse(t);
-        if (inner !== null && typeof inner === "object") return expandNestedJson(inner);
-      } catch {
-      }
-    }
-    return value;
-  }
-  if (Array.isArray(value)) return value.map(expandNestedJson);
-  if (value !== null && typeof value === "object") {
-    const out = /* @__PURE__ */ Object.create(null);
-    for (const [k, v] of Object.entries(value)) out[k] = expandNestedJson(v);
-    return out;
-  }
-  return value;
-}
-function jsonLooksComplete(text) {
-  if (!/[}\]]\s*$/.test(text)) return false;
-  let depth = 0;
-  let inString = false;
-  for (let i = 0; i < text.length; i++) {
-    const c = text.charCodeAt(i);
-    if (inString) {
-      if (c === 92) i += 1;
-      else if (c === 34) inString = false;
-    } else if (c === 34) {
-      inString = true;
-    } else if (c === 123 || c === 91) {
-      depth += 1;
-    } else if (c === 125 || c === 93) {
-      depth -= 1;
-      if (depth < 0) return false;
+function RawCodeCopy({ code }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_core6.CopyButton, { value: code, children: ({ copied, copy }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_code_highlight2.CodeHighlightControl,
+    {
+      tooltipLabel: copied ? "Copied" : "Copy",
+      "aria-label": copied ? "Copied" : "Copy code",
+      onClick: copy,
+      children: copied ? "\u2713" : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "8", y: "8", width: "12", height: "12", rx: "2" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 8V4H4v12h4" })
+          ]
+        }
+      )
     }
-  }
-  return depth === 0 && !inString;
+  ) });
 }
 var SpecialCodeLanguage = /* @__PURE__ */ ((SpecialCodeLanguage2) => {
   SpecialCodeLanguage2["Mermaid"] = "mermaid";
@@ -519,7 +625,7 @@ var MantineAIMPreCode = (0, import_react4.memo)(
   (props) => {
     const { fontSize } = (0, import_core5.useAIMarkdownTheme)();
     const { streaming } = (0, import_core5.useAIMarkdownState)();
-    const { autoDetectUnknownLanguage, defaultExpanded } = useMantineCodeBlockOptions();
+    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson } = useMantineCodeBlockOptions();
     const detectedLanguage = useAutoDetectedLanguage(
       props.codeText,
       autoDetectUnknownLanguage && !props.existLanguage,
@@ -531,11 +637,16 @@ var MantineAIMPreCode = (0, import_react4.memo)(
       [codeLanguage]
     );
     const isSpecialCodeBlock = SPECIAL_LANGUAGES.has(codeLanguage);
+    const [scanJson] = (0, import_react4.useState)(createJsonCompletenessScanner);
+    const jsonComplete = (0, import_react4.useMemo)(
+      () => usedCodeLanguage === "json" && formatJson && streaming ? scanJson(props.codeText) : false,
+      [usedCodeLanguage, formatJson, streaming, scanJson, props.codeText]
+    );
     const normalCodeBlockContent = (0, import_react4.useMemo)(() => {
       if (isSpecialCodeBlock) return null;
       let usedCodeStr = props.codeText;
-      if (usedCodeStr && usedCodeLanguage === "json" && (!streaming || jsonLooksComplete(usedCodeStr))) {
-        usedCodeStr = prettyPrintJson(usedCodeStr);
+      if (formatJson && usedCodeStr && usedCodeLanguage === "json" && (!streaming || jsonComplete)) {
+        usedCodeStr = prettyPrintJson(usedCodeStr, expandNestedJson);
       }
       return usedFileName === "unknown" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_code_highlight2.CodeHighlight,
@@ -547,7 +658,9 @@ var MantineAIMPreCode = (0, import_react4.memo)(
           withBorder: true,
           withExpandButton: true,
           defaultExpanded,
-          maxCollapsedHeight: "320px"
+          maxCollapsedHeight: "320px",
+          withCopyButton: false,
+          controls: [/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeCopy, { code: props.codeText }, "copy")]
         }
       ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_code_highlight2.CodeHighlightTabs,
@@ -565,10 +678,23 @@ var MantineAIMPreCode = (0, import_react4.memo)(
           withBorder: true,
           withExpandButton: true,
           defaultExpanded,
-          maxCollapsedHeight: "320px"
+          maxCollapsedHeight: "320px",
+          withCopyButton: false,
+          controls: [/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeCopy, { code: props.codeText }, "copy")]
         }
       );
-    }, [isSpecialCodeBlock, props.codeText, usedCodeLanguage, usedFileName, fontSize, defaultExpanded, streaming]);
+    }, [
+      isSpecialCodeBlock,
+      props.codeText,
+      usedCodeLanguage,
+      usedFileName,
+      fontSize,
+      defaultExpanded,
+      streaming,
+      formatJson,
+      expandNestedJson,
+      jsonComplete
+    ]);
     const specialCodeBlockContent = (0, import_react4.useMemo)(() => {
       switch (codeLanguage) {
         case "mermaid" /* Mermaid */:
@@ -584,22 +710,23 @@ MantineAIMPreCode.displayName = "MantineAIMPreCode";
 var PreCode_default = MantineAIMPreCode;
 
 // src/MantineAIMarkdown.tsx
-var import_core8 = require("@mantine/core");
+var import_core9 = require("@mantine/core");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var NO_GROUPS = Object.freeze({});
 var MANTINE_STABILITY_TABLE = {
-  codeBlock: import_core7.AIMarkdownStabilityPolicy.DEEP_EQUAL
+  codeBlock: import_core8.AIMarkdownStabilityPolicy.DEEP_EQUAL
 };
 var DefaultCustomComponents = {
   pre: ({ node, ...usefulProps }) => {
     const code = node?.children[0];
-    if (!code || code.type !== "element" || code.tagName !== "code" || !code.position) {
+    if (!code || code.type !== "element" || code.tagName !== "code" || !code.position || node?.children.length !== 1 || code.children.some((child) => !("value" in child) || typeof child.value !== "string") || Object.keys(code.properties ?? {}).some((key2) => key2 !== "className") || Object.keys(node.properties ?? {}).length > 0) {
       return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { ...usefulProps });
     }
     const key = `pre-code-${node?.position?.start?.offset || 0}`;
     const classNames = code.properties?.className;
     const classList = Array.isArray(classNames) ? classNames.filter((c) => typeof c === "string") : typeof classNames === "string" ? classNames.split(/\s+/) : [];
     const detectedLanguage = classList.find((className) => className.startsWith("language-"))?.substring("language-".length);
+    if (classList.some((className) => !className.startsWith("language-"))) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("pre", { ...usefulProps });
     const codeText = code.children.map((child) => child.value ?? "").join("");
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PreCode_default, { codeText, existLanguage: detectedLanguage }, key);
   }
@@ -612,18 +739,18 @@ var MantineAIMarkdownComponent = ({
   codeBlock,
   ...props
 }) => {
-  const stableCustomComponents = (0, import_core7.useStableValue)(customComponents);
+  const stableCustomComponents = (0, import_core8.useStableValue)(customComponents);
   const usedComponents = (0, import_react5.useMemo)(() => {
     return stableCustomComponents ? { ...DefaultCustomComponents, ...stableCustomComponents } : DefaultCustomComponents;
   }, [stableCustomComponents]);
-  const computedColorScheme = (0, import_core8.useComputedColorScheme)("light");
-  const stable = (0, import_core7.useStableRecord)({ codeBlock }, MANTINE_STABILITY_TABLE);
+  const computedColorScheme = (0, import_core9.useComputedColorScheme)("light");
+  const stable = (0, import_core8.useStableRecord)({ codeBlock }, MANTINE_STABILITY_TABLE);
   const behaviorGroups = (0, import_react5.useMemo)(
     () => stable.codeBlock != null ? { codeBlock: stable.codeBlock } : NO_GROUPS,
     [stable.codeBlock]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core7.AIMarkdownBehaviorsProvider, { value: behaviorGroups, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    import_core6.default,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_core8.AIMarkdownBehaviorsProvider, { value: behaviorGroups, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_core7.default,
     {
       Typography: Typography2,
       ExtraStyles,
@@ -643,9 +770,9 @@ function defineMantineBehaviors(values) {
 }
 
 // src/hooks/useMantineAIMarkdownMetadata.ts
-var import_core9 = require("@ai-react-markdown/core");
+var import_core10 = require("@ai-react-markdown/core");
 var useMantineAIMarkdownMetadata = () => {
-  return (0, import_core9.useAIMarkdownMetadata)();
+  return (0, import_core10.useAIMarkdownMetadata)();
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {