@tarviks/lexical-rich-editor 1.3.5 → 1.3.6

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, 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, $isTextNode, $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 { 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, PopoverTrigger, PopoverSurface } from '@fluentui/react-components';
+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';
 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, $removeList, $insertList, $isListItemNode } from '@lexical/list';
@@ -3143,33 +3143,6 @@ var getSelectedNode2 = (selection) => {
     return $isAtNodeEnd(anchor) ? anchorNode : focusNode;
   }
 };
-var VERTICAL_GAP = 10;
-var HORIZONTAL_OFFSET = 5;
-var VIEWPORT_MARGIN = 8;
-var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, topBoundary = VIEWPORT_MARGIN, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
-  if (targetRect === null) {
-    floatingElem.style.opacity = "0";
-    floatingElem.style.transform = "translate(-10000px, -10000px)";
-    return;
-  }
-  const floatingElemRect = floatingElem.getBoundingClientRect();
-  let top = targetRect.bottom + verticalGap;
-  let left = targetRect.left - horizontalOffset;
-  if (top + floatingElemRect.height > window.innerHeight - VIEWPORT_MARGIN) {
-    top = targetRect.top - floatingElemRect.height - verticalGap;
-  }
-  if (top < topBoundary) {
-    top = topBoundary;
-  }
-  left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - floatingElemRect.width - VIEWPORT_MARGIN));
-  const origin = getFixedPositionOrigin(floatingElem);
-  top -= origin.top;
-  left -= origin.left;
-  floatingElem.style.opacity = "1";
-  floatingElem.style.transform = "none";
-  floatingElem.style.top = `${top}px`;
-  floatingElem.style.left = `${left}px`;
-};
 var SUPPORTED_URL_PROTOCOLS = /* @__PURE__ */ new Set([
   "http:",
   "https:",
@@ -3195,7 +3168,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
   const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
   const [lastSelection, setLastSelection] = useState(null);
   const [linkUrl, setLinkUrl] = useState("");
-  const editorRef = useRef(null);
+  const [target, setTarget] = useState(null);
   const inputRef = useRef(null);
   const $updateLinkEditor = useCallback(() => {
     const selection = $getSelection();
@@ -3213,25 +3186,17 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
         setEditedLinkUrl(linkUrl);
       }
     }
-    const editorElem = editorRef.current;
     const nativeSelection = getDOMSelection(editor._window);
     const activeElement = document.activeElement;
-    if (editorElem === null) {
-      return;
-    }
     const rootElement = editor.getRootElement();
     if (isLink && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
       const domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
       if (domRect) {
-        const toolbarEl = rootElement.closest(".lexical-rich-editor-root")?.querySelector(".editor-toolbar-root");
-        const topBoundary = toolbarEl ? toolbarEl.getBoundingClientRect().bottom + 8 : 8;
-        setFloatingElemPositionForLinkEditor(domRect, editorElem, topBoundary);
+        setTarget({ getBoundingClientRect: () => domRect });
       }
       setLastSelection(selection);
-    } else if (!activeElement || activeElement.className !== "aoLinkInput") {
-      if (rootElement !== null) {
-        setFloatingElemPositionForLinkEditor(null, editorElem);
-      }
+    } else if (!(activeElement instanceof HTMLInputElement) || activeElement !== inputRef.current) {
+      setTarget(null);
       setLastSelection(null);
       setIsLinkEditMode(false);
       setLinkUrl("");
@@ -3327,99 +3292,119 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
       setIsLinkEditMode(false);
     }
   };
-  return /* @__PURE__ */ jsx("div", { ref: editorRef, className: "aoLinkEditor", children: !isLink ? null : isLinkEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        className: "aoLinkInput",
-        value: editedLinkUrl,
-        onChange: (event) => {
-          setEditedLinkUrl(event.target.value);
-        },
-        onKeyDown: (event) => {
-          monitorInputInteraction(event);
-        }
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: "aoLinkInputActions", children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "aoLinkCancel",
-          role: "button",
-          tabIndex: 0,
-          title: "Cancel",
-          "aria-label": "Cancel",
-          onMouseDown: preventDefault,
-          onClick: () => {
-            setIsLinkEditMode(false);
-          },
-          children: /* @__PURE__ */ jsx(DismissRegular, { fontSize: 16 })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "aoLinkConfirm",
-          role: "button",
-          tabIndex: 0,
-          title: "Confirm",
-          "aria-label": "Confirm",
-          onMouseDown: preventDefault,
-          onClick: handleLinkSubmission,
-          children: /* @__PURE__ */ jsx(CheckmarkRegular, { fontSize: 16 })
-        }
-      )
-    ] })
-  ] }) : /* @__PURE__ */ jsxs("div", { className: "aoLinkView", children: [
-    /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: sanitizeUrl(linkUrl),
-        target: "_blank",
-        rel: "noopener noreferrer",
-        children: linkUrl
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "aoLinkEdit",
-        role: "button",
-        tabIndex: 0,
-        title: "Edit link",
-        "aria-label": "Edit link",
-        onMouseDown: preventDefault,
-        onClick: (event) => {
-          event.preventDefault();
-          setEditedLinkUrl(linkUrl);
-          setIsLinkEditMode(true);
-        },
-        children: /* @__PURE__ */ jsx(EditRegular, { fontSize: 16 })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "aoLinkTrash",
-        role: "button",
-        tabIndex: 0,
-        title: "Remove link",
-        "aria-label": "Remove link",
-        onMouseDown: preventDefault,
-        onClick: () => {
-          editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
-        },
-        children: /* @__PURE__ */ jsx(DeleteRegular, { fontSize: 16 })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      open: isLink && !!target,
+      onOpenChange: (_, data) => {
+        if (!data.open) setIsLink(false);
+      },
+      positioning: { target: target ?? void 0, position: "below", align: "start" },
+      unstable_disableAutoFocus: true,
+      children: /* @__PURE__ */ jsx(PopoverSurface, { style: { display: "flex", alignItems: "center", gap: 6, padding: 8, maxWidth: 360 }, children: isLinkEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            value: editedLinkUrl,
+            style: {
+              flex: 1,
+              minWidth: 180,
+              border: "none",
+              outline: "none",
+              background: "#f1f1f1",
+              borderRadius: 15,
+              padding: "8px 12px",
+              fontSize: 14
+            },
+            onChange: (event) => {
+              setEditedLinkUrl(event.target.value);
+            },
+            onKeyDown: (event) => {
+              monitorInputInteraction(event);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(DismissRegular, { fontSize: 16 }),
+            title: "Cancel",
+            "aria-label": "Cancel",
+            onMouseDown: preventDefault,
+            onClick: () => {
+              setIsLinkEditMode(false);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "primary",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(CheckmarkRegular, { fontSize: 16 }),
+            title: "Confirm",
+            "aria-label": "Confirm",
+            onMouseDown: preventDefault,
+            onClick: handleLinkSubmission
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: sanitizeUrl(linkUrl),
+            target: "_blank",
+            rel: "noopener noreferrer",
+            style: {
+              padding: "0 8px",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              maxWidth: 260
+            },
+            children: linkUrl
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(EditRegular, { fontSize: 16 }),
+            title: "Edit link",
+            "aria-label": "Edit link",
+            onMouseDown: preventDefault,
+            onClick: (event) => {
+              event.preventDefault();
+              setEditedLinkUrl(linkUrl);
+              setIsLinkEditMode(true);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            size: "small",
+            icon: /* @__PURE__ */ jsx(DeleteRegular, { fontSize: 16 }),
+            title: "Remove link",
+            "aria-label": "Remove link",
+            onMouseDown: preventDefault,
+            onClick: () => {
+              editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
+            }
+          }
+        )
+      ] }) })
+    }
+  );
 };
