@haklex/rich-ext-excalidraw 0.0.64 → 0.0.66

package/README.md

@@ -0,0 +1,147 @@
+# @haklex/rich-ext-excalidraw
+
+Excalidraw whiteboard integration for the Haklex rich editor.
+
+## Installation
+
+```bash
+pnpm add @haklex/rich-ext-excalidraw
+```
+
+## Peer Dependencies
+
+| Package | Version |
+| --- | --- |
+| `@lexical/react` | `^0.41.0` |
+| `lexical` | `^0.41.0` |
+| `lucide-react` | `^0.574.0` |
+| `react` | `>= 19` |
+| `react-dom` | `>= 19` |
+
+## Usage
+
+### Register nodes in your editor config
+
+```ts
+import { ExcalidrawEditNode } from '@haklex/rich-ext-excalidraw'
+
+const editorConfig = {
+  nodes: [ExcalidrawEditNode],
+}
+```
+
+For static/read-only rendering:
+
+```ts
+import { ExcalidrawNode } from '@haklex/rich-ext-excalidraw/static'
+
+const staticConfig = {
+  nodes: [ExcalidrawNode],
+}
+```
+
+### Use the Excalidraw plugin
+
+```tsx
+import { ExcalidrawPlugin } from '@haklex/rich-ext-excalidraw'
+
+function EditorPlugins() {
+  return <ExcalidrawPlugin />
+}
+```
+
+### Insert an Excalidraw block programmatically
+
+```ts
+import { INSERT_EXCALIDRAW_COMMAND } from '@haklex/rich-ext-excalidraw'
+
+editor.dispatchCommand(INSERT_EXCALIDRAW_COMMAND, undefined)
+```
+
+### Configure Excalidraw behavior
+
+```tsx
+import { ExcalidrawConfigProvider } from '@haklex/rich-ext-excalidraw'
+import type { ExcalidrawConfig } from '@haklex/rich-ext-excalidraw'
+
+const config: ExcalidrawConfig = {
+  // your Excalidraw configuration
+}
+
+function App() {
+  return (
+    <ExcalidrawConfigProvider value={config}>
+      <Editor />
+    </ExcalidrawConfigProvider>
+  )
+}
+```
+
+### Use renderers
+
+```tsx
+import { ExcalidrawEditRenderer } from '@haklex/rich-ext-excalidraw'
+import { ExcalidrawDisplayRenderer, ExcalidrawSSRRenderer } from '@haklex/rich-ext-excalidraw/static'
+```
+
+### Snapshot utilities
+
+```ts
+import { parseSnapshot, serializeSnapshot } from '@haklex/rich-ext-excalidraw'
+```
+
+### Import styles
+
+```ts
+import '@haklex/rich-ext-excalidraw/style.css'
+```
+
+## Exports
+
+### Nodes
+
+- `ExcalidrawNode` -- static (read-only) node
+- `ExcalidrawEditNode` -- edit node with full Excalidraw editor
+- `$createExcalidrawNode()` / `$isExcalidrawNode()` -- Lexical helpers
+
+### Renderers
+
+- `ExcalidrawDisplayRenderer` -- static display renderer
+- `ExcalidrawEditRenderer` -- interactive edit renderer
+- `ExcalidrawSSRRenderer` -- server-side rendering renderer
+
+### Plugin
+
+- `ExcalidrawPlugin` -- editor plugin for Excalidraw block insertion
+- `INSERT_EXCALIDRAW_COMMAND` -- Lexical command for programmatic insertion
+
+### Context
+
+- `ExcalidrawConfigProvider` -- context provider for Excalidraw configuration
+- `useExcalidrawConfig` -- hook to access Excalidraw config context
+
+### Utilities
+
+- `parseSnapshot` -- deserialize an Excalidraw snapshot
+- `serializeSnapshot` -- serialize an Excalidraw snapshot
+
+### Types
+
+- `ExcalidrawConfig` -- configuration type
+- `ExcalidrawSnapshot` -- snapshot data type
+
+### Sub-path Exports
+
+| Path | Description |
+| --- | --- |
+| `@haklex/rich-ext-excalidraw` | Full exports (edit + static) |
+| `@haklex/rich-ext-excalidraw/static` | Static-only (no Excalidraw editor deps) |
+| `@haklex/rich-ext-excalidraw/style.css` | Stylesheet |
+
+## Part of Haklex
+
+This package is part of the [Haklex](../../README.md) rich editor ecosystem.
+
+## License
+
+MIT

