@superdoc-dev/react 1.0.0-canary.6 → 1.0.0-next.1

package/README.md

@@ -75,6 +75,31 @@ All [SuperDoc config options](https://docs.superdoc.dev) are available as props,
 | `className` | `string` | Wrapper CSS class |
 | `style` | `CSSProperties` | Wrapper inline styles |
 
+### Props That Trigger Rebuilds
+
+These props cause the SuperDoc instance to be destroyed and recreated when changed:
+
+- `document` - The document to load
+- `user` - Current user identity
+- `users` - List of users
+- `modules` - Module configuration (collaboration, comments, etc.)
+- `role` - User permission level
+- `hideToolbar` - Toolbar visibility
+
+### Props Handled Efficiently
+
+These props are applied without rebuilding:
+
+- `documentMode` - Calls `setDocumentMode()` internally
+
+### Initial-Only Props
+
+Other SuperDoc options (`rulers`, `pagination`, etc.) are applied only on initialization. To change them at runtime, use `getInstance()`:
+
+```tsx
+ref.current?.getInstance()?.toggleRuler();
+```
+
 ### Common Props
 
 ```tsx

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react/jsx-runtime"),e=require("react");function O(){return`superdoc-${Date.now()}-${Math.random().toString(36).slice(2,9)}`}function A(l,q){const[f,z]=e.useState(!1);e.useEffect(()=>{z(!0)},[]);const{id:T,renderLoading:d,hideToolbar:p=!1,className:_,style:j,onReady:E,onEditorCreate:m,onEditorDestroy:R,onEditorUpdate:S,onContentError:D,onException:g,document:y,user:C,users:I,modules:b,...k}=l,n=l.documentMode??"editing",v=l.role??"editor",s=e.useRef(null),N=e.useRef(null),M=e.useRef(null);if(M.current===null){const r=T??O();M.current={containerId:r,toolbarId:`${r}-toolbar`}}const{containerId:w,toolbarId:P}=M.current,[B,$]=e.useState(!0),o=e.useRef({onReady:E,onEditorCreate:m,onEditorDestroy:R,onEditorUpdate:S,onContentError:D,onException:g});e.useEffect(()=>{o.current={onReady:E,onEditorCreate:m,onEditorDestroy:R,onEditorUpdate:S,onContentError:D,onException:g}},[E,m,R,S,D,g]);const c=e.useRef(null),u=e.useRef(!1),L=e.useRef(n);e.useEffect(()=>{L.current!==n&&(s.current?s.current.setDocumentMode(n):u.current&&(c.current=n)),L.current=n},[n]),e.useImperativeHandle(q,()=>({getInstance:()=>s.current}),[]),e.useEffect(()=>{if(!f)return;$(!0),u.current=!0;let r=!1,a=null;return(async()=>{try{const F=(await import("superdoc")).SuperDoc;if(r)return;const H={...k,selector:`#${CSS.escape(w)}`,...!p&&N.current?{toolbar:`#${CSS.escape(P)}`}:{},documentMode:n,role:v,...y!=null?{document:y}:{},...C?{user:C}:{},...I?{users:I}:{},...b?{modules:b}:{},onReady:t=>{r||($(!1),u.current=!1,c.current&&c.current!==n&&(t.superdoc.setDocumentMode(c.current),c.current=null),o.current.onReady?.(t))},onEditorCreate:t=>{r||o.current.onEditorCreate?.(t)},onEditorDestroy:()=>{r||o.current.onEditorDestroy?.()},onEditorUpdate:t=>{r||o.current.onEditorUpdate?.(t)},onContentError:t=>{r||o.current.onContentError?.(t)},onException:t=>{r||o.current.onException?.(t)}};a=new F(H),s.current=a}catch(x){r||(u.current=!1,console.error("[SuperDocEditor] Failed to initialize SuperDoc:",x),o.current.onException?.({error:x}))}})(),()=>{r=!0,u.current=!1,c.current=null,a&&(a.destroy(),s.current=null)}},[f,y,C,I,b,v,p]);const U=["superdoc-wrapper",_].filter(Boolean).join(" ");return f?i.jsxs("div",{className:U,style:j,children:[!p&&i.jsx("div",{ref:N,id:P,className:"superdoc-toolbar-container"}),i.jsx("div",{id:w,className:"superdoc-editor-container"}),B&&d&&i.jsx("div",{className:"superdoc-loading-container",children:d()})]}):d?i.jsx("div",{className:U,style:j,children:d()}):null}const h=e.forwardRef(A);h.displayName="SuperDocEditor";exports.SuperDocEditor=h;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),e=require("react");function G(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const s in r)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(r,s);Object.defineProperty(i,s,a.get?a:{enumerable:!0,get:()=>r[s]})}}return i.default=r,Object.freeze(i)}const N=G(e);function J(){const r=N.useRef(null);return r.current===null&&(r.current=`-${Date.now()}-${Math.random().toString(36).slice(2,9)}`),r.current}const K=typeof N.useId=="function"?N.useId:J;function Q(r,i){const[s,a]=e.useState(!1),{id:T,renderLoading:w,hideToolbar:m=!1,className:U,style:q,onReady:E,onEditorCreate:S,onEditorDestroy:y,onEditorUpdate:R,onContentError:g,onException:D,document:b,user:I,users:h,modules:j,...F}=r,n=r.documentMode??"editing",O=r.role??"editor",d=e.useRef(null),$=e.useRef(null),H=K(),_=T??`superdoc${H}`,C=_,M=`${_}-toolbar`,[L,v]=e.useState(!0),c=e.useRef({onReady:E,onEditorCreate:S,onEditorDestroy:y,onEditorUpdate:R,onContentError:g,onException:D});e.useEffect(()=>{c.current={onReady:E,onEditorCreate:S,onEditorDestroy:y,onEditorUpdate:R,onContentError:g,onException:D}},[E,S,y,R,g,D]);const u=e.useRef(null),l=e.useRef(!1),k=e.useRef(n);e.useEffect(()=>{k.current!==n&&(d.current?d.current.setDocumentMode(n):l.current&&(u.current=n)),k.current=n},[n]),e.useImperativeHandle(i,()=>({getInstance:()=>d.current}),[]),e.useEffect(()=>{v(!0),a(!1),l.current=!0;let o=!1,p=null;return(async()=>{try{const W=(await import("superdoc")).SuperDoc;if(o)return;const A={...F,selector:`#${CSS.escape(C)}`,...!m&&$.current?{toolbar:`#${CSS.escape(M)}`}:{},documentMode:n,role:O,...b!=null?{document:b}:{},...I?{user:I}:{},...h?{users:h}:{},...j?{modules:j}:{},onReady:t=>{o||(v(!1),l.current=!1,u.current&&u.current!==n&&(t.superdoc.setDocumentMode(u.current),u.current=null),c.current.onReady?.(t))},onEditorCreate:t=>{o||c.current.onEditorCreate?.(t)},onEditorDestroy:()=>{o||c.current.onEditorDestroy?.()},onEditorUpdate:t=>{o||c.current.onEditorUpdate?.(t)},onContentError:t=>{o||c.current.onContentError?.(t)},onException:t=>{o||c.current.onException?.(t)}};p=new W(A),d.current=p}catch(x){o||(l.current=!1,v(!1),a(!0),console.error("[SuperDocEditor] Failed to initialize SuperDoc:",x),c.current.onException?.({error:x}))}})(),()=>{l.current=!1,u.current=null,p&&(p.destroy(),d.current=null),o=!0}},[b,I,h,j,O,m,C,M]);const B=["superdoc-wrapper",U].filter(Boolean).join(" "),z=L?{display:"none"}:void 0;return f.jsxs("div",{className:B,style:q,children:[!m&&f.jsx("div",{ref:$,id:M,className:"superdoc-toolbar-container",style:z}),f.jsx("div",{id:C,className:"superdoc-editor-container",style:z}),L&&!s&&w&&f.jsx("div",{className:"superdoc-loading-container",children:w()}),s&&f.jsx("div",{className:"superdoc-error-container",children:"Failed to load editor. Check console for details."})]})}const P=e.forwardRef(Q);P.displayName="SuperDocEditor";exports.SuperDocEditor=P;exports.default=P;

package/dist/index.d.ts

@@ -1,9 +1,3 @@
-/**
- * @superdoc-dev/react - Official React wrapper for SuperDoc
- * @packageDocumentation
- * @version 1.0.0
- */
-
 import { CSSProperties } from 'react';
 import { Editor } from 'superdoc';
 import { ForwardRefExoticComponent } from 'react';
@@ -15,7 +9,7 @@ import { SuperDoc } from 'superdoc';
  * Explicitly typed callback props to ensure proper TypeScript inference.
  * These override any loosely-typed callbacks from SuperDocConfig.
  */
-declare interface CallbackProps {
+export declare interface CallbackProps {
     /** Callback when SuperDoc is ready */
     onReady?: (event: SuperDocReadyEvent) => void;
     /** Callback after an editor is created */

package/dist/index.js

@@ -1,126 +1,117 @@
-import { jsx as a, jsxs as J } from "react/jsx-runtime";
-import { forwardRef as K, useState as z, useEffect as l, useRef as o, useImperativeHandle as O } from "react";
-function Q() {
-  return `superdoc-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+import { jsxs as O, jsx as a } from "react/jsx-runtime";
+import * as v from "react";
+import { forwardRef as Q, useState as F, useRef as s, useEffect as N, useImperativeHandle as V } from "react";
+function X() {
+  const n = v.useRef(null);
+  return n.current === null && (n.current = `-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`), n.current;
 }
-function V(f, k) {
-  const [p, B] = z(!1);
-  l(() => {
-    B(!0);
-  }, []);
-  const {
+const Y = typeof v.useId == "function" ? v.useId : X;
+function Z(n, H) {
+  const [x, w] = F(!1), {
     // React-specific
-    id: F,
-    renderLoading: u,
-    hideToolbar: m = !1,
-    className: H,
-    style: x,
+    id: B,
+    renderLoading: $,
+    hideToolbar: l = !1,
+    className: T,
+    style: W,
     // Callbacks (stored in ref to avoid triggering rebuilds)
-    onReady: E,
-    onEditorCreate: D,
-    onEditorDestroy: S,
-    onEditorUpdate: C,
+    onReady: f,
+    onEditorCreate: p,
+    onEditorDestroy: m,
+    onEditorUpdate: E,
     onContentError: y,
-    onException: I,
+    onException: D,
     // Key props that trigger rebuild when changed
-    document: R,
-    user: g,
-    users: b,
-    modules: M,
+    document: S,
+    user: I,
+    users: R,
+    modules: g,
     // All other props passed through
-    ...T
-  } = f, t = f.documentMode ?? "editing", v = f.role ?? "editor", i = o(null), w = o(null), h = o(null);
-  if (h.current === null) {
-    const e = F ?? Q();
-    h.current = { containerId: e, toolbarId: `${e}-toolbar` };
-  }
-  const { containerId: $, toolbarId: P } = h.current, [q, j] = z(!0), n = o({
-    onReady: E,
-    onEditorCreate: D,
-    onEditorDestroy: S,
-    onEditorUpdate: C,
+    ...q
+  } = n, o = n.documentMode ?? "editing", P = n.role ?? "editor", i = s(null), L = s(null), A = Y(), j = B ?? `superdoc${A}`, h = j, C = `${j}-toolbar`, [U, b] = F(!0), t = s({
+    onReady: f,
+    onEditorCreate: p,
+    onEditorDestroy: m,
+    onEditorUpdate: E,
     onContentError: y,
-    onException: I
+    onException: D
   });
-  l(() => {
-    n.current = {
-      onReady: E,
-      onEditorCreate: D,
-      onEditorDestroy: S,
-      onEditorUpdate: C,
+  N(() => {
+    t.current = {
+      onReady: f,
+      onEditorCreate: p,
+      onEditorDestroy: m,
+      onEditorUpdate: E,
       onContentError: y,
-      onException: I
+      onException: D
     };
-  }, [E, D, S, C, y, I]);
-  const c = o(null), s = o(!1), L = o(t);
-  l(() => {
-    L.current !== t && (i.current ? i.current.setDocumentMode(t) : s.current && (c.current = t)), L.current = t;
-  }, [t]), O(
-    k,
+  }, [f, p, m, E, y, D]);
+  const c = s(null), u = s(!1), k = s(o);
+  N(() => {
+    k.current !== o && (i.current ? i.current.setDocumentMode(o) : u.current && (c.current = o)), k.current = o;
+  }, [o]), V(
+    H,
     () => ({
       getInstance: () => i.current
     }),
     []
-  ), l(() => {
-    if (!p) return;
-    j(!0), s.current = !0;
-    let e = !1, d = null;
+  ), N(() => {
+    b(!0), w(!1), u.current = !0;
+    let r = !1, d = null;
     return (async () => {
       try {
-        const A = (await import("superdoc")).SuperDoc;
-        if (e) return;
-        const G = {
-          ...T,
-          selector: `#${CSS.escape($)}`,
+        const J = (await import("superdoc")).SuperDoc;
+        if (r) return;
+        const K = {
+          ...q,
+          selector: `#${CSS.escape(h)}`,
           // Use internal toolbar container unless hideToolbar is true
-          ...!m && w.current ? { toolbar: `#${CSS.escape(P)}` } : {},
-          documentMode: t,
-          role: v,
-          ...R != null ? { document: R } : {},
-          ...g ? { user: g } : {},
-          ...b ? { users: b } : {},
-          ...M ? { modules: M } : {},
+          ...!l && L.current ? { toolbar: `#${CSS.escape(C)}` } : {},
+          documentMode: o,
+          role: P,
+          ...S != null ? { document: S } : {},
+          ...I ? { user: I } : {},
+          ...R ? { users: R } : {},
+          ...g ? { modules: g } : {},
           // Wire up callbacks with lifecycle guards
-          onReady: (r) => {
-            e || (j(!1), s.current = !1, c.current && c.current !== t && (r.superdoc.setDocumentMode(c.current), c.current = null), n.current.onReady?.(r));
+          onReady: (e) => {
+            r || (b(!1), u.current = !1, c.current && c.current !== o && (e.superdoc.setDocumentMode(c.current), c.current = null), t.current.onReady?.(e));
           },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          onEditorCreate: (r) => {
-            e || n.current.onEditorCreate?.(r);
+          onEditorCreate: (e) => {
+            r || t.current.onEditorCreate?.(e);
           },
           onEditorDestroy: () => {
-            e || n.current.onEditorDestroy?.();
+            r || t.current.onEditorDestroy?.();
           },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          onEditorUpdate: (r) => {
-            e || n.current.onEditorUpdate?.(r);
+          onEditorUpdate: (e) => {
+            r || t.current.onEditorUpdate?.(e);
           },
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          onContentError: (r) => {
-            e || n.current.onContentError?.(r);
+          onContentError: (e) => {
+            r || t.current.onContentError?.(e);
           },
-          onException: (r) => {
-            e || n.current.onException?.(r);
+          onException: (e) => {
+            r || t.current.onException?.(e);
           }
         };
-        d = new A(G), i.current = d;
-      } catch (N) {
-        e || (s.current = !1, console.error("[SuperDocEditor] Failed to initialize SuperDoc:", N), n.current.onException?.({ error: N }));
+        d = new J(K), i.current = d;
+      } catch (M) {
+        r || (u.current = !1, b(!1), w(!0), console.error("[SuperDocEditor] Failed to initialize SuperDoc:", M), t.current.onException?.({ error: M }));
       }
     })(), () => {
-      e = !0, s.current = !1, c.current = null, d && (d.destroy(), i.current = null);
+      u.current = !1, c.current = null, d && (d.destroy(), i.current = null), r = !0;
     };
-  }, [p, R, g, b, M, v, m]);
-  const U = ["superdoc-wrapper", H].filter(Boolean).join(" ");
-  return p ? /* @__PURE__ */ J("div", { className: U, style: x, children: [
-    !m && /* @__PURE__ */ a("div", { ref: w, id: P, className: "superdoc-toolbar-container" }),
-    /* @__PURE__ */ a("div", { id: $, className: "superdoc-editor-container" }),
-    q && u && /* @__PURE__ */ a("div", { className: "superdoc-loading-container", children: u() })
-  ] }) : u ? /* @__PURE__ */ a("div", { className: U, style: x, children: u() }) : null;
+  }, [S, I, R, g, P, l, h, C]);
+  const G = ["superdoc-wrapper", T].filter(Boolean).join(" "), z = U ? { display: "none" } : void 0;
+  return /* @__PURE__ */ O("div", { className: G, style: W, children: [
+    !l && /* @__PURE__ */ a("div", { ref: L, id: C, className: "superdoc-toolbar-container", style: z }),
+    /* @__PURE__ */ a("div", { id: h, className: "superdoc-editor-container", style: z }),
+    U && !x && $ && /* @__PURE__ */ a("div", { className: "superdoc-loading-container", children: $() }),
+    x && /* @__PURE__ */ a("div", { className: "superdoc-error-container", children: "Failed to load editor. Check console for details." })
+  ] });
 }
-const W = K(V);
-W.displayName = "SuperDocEditor";
+const _ = Q(Z);
+_.displayName = "SuperDocEditor";
 export {
-  W as SuperDocEditor,
-  W as default
+  _ as SuperDocEditor,
+  _ as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@superdoc-dev/react",
-  "version": "1.0.0-canary.6",
-  "description": "Official React wrapper for SuperDoc document editor",
+  "version": "1.0.0-next.1",
+  "description": "Official React wrapper for the SuperDoc document editor",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",