@ai-react-markdown/mantine 2.12.0 → 2.13.0

package/dist/index.js

@@ -24,8 +24,14 @@ var MantineAIMDefaultExtraStyles = ({ children }) => {
 var DefaultExtraStyles_default = MantineAIMDefaultExtraStyles;
 
 // src/components/customized/PreCode.tsx
-import { memo as memo3, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
-import { CodeHighlight, CodeHighlightTabs as CodeHighlightTabs2, CodeHighlightControl as CodeHighlightControl2 } from "@mantine/code-highlight";
+import { createContext, memo as memo3, useContext, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import {
+  CodeHighlight,
+  CodeHighlightTabs as CodeHighlightTabs2,
+  CodeHighlightControl as CodeHighlightControl2,
+  CodeHighlightAdapterProvider,
+  useHighlight
+} from "@mantine/code-highlight";
 import { useAIMarkdownState as useAIMarkdownState2, useAIMarkdownTheme as useAIMarkdownTheme2 } from "@ai-react-markdown/core";
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -37,7 +43,8 @@ var defaultMantineCodeBlockOptions = Object.freeze({
   defaultExpanded: true,
   autoDetectUnknownLanguage: false,
   formatJson: true,
-  expandNestedJson: true
+  expandNestedJson: true,
+  highlightIntervalMs: 50
 });
 
 // src/hooks/useMantineCodeBlockOptions.ts
@@ -50,6 +57,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]);
 }
@@ -483,6 +493,51 @@ function createJsonCompletenessScanner() {
   };
 }
 
