@haklex/rich-ext-tldraw 0.0.31 → 0.0.32

package/dist/TldrawDisplayRenderer.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface TldrawStaticRendererProps {
+    snapshot: string;
+}
+export declare const TldrawDisplayRenderer: FC<TldrawStaticRendererProps>;
+//# sourceMappingURL=TldrawDisplayRenderer.d.ts.map

package/dist/TldrawDisplayRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TldrawDisplayRenderer.d.ts","sourceRoot":"","sources":["../src/TldrawDisplayRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAA;AAM1D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,qBAAqB,EAAE,EAAE,CAAC,yBAAyB,CAsC/D,CAAA"}

package/dist/TldrawEditNode.d.ts

@@ -0,0 +1,14 @@
+import { SlashMenuItemConfig } from '@haklex/rich-editor';
+import { EditorConfig, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
+import { ReactElement } from 'react';
+import { SerializedTldrawNode, TldrawNode } from './TldrawNode';
+export declare class TldrawEditNode extends TldrawNode {
+    static slashMenuItems: SlashMenuItemConfig[];
+    static clone(node: TldrawEditNode): TldrawEditNode;
+    constructor(snapshot: string, key?: NodeKey);
+    static importJSON(serializedNode: SerializedTldrawNode): TldrawEditNode;
+    decorate(editor: LexicalEditor, _config: EditorConfig): ReactElement;
+}
+export declare function $createTldrawEditNode(snapshot: string): TldrawEditNode;
+export declare function $isTldrawEditNode(node: LexicalNode | null | undefined): node is TldrawEditNode;
+//# sourceMappingURL=TldrawEditNode.d.ts.map

package/dist/TldrawEditNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TldrawEditNode.d.ts","sourceRoot":"","sources":["../src/TldrawEditNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,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,KAAK,oBAAoB,EAAC,UAAU,EAAE,MAAM,cAAc,CAAA;AAanE,qBAAa,cAAe,SAAQ,UAAU;IAC5C,MAAM,CAAC,cAAc,EAAE,mBAAmB,EAAE,CAa3C;IAED,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,cAAc,GAAG,cAAc;gBAItC,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAI3C,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,oBAAoB,GAAG,cAAc;IAIvE,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAsCrE;AAED,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc,CAEtE;AAED,wBAAgB,iBAAiB,CAC/B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,cAAc,CAExB"}

package/dist/TldrawNode.d.ts

@@ -1,4 +1,3 @@
-import { SlashMenuItemConfig } from '@haklex/rich-editor';
 import { EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread, DecoratorNode } from 'lexical';
 import { ReactElement } from 'react';
 export type SerializedTldrawNode = Spread<{
@@ -6,7 +5,6 @@ export type SerializedTldrawNode = Spread<{
 }, SerializedLexicalNode>;
 export declare class TldrawNode extends DecoratorNode<ReactElement> {
     __snapshot: string;
-    static slashMenuItems: SlashMenuItemConfig[];
     static getType(): string;
     static clone(node: TldrawNode): TldrawNode;
     constructor(snapshot: string, key?: NodeKey);
@@ -17,7 +15,7 @@ export declare class TldrawNode extends DecoratorNode<ReactElement> {
     exportJSON(): SerializedTldrawNode;
     getSnapshot(): string;
     setSnapshot(snapshot: string): void;
-    decorate(editor: LexicalEditor, _config: EditorConfig): ReactElement;
+    decorate(_editor: LexicalEditor, _config: EditorConfig): ReactElement;
 }
 export declare function $createTldrawNode(snapshot: string): TldrawNode;
 export declare function $isTldrawNode(node: LexicalNode | null | undefined): node is TldrawNode;

package/dist/TldrawNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TldrawNode.d.ts","sourceRoot":"","sources":["../src/TldrawNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAC9D,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EACP,MAAM,SAAS,CAAA;AAChB,OAAO,EAA+B,aAAa,EAAE,MAAM,SAAS,CAAA;AAEpE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAczC,MAAM,MAAM,oBAAoB,GAAG,MAAM,CACvC;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,EACpB,qBAAqB,CACtB,CAAA;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,YAAY,CAAC;IACzD,UAAU,EAAE,MAAM,CAAA;IAElB,MAAM,CAAC,cAAc,EAAE,mBAAmB,EAAE,CAa3C;IAED,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU;gBAI9B,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAK3C,SAAS,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAM7C,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,OAAO;IAInB,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,oBAAoB,GAAG,UAAU;IAInE,UAAU,IAAI,oBAAoB;IASlC,WAAW,IAAI,MAAM;IAIrB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKnC,QAAQ,CAAC,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAsCrE;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAE9D;AAED,wBAAgB,aAAa,CAC3B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,UAAU,CAEpB"}
+{"version":3,"file":"TldrawNode.d.ts","sourceRoot":"","sources":["../src/TldrawNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,aAAa,EACb,WAAW,EACX,OAAO,EACP,qBAAqB,EACrB,MAAM,EACP,MAAM,SAAS,CAAA;AAChB,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AAKzC,MAAM,MAAM,oBAAoB,GAAG,MAAM,CACvC;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,EACpB,qBAAqB,CACtB,CAAA;AAED,qBAAa,UAAW,SAAQ,aAAa,CAAC,YAAY,CAAC;IACzD,UAAU,EAAE,MAAM,CAAA;IAElB,MAAM,CAAC,OAAO,IAAI,MAAM;IAIxB,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,UAAU,GAAG,UAAU;gBAI9B,QAAQ,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,OAAO;IAK3C,SAAS,CAAC,OAAO,EAAE,YAAY,GAAG,WAAW;IAM7C,SAAS,IAAI,OAAO;IAIpB,QAAQ,IAAI,OAAO;IAInB,MAAM,CAAC,UAAU,CAAC,cAAc,EAAE,oBAAoB,GAAG,UAAU;IAInE,UAAU,IAAI,oBAAoB;IASlC,WAAW,IAAI,MAAM;IAIrB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAKnC,QAAQ,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,YAAY,GAAG,YAAY;CAKtE;AAED,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAE9D;AAED,wBAAgB,aAAa,CAC3B,IAAI,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACnC,IAAI,IAAI,UAAU,CAEpB"}

package/dist/TldrawRenderer.d.ts

@@ -1,3 +1,3 @@
-export type { TldrawStaticRendererProps as TldrawRendererProps } from './TldrawStaticRenderer';
-export { TldrawStaticRenderer as TldrawRenderer } from './TldrawStaticRenderer';
+export type { TldrawStaticRendererProps as TldrawRendererProps } from './TldrawDisplayRenderer';
+export { TldrawDisplayRenderer as TldrawRenderer } from './TldrawDisplayRenderer';
 //# sourceMappingURL=TldrawRenderer.d.ts.map

package/dist/TldrawRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TldrawRenderer.d.ts","sourceRoot":"","sources":["../src/TldrawRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC9F,OAAO,EAAE,oBAAoB,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"TldrawRenderer.d.ts","sourceRoot":"","sources":["../src/TldrawRenderer.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,yBAAyB,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAC/F,OAAO,EAAE,qBAAqB,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/TldrawSSRRenderer.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+export interface TldrawSSRRendererProps {
+    snapshot: string;
+}
+export declare const TldrawSSRRenderer: FC<TldrawSSRRendererProps>;
+//# sourceMappingURL=TldrawSSRRenderer.d.ts.map

package/dist/TldrawSSRRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TldrawSSRRenderer.d.ts","sourceRoot":"","sources":["../src/TldrawSSRRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAE/B,MAAM,WAAW,sBAAsB;IACrC,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,iBAAiB,EAAE,EAAE,CAAC,sBAAsB,CAqCxD,CAAA"}

package/dist/index.d.ts

@@ -1,13 +1,18 @@
 export type { TldrawConfig } from './TldrawConfigContext';
 export { TldrawConfigProvider, useTldrawConfig } from './TldrawConfigContext';
+export type { TldrawStaticRendererProps as TldrawDisplayRendererProps } from './TldrawDisplayRenderer';
+export { TldrawDisplayRenderer } from './TldrawDisplayRenderer';
+export { $createTldrawEditNode, $isTldrawEditNode, TldrawEditNode, } from './TldrawEditNode';
 export type { TldrawEditRendererProps } from './TldrawEditRenderer';
 export { TldrawEditRenderer } from './TldrawEditRenderer';
 export type { SerializedTldrawNode } from './TldrawNode';
 export { $createTldrawNode, $isTldrawNode, TldrawNode } from './TldrawNode';
 export { INSERT_TLDRAW_COMMAND, TldrawPlugin } from './TldrawPlugin';
-export type { TldrawStaticRendererProps } from './TldrawStaticRenderer';
-export { TldrawStaticRenderer } from './TldrawStaticRenderer';
+export type { TldrawSSRRendererProps } from './TldrawSSRRenderer';
+export { TldrawSSRRenderer } from './TldrawSSRRenderer';
 export { TLDRAW_BLOCK_TRANSFORMER } from './transformer';
-export type { TldrawStaticRendererProps as TldrawRendererProps } from './TldrawStaticRenderer';
-export { TldrawStaticRenderer as TldrawRenderer } from './TldrawStaticRenderer';
+export type { TldrawStaticRendererProps } from './TldrawDisplayRenderer';
+export type { TldrawStaticRendererProps as TldrawRendererProps } from './TldrawDisplayRenderer';
+export { TldrawDisplayRenderer as TldrawStaticRenderer } from './TldrawDisplayRenderer';
+export { TldrawDisplayRenderer as TldrawRenderer } from './TldrawDisplayRenderer';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC7E,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC3E,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpE,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAA;AACvE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAC7D,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAA;AAGxD,YAAY,EAAE,yBAAyB,IAAI,mBAAmB,EAAE,MAAM,wBAAwB,CAAA;AAC9F,OAAO,EAAE,oBAAoB,IAAI,cAAc,EAAE,MAAM,wBAAwB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAC7E,YAAY,EAAE,yBAAyB,IAAI,0BAA0B,EAAE,MAAM,yBAAyB,CAAA;AACtG,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,cAAc,GACf,MAAM,kBAAkB,CAAA;AACzB,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAA;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA;AACxD,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAC3E,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AACpE,YAAY,EAAE,sBAAsB,EAAE,MAAM,qBAAqB,CAAA;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAA;AAGxD,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAA;AACxE,YAAY,EAAE,yBAAyB,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAC/F,OAAO,EAAE,qBAAqB,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AACvF,OAAO,EAAE,qBAAqB,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAA"}

package/dist/index.mjs

@@ -2,11 +2,11 @@ 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 { createContext, use, useMemo, useState, useEffect, useRef, useCallback, lazy, createElement, Suspense, Component } from "react";
+import { createContext, use, useMemo, useState, useEffect, useRef, useCallback, Component, createElement, lazy, Suspense } from "react";
 import { useColorScheme } from "@haklex/rich-editor";
 import { presentDialog, SegmentedControl } from "@haklex/rich-editor-ui";
 import { usePortalTheme } from "@haklex/rich-style-token";
-import { Pencil, Upload, Download, Clipboard, X, PenTool, ZoomIn, ZoomOut, ScanSearch, Maximize2 } from "lucide-react";
+import { ZoomIn, ZoomOut, ScanSearch, Maximize2, X, PenTool, Pencil, Upload, Download, Clipboard } from "lucide-react";
 import { DecoratorNode, $insertNodes, $getNodeByKey, createCommand, COMMAND_PRIORITY_EDITOR } from "lexical";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { TLDRAW_BLOCK_TRANSFORMER } from "@haklex/rich-headless/transformers";
@@ -115,6 +115,356 @@ function useTldrawData(data) {
   }
   return { snapshot: void 0, loading: false, error: "" };
 }
+const TldrawDisplayRenderer = ({
+  snapshot
+}) => {
+  const theme = useColorScheme();
+  const containerRef = useRef(null);
+  const [hasEnteredView, setHasEnteredView] = useState(false);
+  useEffect(() => {
+    if (hasEnteredView) return;
+    const target = containerRef.current;
+    if (!target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          setHasEnteredView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px 0px", threshold: 0.1 }
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [hasEnteredView]);
+  if (!hasEnteredView) {
+    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw..." }) });
+  }
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(TldrawStaticCanvas, { snapshot, theme }) });
+};
+const TldrawExpandContent = ({ dismiss, TldrawComponent, data, theme }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsxs("div", { className: tldrawDialogHeader, children: [
+    /* @__PURE__ */ jsx("span", { className: tldrawDialogTitle, children: "Whiteboard" }),
+    /* @__PURE__ */ jsx("span", { className: tldrawDialogMeta, children: "tldraw" }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: tldrawHeaderClose, onClick: dismiss, children: /* @__PURE__ */ jsx(X, { size: 18 }) })
+  ] }),
+  /* @__PURE__ */ jsx("div", { className: tldrawDialogCanvas, children: /* @__PURE__ */ jsx(
+    TldrawComponent,
+    {
+      snapshot: data,
+      hideUi: true,
+      onMount: (editor) => {
+        editor.updateInstanceState({ isReadonly: true });
+        editor.setCurrentTool("hand");
+        editor.user.updateUserPreferences({ colorScheme: theme });
+        setTimeout(() => editor.zoomToFit({ animate: false }), 100);
+      }
+    }
+  ) })
+] });
+const TldrawStaticCanvas = ({ snapshot, theme }) => {
+  const {
+    snapshot: data,
+    loading: dataLoading,
+    error: dataError
+  } = useTldrawData(snapshot);
+  const [TldrawComponent, setTldrawComponent] = useState(null);
+  const [libLoading, setLibLoading] = useState(true);
+  const editorRef = useRef(null);
+  const { className: portalClassName } = usePortalTheme();
+  useEffect(() => {
+    import("tldraw").then((mod) => {
+      setTldrawComponent(() => mod.Tldraw);
+      setLibLoading(false);
+    }).catch(() => setLibLoading(false));
+  }, []);
+  useEffect(() => {
+    if (editorRef.current?.user?.updateUserPreferences) {
+      editorRef.current.user.updateUserPreferences({ colorScheme: theme });
+    }
+  }, [theme]);
+  const handleMount = useCallback(
+    (editor) => {
+      editorRef.current = editor;
+      editor.updateInstanceState({ isReadonly: true });
+      editor.setCurrentTool("hand");
+      editor.user.updateUserPreferences({ colorScheme: theme });
+      setTimeout(() => {
+        editor.zoomToFit({ animate: false });
+      }, 100);
+    },
+    [theme]
+  );
+  const handleExpand = useCallback(() => {
+    if (!TldrawComponent || !data) return;
+    presentDialog({
+      content: ({ dismiss }) => /* @__PURE__ */ jsx(
+        TldrawExpandContent,
+        {
+          dismiss,
+          TldrawComponent,
+          data,
+          theme
+        }
+      ),
+      className: tldrawFullscreenPopup,
+      portalClassName,
+      showCloseButton: false,
+      clickOutsideToDismiss: true
+    });
+  }, [TldrawComponent, data, theme, portalClassName]);
+  const loading = dataLoading || libLoading;
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw..." }) });
+  }
+  if (dataError || !data) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: dataError || "No data" }) });
+  }
+  if (!TldrawComponent) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: "Failed to load tldraw" }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: tldrawStaticContainer,
+      "data-theme": theme,
+      "data-color-scheme": theme,
+      children: [
+        /* @__PURE__ */ jsx(
+          TldrawErrorBoundary,
+          {
+            fallback: /* @__PURE__ */ jsx("div", { className: tldrawError, children: "Failed to render tldraw" }),
+            children: /* @__PURE__ */ jsx(TldrawComponent, { snapshot: data, hideUi: true, onMount: handleMount })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: tldrawActionGroup, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Zoom In",
+              onClick: () => editorRef.current?.zoomIn(),
+              children: /* @__PURE__ */ jsx(ZoomIn, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Zoom Out",
+              onClick: () => editorRef.current?.zoomOut(),
+              children: /* @__PURE__ */ jsx(ZoomOut, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Fit to Content",
+              onClick: () => editorRef.current?.zoomToFit(),
+              children: /* @__PURE__ */ jsx(ScanSearch, { size: 20 })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: tldrawActionButton,
+              title: "Expand",
+              onClick: handleExpand,
+              children: /* @__PURE__ */ jsx(Maximize2, { size: 20 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+class TldrawErrorBoundary 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 TldrawDisplayRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  TldrawDisplayRenderer
+}, Symbol.toStringTag, { value: "Module" }));
+const TldrawSSRRenderer = ({ snapshot }) => {
+  let label = "Tldraw Whiteboard";
+  try {
+    const data = JSON.parse(snapshot);
+    if (data && typeof data === "object") {
+      const shapeCount = Object.keys(data).filter(
+        (k) => k.startsWith("shape:")
+      ).length;
+      if (shapeCount > 0) {
+        label = `Tldraw Whiteboard (${shapeCount} shapes)`;
+      }
+    }
+  } catch {
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "rich-tldraw-ssr-placeholder",
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: "16 / 10",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--rich-tldraw-bg, #f5f5f5)",
+        borderRadius: "8px",
+        border: "1px solid var(--rich-tldraw-border, #e5e5e5)",
+        color: "var(--rich-tldraw-fg, #737373)",
+        fontSize: "14px"
+      },
+      "aria-label": label,
+      children: /* @__PURE__ */ jsx("span", { children: label })
+    }
+  );
+};
+class TldrawNode extends DecoratorNode {
+  constructor(snapshot, key) {
+    super(key);
+    __publicField(this, "__snapshot");
+    this.__snapshot = snapshot;
+  }
+  static getType() {
+    return "tldraw";
+  }
+  static clone(node) {
+    return new TldrawNode(node.__snapshot, node.__key);
+  }
+  createDOM(_config) {
+    const div = document.createElement("div");
+    div.className = "rich-tldraw-wrapper";
+    return div;
+  }
+  updateDOM() {
+    return false;
+  }
+  isInline() {
+    return false;
+  }
+  static importJSON(serializedNode) {
+    return $createTldrawNode(serializedNode.snapshot);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: "tldraw",
+      snapshot: this.__snapshot,
+      version: 1
+    };
+  }
+  getSnapshot() {
+    return this.__snapshot;
+  }
+  setSnapshot(snapshot) {
+    const writable = this.getWritable();
+    writable.__snapshot = snapshot;
+  }
+  decorate(_editor, _config) {
+    return createElement(TldrawSSRRenderer, {
+      snapshot: this.__snapshot
+    });
+  }
+}
+function $createTldrawNode(snapshot) {
+  return new TldrawNode(snapshot);
+}
+function $isTldrawNode(node) {
+  return node instanceof TldrawNode;
+}
+const LazyDisplayRenderer = lazy(
+  () => Promise.resolve().then(() => TldrawDisplayRenderer$1).then((m) => ({
+    default: m.TldrawDisplayRenderer
+  }))
+);
+const LazyEditRenderer = lazy(
+  () => Promise.resolve().then(() => TldrawEditRenderer$1).then((m) => ({
+    default: m.TldrawEditRenderer
+  }))
+);
+const _TldrawEditNode = class _TldrawEditNode extends TldrawNode {
+  static clone(node) {
+    return new _TldrawEditNode(node.__snapshot, node.__key);
+  }
+  constructor(snapshot, key) {
+    super(snapshot, key);
+  }
+  static importJSON(serializedNode) {
+    return new _TldrawEditNode(serializedNode.snapshot);
+  }
+  decorate(editor, _config) {
+    const nodeKey = this.__key;
+    const isEditable = editor.isEditable();
+    const fallback = createElement("div", {
+      className: "rich-tldraw-loading",
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: "16 / 10",
+        margin: "1rem 0"
+      }
+    });
+    if (isEditable) {
+      return createElement(
+        Suspense,
+        { fallback },
+        createElement(LazyEditRenderer, {
+          snapshot: this.__snapshot,
+          onSnapshotChange: (newSnapshot) => {
+            editor.update(() => {
+              const node = $getNodeByKey(nodeKey);
+              if (node) {
+                node.setSnapshot(newSnapshot);
+              }
+            });
+          }
+        })
+      );
+    }
+    return createElement(
+      Suspense,
+      { fallback },
+      createElement(LazyDisplayRenderer, { snapshot: this.__snapshot })
+    );
+  }
+};
+__publicField(_TldrawEditNode, "slashMenuItems", [
+  {
+    title: "Whiteboard",
+    icon: createElement(PenTool, { size: 20 }),
+    description: "Tldraw whiteboard canvas",
+    keywords: ["tldraw", "whiteboard", "draw", "canvas"],
+    section: "MEDIA",
+    onSelect: (editor) => {
+      editor.update(() => {
+        $insertNodes([$createTldrawEditNode("{}")]);
+      });
+    }
+  }
+]);
+let TldrawEditNode = _TldrawEditNode;
+function $createTldrawEditNode(snapshot) {
+  return new TldrawEditNode(snapshot);
+}
+function $isTldrawEditNode(node) {
+  return node instanceof TldrawEditNode;
+}
 const SAVE_DEBOUNCE_MS = 2e3;
 const TldrawEditorDialogContent = ({
   dismiss,
@@ -402,301 +752,39 @@ const TldrawEditorDialogContent = ({
           className: tldrawHeaderClose,
           onClick: attemptClose,
           children: /* @__PURE__ */ jsx(X, { size: 18 })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: tldrawDialogCanvas, children: /* @__PURE__ */ jsx(TldrawComponent, { snapshot: initialData, onMount: handleMount }) })
-  ] });
-};
-const TldrawEditRenderer = ({
-  snapshot,
-  onSnapshotChange
-}) => {
-  const theme = useColorScheme();
-  const { saveSnapshot } = useTldrawConfig();
-  const {
-    snapshot: initialData,
-    loading: dataLoading,
-    error: dataError
-  } = useTldrawData(snapshot);
-  const [TldrawComponent, setTldrawComponent] = useState(null);
-  const [libLoading, setLibLoading] = useState(true);
-  const previewEditorRef = useRef(null);
-  const initialDataRef = useRef(void 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(() => {
-    import("tldraw").then((mod) => {
-      setTldrawComponent(() => mod.Tldraw);
-      setLibLoading(false);
-    }).catch(() => setLibLoading(false));
-  }, []);
-  useEffect(() => {
-    if (previewEditorRef.current?.user?.updateUserPreferences) {
-      previewEditorRef.current.user.updateUserPreferences({
-        colorScheme: theme
-      });
-    }
-  }, [theme]);
-  const handlePreviewMount = useCallback(
-    (editor) => {
-      previewEditorRef.current = editor;
-      editor.updateInstanceState({ isReadonly: true });
-      editor.setCurrentTool("hand");
-      editor.user.updateUserPreferences({ colorScheme: theme });
-      setTimeout(() => editor.zoomToFit({ animate: false }), 100);
-    },
-    [theme]
-  );
-  const handleOpenEditor = useCallback(() => {
-    if (!TldrawComponent) return;
-    presentDialog({
-      content: ({ dismiss }) => /* @__PURE__ */ jsx(
-        TldrawEditorDialogContent,
-        {
-          dismiss,
-          TldrawComponent,
-          initialData: initialDataRef.current,
-          initialSnapshot: snapshotRef.current,
-          theme,
-          onSave: (ref) => onSnapshotChangeRef.current(ref),
-          saveSnapshot: saveSnapshotRef.current,
-          onClose: (doc) => {
-            if (doc) initialDataRef.current = doc;
-          }
-        }
-      ),
-      className: tldrawFullscreenPopup,
-      portalClassName,
-      showCloseButton: false,
-      clickOutsideToDismiss: false
-    });
-  }, [TldrawComponent, theme, portalClassName]);
-  const loading = dataLoading || libLoading;
-  if (loading || !TldrawComponent) {
-    return /* @__PURE__ */ jsx("div", { className: tldrawEditorContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw editor..." }) });
-  }
-  if (dataError) {
-    return /* @__PURE__ */ jsx("div", { className: tldrawEditorContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: dataError }) });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: tldrawEditorContainer, children: [
-    /* @__PURE__ */ jsx(
-      TldrawComponent,
-      {
-        snapshot: initialDataRef.current,
-        hideUi: true,
-        onMount: handlePreviewMount
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: tldrawEditOverlay,
-        onClick: handleOpenEditor,
-        children: /* @__PURE__ */ jsxs("span", { className: tldrawEditLabel, children: [
-          /* @__PURE__ */ jsx(Pencil, { size: 16 }),
-          "Edit Whiteboard"
-        ] })
-      }
-    )
-  ] });
-};
-const TldrawEditRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-  __proto__: null,
-  TldrawEditRenderer
-}, Symbol.toStringTag, { value: "Module" }));
-const LazyStaticRenderer = lazy(
-  () => Promise.resolve().then(() => TldrawStaticRenderer$1).then((m) => ({
-    default: m.TldrawStaticRenderer
-  }))
-);
-const LazyEditRenderer = lazy(
-  () => Promise.resolve().then(() => TldrawEditRenderer$1).then((m) => ({
-    default: m.TldrawEditRenderer
-  }))
-);
-const _TldrawNode = class _TldrawNode extends DecoratorNode {
-  constructor(snapshot, key) {
-    super(key);
-    __publicField(this, "__snapshot");
-    this.__snapshot = snapshot;
-  }
-  static getType() {
-    return "tldraw";
-  }
-  static clone(node) {
-    return new _TldrawNode(node.__snapshot, node.__key);
-  }
-  createDOM(_config) {
-    const div = document.createElement("div");
-    div.className = "rich-tldraw-wrapper";
-    return div;
-  }
-  updateDOM() {
-    return false;
-  }
-  isInline() {
-    return false;
-  }
-  static importJSON(serializedNode) {
-    return $createTldrawNode(serializedNode.snapshot);
-  }
-  exportJSON() {
-    return {
-      ...super.exportJSON(),
-      type: "tldraw",
-      snapshot: this.__snapshot,
-      version: 1
-    };
-  }
-  getSnapshot() {
-    return this.__snapshot;
-  }
-  setSnapshot(snapshot) {
-    const writable = this.getWritable();
-    writable.__snapshot = snapshot;
-  }
-  decorate(editor, _config) {
-    const nodeKey = this.__key;
-    const isEditable = editor.isEditable();
-    const fallback = createElement("div", {
-      className: "rich-tldraw-loading",
-      style: {
-        position: "relative",
-        width: "100%",
-        aspectRatio: "16 / 10",
-        margin: "1rem 0"
-      }
-    });
-    if (isEditable) {
-      return createElement(
-        Suspense,
-        { fallback },
-        createElement(LazyEditRenderer, {
-          snapshot: this.__snapshot,
-          onSnapshotChange: (newSnapshot) => {
-            editor.update(() => {
-              const node = $getNodeByKey(nodeKey);
-              if (node) {
-                node.setSnapshot(newSnapshot);
-              }
-            });
-          }
-        })
-      );
-    }
-    return createElement(
-      Suspense,
-      { fallback },
-      createElement(LazyStaticRenderer, { snapshot: this.__snapshot })
-    );
-  }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: tldrawDialogCanvas, children: /* @__PURE__ */ jsx(TldrawComponent, { snapshot: initialData, onMount: handleMount }) })
+  ] });
 };
