@tarviks/lexical-rich-editor 1.0.1 → 1.0.3

package/dist/index.js

@@ -2463,6 +2463,8 @@ function CharacterStylesPopupPlugin(props) {
 var CustomOnChangePlugin = ({ value, onChange }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const initializedRef = React6.useRef(false);
+  const onChangeRef = React6.useRef(onChange);
+  onChangeRef.current = onChange;
   React6.useEffect(() => {
     if (!value || initializedRef.current) return;
     initializedRef.current = true;
@@ -2473,16 +2475,19 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
       const dom = parser.parseFromString(value, "text/html");
       const nodes = html.$generateNodesFromDOM(editor, dom);
       root.append(...nodes);
+      lexical.$setSelection(null);
     });
   }, [editor, value]);
+  const handleChange = React6.useCallback((editorState) => {
+    editorState.read(() => {
+      onChangeRef.current(html.$generateHtmlFromNodes(editor));
+    });
+  }, [editor]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     LexicalOnChangePlugin.OnChangePlugin,
     {
-      onChange: (editorState) => {
-        editorState.read(() => {
-          onChange(html.$generateHtmlFromNodes(editor));
-        });
-      }
+      onChange: handleChange,
+      ignoreSelectionChange: true
     }
   );
 };
@@ -4294,8 +4299,8 @@ function SpellCheckPlugin({
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [isInTable, setIsInTable] = React6__namespace.useState(false);
-  const [anchorRect, setAnchorRect] = React6__namespace.useState(null);
   const [open, setOpen] = React6__namespace.useState(false);
+  const [menuPos, setMenuPos] = React6__namespace.useState(null);
   const updateFromSelection = React6__namespace.useCallback(() => {
     const root = editor.getRootElement();
     if (!root) return;
@@ -4304,34 +4309,21 @@ function TableActionMenuPlugin({ disabled = false }) {
       if (table.$isTableSelection(selection)) {
         const tableNode = selection.getNodes().find((n) => table.$isTableNode(n));
         if (tableNode) {
-          const dom = editor.getElementByKey(tableNode.getKey());
-          if (dom) {
-            setIsInTable(true);
-            setAnchorRect(dom.getBoundingClientRect());
-            return;
-          }
+          setIsInTable(true);
+          return;
         }
       }
       if (!lexical.$isRangeSelection(selection)) {
         setIsInTable(false);
-        setAnchorRect(null);
         return;
       }
       const anchorNode = selection.anchor.getNode();
       const cellNode = table.$isTableCellNode(anchorNode) ? anchorNode : lexical.$findMatchingParent(anchorNode, (n) => table.$isTableCellNode(n));
       if (!cellNode || !table.$isTableCellNode(cellNode)) {
         setIsInTable(false);
-        setAnchorRect(null);
-        return;
-      }
-      const cellDom = editor.getElementByKey(cellNode.getKey());
-      if (!cellDom) {
-        setIsInTable(false);
-        setAnchorRect(null);
         return;
       }
       setIsInTable(true);
-      setAnchorRect(cellDom.getBoundingClientRect());
     });
   }, [editor]);
   React6__namespace.useEffect(() => {
@@ -4393,18 +4385,33 @@ function TableActionMenuPlugin({ disabled = false }) {
   React6__namespace.useEffect(() => {
     if (!isInTable && open) setOpen(false);
   }, [isInTable, open]);
-  const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React6__namespace.useMemo(() => {
-    if (!anchorRect) return void 0;
-    const top = Math.max(8, anchorRect.top + 6);
-    const left = Math.max(8, anchorRect.right - 34);
-    return {
-      position: "fixed",
-      top,
-      left,
-      zIndex: 9999
+  React6__namespace.useEffect(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const handleContextMenu = (e) => {
+      if (disabled) return;
+      let inTable = false;
+      editor.getEditorState().read(() => {
+        const selection = lexical.$getSelection();
+        if (table.$isTableSelection(selection)) {
+          inTable = true;
+          return;
+        }
+        if (lexical.$isRangeSelection(selection)) {
+          const node = selection.anchor.getNode();
+          const cell = table.$isTableCellNode(node) ? node : lexical.$findMatchingParent(node, (n) => table.$isTableCellNode(n));
+          if (cell) inTable = true;
+        }
+      });
+      if (inTable) {
+        e.preventDefault();
+        setMenuPos({ x: e.clientX, y: e.clientY });
+        setOpen(true);
+      }
     };
-  }, [anchorRect]);
+    root.addEventListener("contextmenu", handleContextMenu);
+    return () => root.removeEventListener("contextmenu", handleContextMenu);
+  }, [editor, disabled]);
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
@@ -4437,63 +4444,55 @@ function TableActionMenuPlugin({ disabled = false }) {
     const table$1 = table.$getTableNodeFromLexicalNodeOrThrow(cell);
     table$1.remove();
   });
-  if (!canShow || !handleStyle) return null;
+  const virtualTarget = React6__namespace.useMemo(() => {
+    if (!menuPos) return void 0;
+    return {
+      getBoundingClientRect: () => new DOMRect(menuPos.x, menuPos.y, 0, 0)
+    };
+  }, [menuPos]);
+  if (disabled) return null;
   return reactDom.createPortal(
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: handleStyle, className: "aoTableActionHandleRoot", children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Menu, { open, onOpenChange: (_, data) => setOpen(data.open), children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: "aoTableActionHandleBtn",
-          "aria-label": "Table options",
-          onMouseDown: (e) => {
-            e.preventDefault();
-          },
-          children: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ChevronDown12Regular, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { className: "aoTableActionPopover", children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuList, { children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Insert" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.RowTripleRegular, {}), onClick: insertRowAbove, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowUpRegular, {}),
-              " Row above"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2191" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.RowTripleRegular, {}), onClick: insertRowBelow, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownRegular, {}),
-              " Row below"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2193" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuDivider, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ColumnTripleRegular, {}), onClick: insertColLeft, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowLeftRegular, {}),
-              " Column left"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2190" })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ColumnTripleRegular, {}), onClick: insertColRight, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRightRegular, {}),
-              " Column right"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2192" })
-          ] }) })
-        ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Menu, { open, onOpenChange: (_, data) => setOpen(data.open), positioning: { target: virtualTarget }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuPopover, { className: "aoTableActionPopover", children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuList, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Insert" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.RowTripleRegular, {}), onClick: insertRowAbove, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowUpRegular, {}),
+            " Row above"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2191" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.RowTripleRegular, {}), onClick: insertRowBelow, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowDownRegular, {}),
+            " Row below"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2193" })
+        ] }) }),
         /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuDivider, {}),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Delete" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, {}), onClick: deleteRow, style: dangerStyle, children: "Delete row" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, {}), onClick: deleteCol, style: dangerStyle, children: "Delete column" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, {}), onClick: deleteTable, style: dangerStyle, children: "Delete table" })
