@tarviks/lexical-rich-editor 1.0.1 → 1.0.3

package/dist/index.mjs

@@ -7,7 +7,7 @@ import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { createCommand, DecoratorNode, COMMAND_PRIORITY_HIGH, TextNode, ElementNode, SELECTION_CHANGE_COMMAND, $getNodeByKey, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, $getSelection, $isRangeSelection, $findMatchingParent, COMMAND_PRIORITY_LOW, KEY_DOWN_COMMAND, $insertNodes, $isRootOrShadowRoot, $createParagraphNode, COMMAND_PRIORITY_EDITOR, PASTE_COMMAND, DRAGSTART_COMMAND, DRAGOVER_COMMAND, DROP_COMMAND, $getRoot, $createTextNode, $isTextNode, $createRangeSelection, $setSelection, $isElementNode, $isNodeSelection, CLICK_COMMAND, $applyNodeReplacement, FORMAT_TEXT_COMMAND, $isDecoratorNode, $getNearestNodeFromDOMNode, COMMAND_PRIORITY_CRITICAL, REDO_COMMAND, UNDO_COMMAND, FORMAT_ELEMENT_COMMAND, getDOMSelection, KEY_ESCAPE_COMMAND, isHTMLElement, getDOMSelectionFromTarget, createEditor, KEY_ENTER_COMMAND } from 'lexical';
 import { mergeStyleSets, Stack, css, useTheme, Callout, TextField, DefaultButton } from '@fluentui/react';
-import { makeStyles, FluentProvider, webLightTheme, Button, Menu, MenuTrigger, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, ToolbarDivider, Popover, PopoverTrigger, PopoverSurface, Field, Input } from '@fluentui/react-components';
+import { makeStyles, FluentProvider, webLightTheme, Button, Menu, MenuPopover, MenuList, MenuGroup, MenuGroupHeader, MenuItem, MenuDivider, Dropdown, Option, ToolbarDivider, Popover, PopoverTrigger, PopoverSurface, Field, Input } from '@fluentui/react-components';
 import { CodeHighlightNode, CodeNode, $isCodeHighlightNode } from '@lexical/code';
 import { LinkNode, AutoLinkNode, $isLinkNode, $isAutoLinkNode, TOGGLE_LINK_COMMAND, $createLinkNode } from '@lexical/link';
 import { ListNode, ListItemNode, $isListNode, REMOVE_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND } from '@lexical/list';
@@ -25,7 +25,7 @@ import { HeadingNode, QuoteNode, $isHeadingNode, $createQuoteNode, $createHeadin
 import { TableNode, TableRowNode, TableCellNode, $isTableSelection, $isTableNode, $isTableCellNode, $insertTableColumnAtSelection, $insertTableRowAtSelection, $deleteTableRowAtSelection, $deleteTableColumnAtSelection, $getTableNodeFromLexicalNodeOrThrow, getDOMCellFromTarget, getTableObserverFromTableElement, $getTableRowIndexFromTableCellNode, $isTableRowNode, $getTableColumnIndexFromTableCellNode, $createTableNodeWithDimensions } from '@lexical/table';
 import { BlockWithAlignableContents } from '@lexical/react/LexicalBlockWithAlignableContents';
 import { DecoratorBlockNode } from '@lexical/react/LexicalDecoratorBlockNode';
-import { DeleteRegular, ChevronDown12Regular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, CodeFilled, LinkFilled } from '@fluentui/react-icons';
+import { DeleteRegular, ArrowUpRegular, RowTripleRegular, ArrowDownRegular, ArrowLeftRegular, ColumnTripleRegular, ArrowRightRegular, TextCaseUppercaseFilled, TextCaseLowercaseFilled, TextCaseTitleFilled, TextStrikethroughFilled, TextSubscriptFilled, TextSuperscriptFilled, HighlightAccentFilled, TextBulletListLtrFilled, TextNumberListLtrFilled, DocumentPageBreakRegular, CommentQuoteRegular, TextUnderlineFilled, TextItalicFilled, TextBold24Regular, TextAlignLeftFilled, TextAlignCenterFilled, TextAlignRightFilled, TextAlignJustifyFilled, VideoClipRegular, ImageEditRegular, AttachFilled, ImageAddRegular, TableAddRegular, LinkAddRegular, TextColorRegular, PaintBucket16Filled, CodeFilled, LinkFilled } from '@fluentui/react-icons';
 import { $setBlocksType, $patchStyleText, $isAtNodeEnd, $getSelectionStyleValueForProperty } from '@lexical/selection';
 import { createPortal } from 'react-dom';
 import { $generateNodesFromDOM, $generateHtmlFromNodes } from '@lexical/html';
@@ -2442,6 +2442,8 @@ function CharacterStylesPopupPlugin(props) {
 var CustomOnChangePlugin = ({ value, onChange }) => {
   const [editor] = useLexicalComposerContext();
   const initializedRef = useRef(false);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
   useEffect(() => {
     if (!value || initializedRef.current) return;
     initializedRef.current = true;
@@ -2452,16 +2454,19 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
       const dom = parser.parseFromString(value, "text/html");
       const nodes = $generateNodesFromDOM(editor, dom);
       root.append(...nodes);
+      $setSelection(null);
     });
   }, [editor, value]);
+  const handleChange = useCallback((editorState) => {
+    editorState.read(() => {
+      onChangeRef.current($generateHtmlFromNodes(editor));
+    });
+  }, [editor]);
   return /* @__PURE__ */ jsx(
     OnChangePlugin,
     {
-      onChange: (editorState) => {
-        editorState.read(() => {
-          onChange($generateHtmlFromNodes(editor));
-        });
-      }
+      onChange: handleChange,
+      ignoreSelectionChange: true
     }
   );
 };