-__publicField(_TldrawNode, "slashMenuItems", [
-  {
-    title: "Whiteboard",
-    icon: createElement(PenTool, { size: 20 }),
-    description: "Tldraw whiteboard canvas",
-    keywords: ["tldraw", "whiteboard", "draw", "canvas"],
-    section: "MEDIA",
-    onSelect: (editor) => {
-      editor.update(() => {
-        $insertNodes([$createTldrawNode("{}")]);
-      });
-    }
-  }
-]);
-let TldrawNode = _TldrawNode;
-function $createTldrawNode(snapshot) {
-  return new TldrawNode(snapshot);
-}
-function $isTldrawNode(node) {
-  return node instanceof TldrawNode;
-}
-const INSERT_TLDRAW_COMMAND = createCommand("INSERT_TLDRAW");
-function TldrawPlugin() {
-  const [editor] = useLexicalComposerContext();
-  useEffect(() => {
-    return editor.registerCommand(
-      INSERT_TLDRAW_COMMAND,
-      (snapshot) => {
-        const node = $createTldrawNode(snapshot);
-        $insertNodes([node]);
-        return true;
-      },
-      COMMAND_PRIORITY_EDITOR
-    );
-  }, [editor]);
-  return null;
-}
-const TldrawStaticRenderer = ({
-  snapshot
+const TldrawEditRenderer = ({
+  snapshot,
+  onSnapshotChange
 }) => {
   const theme = useColorScheme();
-  const containerRef = useRef(null);
-  const [hasEnteredView, setHasEnteredView] = useState(false);
-  useEffect(() => {
-    if (hasEnteredView) return;
-    const target = containerRef.current;
-    if (!target) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries.some((e) => e.isIntersecting)) {
-          setHasEnteredView(true);
-          observer.disconnect();
-        }
-      },
-      { rootMargin: "200px 0px", threshold: 0.1 }
-    );
-    observer.observe(target);
-    return () => observer.disconnect();
-  }, [hasEnteredView]);
-  if (!hasEnteredView) {
-    return /* @__PURE__ */ jsx("div", { ref: containerRef, className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw..." }) });
-  }
-  return /* @__PURE__ */ jsx("div", { ref: containerRef, children: /* @__PURE__ */ jsx(TldrawStaticCanvas, { snapshot, theme }) });
-};
-const TldrawExpandContent = ({ dismiss, TldrawComponent, data, theme }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-  /* @__PURE__ */ jsxs("div", { className: tldrawDialogHeader, children: [
-    /* @__PURE__ */ jsx("span", { className: tldrawDialogTitle, children: "Whiteboard" }),
-    /* @__PURE__ */ jsx("span", { className: tldrawDialogMeta, children: "tldraw" }),
-    /* @__PURE__ */ jsx("button", { type: "button", className: tldrawHeaderClose, onClick: dismiss, children: /* @__PURE__ */ jsx(X, { size: 18 }) })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: tldrawDialogCanvas, children: /* @__PURE__ */ jsx(
-    TldrawComponent,
-    {
-      snapshot: data,
-      hideUi: true,
-      onMount: (editor) => {
-        editor.updateInstanceState({ isReadonly: true });
-        editor.setCurrentTool("hand");
-        editor.user.updateUserPreferences({ colorScheme: theme });
-        setTimeout(() => editor.zoomToFit({ animate: false }), 100);
-      }
-    }
-  ) })
-] });
-const TldrawStaticCanvas = ({ snapshot, theme }) => {
+  const { saveSnapshot } = useTldrawConfig();
   const {
-    snapshot: data,
+    snapshot: initialData,
     loading: dataLoading,
     error: dataError
   } = useTldrawData(snapshot);
   const [TldrawComponent, setTldrawComponent] = useState(null);
   const [libLoading, setLibLoading] = useState(true);
-  const editorRef = useRef(null);
+  const previewEditorRef = useRef(null);
+  const initialDataRef = useRef(void 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(() => {
     import("tldraw").then((mod) => {
       setTldrawComponent(() => mod.Tldraw);
@@ -704,136 +792,111 @@ const TldrawStaticCanvas = ({ snapshot, theme }) => {
     }).catch(() => setLibLoading(false));
   }, []);
   useEffect(() => {
-    if (editorRef.current?.user?.updateUserPreferences) {
-      editorRef.current.user.updateUserPreferences({ colorScheme: theme });
+    if (previewEditorRef.current?.user?.updateUserPreferences) {
+      previewEditorRef.current.user.updateUserPreferences({
+        colorScheme: theme
+      });
     }
   }, [theme]);
-  const handleMount = useCallback(
+  const handlePreviewMount = useCallback(
     (editor) => {
-      editorRef.current = editor;
+      previewEditorRef.current = editor;
       editor.updateInstanceState({ isReadonly: true });
       editor.setCurrentTool("hand");
       editor.user.updateUserPreferences({ colorScheme: theme });
-      setTimeout(() => {
-        editor.zoomToFit({ animate: false });
-      }, 100);
+      setTimeout(() => editor.zoomToFit({ animate: false }), 100);
     },
     [theme]
   );
-  const handleExpand = useCallback(() => {
-    if (!TldrawComponent || !data) return;
+  const handleOpenEditor = useCallback(() => {
+    if (!TldrawComponent) return;
     presentDialog({
       content: ({ dismiss }) => /* @__PURE__ */ jsx(
-        TldrawExpandContent,
+        TldrawEditorDialogContent,
         {
           dismiss,
           TldrawComponent,
-          data,
-          theme
+          initialData: initialDataRef.current,
+          initialSnapshot: snapshotRef.current,
+          theme,
+          onSave: (ref) => onSnapshotChangeRef.current(ref),
+          saveSnapshot: saveSnapshotRef.current,
+          onClose: (doc) => {
+            if (doc) initialDataRef.current = doc;
+          }
         }
       ),
       className: tldrawFullscreenPopup,
       portalClassName,
       showCloseButton: false,
-      clickOutsideToDismiss: true
+      clickOutsideToDismiss: false
     });
-  }, [TldrawComponent, data, theme, portalClassName]);
+  }, [TldrawComponent, theme, portalClassName]);
   const loading = dataLoading || libLoading;
-  if (loading) {
-    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw..." }) });
-  }
-  if (dataError || !data) {
-    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: dataError || "No data" }) });
+  if (loading || !TldrawComponent) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawEditorContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawLoading, children: "Loading tldraw editor..." }) });
   }
