@haklex/rich-ext-excalidraw 0.14.0 → 0.15.0

package/dist/index.mjs

@@ -1,14 +1,15 @@
-import { A as ExcalidrawConfigProvider, S as excalidrawFullscreenPopup, j as useExcalidrawConfig, n as parseSnapshot, r as serializeSnapshot } from "./useExcalidrawData-DcXa8vqV.js";
-import { r as _defineProperty, t as ExcalidrawDisplayRenderer } from "./ExcalidrawDisplayRenderer-BWsFJSQ7.js";
-import { a as ExcalidrawNode, i as $isExcalidrawNode, n as ExcalidrawExpandShell, o as EXCALIDRAW_NODE_KEY, r as $createExcalidrawNode, s as ExcalidrawSSRRenderer, t as EXCALIDRAW_BLOCK_TRANSFORMER } from "./transformer-zBd4ibNw.js";
-import { t as ExcalidrawEditRenderer } from "./ExcalidrawEditRenderer-BlJTjnpV.js";
-import { Suspense, createElement, lazy, useEffect } from "react";
-import { PenTool } from "lucide-react";
-import { ViewportGate } from "@haklex/rich-editor-ui";
+import { a as ExcalidrawNode, c as ExcalidrawDisplayRenderer, d as __exportAll, i as $isExcalidrawNode, n as ExcalidrawExpandShell, o as EXCALIDRAW_NODE_KEY, r as $createExcalidrawNode, s as ExcalidrawSSRRenderer, t as EXCALIDRAW_BLOCK_TRANSFORMER, u as _defineProperty } from "./transformer-B0euMW7k.js";
+import { A as ExcalidrawConfigProvider, C as excalidrawHeaderActions, O as excalidrawStatusDot, S as excalidrawFullscreenPopup, T as excalidrawLoading, _ as excalidrawDialogTitle, b as excalidrawEditorContainer, d as excalidrawConfirmBtnDanger, f as excalidrawConfirmBtnPrimary, g as excalidrawDialogMeta, i as excalidrawActionBarBtn, j as useExcalidrawConfig, k as readonlyUIOptions, l as excalidrawConfirmActions, m as excalidrawDialogHeader, n as parseSnapshot, p as excalidrawDialogCanvas, r as serializeSnapshot, t as useExcalidrawData, u as excalidrawConfirmBtn, v as excalidrawEditLabel, w as excalidrawHeaderClose, x as excalidrawError, y as excalidrawEditOverlay } from "./useExcalidrawData-DcXa8vqV.js";
+import { Suspense, createElement, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useColorScheme } from "@haklex/rich-editor/static";
+import { Clipboard, Download, PenTool, Pencil, Save, X } from "lucide-react";
+import { SegmentedControl, ViewportGate, dismissTopDialog, presentDialog } from "@haklex/rich-editor-ui";
 import { $getNodeByKey, $insertNodes, COMMAND_PRIORITY_EDITOR, createCommand } from "lexical";