+// src/components/customized/useCodeFrame.ts
+import { useEffect as useEffect2, useState as useState2 } from "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] = useState2(() => ({ code, language }));
+  const [controller] = useState2(() => createCodeFrame({ code, language }, setFrame));
+  useEffect2(() => {
+    controller.update({ code, language }, streaming, interval);
+  }, [controller, code, language, streaming, interval]);
+  useEffect2(() => () => controller.dispose(), [controller]);
+  return !streaming || interval === 0 || language !== frame.language || !code.startsWith(frame.code) ? code : frame.code;
+}
+
 // src/components/customized/PreCode.tsx
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var hljsAutoPromise = null;
@@ -500,13 +555,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] = useState2(
+  const [detected, setDetected] = useState3(
     null
   );
-  const [loadAttempt, setLoadAttempt] = useState2(0);
+  const [loadAttempt, setLoadAttempt] = useState3(0);
   const loadFailuresRef = useRef2(0);
   const previousTextRef = useRef2(codeText);
-  useEffect2(() => {
+  useEffect3(() => {
     const appended = codeText.startsWith(previousTextRef.current);
     previousTextRef.current = codeText;
     if (!enabled) {
@@ -552,7 +607,9 @@ function preloadMantineCodeAssets() {
     () => void 0
   );
 }
-function RawCodeCopy({ code }) {
+var RawCodeContext = createContext("");
+function RawCodeCopy() {
+  const code = useContext(RawCodeContext);
   return /* @__PURE__ */ jsx4(CopyButton2, { value: code, children: ({ copied, copy }) => /* @__PURE__ */ jsx4(
     CodeHighlightControl2,
     {
@@ -578,6 +635,64 @@ 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 = memo3(function OrdinaryCodeHighlight2({
+  code,
+  language,
+  fileName,
+  fontSize,
+  defaultExpanded
+}) {
+  const highlight = useHighlight();
+  const adapter = useMemo2(() => createCachedHighlightAdapter(highlight), [highlight]);
+  return /* @__PURE__ */ jsx4(CodeHighlightAdapterProvider, { adapter, children: fileName === "unknown" ? /* @__PURE__ */ jsx4(
+    CodeHighlight,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code,
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ jsx4(RawCodeCopy, {}, "copy")]
+    }
+  ) : /* @__PURE__ */ jsx4(
+    CodeHighlightTabs2,
+    {
+      mb: 15,
+      fz: fontSize,
+      w: "100%",
+      code: [
+        {
+          fileName,
+          code,
+          language
+        }
+      ],
+      withBorder: true,
+      withExpandButton: true,
+      defaultExpanded,
+      maxCollapsedHeight: "320px",
+      withCopyButton: false,
+      controls: [/* @__PURE__ */ jsx4(RawCodeCopy, {}, "copy")]
+    }
+  ) });
+});
 var SpecialCodeLanguage = /* @__PURE__ */ ((SpecialCodeLanguage2) => {
   SpecialCodeLanguage2["Mermaid"] = "mermaid";
   return SpecialCodeLanguage2;
@@ -587,7 +702,7 @@ var MantineAIMPreCode = memo3(
   (props) => {
     const { fontSize } = useAIMarkdownTheme2();
     const { streaming } = useAIMarkdownState2();
-    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson } = useMantineCodeBlockOptions();
+    const { autoDetectUnknownLanguage, defaultExpanded, formatJson, expandNestedJson, highlightIntervalMs } = useMantineCodeBlockOptions();
     const detectedLanguage = useAutoDetectedLanguage(
       props.codeText,
       autoDetectUnknownLanguage && !props.existLanguage,
@@ -599,7 +714,7 @@ var MantineAIMPreCode = memo3(
       [codeLanguage]
     );
     const isSpecialCodeBlock = SPECIAL_LANGUAGES.has(codeLanguage);
-    const [scanJson] = useState2(createJsonCompletenessScanner);
+    const [scanJson] = useState3(createJsonCompletenessScanner);
     const jsonComplete = useMemo2(
       () => usedCodeLanguage === "json" && formatJson && streaming ? scanJson(props.codeText) : false,
       [usedCodeLanguage, formatJson, streaming, scanJson, props.codeText]
@@ -610,53 +725,14 @@ var MantineAIMPreCode = memo3(
       if (formatJson && usedCodeStr && usedCodeLanguage === "json" && (!streaming || jsonComplete)) {
         usedCodeStr = prettyPrintJson(usedCodeStr, expandNestedJson);
       }
-      return usedFileName === "unknown" ? /* @__PURE__ */ jsx4(
-        CodeHighlight,
-        {
-          mb: 15,
-          fz: fontSize,
-          w: "100%",
-          code: usedCodeStr,
-          withBorder: true,
-          withExpandButton: true,
-          defaultExpanded,
-          maxCollapsedHeight: "320px",
-          withCopyButton: false,
-          controls: [/* @__PURE__ */ jsx4(RawCodeCopy, { code: props.codeText }, "copy")]
-        }
-      ) : /* @__PURE__ */ jsx4(
-        CodeHighlightTabs2,
-        {
-          mb: 15,
-          fz: fontSize,
-          w: "100%",
-          code: [
-            {
-              fileName: usedFileName,
-              code: usedCodeStr,
-              language: usedCodeLanguage
-            }
-          ],
-          withBorder: true,
-          withExpandButton: true,
-          defaultExpanded,
-          maxCollapsedHeight: "320px",
-          withCopyButton: false,
-          controls: [/* @__PURE__ */ jsx4(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
-    ]);
+      streaming && !isSpecialCodeBlock,
+      highlightIntervalMs
+    );
     const specialCodeBlockContent = useMemo2(() => {
       switch (codeLanguage) {
         case "mermaid" /* Mermaid */:
@@ -665,7 +741,16 @@ var MantineAIMPreCode = memo3(
           return null;
       }
     }, [codeLanguage, props.codeText]);
-    return isSpecialCodeBlock ? specialCodeBlockContent : normalCodeBlockContent;
+    return isSpecialCodeBlock ? specialCodeBlockContent : /* @__PURE__ */ jsx4(RawCodeContext.Provider, { value: props.codeText, children: /* @__PURE__ */ jsx4(
+      OrdinaryCodeHighlight,
+      {
+        code: displayedCode,
+        language: usedCodeLanguage,
+        fileName: usedFileName,
+        fontSize,
+        defaultExpanded
+      }
+    ) });
   }
 );
 MantineAIMPreCode.displayName = "MantineAIMPreCode";