@zm-editor/react 0.1.0 → 0.1.1

package/dist/index.js

@@ -6,8 +6,6 @@ export * from '@zm-editor/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Image from '@tiptap/extension-image';
 import { Node as Node$1, mergeAttributes } from '@tiptap/core';
-import katex from 'katex';
-import mermaid from 'mermaid';
 
 // src/components/Editor.tsx
 
@@ -3413,12 +3411,30 @@ var Bookmark = Node$1.create({
     return ReactNodeViewRenderer(BookmarkNode);
   }
 });
-function renderLatex(latex, displayMode) {
+var katexModule = null;
+var katexLoadError = null;
+async function loadKatex() {
+  if (katexModule) return katexModule;
+  if (katexLoadError) return null;
+  try {
+    katexModule = await import('katex');
+    return katexModule;
+  } catch (err) {
+    katexLoadError = "KaTeX library is not installed. Please run: npm install katex";
+    console.warn("[zm-editor] KaTeX not available:", katexLoadError);
+    return null;
+  }
+}
+async function renderLatexAsync(latex, displayMode) {
   if (!latex.trim()) {
     return { html: "", error: null };
   }
+  const katex = await loadKatex();
+  if (!katex) {
+    return { html: "", error: katexLoadError || "KaTeX library not available" };
+  }
   try {
-    const html = katex.renderToString(latex, {
+    const html = katex.default.renderToString(latex, {
       displayMode,
       throwOnError: true,
       strict: false,
@@ -3436,19 +3452,35 @@ function MathNode({ node, updateAttributes, selected }) {
   const { latex = "", displayMode = true } = node.attrs;
   const [isEditing, setIsEditing] = useState(false);
   const [latexValue, setLatexValue] = useState(latex);
+  const [renderedHtml, setRenderedHtml] = useState("");
+  const [renderError, setRenderError] = useState(null);
+  const [isKatexAvailable, setIsKatexAvailable] = useState(null);
+  const textareaRef = useRef(null);
+  useEffect(() => {
+    loadKatex().then((k) => setIsKatexAvailable(k !== null));
+  }, []);
   useEffect(() => {
     if (!latex) {
       setIsEditing(true);
     }
   }, []);
-  const textareaRef = useRef(null);
-  const rendered = useMemo(() => renderLatex(latexValue, displayMode), [latexValue, displayMode]);
   useEffect(() => {
     setLatexValue(latex);
     if (latex) {
       setIsEditing(false);
     }
   }, [latex]);
+  useEffect(() => {
+    if (!latexValue.trim()) {
+      setRenderedHtml("");
+      setRenderError(null);
+      return;
+    }
+    renderLatexAsync(latexValue, displayMode).then((result) => {
+      setRenderedHtml(result.html);
+      setRenderError(result.error);
+    });
+  }, [latexValue, displayMode]);
   const handleSave = useCallback(() => {
     const trimmed = latexValue.trim();
     if (!trimmed) {
@@ -3490,6 +3522,14 @@ function MathNode({ node, updateAttributes, selected }) {
   useEffect(() => {
     adjustTextareaHeight();
   }, [latexValue, adjustTextareaHeight]);
+  if (isKatexAvailable === false) {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "zm-math-node-wrapper", children: /* @__PURE__ */ jsx("div", { className: `zm-math-node zm-math-unavailable ${selected ? "is-selected" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "zm-math-unavailable-content", children: [
+      /* @__PURE__ */ jsx(MathIcon, {}),
+      /* @__PURE__ */ jsx("div", { className: "zm-math-unavailable-title", children: "Math Equations" }),
+      /* @__PURE__ */ jsx("div", { className: "zm-math-unavailable-message", children: "To use math equations, please install the KaTeX package:" }),
+      /* @__PURE__ */ jsx("code", { className: "zm-math-unavailable-code", children: "npm install katex" })
+    ] }) }) });
+  }
   if (isEditing || !latex) {
     return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "zm-math-node-wrapper", children: /* @__PURE__ */ jsx(
       "div",
@@ -3517,19 +3557,18 @@ function MathNode({ node, updateAttributes, selected }) {
               spellCheck: false
             }
           ),
-          latexValue.trim() && /* @__PURE__ */ jsx("div", { className: "zm-math-preview", children: rendered.error ? /* @__PURE__ */ jsx("div", { className: "zm-math-error", children: rendered.error }) : /* @__PURE__ */ jsx(
+          latexValue.trim() && /* @__PURE__ */ jsx("div", { className: "zm-math-preview", children: renderError ? /* @__PURE__ */ jsx("div", { className: "zm-math-error", children: renderError }) : renderedHtml ? /* @__PURE__ */ jsx(
             "div",
             {
               className: "zm-math-rendered",
-              dangerouslySetInnerHTML: { __html: rendered.html }
+              dangerouslySetInnerHTML: { __html: renderedHtml }
             }
-          ) }),
+          ) : null }),
           /* @__PURE__ */ jsx("div", { className: "zm-math-hint", children: locale.nodes.math.hint })
         ] })
       }
     ) });
   }
-  const finalRendered = renderLatex(latex, displayMode);
   return /* @__PURE__ */ jsxs(NodeViewWrapper, { className: "zm-math-node-wrapper", children: [
     /* @__PURE__ */ jsx(
       "div",
@@ -3537,17 +3576,17 @@ function MathNode({ node, updateAttributes, selected }) {
         className: `zm-math-node zm-math-display ${selected ? "is-selected" : ""}`,
         "data-drag-handle": true,
         onClick: handleEdit,
-        children: finalRendered.error ? /* @__PURE__ */ jsxs("div", { className: "zm-math-error-display", children: [
+        children: renderError ? /* @__PURE__ */ jsxs("div", { className: "zm-math-error-display", children: [
           /* @__PURE__ */ jsx("div", { className: "zm-math-error-icon", children: /* @__PURE__ */ jsx(ErrorIcon, {}) }),
-          /* @__PURE__ */ jsx("div", { className: "zm-math-error-message", children: finalRendered.error }),
+          /* @__PURE__ */ jsx("div", { className: "zm-math-error-message", children: renderError }),
           /* @__PURE__ */ jsx("div", { className: "zm-math-error-source", children: latex })
-        ] }) : /* @__PURE__ */ jsx(
+        ] }) : renderedHtml ? /* @__PURE__ */ jsx(
           "div",
           {
             className: "zm-math-rendered",
-            dangerouslySetInnerHTML: { __html: finalRendered.html }
+            dangerouslySetInnerHTML: { __html: renderedHtml }
           }
-        )
+        ) : /* @__PURE__ */ jsx("div", { className: "zm-math-loading", children: "Loading..." })
       }
     ),
     selected && /* @__PURE__ */ jsx("div", { className: "zm-math-toolbar", children: /* @__PURE__ */ jsx(
@@ -4401,7 +4440,7 @@ function TerminalNode({ node, updateAttributes, selected }) {
     [updateAttributes]
   );
   const handleOutputInput = useCallback((e) => {
-    const textarea = e.target;
+    const textarea = e.currentTarget;
     textarea.style.height = "auto";
     textarea.style.height = `${textarea.scrollHeight}px`;
   }, []);
@@ -4879,8 +4918,22 @@ var ApiBlock = Node$1.create({
     return ReactNodeViewRenderer(ApiBlockNode);
   }
 });
+var mermaidModule = null;
+var mermaidLoadError = null;
 var mermaidInitialized = false;
-function initializeMermaid() {
+async function loadMermaid() {
+  if (mermaidModule) return mermaidModule;
+  if (mermaidLoadError) return null;
+  try {
+    mermaidModule = await import('mermaid');
+    return mermaidModule;
+  } catch (err) {
+    mermaidLoadError = "Mermaid library is not installed. Please run: npm install mermaid";
+    console.warn("[zm-editor] Mermaid not available:", mermaidLoadError);
+    return null;
+  }
+}
+function initializeMermaid(mermaid) {
   if (mermaidInitialized) return;
   mermaid.initialize({
     startOnLoad: false,
@@ -4894,9 +4947,13 @@ async function renderMermaid(code, id) {
   if (!code.trim()) {
     return { svg: "", error: null };
   }
-  initializeMermaid();
+  const mermaid = await loadMermaid();
+  if (!mermaid) {
+    return { svg: "", error: mermaidLoadError || "Mermaid library not available" };
+  }
+  initializeMermaid(mermaid.default);
   try {
-    const { svg } = await mermaid.render(id, code);
+    const { svg } = await mermaid.default.render(id, code);
     return { svg, error: null };
   } catch (err) {
     cleanupOrphanMermaidElements(id);
@@ -4927,8 +4984,12 @@ function MermaidNode({ node, updateAttributes, selected }) {
   const [renderedSvg, setRenderedSvg] = useState("");
   const [renderError, setRenderError] = useState(null);
   const [isRendering, setIsRendering] = useState(false);
+  const [isMermaidAvailable, setIsMermaidAvailable] = useState(null);
   const textareaRef = useRef(null);
   const renderIdRef = useRef(0);
+  useEffect(() => {
+    loadMermaid().then((m) => setIsMermaidAvailable(m !== null));
+  }, []);
   useEffect(() => {
     if (!code) {
       setIsEditing(true);
@@ -4996,6 +5057,14 @@ function MermaidNode({ node, updateAttributes, selected }) {
   useEffect(() => {
     adjustTextareaHeight();
   }, [codeValue, adjustTextareaHeight]);
+  if (isMermaidAvailable === false) {
+    return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "zm-mermaid-node-wrapper", children: /* @__PURE__ */ jsx("div", { className: `zm-mermaid-node zm-mermaid-unavailable ${selected ? "is-selected" : ""}`, children: /* @__PURE__ */ jsxs("div", { className: "zm-mermaid-unavailable-content", children: [
+      /* @__PURE__ */ jsx(MermaidIcon, {}),
+      /* @__PURE__ */ jsx("div", { className: "zm-mermaid-unavailable-title", children: "Mermaid Diagrams" }),
+      /* @__PURE__ */ jsx("div", { className: "zm-mermaid-unavailable-message", children: "To use Mermaid diagrams, please install the mermaid package:" }),
+      /* @__PURE__ */ jsx("code", { className: "zm-mermaid-unavailable-code", children: "npm install mermaid" })
+    ] }) }) });
+  }
   if (isEditing || !code) {
     return /* @__PURE__ */ jsx(NodeViewWrapper, { className: "zm-mermaid-node-wrapper", children: /* @__PURE__ */ jsx(
       "div",