-var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
+var useFloatingLinkEditorToolbar = (editor, isLinkEditMode, setIsLinkEditMode) => {
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
-  const portalContainer = useFloatingPortalContainer(editor);
   useEffect(() => {
     function $updateToolbar() {
       const selection = $getSelection();
@@ -3467,29 +3452,21 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
       )
     );
   }, [editor]);
-  if (!anchorElem || !(anchorElem instanceof HTMLElement) || !portalContainer) {
-    return null;
-  }
-  return createPortal(
-    /* @__PURE__ */ jsx(
-      FloatingLinkEditor,
-      {
-        isLink,
-        editor: activeEditor,
-        setIsLink,
-        isLinkEditMode,
-        setIsLinkEditMode
-      }
-    ),
-    portalContainer
+  return /* @__PURE__ */ jsx(
+    FloatingLinkEditor,
+    {
+      isLink,
+      editor: activeEditor,
+      setIsLink,
+      isLinkEditMode,
+      setIsLinkEditMode
+    }
   );
 };
-var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
+var FloatingLinkEditorPlugin = ({ isLinkEditMode, setIsLinkEditMode }) => {
   const [editor] = useLexicalComposerContext();
-  const validAnchorElem = anchorElem && anchorElem instanceof HTMLElement ? anchorElem : document.body;
   return useFloatingLinkEditorToolbar(
     editor,
-    validAnchorElem,
     isLinkEditMode,
     setIsLinkEditMode
   );