@@ -4273,8 +4278,8 @@ function SpellCheckPlugin({
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = useLexicalComposerContext();
   const [isInTable, setIsInTable] = React6.useState(false);
-  const [anchorRect, setAnchorRect] = React6.useState(null);
   const [open, setOpen] = React6.useState(false);
+  const [menuPos, setMenuPos] = React6.useState(null);
   const updateFromSelection = React6.useCallback(() => {
     const root = editor.getRootElement();
     if (!root) return;
@@ -4283,34 +4288,21 @@ function TableActionMenuPlugin({ disabled = false }) {
       if ($isTableSelection(selection)) {
         const tableNode = selection.getNodes().find((n) => $isTableNode(n));
         if (tableNode) {
-          const dom = editor.getElementByKey(tableNode.getKey());
-          if (dom) {
-            setIsInTable(true);
-            setAnchorRect(dom.getBoundingClientRect());
-            return;
-          }
+          setIsInTable(true);
+          return;
         }
       }
       if (!$isRangeSelection(selection)) {
         setIsInTable(false);
-        setAnchorRect(null);
         return;
       }
       const anchorNode = selection.anchor.getNode();
       const cellNode = $isTableCellNode(anchorNode) ? anchorNode : $findMatchingParent(anchorNode, (n) => $isTableCellNode(n));
       if (!cellNode || !$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.useEffect(() => {
@@ -4372,18 +4364,33 @@ function TableActionMenuPlugin({ disabled = false }) {
   React6.useEffect(() => {
     if (!isInTable && open) setOpen(false);
   }, [isInTable, open]);
-  const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React6.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.useEffect(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const handleContextMenu = (e) => {
+      if (disabled) return;
+      let inTable = false;
+      editor.getEditorState().read(() => {
+        const selection = $getSelection();
+        if ($isTableSelection(selection)) {
+          inTable = true;
+          return;
+        }
+        if ($isRangeSelection(selection)) {
+          const node = selection.anchor.getNode();
+          const cell = $isTableCellNode(node) ? node : $findMatchingParent(node, (n) => $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)"
   };
@@ -4416,63 +4423,55 @@ function TableActionMenuPlugin({ disabled = false }) {
     const table = $getTableNodeFromLexicalNodeOrThrow(cell);
     table.remove();
   });
-  if (!canShow || !handleStyle) return null;
+  const virtualTarget = React6.useMemo(() => {
+    if (!menuPos) return void 0;
+    return {
+      getBoundingClientRect: () => new DOMRect(menuPos.x, menuPos.y, 0, 0)
+    };
+  }, [menuPos]);
+  if (disabled) return null;
   return createPortal(
-    /* @__PURE__ */ jsx("div", { style: handleStyle, className: "aoTableActionHandleRoot", children: /* @__PURE__ */ jsxs(Menu, { open, onOpenChange: (_, data) => setOpen(data.open), children: [
-      /* @__PURE__ */ jsx(MenuTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "aoTableActionHandleBtn",
-          "aria-label": "Table options",
-          onMouseDown: (e) => {
-            e.preventDefault();
-          },
-          children: /* @__PURE__ */ jsx(ChevronDown12Regular, {})
-        }
-      ) }),
-      /* @__PURE__ */ jsx(MenuPopover, { className: "aoTableActionPopover", children: /* @__PURE__ */ jsxs(MenuList, { children: [
-        /* @__PURE__ */ jsxs(MenuGroup, { children: [
-          /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Insert" }),
-          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowAbove, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsx(ArrowUpRegular, {}),
-              " Row above"
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2191" })
-          ] }) }),
-          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowBelow, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsx(ArrowDownRegular, {}),
-              " Row below"
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2193" })
-          ] }) }),
-          /* @__PURE__ */ jsx(MenuDivider, {}),
-          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColLeft, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsx(ArrowLeftRegular, {}),
-              " Column left"
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2190" })
-          ] }) }),
-          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColRight, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
-            /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
-              /* @__PURE__ */ jsx(ArrowRightRegular, {}),
-              " Column right"
-            ] }),
-            /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2192" })
-          ] }) })
-        ] }),
+    /* @__PURE__ */ jsx(Menu, { open, onOpenChange: (_, data) => setOpen(data.open), positioning: { target: virtualTarget }, children: /* @__PURE__ */ jsx(MenuPopover, { className: "aoTableActionPopover", children: /* @__PURE__ */ jsxs(MenuList, { children: [
+      /* @__PURE__ */ jsxs(MenuGroup, { children: [
+        /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Insert" }),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowAbove, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsx(ArrowUpRegular, {}),
+            " Row above"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2191" })
+        ] }) }),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(RowTripleRegular, {}), onClick: insertRowBelow, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsx(ArrowDownRegular, {}),
+            " Row below"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2193" })
+        ] }) }),
         /* @__PURE__ */ jsx(MenuDivider, {}),
