@haklex/rich-ext-excalidraw 0.0.82 → 0.0.84

package/dist/ExcalidrawNode-DEcONli3.js

@@ -0,0 +1,480 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useColorScheme } from "@haklex/rich-editor";
+import { presentDialog, ViewportGate } from "@haklex/rich-editor-ui";
+import { usePortalTheme } from "@haklex/rich-style-token";
+import { ZoomIn, ZoomOut, ScanSearch, Maximize2, X } from "lucide-react";
+import { createContext, use, useMemo, useState, useEffect, useRef, useCallback, Component, lazy, Suspense, createElement } from "react";
+import { DecoratorNode } from "lexical";
+const ExcalidrawConfigContext = createContext({});
+function ExcalidrawConfigProvider({
+  apiUrl,
+  saveSnapshot,
+  children
+}) {
+  const value = useMemo(
+    () => ({ apiUrl, saveSnapshot }),
+    [apiUrl, saveSnapshot]
+  );
+  return /* @__PURE__ */ jsx(ExcalidrawConfigContext.Provider, { value, children });
+}
+function useExcalidrawConfig() {
+  return use(ExcalidrawConfigContext);
+}
+const readonlyUIOptions = {
+  canvasActions: {
+    toggleTheme: false,
+    export: false,
+    saveAsImage: false,
+    loadScene: false,
+    changeViewBackgroundColor: false
+  }
+};
+var excalidrawStaticContainer = "_1c3wdzl0";
+var excalidrawEditorContainer = "_1c3wdzl1";
+var excalidrawPlaceholder = "_1c3wdzl2";
+var excalidrawLoading = "_1c3wdzl3";
+var excalidrawError = "_1c3wdzl5";
+var excalidrawActionGroup = "_1c3wdzl6";
+var excalidrawActionButton = "_1c3wdzl7";
+var excalidrawFullscreenPopup = "_1c3wdzl8";
+var excalidrawDialogHeader = "_1c3wdzl9";
+var excalidrawDialogHeaderTitle = "_1c3wdzla";
+var excalidrawStatusDot = "_1c3wdzlb";
+var excalidrawDialogTitle = "_1c3wdzlc";
+var excalidrawDialogMeta = "_1c3wdzld";
+var excalidrawHeaderActions = "_1c3wdzle";
+var excalidrawHeaderClose = "_1c3wdzlf";
+var excalidrawActionBarBtn = "_1c3wdzlg";
+var excalidrawActionBarSep = "_1c3wdzlh";
+var excalidrawActionBarUrl = "_1c3wdzli";
+var excalidrawDialogCanvas = "_1c3wdzlj";
+var excalidrawConfirmActions = "_1c3wdzlk";
+var excalidrawConfirmBtn = "_1c3wdzll";
+var excalidrawConfirmBtnPrimary = "_1c3wdzlm";
+var excalidrawConfirmBtnDanger = "_1c3wdzln";
+var excalidrawEditOverlay = "_1c3wdzlo";
+var excalidrawEditLabel = "_1c3wdzlp";
+function parseSnapshot(raw) {
+  if (!raw || !raw.trim()) return null;
+  try {
+    const json = JSON.parse(raw);
+    if (json && typeof json === "object") return { type: "inline", data: json };
+  } catch {
+  }
+  const lines = raw.split("\n");
+  const firstLine = lines[0].trim();
+  if (!firstLine.startsWith("http") && !firstLine.startsWith("blob:") && !firstLine.startsWith("ref:"))
+    return null;
+  const remaining = lines.slice(1).join("\n").trim();
+  if (remaining) {
+    try {
+      const delta = JSON.parse(remaining);
+      if (delta && typeof delta === "object") return { type: "delta", baseUrl: firstLine, delta };
+    } catch {
+    }
+  }
+  return { type: "remote", url: firstLine };
+}
+function serializeSnapshot(snapshot) {
+  switch (snapshot.type) {
+    case "inline": {
+      return JSON.stringify(snapshot.data);
+    }
+    case "remote": {
+      return snapshot.url;
+    }
+    case "delta": {
+      return [snapshot.baseUrl, JSON.stringify(snapshot.delta)].join("\n");
+    }
+  }
+}
+function resolveUrl(url, apiUrl) {
+  const refLine = url;
+  if (url.startsWith("http") || url.startsWith("blob:")) {
+    return { fetchUrl: url, refLine };
+  }
+  if (url.startsWith("ref:") && apiUrl) {
+    return { fetchUrl: `${apiUrl}/objects/${url.slice(4)}`, refLine };
+  }
+  return {
+    error: url.startsWith("ref:") ? "Missing apiUrl for ref resolution" : "Unrecognized snapshot format"
+  };
+}
+function typedToParsed(typed, apiUrl) {
+  switch (typed.type) {
+    case "inline": {
+      return { type: "inline", snapshot: typed.data };
+    }
+    case "remote": {
+      const result = resolveUrl(typed.url, apiUrl);
+      if ("error" in result) return { type: "error", error: result.error };
+      return {
+        type: "remote",
+        fetchUrl: result.fetchUrl,
+        refLine: result.refLine
+      };
+    }
+    case "delta": {
+      const result = resolveUrl(typed.baseUrl, apiUrl);
+      if ("error" in result) return { type: "error", error: result.error };
+      return {
+        type: "incremental",
+        fetchUrl: result.fetchUrl,
+        refLine: result.refLine,
+        delta: typed.delta
+      };
+    }
+  }
+}
+function stringToParsed(data, apiUrl) {
+  const typed = parseSnapshot(data);
+  if (!typed) return { type: "empty" };
+  return typedToParsed(typed, apiUrl);
+}
+function useExcalidrawData(data) {
+  const { apiUrl } = useExcalidrawConfig();
+  const parsed = useMemo(() => {
+    if (data === null || data === void 0) return { type: "empty" };
+    if (typeof data === "string") return stringToParsed(data, apiUrl);
+    return typedToParsed(data, apiUrl);
+  }, [data, apiUrl]);
+  const [remoteSnapshot, setRemoteSnapshot] = useState();
+  const [baseData, setBaseData] = useState();
+  const [loading, setLoading] = useState(parsed.type === "remote" || parsed.type === "incremental");
+  const [error, setError] = useState("");
+  useEffect(() => {
+    if (parsed.type !== "remote" && parsed.type !== "incremental") return;
+    const { fetchUrl } = parsed;
+    const delta = parsed.type === "incremental" ? parsed.delta : void 0;
+    let cancelled = false;
+    setLoading(true);
+    setError("");
+    fetch(fetchUrl).then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return res.json();
+    }).then(async (json) => {
+      if (cancelled) return;
+      setBaseData(json);
+      const deltaKeys = delta ? Object.keys(delta) : [];
+      if (deltaKeys.length > 0) {
+        const { patch } = await import("jsondiffpatch");
+        if (cancelled) return;
+        const patched = patch(structuredClone(json), delta);
+        setRemoteSnapshot(patched);
+      } else {
+        setRemoteSnapshot(json);
+      }
+      setLoading(false);
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err.message : "Failed to load");
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [parsed]);
+  if (parsed.type === "inline") {
+    return { snapshot: parsed.snapshot, loading: false, error: "" };
+  }
+  if (parsed.type === "remote" || parsed.type === "incremental") {
+    return {
+      snapshot: remoteSnapshot,
+      loading,
+      error,
+      baseRef: parsed.refLine,
+      baseData
+    };
+  }
+  if (parsed.type === "error") {
+    return { snapshot: void 0, loading: false, error: parsed.error };
+  }
+  return { snapshot: void 0, loading: false, error: "" };
+}
+const ExcalidrawDisplayRenderer = ({ snapshot }) => {
+  const theme = useColorScheme();
+  return /* @__PURE__ */ jsx(ExcalidrawStaticCanvas, { snapshot, theme });
+};
+const ExcalidrawExpandContent = ({ dismiss, ExcalidrawComponent, data, theme }) => {
+  const apiRef = useRef(null);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: excalidrawDialogHeader, children: [
+      /* @__PURE__ */ jsxs("div", { className: excalidrawDialogHeaderTitle, children: [
+        /* @__PURE__ */ jsx("span", { className: excalidrawDialogTitle, children: "Whiteboard" }),
+        /* @__PURE__ */ jsx("span", { className: excalidrawDialogMeta, children: "excalidraw" })
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: excalidrawHeaderClose, type: "button", onClick: dismiss, children: /* @__PURE__ */ jsx(X, { size: 18 }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: excalidrawDialogCanvas, children: /* @__PURE__ */ jsx(
+      ExcalidrawComponent,
+      {
+        viewModeEnabled: true,
+        zenModeEnabled: true,
+        UIOptions: readonlyUIOptions,
+        initialData: data,
+        theme,
+        excalidrawAPI: (api) => {
+          apiRef.current = api;
+          setTimeout(() => api.scrollToContent(), 100);
+        }
+      }
+    ) })
+  ] });
+};
+const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
+  const { snapshot: data, loading: dataLoading, error: dataError } = useExcalidrawData(snapshot);
+  const [ExcalidrawComponent, setExcalidrawComponent] = useState(null);
+  const [libLoading, setLibLoading] = useState(true);
+  const apiRef = useRef(null);
+  const { className: portalClassName } = usePortalTheme();
+  useEffect(() => {
+    import("@excalidraw/excalidraw").then((mod) => {
+      const Comp = mod.Excalidraw;
+      if (Comp) setExcalidrawComponent(() => Comp);
+      setLibLoading(false);
+    }).catch((error) => {
+      console.error("Error loading excalidraw", error);
+      setLibLoading(false);
+    });
+  }, []);
+  const handleExpand = useCallback(() => {
+    if (!ExcalidrawComponent || !data) return;
+    presentDialog({
+      content: ({ dismiss }) => /* @__PURE__ */ jsx(
+        ExcalidrawExpandContent,
+        {
+          ExcalidrawComponent,
+          data,
+          dismiss,
+          theme
+        }
+      ),
+      className: excalidrawFullscreenPopup,
+      portalClassName,
+      theme,
+      showCloseButton: false,
+      clickOutsideToDismiss: true
+    });
+  }, [ExcalidrawComponent, data, theme, portalClassName]);
+  const loading = dataLoading || libLoading;
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: excalidrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: excalidrawLoading, children: "Loading excalidraw..." }) });
+  }
+  if (dataError || !data) {
+    return /* @__PURE__ */ jsx("div", { className: excalidrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: excalidrawError, children: dataError || "No data" }) });
+  }
+  if (!ExcalidrawComponent) {
+    return /* @__PURE__ */ jsx("div", { className: excalidrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: excalidrawError, children: "Failed to load excalidraw" }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      suppressHydrationWarning: true,
+      className: excalidrawStaticContainer,
+      "data-color-scheme": theme,
+      "data-theme": theme,
+      children: [
+        /* @__PURE__ */ jsx(
+          ExcalidrawErrorBoundary,
+          {
+            fallback: /* @__PURE__ */ jsx("div", { className: excalidrawError, children: "Failed to render excalidraw" }),
+            children: /* @__PURE__ */ jsx(
+              ExcalidrawComponent,
+              {
+                viewModeEnabled: true,
+                zenModeEnabled: true,
+                UIOptions: readonlyUIOptions,
+                initialData: data,
+                theme,
+                excalidrawAPI: (api) => {
+                  apiRef.current = api;
+                  setTimeout(() => api.scrollToContent(), 100);
+                }
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: excalidrawActionGroup, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: excalidrawActionButton,
+              title: "Zoom In",
+              type: "button",
+              onClick: () => {
+                const api = apiRef.current;
+                if (!api) return;
+                const zoom = api.getAppState().zoom.value;
+                api.updateScene({ appState: { zoom: { value: zoom * 1.25 } } });
+              },
+              children: /* @__PURE__ */ jsx(ZoomIn, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: excalidrawActionButton,
+              title: "Zoom Out",
+              type: "button",
+              onClick: () => {
+                const api = apiRef.current;
+                if (!api) return;
+                const zoom = api.getAppState().zoom.value;
+                api.updateScene({ appState: { zoom: { value: zoom / 1.25 } } });
+              },
+              children: /* @__PURE__ */ jsx(ZoomOut, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: excalidrawActionButton,
+              title: "Fit to Content",
+              type: "button",
+              onClick: () => apiRef.current?.scrollToContent(),
+              children: /* @__PURE__ */ jsx(ScanSearch, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: excalidrawActionButton,
+              title: "Expand",
+              type: "button",
+              onClick: handleExpand,
+              children: /* @__PURE__ */ jsx(Maximize2, { size: 20 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+class ExcalidrawErrorBoundary extends Component {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "state", { hasError: false });
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  render() {
+    return this.state.hasError ? this.props.fallback : this.props.children;
+  }
+}
+const ExcalidrawDisplayRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  ExcalidrawDisplayRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+const LazyDisplayRenderer = lazy(
+  () => Promise.resolve().then(() => ExcalidrawDisplayRenderer$1).then((m) => ({
+    default: m.ExcalidrawDisplayRenderer
+  }))
+);
+const ExcalidrawPlaceholder = ({ snapshot }) => {
+  let label = "Excalidraw Whiteboard";
+  try {
+    const data = JSON.parse(snapshot);
+    if (data && typeof data === "object") {
+      const elementCount = Array.isArray(data.elements) ? data.elements.length : 0;
+      if (elementCount > 0) {
+        label = `Excalidraw Whiteboard (${elementCount} elements)`;
+      }
+    }
+  } catch {
+  }
+  return /* @__PURE__ */ jsx("div", { "aria-label": label, className: excalidrawPlaceholder, children: /* @__PURE__ */ jsx("span", { children: label }) });
+};
+const ExcalidrawSSRRenderer = ({ snapshot }) => {
+  return /* @__PURE__ */ jsx(ViewportGate, { fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }), children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }), children: /* @__PURE__ */ jsx(LazyDisplayRenderer, { snapshot }) }) });
+};
+class ExcalidrawNode extends DecoratorNode {
+  constructor(snapshot, key) {
+    super(key);
+    __publicField(this, "__snapshot");
+    this.__snapshot = snapshot;
+  }
+  static getType() {
+    return "excalidraw";
+  }
+  static clone(node) {
+    return new ExcalidrawNode(node.__snapshot, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-excalidraw-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createExcalidrawNode(serializedNode.snapshot);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "excalidraw",
+      snapshot: this.__snapshot,
+      version: 1
+    };
+  }
+  getSnapshot() {
+    return this.__snapshot;
+  }
+  setSnapshot(snapshot) {
+    const writable = this.getWritable();
+    writable.__snapshot = snapshot;
+  }
+  decorate(_editor, _config) {
+    return createElement(ExcalidrawSSRRenderer, {
+      snapshot: this.__snapshot
+    });
+  }
+}
+function $createExcalidrawNode(snapshot) {
+  return new ExcalidrawNode(snapshot);
+}
+function $isExcalidrawNode(node) {
+  return node instanceof ExcalidrawNode;
+}
+export {
+  $createExcalidrawNode as $,
+  excalidrawActionBarUrl as A,
+  excalidrawHeaderClose as B,
+  excalidrawDialogCanvas as C,
+  ExcalidrawConfigProvider as E,
+  $isExcalidrawNode as a,
+  ExcalidrawDisplayRenderer as b,
+  ExcalidrawNode as c,
+  ExcalidrawSSRRenderer as d,
+  useExcalidrawData as e,
+  excalidrawFullscreenPopup as f,
+  excalidrawEditorContainer as g,
+  excalidrawLoading as h,
+  excalidrawError as i,
+  excalidrawEditOverlay as j,
+  excalidrawEditLabel as k,
+  excalidrawConfirmActions as l,
+  excalidrawConfirmBtn as m,
+  excalidrawConfirmBtnDanger as n,
+  excalidrawConfirmBtnPrimary as o,
+  parseSnapshot as p,
+  excalidrawDialogHeader as q,
+  readonlyUIOptions as r,
+  serializeSnapshot as s,
+  excalidrawStatusDot as t,
+  useExcalidrawConfig as u,
+  excalidrawDialogTitle as v,
+  excalidrawDialogMeta as w,
+  excalidrawHeaderActions as x,
+  excalidrawActionBarSep as y,
+  excalidrawActionBarBtn as z
+};