@tarviks/lexical-rich-editor 1.3.12 → 1.3.14

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);
         });
       }
     }
@@ -4568,6 +4575,44 @@ function RefApiPlugin({
   );
   return null;
 }
+function RobustCutPlugin() {
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  React9.useEffect(() => {
+    return editor.registerCommand(
+      lexical.KEY_DOWN_COMMAND,
+      (event) => {
+        const isShiftDelete = event.key === "Delete" && event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey;
+        if (!isShiftDelete) return false;
+        let plainText = null;
+        editor.getEditorState().read(() => {
+          const selection = lexical.$getSelection();
+          if (lexical.$isRangeSelection(selection) && !selection.isCollapsed()) {
+            plainText = selection.getTextContent();
+          } else if (lexical.$isNodeSelection(selection) && selection.getNodes().length > 0) {
+            plainText = "";
+          }
+        });
+        if (plainText === null) return false;
+        event.preventDefault();
+        editor.update(() => {
+          const selection = lexical.$getSelection();
+          if (lexical.$isRangeSelection(selection)) {
+            selection.removeText();
+          } else if (lexical.$isNodeSelection(selection)) {
+            selection.getNodes().forEach((node) => node.remove());
+          }
+        });
+        if (plainText && navigator.clipboard?.writeText) {
+          navigator.clipboard.writeText(plainText).catch(() => {
+          });
+        }
+        return true;
+      },
+      lexical.COMMAND_PRIORITY_HIGH
+    );
+  }, [editor]);
+  return null;
+}
 var CSS_ID = "__sc_styles__";
 function injectCSS() {
   if (document.getElementById(CSS_ID)) return;
@@ -5375,9 +5420,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 +5448,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)"
   };
@@ -8627,6 +8688,7 @@ var ContentEditorComponent = React9.forwardRef(
             /* @__PURE__ */ jsxRuntime.jsx(LexicalAutoLinkPlugin.AutoLinkPlugin, { matchers: MATCHERS }),
             /* @__PURE__ */ jsxRuntime.jsx(LexicalTablePlugin.TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true }),
             !isReadOnly && /* @__PURE__ */ jsxRuntime.jsx(YoutubeDeletePlugin, {}),
+            !isReadOnly && /* @__PURE__ */ jsxRuntime.jsx(RobustCutPlugin, {}),
             !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsxRuntime.jsx(TableActionMenuPlugin, {}),
             !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsxRuntime.jsx(TableCellResizerPlugin, { anchorElem: floatingAnchorElem }),
             !isReadOnly && /* @__PURE__ */ jsxRuntime.jsx(
@@ -8662,7 +8724,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,