-        /* @__PURE__ */ jsxs(MenuGroup, { children: [
-          /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Delete" }),
-          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteRow, style: dangerStyle, children: "Delete row" }),
-          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteCol, style: dangerStyle, children: "Delete column" }),
-          /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteTable, style: dangerStyle, children: "Delete table" })
-        ] })
-      ] }) })
-    ] }) }),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColLeft, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsx(ArrowLeftRegular, {}),
+            " Column left"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2190" })
+        ] }) }),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(ColumnTripleRegular, {}), onClick: insertColRight, children: /* @__PURE__ */ jsxs("span", { className: "aoMenuRow", children: [
+          /* @__PURE__ */ jsxs("span", { className: "aoMenuLabel", children: [
+            /* @__PURE__ */ jsx(ArrowRightRegular, {}),
+            " Column right"
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "aoMenuShortcut", children: "Alt \u21E7 \u2192" })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ jsx(MenuDivider, {}),
+      /* @__PURE__ */ jsxs(MenuGroup, { children: [
+        /* @__PURE__ */ jsx(MenuGroupHeader, { children: "Delete" }),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteRow, style: dangerStyle, children: "Delete row" }),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteCol, style: dangerStyle, children: "Delete column" }),
+        /* @__PURE__ */ jsx(MenuItem, { icon: /* @__PURE__ */ jsx(DeleteRegular, {}), onClick: deleteTable, style: dangerStyle, children: "Delete table" })
+      ] })
+    ] }) }) }),
     document.body
   );
 }
@@ -6451,7 +6450,8 @@ function WordCountPlugin({ onCountChange }) {
 function FocusEventsPlugin({
   onFocus,
   onBlur,
-  setFocused
+  setFocused,
+  containerRef
 }) {
   const [editor] = useLexicalComposerContext();
   useEffect(() => {
@@ -6463,8 +6463,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(() => {
+        $setSelection(null);
+      });
       setFocused(false);
       onBlur?.();
     };
@@ -6474,7 +6478,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,})/;
@@ -6594,6 +6598,7 @@ var ContentEditorComponent = forwardRef(
     const setFocused = (focused) => {
       focusedRef.current = focused;
     };
+    const containerRef = useRef(null);
     const onAnchorRef = (elem) => {
       if (elem) setFloatingAnchorElem(elem);
     };
@@ -6679,7 +6684,7 @@ var ContentEditorComponent = forwardRef(
         previousOverLimitRef.current = isOverLimit;
       }
     }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsx("div", { ref: containerRef, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
       Stack,
       {
         style: {
@@ -6790,7 +6795,8 @@ var ContentEditorComponent = forwardRef(
             {
               onFocus: props.onFocus,
               onBlur: props.onBlur,
-              setFocused
+              setFocused,
+              containerRef
             }
           ),
           props.autoFocus && !isReadOnly && /* @__PURE__ */ jsx(AutoFocusPlugin, {}),
@@ -6835,7 +6841,13 @@ 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
+            }
+          ),
           props.wordLimit !== void 0 && /* @__PURE__ */ jsx(WordCountPlugin, { onCountChange: handleWordCount }),
           /* @__PURE__ */ jsx(
             RefApiPlugin,
@@ -6847,7 +6859,7 @@ var ContentEditorComponent = forwardRef(
           )
         ]
       }
-    ) }) });
+    ) }) }) });
   }
 );