-        ] })
-      ] }) })
-    ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ColumnTripleRegular, {}), onClick: insertColLeft, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowLeftRegular, {}),
+            " Column left"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2190" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ColumnTripleRegular, {}), onClick: insertColRight, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactIcons.ArrowRightRegular, {}),
+            " Column right"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2192" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuDivider, {}),
+      /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.MenuGroup, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuGroupHeader, { children: "Delete" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, {}), onClick: deleteRow, style: dangerStyle, children: "Delete row" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, {}), onClick: deleteCol, style: dangerStyle, children: "Delete column" }),
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MenuItem, { icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.DeleteRegular, {}), onClick: deleteTable, style: dangerStyle, children: "Delete table" })
+      ] })
+    ] }) }) }),
     document.body
   );
 }
@@ -6472,7 +6471,8 @@ function WordCountPlugin({ onCountChange }) {
 function FocusEventsPlugin({
   onFocus,
   onBlur,
-  setFocused
+  setFocused,
+  containerRef
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   React6.useEffect(() => {
@@ -6484,8 +6484,12 @@ function FocusEventsPlugin({
     };
     const handleFocusOut = (e) => {
       const next = e.relatedTarget;
-      const stillInside = !!next && root.contains(next);
+      const container = containerRef.current;
+      const stillInside = !!next && (container ? container.contains(next) : root.contains(next));
       if (stillInside) return;
+      editor.update(() => {
+        lexical.$setSelection(null);
+      });
       setFocused(false);
       onBlur?.();
     };
@@ -6495,7 +6499,7 @@ function FocusEventsPlugin({
       root.removeEventListener("focusin", handleFocusIn);
       root.removeEventListener("focusout", handleFocusOut);
     };
-  }, [editor, onBlur, onFocus, setFocused]);
+  }, [editor, onBlur, onFocus, setFocused, containerRef]);
   return null;
 }
 var URL_REGEX = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/;
@@ -6615,6 +6619,7 @@ var ContentEditorComponent = React6.forwardRef(
     const setFocused = (focused) => {
       focusedRef.current = focused;
     };
+    const containerRef = React6.useRef(null);
     const onAnchorRef = (elem) => {
       if (elem) setFloatingAnchorElem(elem);
     };
@@ -6700,7 +6705,7 @@ var ContentEditorComponent = React6.forwardRef(
         previousOverLimitRef.current = isOverLimit;
       }
     }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.FluentProvider, { theme: reactComponents.webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(LexicalComposer.LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.FluentProvider, { theme: reactComponents.webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(LexicalComposer.LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
       react.Stack,
       {
         style: {
@@ -6811,7 +6816,8 @@ var ContentEditorComponent = React6.forwardRef(
             {
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              setFocused
+              setFocused,
+              containerRef
             }
           ),
           props.autoFocus && !isReadOnly && /* @__PURE__ */ jsxRuntime.jsx(LexicalAutoFocusPlugin.AutoFocusPlugin, {}),
@@ -6856,7 +6862,13 @@ var ContentEditorComponent = React6.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
+            }
+          ),
           props.wordLimit !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(WordCountPlugin, { onCountChange: handleWordCount }),
           /* @__PURE__ */ jsxRuntime.jsx(
             RefApiPlugin,
@@ -6868,7 +6880,7 @@ var ContentEditorComponent = React6.forwardRef(
           )
         ]
       }
-    ) }) });
+    ) }) }) });
   }
 );