@tarviks/lexical-rich-editor 1.3.12 → 1.3.13

package/dist/index.js

@@ -3219,12 +3219,16 @@ function splitHeadingsAtBrSequences(html) {
   });
   return doc.body.innerHTML;
 }
-var CustomOnChangePlugin = ({ value, onChange }) => {
+var CustomOnChangePlugin = ({ value, onChange, isReadOnly }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const initializedRef = React9.useRef(false);
+  const lastImportedValueRef = React9.useRef(null);
   React9.useEffect(() => {
-    if (!value || initializedRef.current) return;
+    if (!value) return;
+    if (!isReadOnly && initializedRef.current) return;
+    if (value === lastImportedValueRef.current) return;
     initializedRef.current = true;
+    lastImportedValueRef.current = value;
     editor.update(() => {
       const root = lexical.$getRoot();
       root.clear();
@@ -3235,14 +3239,17 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
       const nodes = html.$generateNodesFromDOM(editor, dom);
       root.append(...nodes);
     });
-  }, [editor, value]);
+  }, [editor, value, isReadOnly]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     LexicalOnChangePlugin.OnChangePlugin,
     {
+      ignoreSelectionChange: true,
       onChange: (editorState) => {
         editorState.read(() => {
           const raw = html.$generateHtmlFromNodes(editor);
-          onChange(postProcessOutput(splitHeadingsAtBrSequences(raw)));
+          const html$1 = postProcessOutput(splitHeadingsAtBrSequences(raw));
+          lastImportedValueRef.current = html$1;
+          onChange(html$1);
         });
       }
     }
@@ -5375,9 +5382,25 @@ function TableActionMenuPlugin({ disabled = false }) {
   const canShow = isInTable && !!anchorRect && isAnchorVisible && !disabled;
   const handleStyle = React9__namespace.useMemo(() => {
     if (!anchorRect) return void 0;
-    const top = Math.max(8, anchorRect.top + 6);
-    const clampedCellRight = Math.min(anchorRect.right, window.innerWidth - 8);
-    const left = contentRight !== null ? Math.max(anchorRect.left + 4, Math.min(contentRight + 4, clampedCellRight - 32)) : Math.max(8, anchorRect.left + 8);
+    const BUTTON_SIZE = 28;
+    const PAD = 8;
+    const editorRect = editor.getRootElement()?.getBoundingClientRect();
+    const clipRect = editorRect ? {
+      top: Math.max(editorRect.top, 0),
+      left: Math.max(editorRect.left, 0),
+      right: Math.min(editorRect.right, window.innerWidth),
+      bottom: Math.min(editorRect.bottom, window.innerHeight)
+    } : { top: 0, left: 0, right: window.innerWidth, bottom: window.innerHeight };
+    const isCellVisible = anchorRect.bottom > clipRect.top && anchorRect.top < clipRect.bottom && anchorRect.right > clipRect.left && anchorRect.left < clipRect.right;
+    if (!isCellVisible) return void 0;
+    const minTop = editorRect ? editorRect.top + PAD : PAD;
+    const maxTop = editorRect ? Math.max(minTop, editorRect.bottom - BUTTON_SIZE - PAD) : window.innerHeight - BUTTON_SIZE - PAD;
+    const minLeft = editorRect ? editorRect.left + PAD : PAD;
+    const maxLeft = editorRect ? Math.max(minLeft, editorRect.right - BUTTON_SIZE - PAD) : window.innerWidth - BUTTON_SIZE - PAD;
+    const top = Math.min(Math.max(anchorRect.top + 6, minTop), maxTop);
+    const clampedCellRight = Math.min(anchorRect.right, maxLeft + BUTTON_SIZE);
+    const rawLeft = contentRight !== null ? Math.max(anchorRect.left + 4, Math.min(contentRight + 4, clampedCellRight - 32)) : anchorRect.left + 8;
+    const left = Math.min(Math.max(rawLeft, minLeft), maxLeft);
     return {
       position: "fixed",
       top,
@@ -5387,7 +5410,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       // button renders behind the modal chrome in a full-page/Panel view.
       zIndex: 10000010
     };
-  }, [anchorRect, contentRight]);
+  }, [anchorRect, contentRight, editor]);
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
@@ -8662,7 +8685,14 @@ var ContentEditorComponent = React9.forwardRef(
               }
             ),
             !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsxRuntime.jsx(CharacterStylesPopupPlugin, {}),
-            /* @__PURE__ */ jsxRuntime.jsx(CustomOnChangePlugin, { value: props.value, onChange: props.onChange }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              CustomOnChangePlugin,
+              {
+                value: props.value,
+                onChange: props.onChange,
+                isReadOnly
+              }
+            ),
             (props.wordLimit !== void 0 || props.required || props.minWords !== void 0 || props.maxWords !== void 0 || props.minChars !== void 0 || props.maxChars !== void 0 || props.noImages || props.maxImages !== void 0 || props.noLinks || props.maxLinks !== void 0 || props.noTables) && /* @__PURE__ */ jsxRuntime.jsx(ContentMetricsPlugin, { onMetricsChange: handleMetrics }),
             /* @__PURE__ */ jsxRuntime.jsx(
               RefApiPlugin,