-  if (!TldrawComponent) {
-    return /* @__PURE__ */ jsx("div", { className: tldrawStaticContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: "Failed to load tldraw" }) });
+  if (dataError) {
+    return /* @__PURE__ */ jsx("div", { className: tldrawEditorContainer, children: /* @__PURE__ */ jsx("div", { className: tldrawError, children: dataError }) });
   }
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: tldrawStaticContainer,
-      "data-theme": theme,
-      "data-color-scheme": theme,
-      children: [
-        /* @__PURE__ */ jsx(
-          TldrawErrorBoundary,
-          {
-            fallback: /* @__PURE__ */ jsx("div", { className: tldrawError, children: "Failed to render tldraw" }),
-            children: /* @__PURE__ */ jsx(TldrawComponent, { snapshot: data, hideUi: true, onMount: handleMount })
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: tldrawActionGroup, children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: tldrawActionButton,
-              title: "Zoom In",
-              onClick: () => editorRef.current?.zoomIn(),
-              children: /* @__PURE__ */ jsx(ZoomIn, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: tldrawActionButton,
-              title: "Zoom Out",
-              onClick: () => editorRef.current?.zoomOut(),
-              children: /* @__PURE__ */ jsx(ZoomOut, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: tldrawActionButton,
-              title: "Fit to Content",
-              onClick: () => editorRef.current?.zoomToFit(),
-              children: /* @__PURE__ */ jsx(ScanSearch, { size: 20 })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              className: tldrawActionButton,
-              title: "Expand",
-              onClick: handleExpand,
-              children: /* @__PURE__ */ jsx(Maximize2, { size: 20 })
-            }
-          )
+  return /* @__PURE__ */ jsxs("div", { className: tldrawEditorContainer, children: [
+    /* @__PURE__ */ jsx(
+      TldrawComponent,
+      {
+        snapshot: initialDataRef.current,
+        hideUi: true,
+        onMount: handlePreviewMount
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: tldrawEditOverlay,
+        onClick: handleOpenEditor,
+        children: /* @__PURE__ */ jsxs("span", { className: tldrawEditLabel, children: [
+          /* @__PURE__ */ jsx(Pencil, { size: 16 }),
+          "Edit Whiteboard"
         ] })
-      ]
-    }
-  );
+      }
+    )
+  ] });
 };
