eddyter 1.4.5 → 1.4.6

package/README.md

@@ -189,27 +189,52 @@ The main editor component with authentication.
 | `customVerifyKey` | `(key: string) => Promise<ApiResponse>` | No | Custom key verification function |
 | `mode` | `"edit" \| "preview"` | No | Editor mode (default: `"edit"`) |
 | `previewClassName` | `string` | No | CSS class for preview container |
-| `previewStyle` | `React.CSSProperties` | No | Inline styles for preview container |
+| `editor` | `{ maxHeight?: React.CSSProperties["maxHeight"] }` | No | Editor container options (`maxHeight`) |
 | `onPreviewClick` | `() => void` | No | Click handler for preview mode |
 | `enableReactNativeBridge` | `boolean` | No | Enable React Native WebView bridge |
 | `onEditorReady` | `() => void` | No | Called when editor is fully loaded |
 | `onFocus` | `() => void` | No | Called on editor focus |
 | `onBlur` | `() => void` | No | Called on editor blur |
 | `onHeightChange` | `(height: number) => void` | No | Called when editor height changes |
-| `toolbarTopOffset` | `number` | No | Distance (px) the floating toolbar keeps from the viewport top when it detaches on scroll (default: `20`) |
+| `toolbar` | `{ mode?: "sticky" \| "static"; offset?: number; zIndex?: number }` | No | Toolbar behavior config (default: `{ mode: "sticky", offset: 20, zIndex: 1000 }`) |
 
-### Floating Toolbar Offset
+### Toolbar Configuration
 
-When a user scrolls down, the toolbar detaches from its original position and sticks to the top of the viewport. By default it stays **20 px** below the top edge. You can customize this gap — for example, if your app has its own fixed header:
+Use the `toolbar` prop to control sticky/static toolbar behavior:
 
 ```tsx
 <ConfigurableEditorWithAuth
   apiKey="your-api-key"
-  toolbarTopOffset={64}   // sit below a 64px fixed header
+  toolbar={{ mode: "sticky", offset: 64, zIndex: 1200 }}
 />
 ```
 
-Set `toolbarTopOffset={0}` to pin the toolbar flush against the viewport top.
+Modes:
+
+- `mode: "sticky"` -> toolbar detaches/sticks while scrolling and applies `offset` + `zIndex`
+- `mode: "static"` -> toolbar stays attached and ignores `offset` + `zIndex` even if provided
+
+Defaults:
+
+```ts
+const defaultToolbar = {
+  mode: "sticky",
+  offset: 20,
+  zIndex: 1000
+};
+```
+
+In static mode, if you want only the editor content area to scroll, pass a `maxHeight` using `editor`:
+
+```tsx
+<ConfigurableEditorWithAuth
+  apiKey="your-api-key"
+  toolbar={{ mode: "static" }}
+  editor={{ maxHeight: 600 }}
+/>
+```
+
+If `maxHeight` is not provided, the full page/container scrolls normally with the toolbar.
 
 ## Examples
 

package/dist/{ImageResizer-Bt7kgv0a.js → ImageResizer-C5luyjPa.js}

@@ -1,6 +1,6 @@
-import { jsxs as B, jsx as m } from "react/jsx-runtime";
-import { calculateZoomLevel as C } from "@lexical/utils";
-import { useRef as w } from "react";
+import { jsxs as B, jsx as u } from "react/jsx-runtime";
+import { calculateZoomLevel as N } from "@lexical/utils";
+import { useRef as P } from "react";
 function $(f, x, z) {
   return Math.min(Math.max(f, x), z);
 }
