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

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

package/package.json

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