@tarviks/lexical-rich-editor 1.3.12 → 1.3.14

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
-import { createCommand, $isTextNode, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, SELECTION_CHANGE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $getNodeByKey, $createRangeSelection, $setSelection, $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isElementNode, FORMAT_ELEMENT_COMMAND, CLICK_COMMAND, $isNodeSelection, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, $isLineBreakNode, SKIP_SELECTION_FOCUS_TAG, createEditor, KEY_ENTER_COMMAND } from 'lexical';
+import { createCommand, $isTextNode, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, SELECTION_CHANGE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, KEY_DOWN_COMMAND, $isNodeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, $getNodeByKey, $createRangeSelection, $setSelection, $createParagraphNode, $insertNodes, $isRootOrShadowRoot, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isElementNode, FORMAT_ELEMENT_COMMAND, CLICK_COMMAND, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, $isLineBreakNode, SKIP_SELECTION_FOCUS_TAG, createEditor, KEY_ENTER_COMMAND } from 'lexical';
 import { mergeStyleSets, Stack, css, useTheme, Callout, TextField } from '@fluentui/react';
 import { makeStyles, FluentProvider, webLightTheme, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, Button, ToolbarDivider, MenuItemRadio, Field, Input, MessageBar, MessageBarBody, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
 import { CodeHighlightNode, CodeNode, $isCodeHighlightNode } from '@lexical/code';
@@ -3198,12 +3198,16 @@ function splitHeadingsAtBrSequences(html) {
   });
   return doc.body.innerHTML;
 }
-var CustomOnChangePlugin = ({ value, onChange }) => {
+var CustomOnChangePlugin = ({ value, onChange, isReadOnly }) => {
   const [editor] = useLexicalComposerContext();
   const initializedRef = useRef(false);
+  const lastImportedValueRef = useRef(null);
   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 = $getRoot();
       root.clear();
@@ -3214,14 +3218,17 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
       const nodes = $generateNodesFromDOM(editor, dom);
       root.append(...nodes);
     });
-  }, [editor, value]);
+  }, [editor, value, isReadOnly]);
   return /* @__PURE__ */ jsx(
     OnChangePlugin,
     {
+      ignoreSelectionChange: true,
       onChange: (editorState) => {
         editorState.read(() => {
           const raw = $generateHtmlFromNodes(editor);
-          onChange(postProcessOutput(splitHeadingsAtBrSequences(raw)));
+          const html = postProcessOutput(splitHeadingsAtBrSequences(raw));
+          lastImportedValueRef.current = html;
+          onChange(html);
         });
       }
     }
@@ -4547,6 +4554,44 @@ function RefApiPlugin({
   );
   return null;
 }
+function RobustCutPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    return editor.registerCommand(
+      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 = $getSelection();
+          if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+            plainText = selection.getTextContent();
+          } else if ($isNodeSelection(selection) && selection.getNodes().length > 0) {
+            plainText = "";
+          }
+        });
+        if (plainText === null) return false;
+        event.preventDefault();
+        editor.update(() => {
+          const selection = $getSelection();
+          if ($isRangeSelection(selection)) {
+            selection.removeText();
+          } else if ($isNodeSelection(selection)) {
+            selection.getNodes().forEach((node) => node.remove());
+          }
+        });
+        if (plainText && navigator.clipboard?.writeText) {
+          navigator.clipboard.writeText(plainText).catch(() => {
+          });
+        }
+        return true;
+      },
+      COMMAND_PRIORITY_HIGH
+    );
+  }, [editor]);
+  return null;
+}
 var CSS_ID = "__sc_styles__";
 function injectCSS() {
   if (document.getElementById(CSS_ID)) return;
@@ -5354,9 +5399,25 @@ function TableActionMenuPlugin({ disabled = false }) {
   const canShow = isInTable && !!anchorRect && isAnchorVisible && !disabled;
   const handleStyle = React9.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,
@@ -5366,7 +5427,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)"
   };
@@ -8606,6 +8667,7 @@ var ContentEditorComponent = forwardRef(
             /* @__PURE__ */ jsx(AutoLinkPlugin, { matchers: MATCHERS }),
             /* @__PURE__ */ jsx(TablePlugin, { hasCellMerge: true, hasCellBackgroundColor: true }),
             !isReadOnly && /* @__PURE__ */ jsx(YoutubeDeletePlugin, {}),
+            !isReadOnly && /* @__PURE__ */ jsx(RobustCutPlugin, {}),
             !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableActionMenuPlugin, {}),
             !isReadOnly && floatingAnchorElem && /* @__PURE__ */ jsx(TableCellResizerPlugin, { anchorElem: floatingAnchorElem }),
             !isReadOnly && /* @__PURE__ */ jsx(
@@ -8641,7 +8703,14 @@ var ContentEditorComponent = forwardRef(
               }
             ),
             !isReadOnly && props.showFloatingToolbar && /* @__PURE__ */ jsx(CharacterStylesPopupPlugin, {}),
-            /* @__PURE__ */ jsx(CustomOnChangePlugin, { value: props.value, onChange: props.onChange }),
+            /* @__PURE__ */ 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__ */ jsx(ContentMetricsPlugin, { onMetricsChange: handleMetrics }),
             /* @__PURE__ */ jsx(
               RefApiPlugin,