@q9labsai/chalk-whiteboard 4.0.0

package/dist/react/index.js

@@ -0,0 +1,625 @@
+// src/react/WhiteboardCanvas.tsx
+import { memo, useCallback, useEffect, useMemo, useRef, useState as useState2 } from "react";
+
+// src/react/MathEditor.tsx
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MathEditor({ initialLatex, isEditing, classNames, icons, onClose, onSubmit }) {
+  const [latex, setLatex] = useState(initialLatex);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(null);
+  const canSubmit = latex.trim().length > 0 && !isSubmitting;
+  const handleSubmit = async () => {
+    if (!canSubmit) return;
+    setIsSubmitting(true);
+    setError(null);
+    try {
+      await onSubmit(latex.trim());
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : "Failed to render equation");
+      setIsSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className: classNames.mathOverlay, style: { position: "absolute", inset: 0, zIndex: 40, display: "flex", alignItems: "center", justifyContent: "center", padding: 16 }, children: /* @__PURE__ */ jsxs("div", { className: classNames.mathDialog, style: { width: "100%", maxWidth: 576 }, children: [
+    /* @__PURE__ */ jsxs("div", { className: classNames.mathHeader, style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ jsx("div", { className: classNames.mathTitle, children: isEditing ? "Edit equation" : "Math" }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: classNames.mathCloseButton, "aria-label": "Close math editor", children: icons.close ?? "x" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: classNames.mathBody, style: { display: "grid", gap: 12 }, children: [
+      /* @__PURE__ */ jsx("textarea", { value: latex, onChange: (event) => setLatex(event.target.value), className: classNames.mathTextarea, spellCheck: false, autoFocus: true, "aria-label": "LaTeX equation" }),
+      error && /* @__PURE__ */ jsx("div", { className: classNames.mathError, children: error }),
+      /* @__PURE__ */ jsxs("div", { className: classNames.mathActions, style: { display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, className: classNames.mathCancelButton, children: "Cancel" }),
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: handleSubmit, disabled: !canSubmit, className: classNames.mathSubmitButton, children: [
+          isSubmitting ? icons.submitting : icons.submit,
+          "Insert"
+        ] })
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/react/math-elements.ts
+var CHALK_MATH_CUSTOM_DATA_KEY = "chalk";
+var CHALK_MATH_RENDERER = "mathjax-svg";
+var encodeBase64 = (value) => {
+  const bytes = new TextEncoder().encode(value);
+  if (typeof btoa === "function") {
+    let binary = "";
+    const chunkSize = 32768;
+    for (let index = 0; index < bytes.length; index += chunkSize) {
+      binary += String.fromCharCode(...bytes.slice(index, index + chunkSize));
+    }
+    return btoa(binary);
+  }
+  const nodeBuffer = globalThis.Buffer;
+  if (nodeBuffer) return nodeBuffer.from(bytes).toString("base64");
+  throw new Error("Base64 encoding is unavailable in this runtime");
+};
+var svgToDataUrl = (svg) => `data:image/svg+xml;base64,${encodeBase64(svg)}`;
+var createMathFileId = () => `chalk-math-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+function createMathImageAsset(args) {
+  const created = Date.now();
+  const fileId = createMathFileId();
+  return {
+    file: {
+      id: fileId,
+      mimeType: "image/svg+xml",
+      dataURL: svgToDataUrl(args.svg),
+      created,
+      lastRetrieved: created
+    },
+    width: args.width,
+    height: args.height,
+    customData: {
+      [CHALK_MATH_CUSTOM_DATA_KEY]: {
+        kind: "math",
+        latex: args.latex,
+        renderer: CHALK_MATH_RENDERER,
+        version: 1,
+        displayMode: args.displayMode
+      }
+    }
+  };
+}
+function getChalkMathData(element) {
+  const data = element?.customData?.[CHALK_MATH_CUSTOM_DATA_KEY];
+  if (data?.kind !== "math" || typeof data.latex !== "string") return null;
+  return {
+    kind: "math",
+    latex: data.latex,
+    renderer: data.renderer === CHALK_MATH_RENDERER ? CHALK_MATH_RENDERER : CHALK_MATH_RENDERER,
+    version: 1,
+    displayMode: data.displayMode !== false
+  };
+}
+function isChalkMathElement(element) {
+  return element?.type === "image" && getChalkMathData(element) !== null;
+}
+function getSelectedMathElement(api) {
+  const selectedIds = api.getAppState().selectedElementIds ?? {};
+  const selected = api.getSceneElements().find((element) => selectedIds[element.id] && isChalkMathElement(element));
+  return selected ? selected : null;
+}
+var getZoom = (zoom) => {
+  const value = typeof zoom === "object" && zoom !== null && "value" in zoom ? Number(zoom.value) : 1;
+  return Number.isFinite(value) && value > 0 ? value : 1;
+};
+function getInsertionPoint(api, width, height) {
+  const appState = api.getAppState();
+  const zoom = getZoom(appState.zoom);
+  const viewportWidth = typeof window === "undefined" ? 1200 : window.innerWidth;
+  const viewportHeight = typeof window === "undefined" ? 800 : window.innerHeight;
+  return {
+    x: Math.round((-appState.scrollX + viewportWidth / 2) / zoom - width / 2),
+    y: Math.round((-appState.scrollY + viewportHeight / 2) / zoom - height / 2)
+  };
+}
+function replaceMathElement(args, existingElement) {
+  const { api, asset, excalidraw, status } = args;
+  const nextElement = excalidraw.newElementWith(existingElement, {
+    fileId: asset.file.id,
+    width: asset.width,
+    height: asset.height,
+    status,
+    customData: { ...existingElement.customData ?? {}, ...asset.customData }
+  });
+  const elements = api.getSceneElementsIncludingDeleted().map((element) => element.id === existingElement.id ? nextElement : element);
+  api.updateScene({ elements, captureUpdate: excalidraw.CaptureUpdateAction.IMMEDIATELY });
+  return nextElement;
+}
+function appendMathElement(args) {
+  const { api, asset, excalidraw, status } = args;
+  const point = getInsertionPoint(api, asset.width, asset.height);
+  const [element] = excalidraw.convertToExcalidrawElements([{ type: "image", x: point.x, y: point.y, width: asset.width, height: asset.height, fileId: asset.file.id, status, customData: asset.customData }], { regenerateIds: true });
+  if (!element) throw new Error("Failed to create math element");
+  api.updateScene({
+    elements: [...api.getSceneElementsIncludingDeleted(), element],
+    appState: { selectedElementIds: { [element.id]: true } },
+    captureUpdate: excalidraw.CaptureUpdateAction.IMMEDIATELY
+  });
+  return element;
+}
+function appendOrReplaceMathElement(args) {
+  const { api, asset, excalidraw, existingElement } = args;
+  const status = args.status ?? "pending";
+  api.addFiles([asset.file]);
+  const mutationArgs = { api, asset, excalidraw, status };
+  return existingElement ? replaceMathElement(mutationArgs, existingElement) : appendMathElement(mutationArgs);
+}
+
+// src/react/mathjax-renderer.ts
+var MATHJAX_INPUT_EM = 16;
+var MATHJAX_INPUT_EX = 8;
+var MATHJAX_CONTAINER_WIDTH = 80 * MATHJAX_INPUT_EM;
+var DEFAULT_MATHJAX_SCRIPT_URL = "https://cdn.jsdelivr.net/npm/mathjax@4.1.3/tex-svg-nofont.js";
+var mathJaxReady = null;
+var getMathJaxGlobal = () => typeof window === "undefined" ? globalThis.MathJax : window.MathJax;
+async function waitForMathJaxRuntime() {
+  const startedAt = Date.now();
+  while (Date.now() - startedAt < 5e3) {
+    const runtime = getMathJaxGlobal();
+    if (runtime?.startup?.promise && typeof runtime.tex2svgPromise === "function") {
+      await runtime.startup.promise;
+      return runtime;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 25));
+  }
+  throw new Error("Math renderer failed to initialize");
+}
+function configureMathJax(target, existing) {
+  target.MathJax = {
+    ...existing ?? {},
+    options: { ...existing?.options, enableMenu: false },
+    startup: { ...existing?.startup, typeset: false },
+    svg: { fontCache: "none", ...existing?.svg }
+  };
+}
+function loadMathJaxScript() {
+  return new Promise((resolve, reject) => {
+    const existingScript = document.querySelector('script[data-chalk-mathjax="true"]');
+    if (existingScript) {
+      existingScript.addEventListener("load", () => resolve(), { once: true });
+      existingScript.addEventListener("error", () => reject(new Error("Math renderer failed to load")), { once: true });
+      return;
+    }
+    const script = document.createElement("script");
+    script.src = DEFAULT_MATHJAX_SCRIPT_URL;
+    script.async = true;
+    script.dataset.chalkMathjax = "true";
+    script.onload = () => resolve();
+    script.onerror = () => reject(new Error("Math renderer failed to load"));
+    document.head.appendChild(script);
+  });
+}
+async function initializeMathJax() {
+  if (typeof document === "undefined") throw new Error("Math rendering is only available in the browser");
+  const target = typeof window === "undefined" ? globalThis : window;
+  const existing = getMathJaxGlobal();
+  if (existing?.tex2svgPromise && existing.startup?.promise) {
+    await existing.startup.promise;
+    return existing;
+  }
+  configureMathJax(target, existing);
+  await loadMathJaxScript();
+  return waitForMathJaxRuntime();
+}
+async function loadMathJax() {
+  if (mathJaxReady) return mathJaxReady;
+  mathJaxReady = initializeMathJax();
+  return mathJaxReady;
+}
+var parseSvgLength = (value, unitScale) => {
+  if (!value) return null;
+  const numeric = Number.parseFloat(value);
+  if (!Number.isFinite(numeric)) return null;
+  return numeric * unitScale;
+};
+function getRenderedSvgSize(svg) {
+  const widthAttr = /<svg\b[^>]*\bwidth="([^"]+)"/u.exec(svg)?.[1] ?? null;
+  const heightAttr = /<svg\b[^>]*\bheight="([^"]+)"/u.exec(svg)?.[1] ?? null;
+  const viewBox = /<svg\b[^>]*\bviewBox="([^"]+)"/u.exec(svg)?.[1] ?? null;
+  const width = parseSvgLength(widthAttr, widthAttr?.endsWith("ex") ? MATHJAX_INPUT_EX : 1);
+  const height = parseSvgLength(heightAttr, heightAttr?.endsWith("ex") ? MATHJAX_INPUT_EX : 1);
+  if (width && height) {
+    return {
+      width: Math.max(64, Math.ceil(width + 24)),
+      height: Math.max(40, Math.ceil(height + 24))
+    };
+  }
+  const [, , viewBoxWidth, viewBoxHeight] = viewBox?.split(/\s+/u).map(Number) ?? [];
+  if (viewBoxWidth && viewBoxHeight && Number.isFinite(viewBoxWidth) && Number.isFinite(viewBoxHeight)) {
+    return {
+      width: Math.max(64, Math.ceil(viewBoxWidth / 40 + 24)),
+      height: Math.max(40, Math.ceil(viewBoxHeight / 40 + 24))
+    };
+  }
+  return { width: 240, height: 96 };
+}
+async function renderLatexToSvg(latex, displayMode = true) {
+  const runtime = await loadMathJax();
+  const node = await runtime.tex2svgPromise(latex, {
+    display: displayMode,
+    em: MATHJAX_INPUT_EM,
+    ex: MATHJAX_INPUT_EX,
+    containerWidth: MATHJAX_CONTAINER_WIDTH
+  });
+  const svgNode = runtime.startup.adaptor.tags(node, "svg")[0];
+  if (!svgNode) throw new Error("Math renderer did not produce SVG");
+  const svg = runtime.startup.adaptor.serializeXML(svgNode);
+  return {
+    svg,
+    ...getRenderedSvgSize(svg)
+  };
+}
+
+// src/react/WhiteboardCanvas.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DEFAULT_EXCALIDRAW_CSS = "https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0.18.1/dist/prod/index.css";
+var DEFAULT_LATEX = String.raw`E = mc^2`;
+var defaultClassNames = {
+  root: "",
+  toolbar: "",
+  toolbarButton: "",
+  loading: "",
+  loadingContent: "",
+  error: "",
+  mathOverlay: "",
+  mathDialog: "",
+  mathHeader: "",
+  mathTitle: "",
+  mathCloseButton: "",
+  mathBody: "",
+  mathTextarea: "",
+  mathError: "",
+  mathActions: "",
+  mathCancelButton: "",
+  mathSubmitButton: ""
+};
+function useWhiteboardCanvasConfiguration(props) {
+  const classNames = useMemo(() => ({ ...defaultClassNames, ...props.classNames }), [props.classNames]);
+  const canDraw = valueOr(props.collab?.canDraw, valueOr(props.canDraw, true));
+  const rootClassName = [classNames.root, valueOr(props.className, "")].filter(Boolean).join(" ");
+  return {
+    canDraw,
+    classNames,
+    excalidrawCssPath: valueOr(props.excalidrawCssPath, DEFAULT_EXCALIDRAW_CSS),
+    icons: valueOr(props.icons, {}),
+    isCollaborating: Boolean(props.collab),
+    isVisible: valueOr(props.isVisible, true),
+    rootClassName,
+    theme: valueOr(props.theme, "light")
+  };
+}
+function valueOr(value, fallback) {
+  return value === void 0 ? fallback : value;
+}
+function useExternalStylesheet(id, href) {
+  const [loaded, setLoaded] = useState2(false);
+  const [error, setError] = useState2(null);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const existing = document.getElementById(id);
+    if (existing || document.querySelector('link[href*="excalidraw"], style[data-href*="excalidraw"]')) {
+      setLoaded(true);
+      return;
+    }
+    const link = document.createElement("link");
+    link.id = id;
+    link.rel = "stylesheet";
+    link.href = href;
+    link.onload = () => setLoaded(true);
+    link.onerror = () => setError(`Failed to load ${href}`);
+    document.head.appendChild(link);
+    return () => {
+      link.onload = null;
+      link.onerror = null;
+    };
+  }, [href, id]);
+  return { error, loaded };
+}
+function useExcalidrawModule(onLoadError, setLoadError) {
+  const [excalidraw, setExcalidraw] = useState2(null);
+  useEffect(() => {
+    let mounted = true;
+    import("@excalidraw/excalidraw").then((module) => {
+      if (mounted) setExcalidraw(module);
+    }).catch((reason) => {
+      const error = reason instanceof Error ? reason : new Error("Failed to load whiteboard");
+      setLoadError(error.message);
+      onLoadError?.(error);
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [onLoadError, setLoadError]);
+  return excalidraw;
+}
+function useWhiteboardInitialData(theme, localParticipantColor) {
+  return useMemo(
+    () => ({
+      appState: {
+        viewBackgroundColor: theme === "dark" ? "#000000" : "#ffffff",
+        currentItemStrokeColor: localParticipantColor ?? "#4CB9FF",
+        theme
+      }
+    }),
+    [localParticipantColor, theme]
+  );
+}
+function useWhiteboardUiOptions(canDraw) {
+  return useMemo(
+    () => ({
+      canvasActions: {
+        changeViewBackgroundColor: false,
+        clearCanvas: false,
+        export: false,
+        loadScene: false,
+        saveAsImage: false,
+        saveToActiveFile: false,
+        toggleTheme: false
+      },
+      tools: { image: canDraw },
+      welcomeScreen: false
+    }),
+    [canDraw]
+  );
+}
+function useWhiteboardCollaboration(options) {
+  const apiRef = useRef(null);
+  const refs = useCollaborationRefs(options.collab, options.canDraw);
+  const initializeEngine = useCollaborationEngineLoader(refs, options.onLoadError, options.setLoadError);
+  const handleApiReady = useExcalidrawApiReady(apiRef, initializeEngine, options.onExcalidrawApiReady);
+  const handlers = useExcalidrawSceneHandlers(apiRef, refs.engineRef, options.onSelectedLatexChange);
+  useCollaborationCanDraw(refs.engineRef, options.canDraw);
+  useCollaborationDisposal(refs.engineRef, refs.isMountedRef);
+  useCollaborationInitialization(options.collab, apiRef, refs.engineRef, initializeEngine);
+  return { apiRef, handleApiReady, ...handlers };
+}
+function useCollaborationRefs(collab, canDraw) {
+  const canDrawRef = useRef(canDraw);
+  const collabOptionsRef = useRef(collab);
+  const enginePromiseRef = useRef(null);
+  const engineRef = useRef(null);
+  const isMountedRef = useRef(true);
+  canDrawRef.current = canDraw;
+  collabOptionsRef.current = collab;
+  return useMemo(() => ({ canDrawRef, collabOptionsRef, enginePromiseRef, engineRef, isMountedRef }), [canDrawRef, collabOptionsRef, enginePromiseRef, engineRef, isMountedRef]);
+}
+function useCollaborationEngineLoader(refs, onLoadError, setLoadError) {
+  return useCallback(
+    (api) => {
+      if (!refs.collabOptionsRef.current || refs.engineRef.current || refs.enginePromiseRef.current) return;
+      refs.enginePromiseRef.current = import("../engine-UMQR3O33.js").then(({ ExcalidrawCollabEngine }) => {
+        const collab = refs.collabOptionsRef.current;
+        if (!refs.isMountedRef.current || !collab || refs.engineRef.current) return;
+        refs.engineRef.current = new ExcalidrawCollabEngine({
+          excalidrawAPI: api,
+          canDraw: refs.canDrawRef.current,
+          submitUpdate: collab.submitUpdate,
+          sendCursor: collab.sendCursor,
+          requestSnapshot: collab.requestSnapshot,
+          clear: collab.clear,
+          fileTransfer: collab.fileTransfer,
+          initiateUpload: collab.initiateUpload,
+          finalizeUpload: collab.finalizeUpload,
+          presignDownload: collab.presignDownload,
+          subscribe: collab.subscribe,
+          onFileSyncStateChange: collab.onFileSyncStateChange,
+          onSubmissionError: collab.onSubmissionError
+        });
+      }).catch((reason) => {
+        if (!refs.isMountedRef.current) return;
+        const error = reason instanceof Error ? reason : new Error("Failed to load whiteboard collaboration");
+        setLoadError(error.message);
+        onLoadError?.(error);
+      }).finally(() => {
+        refs.enginePromiseRef.current = null;
+      });
+    },
+    [onLoadError, refs, setLoadError]
+  );
+}
+function useExcalidrawApiReady(apiRef, initializeEngine, onExcalidrawApiReady) {
+  const didReportApiRef = useRef(false);
+  return useCallback(
+    (api) => {
+      apiRef.current = api;
+      initializeEngine(api);
+      if (!didReportApiRef.current) {
+        didReportApiRef.current = true;
+        onExcalidrawApiReady?.(api);
+      }
+    },
+    [apiRef, initializeEngine, onExcalidrawApiReady]
+  );
+}
+function useExcalidrawSceneHandlers(apiRef, engineRef, onSelectedLatexChange) {
+  const handleChange = useCallback(
+    (elements, appState, files) => {
+      engineRef.current?.handleChange(elements, appState, files);
+      onSelectedLatexChange(selectedMathLatex(apiRef.current));
+    },
+    [apiRef, engineRef, onSelectedLatexChange]
+  );
+  const handlePointerUpdate = useCallback(
+    (payload) => {
+      engineRef.current?.handlePointerUpdate(payload);
+    },
+    [engineRef]
+  );
+  const syncScene = useCallback(() => {
+    const api = apiRef.current;
+    if (!api) return;
+    engineRef.current?.handleChange(api.getSceneElementsIncludingDeleted(), api.getAppState(), api.getFiles());
+  }, [apiRef, engineRef]);
+  return { handleChange, handlePointerUpdate, syncScene };
+}
+function selectedMathLatex(api) {
+  if (!api) return null;
+  const selected = getSelectedMathElement(api);
+  if (!selected) return null;
+  const math = getChalkMathData(selected);
+  return math ? math.latex : null;
+}
+function useCollaborationCanDraw(engineRef, canDraw) {
+  useEffect(() => {
+    engineRef.current?.setCanDraw(canDraw);
+  }, [canDraw, engineRef]);
+}
+function useCollaborationDisposal(engineRef, isMountedRef) {
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      engineRef.current?.dispose();
+      engineRef.current = null;
+    };
+  }, [engineRef, isMountedRef]);
+}
+function useCollaborationInitialization(collab, apiRef, engineRef, initializeEngine) {
+  useEffect(() => {
+    if (!collab) {
+      engineRef.current?.dispose();
+      engineRef.current = null;
+      return;
+    }
+    if (apiRef.current) initializeEngine(apiRef.current);
+  }, [apiRef, collab, engineRef, initializeEngine]);
+}
+function useWhiteboardMath({ apiRef, canDraw, excalidraw, isCollaborating, selectedLatex, setSelectedLatex, syncScene }) {
+  const [isMathOpen, setIsMathOpen] = useState2(false);
+  const closeMath = useCallback(() => setIsMathOpen(false), []);
+  const openMath = useCallback(() => {
+    if (canDraw) setIsMathOpen(true);
+  }, [canDraw]);
+  const handleSubmitMath = useCallback(
+    async (latex) => {
+      const api = apiRef.current;
+      if (!api || !excalidraw) throw new Error("Whiteboard is still loading");
+      const rendered = await renderLatexToSvg(latex, true);
+      appendOrReplaceMathElement({
+        api,
+        excalidraw,
+        asset: createMathImageAsset({ ...rendered, latex, displayMode: true }),
+        existingElement: getSelectedMathElement(api),
+        status: isCollaborating ? "pending" : "saved"
+      });
+      setSelectedLatex(latex);
+      closeMath();
+      syncScene();
+    },
+    [apiRef, closeMath, excalidraw, isCollaborating, setSelectedLatex, syncScene]
+  );
+  return { closeMath, handleSubmitMath, isMathOpen, openMath, selectedLatex };
+}
+function useWhiteboardCanvasState(props) {
+  const configuration = useWhiteboardCanvasConfiguration(props);
+  const [loadError, setLoadError] = useState2(null);
+  const [selectedLatex, setSelectedLatex] = useState2(null);
+  const excalidraw = useExcalidrawModule(props.onLoadError, setLoadError);
+  const stylesheet = useExternalStylesheet("chalk-excalidraw-styles", configuration.excalidrawCssPath);
+  const collaboration = useWhiteboardCollaboration({
+    canDraw: configuration.canDraw,
+    collab: props.collab,
+    onExcalidrawApiReady: props.onExcalidrawApiReady,
+    onLoadError: props.onLoadError,
+    onSelectedLatexChange: setSelectedLatex,
+    setLoadError
+  });
+  const math = useWhiteboardMath({
+    apiRef: collaboration.apiRef,
+    canDraw: configuration.canDraw,
+    excalidraw,
+    isCollaborating: Boolean(props.collab),
+    selectedLatex,
+    setSelectedLatex,
+    syncScene: collaboration.syncScene
+  });
+  const initialData = useWhiteboardInitialData(configuration.theme, props.localParticipantColor);
+  const uiOptions = useWhiteboardUiOptions(configuration.canDraw);
+  const resolvedLoadError = loadError ?? stylesheet.error;
+  return {
+    collaboration,
+    configuration,
+    excalidraw,
+    initialData,
+    isReady: Boolean(excalidraw && stylesheet.loaded && !resolvedLoadError),
+    math,
+    resolvedLoadError,
+    uiOptions
+  };
+}
+function WhiteboardCanvasView({ state }) {
+  const { collaboration, configuration, excalidraw, initialData, isReady, math, resolvedLoadError, uiOptions } = state;
+  return /* @__PURE__ */ jsxs2("div", { className: configuration.rootClassName, hidden: !configuration.isVisible, children: [
+    /* @__PURE__ */ jsx2(WhiteboardMathToolbar, { canDraw: configuration.canDraw, classNames: configuration.classNames, isReady, onOpenMath: math.openMath, selectedLatex: math.selectedLatex }),
+    /* @__PURE__ */ jsx2(WhiteboardCanvasStatus, { classNames: configuration.classNames, error: resolvedLoadError, icons: configuration.icons, isReady }),
+    excalidraw && /* @__PURE__ */ jsx2(
+      WhiteboardScene,
+      {
+        canDraw: configuration.canDraw,
+        collab: configuration.isCollaborating,
+        excalidraw,
+        initialData,
+        onApiReady: collaboration.handleApiReady,
+        onChange: collaboration.handleChange,
+        onPointerUpdate: collaboration.handlePointerUpdate,
+        theme: configuration.theme,
+        uiOptions
+      }
+    ),
+    math.isMathOpen && /* @__PURE__ */ jsx2(MathEditor, { initialLatex: math.selectedLatex ?? DEFAULT_LATEX, isEditing: Boolean(math.selectedLatex), classNames: configuration.classNames, icons: configuration.icons, onClose: math.closeMath, onSubmit: math.handleSubmitMath })
+  ] });
+}
+function WhiteboardMathToolbar({ canDraw, classNames, isReady, onOpenMath, selectedLatex }) {
+  if (!isReady) return null;
+  return /* @__PURE__ */ jsx2("div", { className: classNames.toolbar, style: { position: "absolute", top: 12, left: 12, zIndex: 20, display: "flex" }, children: /* @__PURE__ */ jsx2("button", { type: "button", onClick: onOpenMath, disabled: !canDraw, className: classNames.toolbarButton, "aria-label": selectedLatex ? "Edit math equation" : "Insert math equation", title: selectedLatex ? "Edit equation" : "Math", children: "\u2211" }) });
+}
+function WhiteboardCanvasStatus({ classNames, error, icons, isReady }) {
+  if (error) return /* @__PURE__ */ jsx2(WhiteboardLoadError, { className: classNames.error, error });
+  if (isReady) return null;
+  return /* @__PURE__ */ jsx2(WhiteboardLoading, { classNames, loadingIcon: icons.loading });
+}
+function WhiteboardLoading({ classNames, loadingIcon }) {
+  return /* @__PURE__ */ jsx2("div", { className: classNames.loading, style: { position: "absolute", inset: 0, zIndex: 30, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxs2("div", { className: classNames.loadingContent, children: [
+    loadingIcon,
+    "Loading whiteboard..."
+  ] }) });
+}
+function WhiteboardLoadError({ className, error }) {
+  return /* @__PURE__ */ jsx2("div", { className, style: { position: "absolute", inset: 0, zIndex: 30, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx2("div", { children: error }) });
+}
+function WhiteboardScene({
+  canDraw,
+  collab,
+  excalidraw,
+  initialData,
+  onApiReady,
+  onChange,
+  onPointerUpdate,
+  theme,
+  uiOptions
+}) {
+  return /* @__PURE__ */ jsx2(excalidraw.Excalidraw, { excalidrawAPI: onApiReady, initialData, isCollaborating: collab, name: "Chalk whiteboard", onChange, onPointerUpdate, renderTopRightUI: () => null, theme, UIOptions: uiOptions, viewModeEnabled: !canDraw });
+}
+function WhiteboardCanvasBase(props) {
+  return /* @__PURE__ */ jsx2(WhiteboardCanvasView, { state: useWhiteboardCanvasState(props) });
+}
+var WhiteboardCanvas = memo(WhiteboardCanvasBase);
+WhiteboardCanvas.displayName = "WhiteboardCanvas";
+export {
+  CHALK_MATH_CUSTOM_DATA_KEY,
+  CHALK_MATH_RENDERER,
+  WhiteboardCanvas,
+  appendOrReplaceMathElement,
+  createMathFileId,
+  createMathImageAsset,
+  getChalkMathData,
+  getInsertionPoint,
+  getRenderedSvgSize,
+  getSelectedMathElement,
+  isChalkMathElement,
+  renderLatexToSvg,
+  svgToDataUrl
+};

package/dist/react/math-elements.d.ts

@@ -0,0 +1,40 @@
+import type { BinaryFileData, DataURL, ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
+import type { ExcalidrawElement, ExcalidrawImageElement, FileId, OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
+export declare const CHALK_MATH_CUSTOM_DATA_KEY = "chalk";
+export declare const CHALK_MATH_RENDERER = "mathjax-svg";
+export interface ChalkMathCustomData {
+    kind: "math";
+    latex: string;
+    renderer: typeof CHALK_MATH_RENDERER;
+    version: 1;
+    displayMode: boolean;
+}
+export interface MathImageAsset {
+    file: BinaryFileData;
+    width: number;
+    height: number;
+    customData: Record<string, unknown>;
+}
+export declare const svgToDataUrl: (svg: string) => DataURL;
+export declare const createMathFileId: () => FileId;
+export declare function createMathImageAsset(args: {
+    svg: string;
+    width: number;
+    height: number;
+    latex: string;
+    displayMode: boolean;
+}): MathImageAsset;
+export declare function getChalkMathData(element: ExcalidrawElement | null | undefined): ChalkMathCustomData | null;
+export declare function isChalkMathElement(element: ExcalidrawElement | null | undefined): element is ExcalidrawImageElement;
+export declare function getSelectedMathElement(api: ExcalidrawImperativeAPI): ExcalidrawImageElement | null;
+export declare function getInsertionPoint(api: ExcalidrawImperativeAPI, width: number, height: number): {
+    x: number;
+    y: number;
+};
+export declare function appendOrReplaceMathElement(args: {
+    api: ExcalidrawImperativeAPI;
+    excalidraw: Pick<typeof import("@excalidraw/excalidraw"), "CaptureUpdateAction" | "convertToExcalidrawElements" | "newElementWith">;
+    asset: MathImageAsset;
+    existingElement?: ExcalidrawImageElement | null;
+    status?: ExcalidrawImageElement["status"];
+}): OrderedExcalidrawElement;