package/dist/ExcalidrawDisplayRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExcalidrawDisplayRenderer.d.ts","sourceRoot":"","sources":["../src/ExcalidrawDisplayRenderer.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAiC,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAA;AAO9E,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,6BAA6B,CAKvE,CAAA"}
+{"version":3,"file":"ExcalidrawDisplayRenderer.d.ts","sourceRoot":"","sources":["../src/ExcalidrawDisplayRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAiC,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAC;AAO/E,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,yBAAyB,EAAE,EAAE,CAAC,6BAA6B,CAGvE,CAAC"}

package/dist/ExcalidrawEditNode.d.ts

@@ -1,4 +1,4 @@
-import { CommandItemConfig } from '@haklex/rich-editor';
+import { CommandItemConfig } from '@haklex/rich-editor/commands';
 import { EditorConfig, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
 import { ReactElement } from 'react';
 import { ExcalidrawNode, SerializedExcalidrawNode } from './ExcalidrawNode';

package/dist/ExcalidrawEditNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExcalidrawEditNode.d.ts","sourceRoot":"","sources":["../src/ExcalidrawEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAGhF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAGzC,OAAO,EAAE,cAAc,EAAE,KAAK,wBAAwB,EAAE,MAAM,kBAAkB,CAAA;AAUhF,qBAAa,kBAAmB,SAAQ,cAAc;IACpD,MAAM,CAAC,YAAY,EAAE,iBAAiB,EAAE,CAevC;IAED,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB;gBAI9C,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAI3C,MAAM,CAAC,UAAU,CACf,cAAc,EAAE,wBAAwB,GACvC,kBAAkB;IAIrB,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAG,YAAY;CAqCpE;AAED,wBAAgB,yBAAyB,CACvC,QAAQ,EAAE,MAAM,GACf,kBAAkB,CAEpB;AAED,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,kBAAkB,CAE5B"}
+{"version":3,"file":"ExcalidrawEditNode.d.ts","sourceRoot":"","sources":["../src/ExcalidrawEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEtE,OAAO,KAAK,EAAE,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAGjF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,EAAE,cAAc,EAAE,KAAK,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AAUjF,qBAAa,kBAAmB,SAAQ,cAAc;IACpD,MAAM,CAAC,YAAY,EAAE,iBAAiB,EAAE,CAetC;IAEF,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,kBAAkB,GAAG,kBAAkB;gBAI9C,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAI3C,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,wBAAwB,GAAG,kBAAkB;IAI/E,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,MAAM,EAAE,YAAY,GAAG,YAAY;CAqCpE;AAED,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE,MAAM,GAAG,kBAAkB,CAE9E;AAED,wBAAgB,qBAAqB,CACnC,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,kBAAkB,CAE5B"}

package/dist/ExcalidrawEditRenderer.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { ExcalidrawSnapshot } from './types';
 export interface ExcalidrawEditRendererProps {
-    snapshot: ExcalidrawSnapshot | null;
     onSnapshotChange: (snapshot: ExcalidrawSnapshot) => void;
+    snapshot: ExcalidrawSnapshot | null;
 }
 export declare const ExcalidrawEditRenderer: FC<ExcalidrawEditRendererProps>;
 //# sourceMappingURL=ExcalidrawEditRenderer.d.ts.map

package/dist/ExcalidrawEditRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExcalidrawEditRenderer.d.ts","sourceRoot":"","sources":["../src/ExcalidrawEditRenderer.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAA;AAM9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD,MAAM,WAAW,2BAA2B;IAC1C,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACnC,gBAAgB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAA;CACzD;AA2aD,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CAiIlE,CAAA"}
+{"version":3,"file":"ExcalidrawEditRenderer.d.ts","sourceRoot":"","sources":["../src/ExcalidrawEditRenderer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAiB,EAAE,EAAE,MAAM,OAAO,CAAC;AAM/C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,MAAM,WAAW,2BAA2B;IAC1C,gBAAgB,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,kBAAkB,GAAG,IAAI,CAAC;CACrC;AAqZD,eAAO,MAAM,sBAAsB,EAAE,EAAE,CAAC,2BAA2B,CA0HlE,CAAC"}

package/dist/{ExcalidrawNode-BnvRq6SZ.js → ExcalidrawNode-DEcONli3.js}

@@ -72,8 +72,7 @@ function parseSnapshot(raw) {
   if (remaining) {
     try {
       const delta = JSON.parse(remaining);
-      if (delta && typeof delta === "object")
-        return { type: "delta", baseUrl: firstLine, delta };
+      if (delta && typeof delta === "object") return { type: "delta", baseUrl: firstLine, delta };
     } catch {
     }
   }
@@ -81,12 +80,15 @@ function parseSnapshot(raw) {
 }
 function serializeSnapshot(snapshot) {
   switch (snapshot.type) {
-    case "inline":
+    case "inline": {
       return JSON.stringify(snapshot.data);
-    case "remote":
+    }
+    case "remote": {
       return snapshot.url;
-    case "delta":
+    }
+    case "delta": {
       return [snapshot.baseUrl, JSON.stringify(snapshot.delta)].join("\n");
+    }
   }
 }
 function resolveUrl(url, apiUrl) {
@@ -103,8 +105,9 @@ function resolveUrl(url, apiUrl) {
 }
 function typedToParsed(typed, apiUrl) {
   switch (typed.type) {
-    case "inline":
+    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 };
@@ -140,9 +143,7 @@ function useExcalidrawData(data) {
   }, [data, apiUrl]);
   const [remoteSnapshot, setRemoteSnapshot] = useState();
   const [baseData, setBaseData] = useState();
-  const [loading, setLoading] = useState(
-    parsed.type === "remote" || parsed.type === "incremental"
-  );
+  const [loading, setLoading] = useState(parsed.type === "remote" || parsed.type === "incremental");
   const [error, setError] = useState("");
   useEffect(() => {
     if (parsed.type !== "remote" && parsed.type !== "incremental") return;
@@ -194,9 +195,7 @@ function useExcalidrawData(data) {
   }
   return { snapshot: void 0, loading: false, error: "" };
 }
-const ExcalidrawDisplayRenderer = ({
-  snapshot
-}) => {
+const ExcalidrawDisplayRenderer = ({ snapshot }) => {
   const theme = useColorScheme();
   return /* @__PURE__ */ jsx(ExcalidrawStaticCanvas, { snapshot, theme });
 };
@@ -208,24 +207,16 @@ const ExcalidrawExpandContent = ({ dismiss, ExcalidrawComponent, data, theme })
         /* @__PURE__ */ jsx("span", { className: excalidrawDialogTitle, children: "Whiteboard" }),
         /* @__PURE__ */ jsx("span", { className: excalidrawDialogMeta, children: "excalidraw" })
       ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: excalidrawHeaderClose,
-          onClick: dismiss,
-          children: /* @__PURE__ */ jsx(X, { size: 18 })
-        }
-      )
+      /* @__PURE__ */ jsx("button", { className: excalidrawHeaderClose, type: "button", onClick: dismiss, children: /* @__PURE__ */ jsx(X, { size: 18 }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: excalidrawDialogCanvas, children: /* @__PURE__ */ jsx(
       ExcalidrawComponent,
       {
-        initialData: data,
         viewModeEnabled: true,
         zenModeEnabled: true,
-        theme,
         UIOptions: readonlyUIOptions,
+        initialData: data,
+        theme,
         excalidrawAPI: (api) => {
           apiRef.current = api;
           setTimeout(() => api.scrollToContent(), 100);
@@ -235,11 +226,7 @@ const ExcalidrawExpandContent = ({ dismiss, ExcalidrawComponent, data, theme })
   ] });
 };
 const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
-  const {
-    snapshot: data,
-    loading: dataLoading,
-    error: dataError
-  } = useExcalidrawData(snapshot);
+  const { snapshot: data, loading: dataLoading, error: dataError } = useExcalidrawData(snapshot);
   const [ExcalidrawComponent, setExcalidrawComponent] = useState(null);
   const [libLoading, setLibLoading] = useState(true);
   const apiRef = useRef(null);
@@ -247,8 +234,7 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
   useEffect(() => {
     import("@excalidraw/excalidraw").then((mod) => {
       const Comp = mod.Excalidraw;
-      if (Comp)
-        setExcalidrawComponent(() => Comp);
+      if (Comp) setExcalidrawComponent(() => Comp);
       setLibLoading(false);
     }).catch((error) => {
       console.error("Error loading excalidraw", error);
@@ -261,9 +247,9 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
       content: ({ dismiss }) => /* @__PURE__ */ jsx(
         ExcalidrawExpandContent,
         {
-          dismiss,
           ExcalidrawComponent,
           data,
+          dismiss,
           theme
         }
       ),
@@ -287,10 +273,10 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      suppressHydrationWarning: true,
       className: excalidrawStaticContainer,
-      "data-theme": theme,
       "data-color-scheme": theme,
-      suppressHydrationWarning: true,
+      "data-theme": theme,
       children: [
         /* @__PURE__ */ jsx(
           ExcalidrawErrorBoundary,
@@ -299,11 +285,11 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
             children: /* @__PURE__ */ jsx(
               ExcalidrawComponent,
               {
-                initialData: data,
                 viewModeEnabled: true,
                 zenModeEnabled: true,
-                theme,
                 UIOptions: readonlyUIOptions,
+                initialData: data,
+                theme,
                 excalidrawAPI: (api) => {
                   apiRef.current = api;
                   setTimeout(() => api.scrollToContent(), 100);
@@ -316,9 +302,9 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
           /* @__PURE__ */ jsx(
             "button",
             {
-              type: "button",
               className: excalidrawActionButton,
               title: "Zoom In",
+              type: "button",
               onClick: () => {
                 const api = apiRef.current;
                 if (!api) return;
@@ -331,9 +317,9 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
           /* @__PURE__ */ jsx(
             "button",
             {
-              type: "button",
               className: excalidrawActionButton,
               title: "Zoom Out",
+              type: "button",
               onClick: () => {
                 const api = apiRef.current;
                 if (!api) return;
@@ -346,9 +332,9 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
           /* @__PURE__ */ jsx(
             "button",
             {
-              type: "button",
               className: excalidrawActionButton,
               title: "Fit to Content",
+              type: "button",
               onClick: () => apiRef.current?.scrollToContent(),
               children: /* @__PURE__ */ jsx(ScanSearch, { size: 20 })
             }
@@ -356,9 +342,9 @@ const ExcalidrawStaticCanvas = ({ snapshot, theme }) => {
           /* @__PURE__ */ jsx(
             "button",
             {
-              type: "button",
               className: excalidrawActionButton,
               title: "Expand",
+              type: "button",
               onClick: handleExpand,
               children: /* @__PURE__ */ jsx(Maximize2, { size: 20 })
             }
@@ -401,11 +387,9 @@ const ExcalidrawPlaceholder = ({ snapshot }) => {
     }
   } catch {
   }
-  return /* @__PURE__ */ jsx("div", { className: excalidrawPlaceholder, "aria-label": label, children: /* @__PURE__ */ jsx("span", { children: label }) });
+  return /* @__PURE__ */ jsx("div", { "aria-label": label, className: excalidrawPlaceholder, children: /* @__PURE__ */ jsx("span", { children: label }) });
 };
-const ExcalidrawSSRRenderer = ({
-  snapshot
-}) => {
+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 {

package/dist/ExcalidrawSSRRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExcalidrawSSRRenderer.d.ts","sourceRoot":"","sources":["../src/ExcalidrawSSRRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAK/B,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,MAAM,CAAA;CACjB;AA+BD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAUhE,CAAA"}
+{"version":3,"file":"ExcalidrawSSRRenderer.d.ts","sourceRoot":"","sources":["../src/ExcalidrawSSRRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAKhC,MAAM,WAAW,0BAA0B;IACzC,QAAQ,EAAE,MAAM,CAAC;CAClB;AA6BD,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,0BAA0B,CAQhE,CAAC"}

package/dist/index.mjs

@@ -1,8 +1,8 @@
 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 { c as ExcalidrawNode, s as serializeSnapshot, p as parseSnapshot, u as useExcalidrawConfig, e as useExcalidrawData, f as excalidrawFullscreenPopup, g as excalidrawEditorContainer, h as excalidrawLoading, i as excalidrawError, r as readonlyUIOptions, j as excalidrawEditOverlay, k as excalidrawEditLabel, l as excalidrawConfirmActions, m as excalidrawConfirmBtn, n as excalidrawConfirmBtnDanger, o as excalidrawConfirmBtnPrimary, q as excalidrawDialogHeader, t as excalidrawStatusDot, v as excalidrawDialogTitle, w as excalidrawDialogMeta, x as excalidrawHeaderActions, y as excalidrawActionBarSep, z as excalidrawActionBarBtn, A as excalidrawActionBarUrl, B as excalidrawHeaderClose, C as excalidrawDialogCanvas } from "./ExcalidrawNode-BnvRq6SZ.js";
-import { $, a, E, b, b as b2, d, b as b3 } from "./ExcalidrawNode-BnvRq6SZ.js";
+import { c as ExcalidrawNode, s as serializeSnapshot, p as parseSnapshot, u as useExcalidrawConfig, e as useExcalidrawData, f as excalidrawFullscreenPopup, g as excalidrawEditorContainer, h as excalidrawLoading, i as excalidrawError, r as readonlyUIOptions, j as excalidrawEditOverlay, k as excalidrawEditLabel, l as excalidrawConfirmActions, m as excalidrawConfirmBtn, n as excalidrawConfirmBtnDanger, o as excalidrawConfirmBtnPrimary, q as excalidrawDialogHeader, t as excalidrawStatusDot, v as excalidrawDialogTitle, w as excalidrawDialogMeta, x as excalidrawHeaderActions, y as excalidrawActionBarSep, z as excalidrawActionBarBtn, A as excalidrawActionBarUrl, B as excalidrawHeaderClose, C as excalidrawDialogCanvas } from "./ExcalidrawNode-DEcONli3.js";
+import { $, a, E, b, b as b2, d, b as b3 } from "./ExcalidrawNode-DEcONli3.js";
 import { ViewportGate, presentDialog, SegmentedControl, dismissTopDialog } from "@haklex/rich-editor-ui";
 import { $insertNodes, $getNodeByKey, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { PenTool, Pencil, Save, Download, Clipboard, X } from "lucide-react";
@@ -107,12 +107,10 @@ const ExcalidrawEditorDialogContent = ({
   const initializedRef = useRef(false);
   const baseRefRef = useRef(baseRef);
   const baseDataRef = useRef(baseData);
-  const [storageMode, setStorageMode] = useState(
-    () => {
-      if (!saveSnapshot || !initialSnapshot) return "inline";
-      return initialSnapshot.type === "delta" ? "delta" : initialSnapshot.type === "remote" ? "remote" : "inline";
-    }
-  );
+  const [storageMode, setStorageMode] = useState(() => {
+    if (!saveSnapshot || !initialSnapshot) return "inline";
+    return initialSnapshot.type === "delta" ? "delta" : initialSnapshot.type === "remote" ? "remote" : "inline";
+  });
   const storageModeRef = useRef(storageMode);
   const [savedRef, setSavedRef] = useState(() => {
     if (!saveSnapshot || !initialSnapshot) return "";
@@ -258,20 +256,12 @@ const ExcalidrawEditorDialogContent = ({
           dismissConfirm();
         };
         return /* @__PURE__ */ jsxs("div", { className: excalidrawConfirmActions, children: [
+          /* @__PURE__ */ jsx("button", { className: excalidrawConfirmBtn, type: "button", onClick: wrappedDismiss, children: "Continue Editing" }),
           /* @__PURE__ */ jsx(
             "button",
             {
-              type: "button",
-              className: excalidrawConfirmBtn,
-              onClick: wrappedDismiss,
-              children: "Continue Editing"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
               className: excalidrawConfirmBtnDanger,
+              type: "button",
               onClick: () => {
                 wrappedDismiss();
                 handleDiscard();
@@ -282,8 +272,8 @@ const ExcalidrawEditorDialogContent = ({
           /* @__PURE__ */ jsx(
             "button",
             {
-              type: "button",
               className: excalidrawConfirmBtnPrimary,
+              type: "button",
               onClick: () => {
                 wrappedDismiss();
                 handleSaveAndClose();
@@ -346,15 +336,12 @@ const ExcalidrawEditorDialogContent = ({
     if (!doc) return;
     void navigator.clipboard.writeText(JSON.stringify(doc));
   }, [getSnapshot]);
-  const handleRefChange = useCallback(
-    (e) => {
-      const { value } = e.target;
-      setSavedRef(value);
-      baseRefRef.current = value;
-      baseDataRef.current = void 0;
-    },
-    []
-  );
+  const handleRefChange = useCallback((e) => {
+    const { value } = e.target;
+    setSavedRef(value);
+    baseRefRef.current = value;
+    baseDataRef.current = void 0;
+  }, []);
   const handleStorageModeChange = useCallback(
     (newMode) => {
       setStorageMode(newMode);
@@ -380,12 +367,12 @@ const ExcalidrawEditorDialogContent = ({
           /* @__PURE__ */ jsx(
             SegmentedControl,
             {
+              value: storageMode,
               items: [
                 { value: "inline", label: "Inline" },
                 { value: "remote", label: "Remote" },
                 { value: "delta", label: "Delta" }
               ],
-              value: storageMode,
               onChange: handleStorageModeChange
             }
           ),
@@ -393,10 +380,10 @@ const ExcalidrawEditorDialogContent = ({
           /* @__PURE__ */ jsxs(
             "button",
             {
-              type: "button",
               className: excalidrawActionBarBtn,
-              onClick: handleManualUpload,
               disabled: isSaving,
+              type: "button",
+              onClick: handleManualUpload,
               children: [
                 /* @__PURE__ */ jsx(Save, { size: 14 }),
                 /* @__PURE__ */ jsx("span", { children: isSaving ? "Saving..." : "Save" })
@@ -405,64 +392,40 @@ const ExcalidrawEditorDialogContent = ({
           ),
           /* @__PURE__ */ jsx("div", { className: excalidrawActionBarSep })
         ] }),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: excalidrawActionBarBtn,
-            onClick: handleExportJson,
-            children: [
-              /* @__PURE__ */ jsx(Download, { size: 14 }),
-              "JSON"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "button",
-          {
-            type: "button",
-            className: excalidrawActionBarBtn,
-            onClick: handleCopyJson,
-            children: [
-              /* @__PURE__ */ jsx(Clipboard, { size: 14 }),
-              "Copy"
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("button", { className: excalidrawActionBarBtn, type: "button", onClick: handleExportJson, children: [
+          /* @__PURE__ */ jsx(Download, { size: 14 }),
+          "JSON"
+        ] }),
+        /* @__PURE__ */ jsxs("button", { className: excalidrawActionBarBtn, type: "button", onClick: handleCopyJson, children: [
+          /* @__PURE__ */ jsx(Clipboard, { size: 14 }),
+          "Copy"
+        ] }),
         storageMode !== "inline" && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { className: excalidrawActionBarSep }),
           /* @__PURE__ */ jsx(
             "input",
             {
-              type: "text",
               className: excalidrawActionBarUrl,
-              value: savedRef,
-              onChange: handleRefChange,
               placeholder: "base URL / ref",
-              spellCheck: false
+              spellCheck: false,
+              type: "text",
+              value: savedRef,
+              onChange: handleRefChange
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: excalidrawHeaderClose,
-          onClick: attemptClose,
-          children: /* @__PURE__ */ jsx(X, { size: 18 })
-        }
-      )
+      /* @__PURE__ */ jsx("button", { className: excalidrawHeaderClose, type: "button", onClick: attemptClose, children: /* @__PURE__ */ jsx(X, { size: 18 }) })
     ] }),
     /* @__PURE__ */ jsx("div", { className: excalidrawDialogCanvas, children: /* @__PURE__ */ jsx(
       ExcalidrawComponent,
       {
         initialData,
         theme,
-        onChange: handleChange,
         excalidrawAPI: (api) => {
           apiRef.current = api;
-        }
+        },
+        onChange: handleChange
       }
     ) })
   ] });
@@ -518,21 +481,21 @@ const ExcalidrawEditRenderer = ({
       content: ({ dismiss }) => /* @__PURE__ */ jsx(
         ExcalidrawEditorDialogContent,
         {
-          dismiss,
           ExcalidrawComponent,
+          baseData: baseDataRefOuter.current,
+          baseRef: baseRefRef.current,
+          dismiss,
           initialData: initialDataRef.current,
           initialSnapshot: snapshotRef.current,
+          saveSnapshot: saveSnapshotRef.current,
           theme,
           onSave: (ref) => onSnapshotChangeRef.current(ref),
-          saveSnapshot: saveSnapshotRef.current,
           onClose: (doc) => {
             if (doc) {
               initialDataRef.current = doc;
               setPreviewKey((k) => k + 1);
             }
-          },
-          baseRef: baseRefRef.current,
-          baseData: baseDataRefOuter.current
+          }
         }
       ),
       className: excalidrawFullscreenPopup,
@@ -553,11 +516,11 @@ const ExcalidrawEditRenderer = ({
     /* @__PURE__ */ jsx(
       ExcalidrawComponent,
       {
-        initialData: initialDataRef.current,
         viewModeEnabled: true,
         zenModeEnabled: true,
-        theme,
         UIOptions: readonlyUIOptions,
+        initialData: initialDataRef.current,
+        theme,
         excalidrawAPI: (api) => {
           previewApiRef.current = api;
           setTimeout(() => api.scrollToContent(), 100);
@@ -565,18 +528,10 @@ const ExcalidrawEditRenderer = ({
       },
       previewKey
     ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: excalidrawEditOverlay,
-        onClick: handleOpenEditor,
-        children: /* @__PURE__ */ jsxs("span", { className: excalidrawEditLabel, children: [
-          /* @__PURE__ */ jsx(Pencil, { size: 16 }),
-          "Edit Whiteboard"
-        ] })
-      }
-    )
+    /* @__PURE__ */ jsx("button", { className: excalidrawEditOverlay, type: "button", onClick: handleOpenEditor, children: /* @__PURE__ */ jsxs("span", { className: excalidrawEditLabel, children: [
+      /* @__PURE__ */ jsx(Pencil, { size: 16 }),
+      "Edit Whiteboard"
+    ] }) })
   ] });
 };
 const ExcalidrawEditRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({

package/dist/static.mjs

@@ -1,4 +1,4 @@
-import { $, a, E, b, c, b as b2, d, b as b3, u } from "./ExcalidrawNode-BnvRq6SZ.js";
+import { $, a, E, b, c, b as b2, d, b as b3, u } from "./ExcalidrawNode-DEcONli3.js";
 import { EXCALIDRAW_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
 export {
   $ as $createExcalidrawNode,

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAC1B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GAC7C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAErD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,CAgCpE;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,MAAM,CAStE"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,kBAAkB,GAC1B;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAAE,GAC7C;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAC/B;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,CA+BpE;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,kBAAkB,GAAG,MAAM,CAYtE"}

package/dist/useExcalidrawData.d.ts

@@ -1,12 +1,12 @@
 import { ExcalidrawSnapshot } from './types';
 export interface ExcalidrawDataState {
-    snapshot: Record<string, any> | undefined;
-    loading: boolean;
-    error: string;
-    /** The base reference line (URL or ref:file/xxx) when snapshot is remote or incremental */
-    baseRef?: string;
     /** The raw base data before delta patch (for computing new diffs in edit mode) */
     baseData?: Record<string, any>;
+    /** The base reference line (URL or ref:file/xxx) when snapshot is remote or incremental */
+    baseRef?: string;
+    error: string;
+    loading: boolean;
+    snapshot: Record<string, any> | undefined;
 }
 export declare function useExcalidrawData(data: string | ExcalidrawSnapshot | null): ExcalidrawDataState;
 //# sourceMappingURL=useExcalidrawData.d.ts.map

package/dist/useExcalidrawData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExcalidrawData.d.ts","sourceRoot":"","sources":["../src/useExcalidrawData.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAGjD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAA;IACzC,OAAO,EAAE,OAAO,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAC/B;AA8DD,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,GACvC,mBAAmB,CAiFrB"}
+{"version":3,"file":"useExcalidrawData.d.ts","sourceRoot":"","sources":["../src/useExcalidrawData.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGlD,MAAM,WAAW,mBAAmB;IAClC,kFAAkF;IAClF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC/B,2FAA2F;IAC3F,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS,CAAC;CAC3C;AA4DD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,kBAAkB,GAAG,IAAI,GAAG,mBAAmB,CA2E/F"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haklex/rich-ext-excalidraw",
   "type": "module",
-  "version": "0.0.64",
+  "version": "0.0.66",
   "description": "Excalidraw whiteboard extension",
   "license": "MIT",
   "exports": {
@@ -29,10 +29,10 @@
   "dependencies": {
     "@excalidraw/excalidraw": "0.17.0",
     "jsondiffpatch": "^0.7.3",
-    "@haklex/rich-editor": "0.0.64",
-    "@haklex/rich-editor-ui": "0.0.64",
-    "@haklex/rich-headless": "0.0.64",
-    "@haklex/rich-style-token": "0.0.64"
+    "@haklex/rich-editor": "0.0.66",
+    "@haklex/rich-editor-ui": "0.0.66",
+    "@haklex/rich-style-token": "0.0.66",
+    "@haklex/rich-headless": "0.0.66"
   },
   "devDependencies": {
     "@lexical/react": "^0.41.0",
@@ -51,6 +51,11 @@
   "publishConfig": {
     "access": "public"
   },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Innei/haklex.git",
+    "directory": "packages/rich-ext-excalidraw"
+  },
   "scripts": {
     "build": "vite build",
     "dev:build": "vite build --watch"

package/LICENSE

@@ -1,28 +0,0 @@
-MIT License
-
-Copyright (c) 2024 Innei
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-
-
-Additional Terms and Conditions
-
-----------------
-
-Use of this software is governed by the terms of MIT and, in addition, by the terms and conditions described in the additional file (ADDITIONAL_TERMS.md). By using this software, you agree to abide by these additional terms and conditions.