+import { usePortalTheme } from "@haklex/rich-style-token";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 //#region src/ExcalidrawEditNode.ts
-var LazyEditRenderer = lazy(() => import("./ExcalidrawEditRenderer-BlJTjnpV.js").then((n) => n.n).then((m) => ({ default: m.ExcalidrawEditRenderer })));
+var LazyEditRenderer = lazy(() => Promise.resolve().then(() => ExcalidrawEditRenderer_exports).then((m) => ({ default: m.ExcalidrawEditRenderer })));
 var ExcalidrawEditNode = class ExcalidrawEditNode extends ExcalidrawNode {
 	static clone(node) {
 		return new ExcalidrawEditNode(node.__snapshot, node.__key);
@@ -71,6 +72,481 @@ function $isExcalidrawEditNode(node) {
 	return node instanceof ExcalidrawEditNode;
 }
 //#endregion
+//#region src/ExcalidrawEditRenderer.tsx
+var ExcalidrawEditRenderer_exports = /* @__PURE__ */ __exportAll({ ExcalidrawEditRenderer: () => ExcalidrawEditRenderer });
+var SAVE_DEBOUNCE_MS = 2e3;
+var ExcalidrawEditorDialogContent = ({ dismiss, ExcalidrawComponent, initialData, initialSnapshot, theme, onSave, saveSnapshot, onClose, baseRef, baseData }) => {
+	const { className: portalClassName } = usePortalTheme();
+	const apiRef = useRef(null);
+	const saveTimerRef = useRef(void 0);
+	const [isDirty, setIsDirty] = useState(false);
+	const isDirtyRef = useRef(false);
+	const confirmDialogOpenRef = useRef(false);
+	const initializedRef = useRef(false);
+	const stableRef = 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 storageModeRef = useRef(storageMode);
+	const [savedRef, setSavedRef] = useState(() => {
+		if (!saveSnapshot || !initialSnapshot) return "";
+		if (initialSnapshot.type === "remote") return initialSnapshot.url;
+		if (initialSnapshot.type === "delta") return initialSnapshot.baseUrl;
+		return "";
+	});
+	const [isSaving, setIsSaving] = useState(false);
+	useEffect(() => {
+		const stableTimer = setTimeout(() => {
+			stableRef.current = true;
+		}, 500);
+		return () => {
+			clearTimeout(stableTimer);
+			if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		};
+	}, []);
+	const getSnapshot = useCallback(() => {
+		const api = apiRef.current;
+		if (!api) return;
+		const appState = api.getAppState();
+		return {
+			elements: api.getSceneElements(),
+			appState: {
+				viewBackgroundColor: appState.viewBackgroundColor,
+				gridSize: appState.gridSize
+			},
+			files: api.getFiles()
+		};
+	}, []);
+	const performSave = useCallback(() => {
+		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		const doc = getSnapshot();
+		if (!doc) return Promise.resolve();
+		const mode = storageModeRef.current;
+		if (mode === "delta" && saveSnapshot) {
+			setIsSaving(true);
+			return (async () => {
+				try {
+					const currentBaseUrl = baseRefRef.current;
+					const currentBaseData = baseDataRef.current;
+					if (!currentBaseUrl || !currentBaseData) {
+						const ref = await saveSnapshot(doc, baseRefRef.current || void 0);
+						baseRefRef.current = ref;
+						baseDataRef.current = doc;
+						setSavedRef(ref);
+					}
+					isDirtyRef.current = false;
+					setIsDirty(false);
+				} finally {
+					setIsSaving(false);
+				}
+			})();
+		}
+		if (mode === "remote" && saveSnapshot) {
+			if (baseRefRef.current && baseDataRef.current && JSON.stringify(doc) === JSON.stringify(baseDataRef.current)) {
+				isDirtyRef.current = false;
+				setIsDirty(false);
+				return Promise.resolve();
+			}
+			setIsSaving(true);
+			return saveSnapshot(doc, baseRefRef.current || void 0).then((ref) => {
+				baseRefRef.current = ref;
+				baseDataRef.current = doc;
+				isDirtyRef.current = false;
+				setIsDirty(false);
+				setIsSaving(false);
+				setSavedRef(ref);
+			}, () => {
+				setIsSaving(false);
+			});
+		}
+		isDirtyRef.current = false;
+		setIsDirty(false);
+		return Promise.resolve();
+	}, [saveSnapshot, getSnapshot]);
+	const emitSnapshot = useCallback(async () => {
+		const doc = getSnapshot();
+		if (!doc) return;
+		const mode = storageModeRef.current;
+		if (mode === "delta" && saveSnapshot) {
+			const currentBaseUrl = baseRefRef.current;
+			const currentBaseData = baseDataRef.current;
+			if (currentBaseUrl && currentBaseData) {
+				const { diff } = await import("jsondiffpatch");
+				const delta = diff(currentBaseData, structuredClone(doc));
+				onSave(delta ? {
+					type: "delta",
+					baseUrl: currentBaseUrl,
+					delta
+				} : {
+					type: "remote",
+					url: currentBaseUrl
+				});
+			} else onSave({
+				type: "remote",
+				url: await saveSnapshot(doc, baseRefRef.current || void 0)
+			});
+			return;
+		}
+		if (mode === "remote") {
+			const ref = baseRefRef.current;
+			if (ref) onSave({
+				type: "remote",
+				url: ref
+			});
+			else if (saveSnapshot) onSave({
+				type: "remote",
+				url: await saveSnapshot(doc)
+			});
+			return;
+		}
+		onSave({
+			type: "inline",
+			data: doc
+		});
+	}, [
+		onSave,
+		saveSnapshot,
+		getSnapshot
+	]);
+	const handleChange = useCallback((elements) => {
+		if (!initializedRef.current) {
+			initializedRef.current = true;
+			return;
+		}
+		if (!stableRef.current) return;
+		if (elements.length === 0) return;
+		if (!isDirtyRef.current) {
+			isDirtyRef.current = true;
+			setIsDirty(true);
+		}
+		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		saveTimerRef.current = setTimeout(() => performSave(), SAVE_DEBOUNCE_MS);
+	}, [performSave]);
+	const handleSaveAndClose = useCallback(() => {
+		performSave().then(async () => {
+			await emitSnapshot();
+			onClose(getSnapshot());
+			dismiss();
+		});
+	}, [
+		performSave,
+		emitSnapshot,
+		getSnapshot,
+		onClose,
+		dismiss
+	]);
+	const handleDiscard = useCallback(() => {
+		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
+		dismiss();
+	}, [dismiss]);
+	const showConfirmDialog = useCallback(() => {
+		if (confirmDialogOpenRef.current) return;
+		confirmDialogOpenRef.current = true;
+		presentDialog({
+			title: "Unsaved Changes",
+			description: "You have unsaved changes that will be lost if you close now.",
+			content: ({ dismiss: dismissConfirm }) => {
+				const wrappedDismiss = () => {
+					confirmDialogOpenRef.current = false;
+					dismissConfirm();
+				};
+				return /* @__PURE__ */ jsxs("div", {
+					className: excalidrawConfirmActions,
+					children: [
+						/* @__PURE__ */ jsx("button", {
+							className: excalidrawConfirmBtn,
+							type: "button",
+							onClick: wrappedDismiss,
+							children: "Continue Editing"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: excalidrawConfirmBtnDanger,
+							type: "button",
+							onClick: () => {
+								wrappedDismiss();
+								handleDiscard();
+							},
+							children: "Discard"
+						}),
+						/* @__PURE__ */ jsx("button", {
+							className: excalidrawConfirmBtnPrimary,
+							type: "button",
+							onClick: () => {
+								wrappedDismiss();
+								handleSaveAndClose();
+							},
+							children: "Save & Close"
+						})
+					]
+				});
+			},
+			portalClassName,
+			theme,
+			showCloseButton: false,
+			clickOutsideToDismiss: false
+		});
+	}, [
+		handleDiscard,
+		handleSaveAndClose,
+		portalClassName,
+		theme
+	]);
+	const attemptClose = useCallback(() => {
+		if (isDirtyRef.current) showConfirmDialog();
+		else emitSnapshot().then(() => {
+			onClose(getSnapshot());
+			dismiss();
+		});
+	}, [
+		dismiss,
+		showConfirmDialog,
+		emitSnapshot,
+		getSnapshot,
+		onClose
+	]);
+	useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (e.key === "Escape") {
+				e.preventDefault();
+				e.stopImmediatePropagation();
+				if (confirmDialogOpenRef.current) {
+					confirmDialogOpenRef.current = false;
+					dismissTopDialog();
+				} else attemptClose();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => document.removeEventListener("keydown", handleKeyDown, true);
+	}, [attemptClose]);
+	const handleManualUpload = useCallback(() => {
+		performSave();
+	}, [performSave]);
+	const handleExportJson = useCallback(() => {
+		const doc = getSnapshot();
+		if (!doc) return;
+		const blob = new Blob([JSON.stringify(doc, null, 2)], { type: "application/json" });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement("a");
+		a.href = url;
+		a.download = "excalidraw-snapshot.json";
+		a.click();
+		URL.revokeObjectURL(url);
+	}, [getSnapshot]);
+	const handleCopyJson = useCallback(() => {
+		const doc = getSnapshot();
+		if (!doc) return;
+		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 handleStorageModeChange = useCallback((newMode) => {
+		setStorageMode(newMode);
+		storageModeRef.current = newMode;
+		if (newMode === "inline") setSavedRef("");
+		performSave();
+	}, [performSave]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+		className: excalidrawDialogHeader,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: excalidrawStatusDot,
+				style: { backgroundColor: isDirty ? "#f59e0b" : "#22c55e" }
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: excalidrawDialogTitle,
+				children: "Canvas Editor"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: excalidrawDialogMeta,
+				children: "excalidraw"
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: excalidrawHeaderActions,
+				children: [
+					saveSnapshot && /* @__PURE__ */ jsxs(Fragment, { children: [
+						/* @__PURE__ */ jsx(SegmentedControl, {
+							value: storageMode,
+							items: [
+								{
+									value: "inline",
+									label: "Inline"
+								},
+								{
+									value: "remote",
+									label: "Remote"
+								},
+								{
+									value: "delta",
+									label: "Delta"
+								}
+							],
+							onChange: handleStorageModeChange
+						}),
+						/* @__PURE__ */ jsx("div", { className: "_1c3wdzlh" }),
+						/* @__PURE__ */ jsxs("button", {
+							className: "_1c3wdzlg",
+							disabled: isSaving,
+							type: "button",
+							onClick: handleManualUpload,
+							children: [/* @__PURE__ */ jsx(Save, { size: 14 }), /* @__PURE__ */ jsx("span", { children: isSaving ? "Saving..." : "Save" })]
+						}),
+						/* @__PURE__ */ jsx("div", { className: "_1c3wdzlh" })
+					] }),
+					/* @__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: "_1c3wdzlh" }), /* @__PURE__ */ jsx("input", {
+						className: "_1c3wdzli",
+						placeholder: "base URL / ref",
+						spellCheck: false,
+						type: "text",
+						value: savedRef,
+						onChange: handleRefChange
+					})] })
+				]
+			}),
+			/* @__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,
+			excalidrawAPI: (api) => {
+				apiRef.current = api;
+			},
+			onChange: handleChange
+		})
+	})] });
+};
+var ExcalidrawEditRenderer = ({ snapshot, onSnapshotChange }) => {
+	const theme = useColorScheme();
+	const { saveSnapshot } = useExcalidrawConfig();
+	const { snapshot: initialData, loading: dataLoading, error: dataError, baseRef, baseData } = useExcalidrawData(snapshot);
+	const [ExcalidrawComponent, setExcalidrawComponent] = useState(null);
+	const [libLoading, setLibLoading] = useState(true);
+	const previewApiRef = useRef(null);
+	const initialDataRef = useRef(void 0);
+	const [previewKey, setPreviewKey] = useState(0);
+	const onSnapshotChangeRef = useRef(onSnapshotChange);
+	onSnapshotChangeRef.current = onSnapshotChange;
+	const saveSnapshotRef = useRef(saveSnapshot);
+	saveSnapshotRef.current = saveSnapshot;
+	const snapshotRef = useRef(snapshot);
+	snapshotRef.current = snapshot;
+	const { className: portalClassName } = usePortalTheme();
+	useEffect(() => {
+		if (initialData && !initialDataRef.current) initialDataRef.current = initialData;
+	}, [initialData]);
+	useEffect(() => {
+		Promise.all([import("@excalidraw/excalidraw"), import("@excalidraw/excalidraw/index.css")]).then(([mod]) => {
+			const Comp = mod.Excalidraw || mod.default?.Excalidraw;
+			if (Comp) setExcalidrawComponent(() => Comp);
+			setLibLoading(false);
+		}).catch((err) => {
+			console.error("[excalidraw] failed to load", err);
+			setLibLoading(false);
+		});
+	}, []);
+	const baseRefRef = useRef(baseRef);
+	const baseDataRefOuter = useRef(baseData);
+	useEffect(() => {
+		if (baseRef) baseRefRef.current = baseRef;
+	}, [baseRef]);
+	useEffect(() => {
+		if (baseData) baseDataRefOuter.current = baseData;
+	}, [baseData]);
+	const handleOpenEditor = useCallback(() => {
+		if (!ExcalidrawComponent || dataLoading) return;
+		presentDialog({
+			content: ({ dismiss }) => /* @__PURE__ */ jsx(ExcalidrawEditorDialogContent, {
+				ExcalidrawComponent,
+				baseData: baseDataRefOuter.current,
+				baseRef: baseRefRef.current,
+				dismiss,
+				initialData: initialDataRef.current,
+				initialSnapshot: snapshotRef.current,
+				saveSnapshot: saveSnapshotRef.current,
+				theme,
+				onSave: (ref) => onSnapshotChangeRef.current(ref),
+				onClose: (doc) => {
+					if (doc) {
+						initialDataRef.current = doc;
+						setPreviewKey((k) => k + 1);
+					}
+				}
+			}),
+			className: excalidrawFullscreenPopup,
+			portalClassName,
+			theme,
+			showCloseButton: false,
+			clickOutsideToDismiss: false
+		});
+	}, [
+		ExcalidrawComponent,
+		dataLoading,
+		theme,
+		portalClassName
+	]);
+	if (dataLoading || libLoading || !ExcalidrawComponent) return /* @__PURE__ */ jsx("div", {
+		className: excalidrawEditorContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: excalidrawLoading,
+			children: "Loading excalidraw editor..."
+		})
+	});
+	if (dataError) return /* @__PURE__ */ jsx("div", {
+		className: excalidrawEditorContainer,
+		children: /* @__PURE__ */ jsx("div", {
+			className: excalidrawError,
+			children: dataError
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: excalidrawEditorContainer,
+		children: [/* @__PURE__ */ jsx(ExcalidrawComponent, {
+			viewModeEnabled: true,
+			zenModeEnabled: true,
+			UIOptions: readonlyUIOptions,
+			initialData: initialDataRef.current,
+			theme,
+			excalidrawAPI: (api) => {
+				previewApiRef.current = api;
+				setTimeout(() => api.scrollToContent(), 100);
+			}
+		}, previewKey), /* @__PURE__ */ jsx("button", {
+			className: excalidrawEditOverlay,
+			type: "button",
+			onClick: handleOpenEditor,
+			children: /* @__PURE__ */ jsxs("span", {
+				className: excalidrawEditLabel,
+				children: [/* @__PURE__ */ jsx(Pencil, { size: 16 }), "Edit Whiteboard"]
+			})
+		})]
+	});
+};
+//#endregion
 //#region src/ExcalidrawPlugin.tsx
 var INSERT_EXCALIDRAW_COMMAND = createCommand("INSERT_EXCALIDRAW");
 function ExcalidrawPlugin() {

package/dist/slot.d.ts

@@ -3,7 +3,7 @@ export declare const EXCALIDRAW_NODE_KEY: "Excalidraw";
 export interface ExcalidrawSlotProps {
     snapshot: string;
 }
-declare module '@haklex/rich-editor' {
+declare module '@haklex/rich-editor/static' {
     interface RendererConfig {
         Excalidraw?: ComponentType<ExcalidrawSlotProps>;
     }

package/dist/slot.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../src/slot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,mBAAmB,EAAG,YAAqB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,cAAc;QACtB,UAAU,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;KACjD;CACF"}
+{"version":3,"file":"slot.d.ts","sourceRoot":"","sources":["../src/slot.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,eAAO,MAAM,mBAAmB,EAAG,YAAqB,CAAC;AAEzD,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,OAAO,QAAQ,4BAA4B,CAAC;IAC1C,UAAU,cAAc;QACtB,UAAU,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,CAAC;KACjD;CACF"}

package/dist/static.mjs

@@ -1,4 +1,3 @@
+import { a as ExcalidrawNode, c as ExcalidrawDisplayRenderer, i as $isExcalidrawNode, n as ExcalidrawExpandShell, o as EXCALIDRAW_NODE_KEY, r as $createExcalidrawNode, s as ExcalidrawSSRRenderer, t as EXCALIDRAW_BLOCK_TRANSFORMER } from "./transformer-B0euMW7k.js";
 import { A as ExcalidrawConfigProvider, S as excalidrawFullscreenPopup, j as useExcalidrawConfig } from "./useExcalidrawData-DcXa8vqV.js";
-import { t as ExcalidrawDisplayRenderer } from "./ExcalidrawDisplayRenderer-BWsFJSQ7.js";
-import { a as ExcalidrawNode, i as $isExcalidrawNode, n as ExcalidrawExpandShell, o as EXCALIDRAW_NODE_KEY, r as $createExcalidrawNode, s as ExcalidrawSSRRenderer, t as EXCALIDRAW_BLOCK_TRANSFORMER } from "./transformer-zBd4ibNw.js";
 export { $createExcalidrawNode, $isExcalidrawNode, EXCALIDRAW_BLOCK_TRANSFORMER, EXCALIDRAW_NODE_KEY, ExcalidrawConfigProvider, ExcalidrawDisplayRenderer, ExcalidrawDisplayRenderer as ExcalidrawRenderer, ExcalidrawDisplayRenderer as ExcalidrawStaticRenderer, ExcalidrawExpandShell, ExcalidrawNode, ExcalidrawSSRRenderer, excalidrawFullscreenPopup, useExcalidrawConfig };

package/dist/{ExcalidrawDisplayRenderer-BWsFJSQ7.js → transformer-B0euMW7k.js}

@@ -1,10 +1,24 @@
-import { t as __exportAll } from "./rolldown-runtime-CiIaOW0V.js";
-import { D as excalidrawStaticContainer, T as excalidrawLoading, c as excalidrawActionGroup, k as readonlyUIOptions, s as excalidrawActionButton, t as useExcalidrawData, x as excalidrawError } from "./useExcalidrawData-DcXa8vqV.js";
-import { Component, useCallback, useEffect, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useColorScheme } from "@haklex/rich-editor";
-import { Maximize2, ScanSearch, ZoomIn, ZoomOut } from "lucide-react";
-//#region \0@oxc-project+runtime@0.127.0/helpers/typeof.js
+import { D as excalidrawStaticContainer, E as excalidrawPlaceholder, T as excalidrawLoading, _ as excalidrawDialogTitle, c as excalidrawActionGroup, h as excalidrawDialogHeaderTitle, k as readonlyUIOptions, m as excalidrawDialogHeader, p as excalidrawDialogCanvas, s as excalidrawActionButton, t as useExcalidrawData, w as excalidrawHeaderClose, x as excalidrawError } from "./useExcalidrawData-DcXa8vqV.js";
+import { Component, Suspense, lazy, useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createRendererDecoration, useColorScheme } from "@haklex/rich-editor/static";
+import { Maximize2, ScanSearch, X, ZoomIn, ZoomOut } from "lucide-react";
+import { ViewportGate } from "@haklex/rich-editor-ui";
+import { DecoratorNode } from "lexical";
+import { EXCALIDRAW_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+//#endregion
+//#region \0@oxc-project+runtime@0.130.0/helpers/typeof.js
 function _typeof(o) {
 	"@babel/helpers - typeof";
 	return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function(o) {
@@ -14,7 +28,7 @@ function _typeof(o) {
 	}, _typeof(o);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.127.0/helpers/toPrimitive.js
+//#region \0@oxc-project+runtime@0.130.0/helpers/toPrimitive.js
 function toPrimitive(t, r) {
 	if ("object" != _typeof(t) || !t) return t;
 	var e = t[Symbol.toPrimitive];
@@ -26,13 +40,13 @@ function toPrimitive(t, r) {
 	return ("string" === r ? String : Number)(t);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.127.0/helpers/toPropertyKey.js
+//#region \0@oxc-project+runtime@0.130.0/helpers/toPropertyKey.js
 function toPropertyKey(t) {
 	var i = toPrimitive(t, "string");
 	return "symbol" == _typeof(i) ? i : i + "";
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.127.0/helpers/defineProperty.js
+//#region \0@oxc-project+runtime@0.130.0/helpers/defineProperty.js
 function _defineProperty(e, r, t) {
 	return (r = toPropertyKey(r)) in e ? Object.defineProperty(e, r, {
 		value: t,
@@ -188,4 +202,113 @@ var ExcalidrawErrorBoundary = class extends Component {
 	}
 };
 //#endregion
-export { ExcalidrawDisplayRenderer_exports as n, _defineProperty as r, ExcalidrawDisplayRenderer as t };
+//#region src/ExcalidrawSSRRenderer.tsx
+var LazyDisplayRenderer = lazy(() => Promise.resolve().then(() => ExcalidrawDisplayRenderer_exports).then((m) => ({ default: m.ExcalidrawDisplayRenderer })));
+var 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 })
+	});
+};
+var ExcalidrawSSRRenderer = ({ onExpand, snapshot }) => {
+	return /* @__PURE__ */ jsx(ViewportGate, {
+		fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }),
+		children: /* @__PURE__ */ jsx(Suspense, {
+			fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }),
+			children: /* @__PURE__ */ jsx(LazyDisplayRenderer, {
+				snapshot,
+				onExpand
+			})
+		})
+	});
+};
+//#endregion
+//#region src/slot.ts
+var EXCALIDRAW_NODE_KEY = "Excalidraw";
+//#endregion
+//#region src/ExcalidrawNode.ts
+var ExcalidrawNode = class ExcalidrawNode extends DecoratorNode {
+	static getType() {
+		return "excalidraw";
+	}
+	static clone(node) {
+		return new ExcalidrawNode(node.__snapshot, node.__key);
+	}
+	constructor(snapshot, key) {
+		super(key);
+		_defineProperty(this, "__snapshot", void 0);
+		this.__snapshot = snapshot;
+	}
+	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 createRendererDecoration(EXCALIDRAW_NODE_KEY, ExcalidrawSSRRenderer, { snapshot: this.__snapshot });
+	}
+};
+function $createExcalidrawNode(snapshot) {
+	return new ExcalidrawNode(snapshot);
+}
+function $isExcalidrawNode(node) {
+	return node instanceof ExcalidrawNode;
+}
+//#endregion
+//#region src/ExcalidrawExpandShell.tsx
+var ExcalidrawExpandShell = ({ children, dismiss, meta = "excalidraw", title = "Whiteboard" }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+	className: excalidrawDialogHeader,
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: excalidrawDialogHeaderTitle,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: excalidrawDialogTitle,
+			children: title
+		}), meta != null && /* @__PURE__ */ jsx("span", {
+			className: "_1c3wdzld",
+			children: meta
+		})]
+	}), /* @__PURE__ */ jsx("button", {
+		className: excalidrawHeaderClose,
+		type: "button",
+		onClick: dismiss,
+		children: /* @__PURE__ */ jsx(X, { size: 18 })
+	})]
+}), /* @__PURE__ */ jsx("div", {
+	className: excalidrawDialogCanvas,
+	children
+})] });
+//#endregion
+export { ExcalidrawNode as a, ExcalidrawDisplayRenderer as c, __exportAll as d, $isExcalidrawNode as i, ExcalidrawDisplayRenderer_exports as l, ExcalidrawExpandShell as n, EXCALIDRAW_NODE_KEY as o, $createExcalidrawNode as r, ExcalidrawSSRRenderer as s, EXCALIDRAW_BLOCK_TRANSFORMER as t, _defineProperty as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-ext-excalidraw",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Excalidraw whiteboard extension",
   "repository": {
     "type": "git",
@@ -25,23 +25,23 @@
     "dist"
   ],
   "dependencies": {
-    "jsondiffpatch": "^0.7.3",
-    "@haklex/rich-headless": "0.14.0"
+    "jsondiffpatch": "^0.7.6",
+    "@haklex/rich-headless": "0.15.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "^0.18.0",
     "@lexical/react": "^0.44.0",
-    "@types/react": "^19.2.14",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@vanilla-extract/css": "^1.20.1",
     "@vanilla-extract/vite-plugin": "^5.2.2",
     "lexical": "^0.44.0",
-    "lucide-react": "^1.12.0",
+    "lucide-react": "^1.16.0",
     "react": "19.2.5",
     "react-dom": "19.2.5",
     "typescript": "^5.9.3",
-    "vite": "^8.0.10",
-    "vite-plugin-dts": "^4.5.4"
+    "unplugin-dts": "^1.0.1",
+    "vite": "^8.0.13"
   },
   "peerDependencies": {
     "@excalidraw/excalidraw": ">=0.18.0",
@@ -50,9 +50,9 @@
     "lucide-react": "^1.0.0",
     "react": ">=19",
     "react-dom": ">=19",
-    "@haklex/rich-editor": "0.14.0",
-    "@haklex/rich-editor-ui": "0.14.0",
-    "@haklex/rich-style-token": "0.14.0"
+    "@haklex/rich-editor": "0.15.0",
+    "@haklex/rich-editor-ui": "0.15.0",
+    "@haklex/rich-style-token": "0.15.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/ExcalidrawEditRenderer-BlJTjnpV.js

@@ -1,484 +0,0 @@
-import { t as __exportAll } from "./rolldown-runtime-CiIaOW0V.js";
-import { C as excalidrawHeaderActions, O as excalidrawStatusDot, S as excalidrawFullscreenPopup, T as excalidrawLoading, _ as excalidrawDialogTitle, b as excalidrawEditorContainer, d as excalidrawConfirmBtnDanger, f as excalidrawConfirmBtnPrimary, g as excalidrawDialogMeta, i as excalidrawActionBarBtn, j as useExcalidrawConfig, k as readonlyUIOptions, l as excalidrawConfirmActions, m as excalidrawDialogHeader, p as excalidrawDialogCanvas, t as useExcalidrawData, u as excalidrawConfirmBtn, v as excalidrawEditLabel, w as excalidrawHeaderClose, x as excalidrawError, y as excalidrawEditOverlay } from "./useExcalidrawData-DcXa8vqV.js";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useColorScheme } from "@haklex/rich-editor";
-import { Clipboard, Download, Pencil, Save, X } from "lucide-react";
-import { SegmentedControl, dismissTopDialog, presentDialog } from "@haklex/rich-editor-ui";
-import { usePortalTheme } from "@haklex/rich-style-token";
-//#region src/ExcalidrawEditRenderer.tsx
-var ExcalidrawEditRenderer_exports = /* @__PURE__ */ __exportAll({ ExcalidrawEditRenderer: () => ExcalidrawEditRenderer });
-var SAVE_DEBOUNCE_MS = 2e3;
-var ExcalidrawEditorDialogContent = ({ dismiss, ExcalidrawComponent, initialData, initialSnapshot, theme, onSave, saveSnapshot, onClose, baseRef, baseData }) => {
-	const { className: portalClassName } = usePortalTheme();
-	const apiRef = useRef(null);
-	const saveTimerRef = useRef(void 0);
-	const [isDirty, setIsDirty] = useState(false);
-	const isDirtyRef = useRef(false);
-	const confirmDialogOpenRef = useRef(false);
-	const initializedRef = useRef(false);
-	const stableRef = 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 storageModeRef = useRef(storageMode);
-	const [savedRef, setSavedRef] = useState(() => {
-		if (!saveSnapshot || !initialSnapshot) return "";
-		if (initialSnapshot.type === "remote") return initialSnapshot.url;
-		if (initialSnapshot.type === "delta") return initialSnapshot.baseUrl;
-		return "";
-	});
-	const [isSaving, setIsSaving] = useState(false);
-	useEffect(() => {
-		const stableTimer = setTimeout(() => {
-			stableRef.current = true;
-		}, 500);
-		return () => {
-			clearTimeout(stableTimer);
-			if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-		};
-	}, []);
-	const getSnapshot = useCallback(() => {
-		const api = apiRef.current;
-		if (!api) return;
-		const appState = api.getAppState();
-		return {
-			elements: api.getSceneElements(),
-			appState: {
-				viewBackgroundColor: appState.viewBackgroundColor,
-				gridSize: appState.gridSize
-			},
-			files: api.getFiles()
-		};
-	}, []);
-	const performSave = useCallback(() => {
-		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-		const doc = getSnapshot();
-		if (!doc) return Promise.resolve();
-		const mode = storageModeRef.current;
-		if (mode === "delta" && saveSnapshot) {
-			setIsSaving(true);
-			return (async () => {
-				try {
-					const currentBaseUrl = baseRefRef.current;
-					const currentBaseData = baseDataRef.current;
-					if (!currentBaseUrl || !currentBaseData) {
-						const ref = await saveSnapshot(doc, baseRefRef.current || void 0);
-						baseRefRef.current = ref;
-						baseDataRef.current = doc;
-						setSavedRef(ref);
-					}
-					isDirtyRef.current = false;
-					setIsDirty(false);
-				} finally {
-					setIsSaving(false);
-				}
-			})();
-		}
-		if (mode === "remote" && saveSnapshot) {
-			if (baseRefRef.current && baseDataRef.current && JSON.stringify(doc) === JSON.stringify(baseDataRef.current)) {
-				isDirtyRef.current = false;
-				setIsDirty(false);
-				return Promise.resolve();
-			}
-			setIsSaving(true);
-			return saveSnapshot(doc, baseRefRef.current || void 0).then((ref) => {
-				baseRefRef.current = ref;
-				baseDataRef.current = doc;
-				isDirtyRef.current = false;
-				setIsDirty(false);
-				setIsSaving(false);
-				setSavedRef(ref);
-			}, () => {
-				setIsSaving(false);
-			});
-		}
-		isDirtyRef.current = false;
-		setIsDirty(false);
-		return Promise.resolve();
-	}, [saveSnapshot, getSnapshot]);
-	const emitSnapshot = useCallback(async () => {
-		const doc = getSnapshot();
-		if (!doc) return;
-		const mode = storageModeRef.current;
-		if (mode === "delta" && saveSnapshot) {
-			const currentBaseUrl = baseRefRef.current;
-			const currentBaseData = baseDataRef.current;
-			if (currentBaseUrl && currentBaseData) {
-				const { diff } = await import("jsondiffpatch");
-				const delta = diff(currentBaseData, structuredClone(doc));
-				onSave(delta ? {
-					type: "delta",
-					baseUrl: currentBaseUrl,
-					delta
-				} : {
-					type: "remote",
-					url: currentBaseUrl
-				});
-			} else onSave({
-				type: "remote",
-				url: await saveSnapshot(doc, baseRefRef.current || void 0)
-			});
-			return;
-		}
-		if (mode === "remote") {
-			const ref = baseRefRef.current;
-			if (ref) onSave({
-				type: "remote",
-				url: ref
-			});
-			else if (saveSnapshot) onSave({
-				type: "remote",
-				url: await saveSnapshot(doc)
-			});
-			return;
-		}
-		onSave({
-			type: "inline",
-			data: doc
-		});
-	}, [
-		onSave,
-		saveSnapshot,
-		getSnapshot
-	]);
-	const handleChange = useCallback((elements) => {
-		if (!initializedRef.current) {
-			initializedRef.current = true;
-			return;
-		}
-		if (!stableRef.current) return;
-		if (elements.length === 0) return;
-		if (!isDirtyRef.current) {
-			isDirtyRef.current = true;
-			setIsDirty(true);
-		}
-		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-		saveTimerRef.current = setTimeout(() => performSave(), SAVE_DEBOUNCE_MS);
-	}, [performSave]);
-	const handleSaveAndClose = useCallback(() => {
-		performSave().then(async () => {
-			await emitSnapshot();
-			onClose(getSnapshot());
-			dismiss();
-		});
-	}, [
-		performSave,
-		emitSnapshot,
-		getSnapshot,
-		onClose,
-		dismiss
-	]);
-	const handleDiscard = useCallback(() => {
-		if (saveTimerRef.current) clearTimeout(saveTimerRef.current);
-		dismiss();
-	}, [dismiss]);
-	const showConfirmDialog = useCallback(() => {
-		if (confirmDialogOpenRef.current) return;
-		confirmDialogOpenRef.current = true;
-		presentDialog({
-			title: "Unsaved Changes",
-			description: "You have unsaved changes that will be lost if you close now.",
-			content: ({ dismiss: dismissConfirm }) => {
-				const wrappedDismiss = () => {
-					confirmDialogOpenRef.current = false;
-					dismissConfirm();
-				};
-				return /* @__PURE__ */ jsxs("div", {
-					className: excalidrawConfirmActions,
-					children: [
-						/* @__PURE__ */ jsx("button", {
-							className: excalidrawConfirmBtn,
-							type: "button",
-							onClick: wrappedDismiss,
-							children: "Continue Editing"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							className: excalidrawConfirmBtnDanger,
-							type: "button",
-							onClick: () => {
-								wrappedDismiss();
-								handleDiscard();
-							},
-							children: "Discard"
-						}),
-						/* @__PURE__ */ jsx("button", {
-							className: excalidrawConfirmBtnPrimary,
-							type: "button",
-							onClick: () => {
-								wrappedDismiss();
-								handleSaveAndClose();
-							},
-							children: "Save & Close"
-						})
-					]
-				});
-			},
-			portalClassName,
-			theme,
-			showCloseButton: false,
-			clickOutsideToDismiss: false
-		});
-	}, [
-		handleDiscard,
-		handleSaveAndClose,
-		portalClassName,
-		theme
-	]);
-	const attemptClose = useCallback(() => {
-		if (isDirtyRef.current) showConfirmDialog();
-		else emitSnapshot().then(() => {
-			onClose(getSnapshot());
-			dismiss();
-		});
-	}, [
-		dismiss,
-		showConfirmDialog,
-		emitSnapshot,
-		getSnapshot,
-		onClose
-	]);
-	useEffect(() => {
-		const handleKeyDown = (e) => {
-			if (e.key === "Escape") {
-				e.preventDefault();
-				e.stopImmediatePropagation();
-				if (confirmDialogOpenRef.current) {
-					confirmDialogOpenRef.current = false;
-					dismissTopDialog();
-				} else attemptClose();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown, true);
-		return () => document.removeEventListener("keydown", handleKeyDown, true);
-	}, [attemptClose]);
-	const handleManualUpload = useCallback(() => {
-		performSave();
-	}, [performSave]);
-	const handleExportJson = useCallback(() => {
-		const doc = getSnapshot();
-		if (!doc) return;
-		const blob = new Blob([JSON.stringify(doc, null, 2)], { type: "application/json" });
-		const url = URL.createObjectURL(blob);
-		const a = document.createElement("a");
-		a.href = url;
-		a.download = "excalidraw-snapshot.json";
-		a.click();
-		URL.revokeObjectURL(url);
-	}, [getSnapshot]);
-	const handleCopyJson = useCallback(() => {
-		const doc = getSnapshot();
-		if (!doc) return;
-		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 handleStorageModeChange = useCallback((newMode) => {
-		setStorageMode(newMode);
-		storageModeRef.current = newMode;
-		if (newMode === "inline") setSavedRef("");
-		performSave();
-	}, [performSave]);
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-		className: excalidrawDialogHeader,
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: excalidrawStatusDot,
-				style: { backgroundColor: isDirty ? "#f59e0b" : "#22c55e" }
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: excalidrawDialogTitle,
-				children: "Canvas Editor"
-			}),
-			/* @__PURE__ */ jsx("span", {
-				className: excalidrawDialogMeta,
-				children: "excalidraw"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: excalidrawHeaderActions,
-				children: [
-					saveSnapshot && /* @__PURE__ */ jsxs(Fragment, { children: [
-						/* @__PURE__ */ jsx(SegmentedControl, {
-							value: storageMode,
-							items: [
-								{
-									value: "inline",
-									label: "Inline"
-								},
-								{
-									value: "remote",
-									label: "Remote"
-								},
-								{
-									value: "delta",
-									label: "Delta"
-								}
-							],
-							onChange: handleStorageModeChange
-						}),
-						/* @__PURE__ */ jsx("div", { className: "_1c3wdzlh" }),
-						/* @__PURE__ */ jsxs("button", {
-							className: "_1c3wdzlg",
-							disabled: isSaving,
-							type: "button",
-							onClick: handleManualUpload,
-							children: [/* @__PURE__ */ jsx(Save, { size: 14 }), /* @__PURE__ */ jsx("span", { children: isSaving ? "Saving..." : "Save" })]
-						}),
-						/* @__PURE__ */ jsx("div", { className: "_1c3wdzlh" })
-					] }),
-					/* @__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: "_1c3wdzlh" }), /* @__PURE__ */ jsx("input", {
-						className: "_1c3wdzli",
-						placeholder: "base URL / ref",
-						spellCheck: false,
-						type: "text",
-						value: savedRef,
-						onChange: handleRefChange
-					})] })
-				]
-			}),
-			/* @__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,
-			excalidrawAPI: (api) => {
-				apiRef.current = api;
-			},
-			onChange: handleChange
-		})
-	})] });
-};
-var ExcalidrawEditRenderer = ({ snapshot, onSnapshotChange }) => {
-	const theme = useColorScheme();
-	const { saveSnapshot } = useExcalidrawConfig();
-	const { snapshot: initialData, loading: dataLoading, error: dataError, baseRef, baseData } = useExcalidrawData(snapshot);
-	const [ExcalidrawComponent, setExcalidrawComponent] = useState(null);
-	const [libLoading, setLibLoading] = useState(true);
-	const previewApiRef = useRef(null);
-	const initialDataRef = useRef(void 0);
-	const [previewKey, setPreviewKey] = useState(0);
-	const onSnapshotChangeRef = useRef(onSnapshotChange);
-	onSnapshotChangeRef.current = onSnapshotChange;
-	const saveSnapshotRef = useRef(saveSnapshot);
-	saveSnapshotRef.current = saveSnapshot;
-	const snapshotRef = useRef(snapshot);
-	snapshotRef.current = snapshot;
-	const { className: portalClassName } = usePortalTheme();
-	useEffect(() => {
-		if (initialData && !initialDataRef.current) initialDataRef.current = initialData;
-	}, [initialData]);
-	useEffect(() => {
-		Promise.all([import("@excalidraw/excalidraw"), import("@excalidraw/excalidraw/index.css")]).then(([mod]) => {
-			const Comp = mod.Excalidraw || mod.default?.Excalidraw;
-			if (Comp) setExcalidrawComponent(() => Comp);
-			setLibLoading(false);
-		}).catch((err) => {
-			console.error("[excalidraw] failed to load", err);
-			setLibLoading(false);
-		});
-	}, []);
-	const baseRefRef = useRef(baseRef);
-	const baseDataRefOuter = useRef(baseData);
-	useEffect(() => {
-		if (baseRef) baseRefRef.current = baseRef;
-	}, [baseRef]);
-	useEffect(() => {
-		if (baseData) baseDataRefOuter.current = baseData;
-	}, [baseData]);
-	const handleOpenEditor = useCallback(() => {
-		if (!ExcalidrawComponent || dataLoading) return;
-		presentDialog({
-			content: ({ dismiss }) => /* @__PURE__ */ jsx(ExcalidrawEditorDialogContent, {
-				ExcalidrawComponent,
-				baseData: baseDataRefOuter.current,
-				baseRef: baseRefRef.current,
-				dismiss,
-				initialData: initialDataRef.current,
-				initialSnapshot: snapshotRef.current,
-				saveSnapshot: saveSnapshotRef.current,
-				theme,
-				onSave: (ref) => onSnapshotChangeRef.current(ref),
-				onClose: (doc) => {
-					if (doc) {
-						initialDataRef.current = doc;
-						setPreviewKey((k) => k + 1);
-					}
-				}
-			}),
-			className: excalidrawFullscreenPopup,
-			portalClassName,
-			theme,
-			showCloseButton: false,
-			clickOutsideToDismiss: false
-		});
-	}, [
-		ExcalidrawComponent,
-		dataLoading,
-		theme,
-		portalClassName
-	]);
-	if (dataLoading || libLoading || !ExcalidrawComponent) return /* @__PURE__ */ jsx("div", {
-		className: excalidrawEditorContainer,
-		children: /* @__PURE__ */ jsx("div", {
-			className: excalidrawLoading,
-			children: "Loading excalidraw editor..."
-		})
-	});
-	if (dataError) return /* @__PURE__ */ jsx("div", {
-		className: excalidrawEditorContainer,
-		children: /* @__PURE__ */ jsx("div", {
-			className: excalidrawError,
-			children: dataError
-		})
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: excalidrawEditorContainer,
-		children: [/* @__PURE__ */ jsx(ExcalidrawComponent, {
-			viewModeEnabled: true,
-			zenModeEnabled: true,
-			UIOptions: readonlyUIOptions,
-			initialData: initialDataRef.current,
-			theme,
-			excalidrawAPI: (api) => {
-				previewApiRef.current = api;
-				setTimeout(() => api.scrollToContent(), 100);
-			}
-		}, previewKey), /* @__PURE__ */ jsx("button", {
-			className: excalidrawEditOverlay,
-			type: "button",
-			onClick: handleOpenEditor,
-			children: /* @__PURE__ */ jsxs("span", {
-				className: excalidrawEditLabel,
-				children: [/* @__PURE__ */ jsx(Pencil, { size: 16 }), "Edit Whiteboard"]
-			})
-		})]
-	});
-};
-//#endregion
-export { ExcalidrawEditRenderer_exports as n, ExcalidrawEditRenderer as t };