@@ -16,15 +16,15 @@ function F({
   buttonRef: z,
   imageRef: v,
   maxWidth: j,
-  editor: H,
-  showCaption: R,
+  editor: R,
+  showCaption: H,
   setShowCaption: X,
   captionsEnabled: I
 }) {
-  const W = w(null), g = w({
+  const W = P(null), g = P({
     priority: "",
     value: "default"
-  }), b = w({
+  }), b = P({
     currentHeight: 0,
     currentWidth: 0,
     direction: 0,
@@ -34,9 +34,9 @@ function F({
     startWidth: 0,
     startX: 0,
     startY: 0
-  }), P = w({ imageWrapper: null, editorImageSpan: null, parentParagraph: null }), u = H.getRootElement(), c = u !== null ? u.getBoundingClientRect().width - 20 : 100, L = u !== null ? u.getBoundingClientRect().height - 20 : 100, D = 100, S = 100, M = (t) => {
-    const i = t === r.east || t === r.west, e = t === r.north || t === r.south, h = t & r.north && t & r.west || t & r.south && t & r.east, l = i ? "ew" : e ? "ns" : h ? "nwse" : "nesw";
-    u !== null && u.style.setProperty(
+  }), w = P({ imageWrapper: null, editorImageSpan: null, parentParagraph: null }), h = R.getRootElement(), m = h !== null ? h.getBoundingClientRect().width - 20 : 100, L = h !== null ? h.getBoundingClientRect().height - 20 : 100, D = 100, S = 100, M = (t) => {
+    const i = t === r.east || t === r.west, e = t === r.north || t === r.south, d = t & r.north && t & r.west || t & r.south && t & r.east, l = i ? "ew" : e ? "ns" : d ? "nwse" : "nesw";
+    h !== null && h.style.setProperty(
       "cursor",
       `${l}-resize`,
       "important"
@@ -54,69 +54,69 @@ function F({
       "important"
     ));
   }, Y = () => {
-    u !== null && u.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
+    h !== null && h.style.setProperty("cursor", "text"), document.body !== null && (document.body.style.setProperty("cursor", "default"), document.body.style.setProperty(
       "-webkit-user-select",
       g.current.value,
       g.current.priority
     ));
-  }, d = (t, i) => {
-    if (!H.isEditable())
+  }, y = (t, i) => {
+    if (!R.isEditable())
       return;
-    const e = v.current, h = W.current;
-    if (e !== null && h !== null) {
+    const e = v.current, d = W.current;
+    if (e !== null && d !== null) {
       t.preventDefault();
-      const { width: l, height: s } = e.getBoundingClientRect(), p = C(e), o = b.current;
-      o.startWidth = l, o.startHeight = s, o.ratio = l / s, o.currentWidth = l, o.currentHeight = s, o.startX = t.clientX / p, o.startY = t.clientY / p, o.isResizing = !0, o.direction = i, M(i), f(), h.classList.add("image-control-wrapper--resizing"), e.style.setProperty(
+      const { width: l, height: s } = e.getBoundingClientRect(), c = N(e), o = b.current;
+      o.startWidth = l, o.startHeight = s, o.ratio = l / s, o.currentWidth = l, o.currentHeight = s, o.startX = t.clientX / c, o.startY = t.clientY / c, o.isResizing = !0, o.direction = i, M(i), f(), d.classList.add("image-control-wrapper--resizing"), e.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
       );
-      const y = e.parentElement, n = e.closest(
+      const p = e.parentElement, n = e.closest(
         ".editor-image"
       ), a = n?.parentElement ?? null;
-      P.current = { imageWrapper: y, editorImageSpan: n, parentParagraph: a }, y && (y.style.setProperty("display", "inline-block", "important"), y.style.setProperty("width", "auto", "important"), y.style.setProperty(
+      w.current = { imageWrapper: p, editorImageSpan: n, parentParagraph: a }, p && (p.style.setProperty("display", "inline-block", "important"), p.style.setProperty("width", "auto", "important"), p.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
       )), n && (n.style.setProperty("display", "inline-block", "important"), n.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
       )), a && a.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
       ), e.style.setProperty("height", `${s}px`, "important"), e.style.setProperty("width", `${l}px`, "important"), document.addEventListener("pointermove", E), document.addEventListener("pointerup", k);
     }
   }, E = (t) => {
-    const i = v.current, e = b.current, h = e.direction & (r.east | r.west), l = e.direction & (r.south | r.north);
+    const i = v.current, e = b.current, d = e.direction & (r.east | r.west), l = e.direction & (r.south | r.north);
     if (i !== null && e.isResizing) {
-      const s = C(i), { imageWrapper: p, editorImageSpan: o, parentParagraph: y } = P.current;
+      const s = N(i), { imageWrapper: c, editorImageSpan: o, parentParagraph: p } = w.current;
       if (i.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
-      ), p && (p.style.setProperty("display", "inline-block", "important"), p.style.setProperty("width", "auto", "important"), p.style.setProperty(
+      ), c && (c.style.setProperty("display", "inline-block", "important"), c.style.setProperty("width", "auto", "important"), c.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
       )), o && (o.style.setProperty("display", "inline-block", "important"), o.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
-      )), y && y.style.setProperty(
+      )), p && p.style.setProperty(
         "max-width",
-        `${c}px`,
+        `${m}px`,
         "important"
-      ), h && l) {
+      ), d && l) {
         let n = Math.floor(e.startX - t.clientX / s);
         n = e.direction & r.east ? -n : n;
         const a = $(
           e.startWidth + n,
           D,
-          c
-        ), N = a / e.ratio;
-        i.style.setProperty("width", `${a}px`, "important"), i.style.setProperty("height", `${N}px`, "important"), e.currentHeight = N, e.currentWidth = a;
+          m
+        ), C = a / e.ratio;
+        i.style.setProperty("width", `${a}px`, "important"), i.style.setProperty("height", `${C}px`, "important"), e.currentHeight = C, e.currentWidth = a;
       } else if (l) {
         let n = Math.floor(e.startY - t.clientY / s);
         n = e.direction & r.south ? -n : n;
@@ -132,7 +132,7 @@ function F({
         const a = $(
           e.startWidth + n,
           D,
-          c
+          m
         );
         i.style.setProperty("width", `${a}px`, "important"), e.currentWidth = a;
       }
@@ -140,12 +140,21 @@ function F({
   }, k = () => {
     const t = v.current, i = b.current, e = W.current;
     if (t !== null && e !== null && i.isResizing) {
-      const h = i.currentWidth, l = i.currentHeight;
+      const d = i.currentWidth, l = i.currentHeight;
       i.startWidth = 0, i.startHeight = 0, i.ratio = 0, i.startX = 0, i.startY = 0, i.currentWidth = 0, i.currentHeight = 0, i.isResizing = !1, e.classList.remove("image-control-wrapper--resizing");
-      const { imageWrapper: s, editorImageSpan: p, parentParagraph: o } = P.current;
-      s && (s.style.removeProperty("display"), s.style.removeProperty("width"), s.style.removeProperty("max-width")), Y(), x(h, l), requestAnimationFrame(() => {
-        t.style.removeProperty("max-width"), p && (p.style.removeProperty("display"), p.style.removeProperty("max-width")), o && o.style.removeProperty("max-width");
-      }), P.current = {
+      const { imageWrapper: s, editorImageSpan: c, parentParagraph: o } = w.current;
+      s && (s.style.removeProperty("display"), s.style.removeProperty("width"), s.style.removeProperty("max-width")), Y(), x(d, l);
+      const p = d;
+      requestAnimationFrame(() => {
+        if (t.style.removeProperty("max-width"), c && (c.style.removeProperty("display"), c.style.removeProperty("max-width")), o) {
+          const n = o.getBoundingClientRect().width;
+          typeof p == "number" && p > n ? o.style.setProperty(
+            "max-width",
+            `${p + 40}px`,
+            "important"
+          ) : o.style.removeProperty("max-width");
+        }
+      }), w.current = {
         imageWrapper: null,
         editorImageSpan: null,
         parentParagraph: null
@@ -153,86 +162,86 @@ function F({
     }
   };
   return /* @__PURE__ */ B("div", { ref: W, children: [
-    !R && I && /* @__PURE__ */ m(
+    !H && I && /* @__PURE__ */ u(
       "button",
       {
         className: "image-caption-button cteditor-text-sm",
         ref: z,
         onClick: () => {
-          X(!R);
+          X(!H);
         },
         children: "Add Caption"
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-n",
         onPointerDown: (t) => {
-          d(t, r.north);
+          y(t, r.north);
         }
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-ne",
         onPointerDown: (t) => {
-          d(t, r.north | r.east);
+          y(t, r.north | r.east);
         }
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-e",
         onPointerDown: (t) => {
-          d(t, r.east);
+          y(t, r.east);
         }
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-se",
         onPointerDown: (t) => {
-          d(t, r.south | r.east);
+          y(t, r.south | r.east);
         }
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-s",
         onPointerDown: (t) => {
-          d(t, r.south);
+          y(t, r.south);
         }
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-sw",
         onPointerDown: (t) => {
-          d(t, r.south | r.west);
+          y(t, r.south | r.west);
         }
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-w",
         onPointerDown: (t) => {
-          d(t, r.west);
+          y(t, r.west);
         }
       }
     ),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ u(
       "div",
       {
         className: "image-resizer image-resizer-nw",
         onPointerDown: (t) => {
-          d(t, r.north | r.west);
+          y(t, r.north | r.west);
         }
       }
     )