-class TldrawErrorBoundary 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 TldrawStaticRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+const TldrawEditRenderer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
-  TldrawStaticRenderer
+  TldrawEditRenderer
 }, Symbol.toStringTag, { value: "Module" }));
+const INSERT_TLDRAW_COMMAND = createCommand("INSERT_TLDRAW");
+function TldrawPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      INSERT_TLDRAW_COMMAND,
+      (snapshot) => {
+        const node = $createTldrawEditNode(snapshot);
+        $insertNodes([node]);
+        return true;
+      },
+      COMMAND_PRIORITY_EDITOR
+    );
+  }, [editor]);
+  return null;
+}
 export {
+  $createTldrawEditNode,
   $createTldrawNode,
+  $isTldrawEditNode,
   $isTldrawNode,
   INSERT_TLDRAW_COMMAND,
   TLDRAW_BLOCK_TRANSFORMER,
   TldrawConfigProvider,
+  TldrawDisplayRenderer,
+  TldrawEditNode,
   TldrawEditRenderer,
   TldrawNode,
   TldrawPlugin,
-  TldrawStaticRenderer as TldrawRenderer,
-  TldrawStaticRenderer,
+  TldrawDisplayRenderer as TldrawRenderer,
+  TldrawSSRRenderer,
+  TldrawDisplayRenderer as TldrawStaticRenderer,
   useTldrawConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-ext-tldraw",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "description": "Tldraw whiteboard extension",
   "license": "MIT",
   "type": "module",
@@ -17,10 +17,10 @@
   ],
   "dependencies": {
     "tldraw": "^3.15.6",
-    "@haklex/rich-editor": "0.0.31",
-    "@haklex/rich-editor-ui": "0.0.31",
-    "@haklex/rich-headless": "0.0.31",
-    "@haklex/rich-style-token": "0.0.31"
+    "@haklex/rich-editor": "0.0.32",
+    "@haklex/rich-editor-ui": "0.0.32",
+    "@haklex/rich-style-token": "0.0.32",
+    "@haklex/rich-headless": "0.0.32"
   },
   "devDependencies": {
     "@lexical/react": "^0.40.0",

package/dist/TldrawStaticRenderer.d.ts

@@ -1,6 +0,0 @@
-import { FC } from 'react';
-export interface TldrawStaticRendererProps {
-    snapshot: string;
-}
-export declare const TldrawStaticRenderer: FC<TldrawStaticRendererProps>;
-//# sourceMappingURL=TldrawStaticRenderer.d.ts.map

package/dist/TldrawStaticRenderer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TldrawStaticRenderer.d.ts","sourceRoot":"","sources":["../src/TldrawStaticRenderer.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,EAAE,EAAkB,MAAM,OAAO,CAAA;AAM1D,MAAM,WAAW,yBAAyB;IACxC,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,eAAO,MAAM,oBAAoB,EAAE,EAAE,CAAC,yBAAyB,CAsC9D,CAAA"}