@ai-react-markdown/mantine 2.12.0 → 2.13.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.12.0",
+  "@ai-react-markdown/core": "^2.13.0",
   "@mantine/core": "^9.0.0",
   "@mantine/code-highlight": "^9.0.0",
   "highlight.js": "^11.11.2"
@@ -150,12 +150,13 @@ 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.          |
-| `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. |
+| 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.                                                |
+| `highlightIntervalMs`       | `number`  | `50`    | Coalesce streaming code display updates over this interval in milliseconds; `0` updates every frame. Completion and replacement update immediately; copy always uses latest source. |
 
 ### Example: Collapsed Code Blocks
 

package/dist/index.cjs

@@ -42,7 +42,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/MantineAIMarkdown.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_core7 = __toESM(require("@ai-react-markdown/core"), 1);
 var import_core8 = require("@ai-react-markdown/core");
 
@@ -62,7 +62,7 @@ var MantineAIMDefaultExtraStyles = ({ children }) => {
 var DefaultExtraStyles_default = MantineAIMDefaultExtraStyles;
 
 // src/components/customized/PreCode.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_code_highlight2 = require("@mantine/code-highlight");
 var import_core5 = require("@ai-react-markdown/core");
 
@@ -75,7 +75,8 @@ var defaultMantineCodeBlockOptions = Object.freeze({
   defaultExpanded: true,
   autoDetectUnknownLanguage: false,
   formatJson: true,
-  expandNestedJson: true
+  expandNestedJson: true,
+  highlightIntervalMs: 50
 });
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -88,6 +89,9 @@ function useMantineCodeBlockOptions() {
       const value = group?.[key];
       if (value !== void 0) resolved[key] = value;
     }
+    if (!Number.isFinite(resolved.highlightIntervalMs) || resolved.highlightIntervalMs < 0) {
+      resolved.highlightIntervalMs = defaultMantineCodeBlockOptions.highlightIntervalMs;
+    }
     return resolved;
   }, [group]);
 }
@@ -521,6 +525,51 @@ function createJsonCompletenessScanner() {
   };
 }
 
+// src/components/customized/useCodeFrame.ts
+var import_react4 = require("react");
+
+// src/components/customized/codeFrame.ts
+function createCodeFrame(initial, publish) {
+  let shown = initial;
+  let latest = initial;
+  let delay = 0;
+  let timer;
+  const cancel = () => {
+    if (timer !== void 0) clearTimeout(timer);
+    timer = void 0;
+  };
+  const flush = () => {
+    cancel();
+    if (shown.code === latest.code && shown.language === latest.language) return;
+    shown = latest;
+    publish(shown);
+  };
+  return {
+    update(next, streaming, interval) {
+      const replaced = next.language !== latest.language || !next.code.startsWith(latest.code);
+      latest = next;
+      if (delay !== interval) cancel();
+      delay = interval;
+      if (!streaming || interval === 0 || replaced) return flush();
+      if (shown.code === next.code && shown.language === next.language) return cancel();
+      timer ??= setTimeout(flush, interval);
+    },
+    // Cancellation is reversible: Strict Mode replays the update effect.
+    dispose: cancel
+  };
+}
+
+// src/components/customized/useCodeFrame.ts
+function useCodeFrame(code, language, streaming, interval) {
+  const [frame, setFrame] = (0, import_react4.useState)(() => ({ code, language }));
+  const [controller] = (0, import_react4.useState)(() => createCodeFrame({ code, language }, setFrame));
+  (0, import_react4.useEffect)(() => {
+    controller.update({ code, language }, streaming, interval);
+  }, [controller, code, language, streaming, interval]);
+  (0, import_react4.useEffect)(() => () => controller.dispose(), [controller]);
+  return !streaming || interval === 0 || language !== frame.language || !code.startsWith(frame.code) ? code : frame.code;
+}
+
 // src/components/customized/PreCode.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var hljsAutoPromise = null;
@@ -538,13 +587,13 @@ var AUTODETECT_MIN_CHARS = 32;
 var HLJS_LOAD_RETRIES = 3;
 var HLJS_LOAD_RETRY_MS = 1500;
 function useAutoDetectedLanguage(codeText, enabled, streaming) {
-  const [detected, setDetected] = (0, import_react4.useState)(
+  const [detected, setDetected] = (0, import_react5.useState)(
     null
   );
-  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)(() => {
+  const [loadAttempt, setLoadAttempt] = (0, import_react5.useState)(0);
+  const loadFailuresRef = (0, import_react5.useRef)(0);
+  const previousTextRef = (0, import_react5.useRef)(codeText);
+  (0, import_react5.useEffect)(() => {
     const appended = codeText.startsWith(previousTextRef.current);
     previousTextRef.current = codeText;
     if (!enabled) {
@@ -590,7 +639,9 @@ function preloadMantineCodeAssets() {
     () => void 0
   );
 }
-function RawCodeCopy({ code }) {
+var RawCodeContext = (0, import_react5.createContext)("");
+function RawCodeCopy() {
+  const code = (0, import_react5.useContext)(RawCodeContext);
   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,
     {
@@ -616,86 +667,105 @@ function RawCodeCopy({ code }) {
     }
   ) });
 }
+function createCachedHighlightAdapter(highlight) {
+  let previous;
+  let result;
+  return {
+    getHighlighter: () => (input) => {
+      if (!previous || input.code !== previous.code || input.language !== previous.language || input.colorScheme !== previous.colorScheme) {
+        result = highlight(input);
+        previous = input;
+      }
+      return result;
+    }
+  };
+}
+var OrdinaryCodeHighlight = (0, import_react5.memo)(function OrdinaryCodeHighlight2({
+  code,
+  language,
+  fileName,
+  fontSize,
+  defaultExpanded
+}) {
+  const highlight = (0, import_code_highlight2.useHighlight)();
+  const adapter = (0, import_react5.useMemo)(() => createCachedHighlightAdapter(highlight), [highlight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_code_highlight2.CodeHighlightAdapterProvider, { adapter, children: fileName === "unknown" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_code_highlight2.CodeHighlight,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code,
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeCopy, {}, "copy")]
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    import_code_highlight2.CodeHighlightTabs,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code: [
+        {
+          fileName,
+          code,
+          language
+        }
+      ],
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeCopy, {}, "copy")]
+    }
+  ) });
+});
 var SpecialCodeLanguage = /* @__PURE__ */ ((SpecialCodeLanguage2) => {
   SpecialCodeLanguage2["Mermaid"] = "mermaid";
   return SpecialCodeLanguage2;
 })(SpecialCodeLanguage || {});
 var SPECIAL_LANGUAGES = new Set(Object.values(SpecialCodeLanguage));
-var MantineAIMPreCode = (0, import_react4.memo)(
+var MantineAIMPreCode = (0, import_react5.memo)(
   (props) => {
     const { fontSize } = (0, import_core5.useAIMarkdownTheme)();
     const { streaming } = (0, import_core5.useAIMarkdownState)();
-    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson } = useMantineCodeBlockOptions();
+    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson, highlightIntervalMs } = useMantineCodeBlockOptions();
     const detectedLanguage = useAutoDetectedLanguage(
       props.codeText,
       autoDetectUnknownLanguage && !props.existLanguage,
       streaming
     );
     const codeLanguage = (props.existLanguage || detectedLanguage).toLowerCase();
-    const [usedCodeLanguage, usedFileName] = (0, import_react4.useMemo)(
+    const [usedCodeLanguage, usedFileName] = (0, import_react5.useMemo)(
       () => codeLanguage ? [codeLanguage, codeLanguage] : ["plaintext", "unknown"],
       [codeLanguage]
     );
     const isSpecialCodeBlock = SPECIAL_LANGUAGES.has(codeLanguage);
-    const [scanJson] = (0, import_react4.useState)(createJsonCompletenessScanner);
-    const jsonComplete = (0, import_react4.useMemo)(
+    const [scanJson] = (0, import_react5.useState)(createJsonCompletenessScanner);
+    const jsonComplete = (0, import_react5.useMemo)(
       () => usedCodeLanguage === "json" && formatJson && streaming ? scanJson(props.codeText) : false,
       [usedCodeLanguage, formatJson, streaming, scanJson, props.codeText]
     );
-    const normalCodeBlockContent = (0, import_react4.useMemo)(() => {
+    const normalCodeBlockContent = (0, import_react5.useMemo)(() => {
       if (isSpecialCodeBlock) return null;
       let usedCodeStr = props.codeText;
       if (formatJson && usedCodeStr && usedCodeLanguage === "json" && (!streaming || jsonComplete)) {
         usedCodeStr = prettyPrintJson(usedCodeStr, expandNestedJson);
       }
-      return usedFileName === "unknown" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_code_highlight2.CodeHighlight,
-        {
-          mb: 15,
-          fz: fontSize,
-          w: "100%",
-          code: usedCodeStr,
-          withBorder: true,
-          withExpandButton: true,
-          defaultExpanded,
-          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,
-        {
-          mb: 15,
-          fz: fontSize,
-          w: "100%",
-          code: [
-            {
-              fileName: usedFileName,
-              code: usedCodeStr,
-              language: usedCodeLanguage
-            }
-          ],
-          withBorder: true,
-          withExpandButton: true,
-          defaultExpanded,
-          maxCollapsedHeight: "320px",
-          withCopyButton: false,
-          controls: [/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeCopy, { code: props.codeText }, "copy")]
-        }
-      );
-    }, [
-      isSpecialCodeBlock,
-      props.codeText,
+      return usedCodeStr;
+    }, [isSpecialCodeBlock, props.codeText, usedCodeLanguage, streaming, formatJson, expandNestedJson, jsonComplete]);
+    const displayedCode = useCodeFrame(
+      normalCodeBlockContent ?? "",
       usedCodeLanguage,
-      usedFileName,
-      fontSize,
-      defaultExpanded,
-      streaming,
-      formatJson,
-      expandNestedJson,
-      jsonComplete
-    ]);
-    const specialCodeBlockContent = (0, import_react4.useMemo)(() => {
+      streaming && !isSpecialCodeBlock,
+      highlightIntervalMs
+    );
+    const specialCodeBlockContent = (0, import_react5.useMemo)(() => {
       switch (codeLanguage) {
         case "mermaid" /* Mermaid */:
           return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MermaidCode_default, { code: props.codeText });
@@ -703,7 +773,16 @@ var MantineAIMPreCode = (0, import_react4.memo)(
           return null;
       }
     }, [codeLanguage, props.codeText]);
-    return isSpecialCodeBlock ? specialCodeBlockContent : normalCodeBlockContent;
+    return isSpecialCodeBlock ? specialCodeBlockContent : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RawCodeContext.Provider, { value: props.codeText, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      OrdinaryCodeHighlight,
+      {
+        code: displayedCode,
+        language: usedCodeLanguage,
+        fileName: usedFileName,
+        fontSize,
+        defaultExpanded
+      }
+    ) });
   }
 );
 MantineAIMPreCode.displayName = "MantineAIMPreCode";
@@ -740,12 +819,12 @@ var MantineAIMarkdownComponent = ({
   ...props
 }) => {
   const stableCustomComponents = (0, import_core8.useStableValue)(customComponents);
-  const usedComponents = (0, import_react5.useMemo)(() => {
+  const usedComponents = (0, import_react6.useMemo)(() => {
     return stableCustomComponents ? { ...DefaultCustomComponents, ...stableCustomComponents } : DefaultCustomComponents;
   }, [stableCustomComponents]);
   const computedColorScheme = (0, import_core9.useComputedColorScheme)("light");
   const stable = (0, import_core8.useStableRecord)({ codeBlock }, MANTINE_STABILITY_TABLE);
-  const behaviorGroups = (0, import_react5.useMemo)(
+  const behaviorGroups = (0, import_react6.useMemo)(
     () => stable.codeBlock != null ? { codeBlock: stable.codeBlock } : NO_GROUPS,
     [stable.codeBlock]
   );
@@ -760,7 +839,7 @@ var MantineAIMarkdownComponent = ({
     }
   ) });
 };
-var MantineAIMarkdown = (0, import_react5.memo)(MantineAIMarkdownComponent);
+var MantineAIMarkdown = (0, import_react6.memo)(MantineAIMarkdownComponent);
 MantineAIMarkdown.displayName = "MantineAIMarkdown";
 var MantineAIMarkdown_default = MantineAIMarkdown;