package/dist/rolldown-runtime-CiIaOW0V.js

@@ -1,13 +0,0 @@
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
-export { __exportAll as t };

package/dist/transformer-zBd4ibNw.js

@@ -1,119 +0,0 @@
-import { E as excalidrawPlaceholder, _ as excalidrawDialogTitle, h as excalidrawDialogHeaderTitle, m as excalidrawDialogHeader, p as excalidrawDialogCanvas, w as excalidrawHeaderClose } from "./useExcalidrawData-DcXa8vqV.js";
-import { r as _defineProperty } from "./ExcalidrawDisplayRenderer-BWsFJSQ7.js";
-import { Suspense, lazy } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { X } from "lucide-react";
-import { ViewportGate } from "@haklex/rich-editor-ui";
-import { DecoratorNode } from "lexical";
-import { createRendererDecoration } from "@haklex/rich-editor/static";
-import { EXCALIDRAW_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
-//#region src/ExcalidrawSSRRenderer.tsx
-var LazyDisplayRenderer = lazy(() => import("./ExcalidrawDisplayRenderer-BWsFJSQ7.js").then((n) => n.n).then((m) => ({ default: m.ExcalidrawDisplayRenderer })));
-var 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 })
-	});
-};
-var ExcalidrawSSRRenderer = ({ onExpand, snapshot }) => {
-	return /* @__PURE__ */ jsx(ViewportGate, {
-		fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }),
-		children: /* @__PURE__ */ jsx(Suspense, {
-			fallback: /* @__PURE__ */ jsx(ExcalidrawPlaceholder, { snapshot }),
-			children: /* @__PURE__ */ jsx(LazyDisplayRenderer, {
-				snapshot,
-				onExpand
-			})
-		})
-	});
-};
-//#endregion
-//#region src/slot.ts
-var EXCALIDRAW_NODE_KEY = "Excalidraw";
-//#endregion
-//#region src/ExcalidrawNode.ts
-var ExcalidrawNode = class ExcalidrawNode extends DecoratorNode {
-	static getType() {
-		return "excalidraw";
-	}
-	static clone(node) {
-		return new ExcalidrawNode(node.__snapshot, node.__key);
-	}
-	constructor(snapshot, key) {
-		super(key);
-		_defineProperty(this, "__snapshot", void 0);
-		this.__snapshot = snapshot;
-	}
-	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 createRendererDecoration(EXCALIDRAW_NODE_KEY, ExcalidrawSSRRenderer, { snapshot: this.__snapshot });
-	}
-};
-function $createExcalidrawNode(snapshot) {
-	return new ExcalidrawNode(snapshot);
-}
-function $isExcalidrawNode(node) {
-	return node instanceof ExcalidrawNode;
-}
-//#endregion
-//#region src/ExcalidrawExpandShell.tsx
-var ExcalidrawExpandShell = ({ children, dismiss, meta = "excalidraw", title = "Whiteboard" }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
-	className: excalidrawDialogHeader,
-	children: [/* @__PURE__ */ jsxs("div", {
-		className: excalidrawDialogHeaderTitle,
-		children: [/* @__PURE__ */ jsx("span", {
-			className: excalidrawDialogTitle,
-			children: title
-		}), meta != null && /* @__PURE__ */ jsx("span", {
-			className: "_1c3wdzld",
-			children: meta
-		})]
-	}), /* @__PURE__ */ jsx("button", {
-		className: excalidrawHeaderClose,
-		type: "button",
-		onClick: dismiss,
-		children: /* @__PURE__ */ jsx(X, { size: 18 })
-	})]
-}), /* @__PURE__ */ jsx("div", {
-	className: excalidrawDialogCanvas,
-	children
-})] });
-//#endregion
-export { ExcalidrawNode as a, $isExcalidrawNode as i, ExcalidrawExpandShell as n, EXCALIDRAW_NODE_KEY as o, $createExcalidrawNode as r, ExcalidrawSSRRenderer as s, EXCALIDRAW_BLOCK_TRANSFORMER as t };