@tarviks/lexical-rich-editor 1.3.1 → 1.3.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, 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, Dialog, DialogTrigger, DialogSurface, DialogBody, DialogTitle, DialogContent, Field, Input, DialogActions, MessageBar, MessageBarBody } 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 } 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';
@@ -2482,9 +2482,6 @@ function AutocompletePlugin({
   }, [cancelInflight]);
   return null;
 }
-function clamp2(n, min, max) {
-  return Math.max(min, Math.min(max, n));
-}
 function useFloatingPortalContainer(editor) {
   const [container, setContainer] = useState(null);
   useEffect(() => {
@@ -2502,6 +2499,22 @@ function useFloatingPortalContainer(editor) {
   }, [editor]);
   return container;
 }
+function getFixedPositionOrigin(fromElement) {
+  let node = fromElement.parentElement;
+  while (node && node !== document.body && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    const createsContainingBlock = style.transform && style.transform !== "none" || style.perspective && style.perspective !== "none" || style.filter && style.filter !== "none" || style.backdropFilter && style.backdropFilter !== "none" || style.willChange && /transform|perspective|filter/.test(style.willChange) || style.contain && /paint|layout|strict|content/.test(style.contain);
+    if (createsContainingBlock) {
+      const rect = node.getBoundingClientRect();
+      return { top: rect.top, left: rect.left };
+    }
+    node = node.parentElement;
+  }
+  return { top: 0, left: 0 };
+}
+function clamp2(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
 function setPopupPositionFixed(popupEl, rect, topBoundary) {
   const GAP = 8;
   const MARGIN = 8;
@@ -2509,6 +2522,9 @@ function setPopupPositionFixed(popupEl, rect, topBoundary) {
   let left = rect.left;
   if (top < topBoundary) top = rect.bottom + GAP;
   left = clamp2(left, MARGIN, window.innerWidth - popupEl.offsetWidth - MARGIN);
+  const origin = getFixedPositionOrigin(popupEl);
+  top -= origin.top;
+  left -= origin.left;
   popupEl.style.top = `${top}px`;
   popupEl.style.left = `${left}px`;
 }
@@ -3130,28 +3146,30 @@ var getSelectedNode2 = (selection) => {
 };
 var VERTICAL_GAP = 10;
 var HORIZONTAL_OFFSET = 5;
-var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, anchorElem, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
-  const scrollerElem = anchorElem.parentElement;
-  if (targetRect === null || !scrollerElem) {
+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();
-  const anchorElementRect = anchorElem.getBoundingClientRect();
-  const editorScrollerRect = scrollerElem.getBoundingClientRect();
-  let top = targetRect.top - verticalGap;
+  let top = targetRect.bottom + verticalGap;
   let left = targetRect.left - horizontalOffset;
-  if (top < editorScrollerRect.top) {
-    top += floatingElemRect.height + targetRect.height + verticalGap * 2;
+  if (top + floatingElemRect.height > window.innerHeight - VIEWPORT_MARGIN) {
+    top = targetRect.top - floatingElemRect.height - verticalGap;
   }
-  if (left + floatingElemRect.width > editorScrollerRect.right) {
-    left = editorScrollerRect.right - floatingElemRect.width - horizontalOffset;
+  if (top < topBoundary) {
+    top = topBoundary;
   }
-  top -= anchorElementRect.top;
-  left -= anchorElementRect.left;
+  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 = `translate(${left}px, ${top}px)`;
+  floatingElem.style.transform = "none";
+  floatingElem.style.top = `${top}px`;
+  floatingElem.style.left = `${left}px`;
 };
 var SUPPORTED_URL_PROTOCOLS = /* @__PURE__ */ new Set([
   "http:",
@@ -3174,7 +3192,7 @@ var sanitizeUrl = (url) => {
 var preventDefault = (event) => {
   event.preventDefault();
 };
-var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
+var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLinkEditMode }) => {
   const [editedLinkUrl, setEditedLinkUrl] = useState("https://");
   const [lastSelection, setLastSelection] = useState(null);
   const [linkUrl, setLinkUrl] = useState("");
@@ -3206,38 +3224,37 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
     if (isLink && selection !== null && nativeSelection !== null && rootElement !== null && rootElement.contains(nativeSelection.anchorNode) && editor.isEditable()) {
       const domRect = nativeSelection.focusNode?.parentElement?.getBoundingClientRect();
       if (domRect) {
-        domRect.y += 40;
-        setFloatingElemPositionForLinkEditor(domRect, editorElem, anchorElem);
+        const toolbarEl = rootElement.closest(".lexical-rich-editor-root")?.querySelector(".editor-toolbar-root");
+        const topBoundary = toolbarEl ? toolbarEl.getBoundingClientRect().bottom + 8 : 8;
+        setFloatingElemPositionForLinkEditor(domRect, editorElem, topBoundary);
       }
       setLastSelection(selection);
     } else if (!activeElement || activeElement.className !== "aoLinkInput") {
       if (rootElement !== null) {
-        setFloatingElemPositionForLinkEditor(null, editorElem, anchorElem);
+        setFloatingElemPositionForLinkEditor(null, editorElem);
       }
       setLastSelection(null);
       setIsLinkEditMode(false);
       setLinkUrl("");
     }
     return true;
-  }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
+  }, [editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
   useEffect(() => {
-    const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
         $updateLinkEditor();
       });
     };
+    const root = editor.getRootElement();
     window.addEventListener("resize", update);
-    if (scrollerElem) {
-      scrollerElem.addEventListener("scroll", update);
-    }
+    window.addEventListener("scroll", update, true);
+    root?.addEventListener("scroll", update, { passive: true });
     return () => {
       window.removeEventListener("resize", update);
-      if (scrollerElem) {
-        scrollerElem.removeEventListener("scroll", update);
-      }
+      window.removeEventListener("scroll", update, true);
+      root?.removeEventListener("scroll", update);
     };
-  }, [anchorElem.parentElement, editor, $updateLinkEditor]);
+  }, [editor, $updateLinkEditor]);
   useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
@@ -3403,6 +3420,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
+  const portalContainer = useFloatingPortalContainer(editor);
   useEffect(() => {
     function $updateToolbar() {
       const selection = $getSelection();
@@ -3450,7 +3468,7 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
       )
     );
   }, [editor]);
-  if (!anchorElem || !(anchorElem instanceof HTMLElement)) {
+  if (!anchorElem || !(anchorElem instanceof HTMLElement) || !portalContainer) {
     return null;
   }
   return createPortal(
@@ -3460,12 +3478,11 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
         isLink,
         editor: activeEditor,
         setIsLink,
-        anchorElem,
         isLinkEditMode,
         setIsLinkEditMode
       }
     ),
-    anchorElem
+    portalContainer
   );
 };
 var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
@@ -3478,6 +3495,48 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
     setIsLinkEditMode
   );
 };
+var AoModal = ({
+  isOpen,
+  onDismiss,
+  title,
+  maxWidth = 280,
+  // Default to a smaller, compact size
+  actions,
+  children
+}) => {
+  const [editor] = useLexicalComposerContext();
+  const hostElement = useFloatingPortalContainer(editor);
+  if (!isOpen) return null;
+  const modalContent = /* @__PURE__ */ jsx("div", { className: "aoModalBackdrop", onClick: onDismiss, children: /* @__PURE__ */ jsxs(
+    FluentProvider,
+    {
+      theme: webLightTheme,
+      className: "aoModalWrapper aoModalContainer",
+      style: { maxWidth, width: "90vw" },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "aoModalHeader", children: [
+          /* @__PURE__ */ jsx("h2", { className: "aoModalTitle", children: title }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "aoModalCloseButton",
+              "aria-label": "Close popup",
+              onClick: onDismiss,
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "aoModalBody", children }),
+        actions && /* @__PURE__ */ jsx("div", { className: "aoModalActions", children: actions })
+      ]
+    }
+  ) });
+  if (!hostElement) return null;
+  return createPortal(modalContent, hostElement);
+};
+
+// src/Plugins/ImagePlugin.tsx
 init_ImageNode();
 var INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
 var readClipboardImageAsDataURL = async (event) => {
@@ -3611,108 +3670,105 @@ var InsertImageDialog = ({
     };
     reader.readAsDataURL(file);
   };
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add Image",
+        disabled,
+        icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setIsOpen((prev) => !prev);
+          setSrc("");
+          setAltText("");
+          setFileName("");
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add Image",
-            disabled,
-            icon: /* @__PURE__ */ jsx(ImageAddRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setSrc("");
-              setAltText("");
-              setFileName("");
-            }
-          },
-          "upload-image"
-        ) }),
-        /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: 340 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert image" }),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
-            /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
-              "label",
-              {
-                style: {
-                  cursor: disabled ? "not-allowed" : "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  opacity: disabled ? 0.75 : 1
-                },
-                children: [
+      "upload-image"
+    ),
+    /* @__PURE__ */ jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Insert image",
+        maxWidth: 340,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
+          /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+        ] }),
+        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+          /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
+            "label",
+            {
+              style: {
+                cursor: disabled ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                opacity: disabled ? 0.75 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "file",
+                    accept: "image/*",
+                    style: { display: "none" },
+                    disabled,
+                    onChange: loadImage
+                  },
+                  "inline-image-upload"
+                ),
+                /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
                   /* @__PURE__ */ jsx(
-                    "input",
+                    AttachFilled,
                     {
-                      type: "file",
-                      accept: "image/*",
-                      style: { display: "none" },
-                      disabled,
-                      onChange: loadImage
-                    },
-                    "inline-image-upload"
-                  ),
-                  /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                    /* @__PURE__ */ jsx(
-                      AttachFilled,
-                      {
-                        style: {
-                          fontSize: "16px",
-                          color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                          marginTop: 2
-                        }
+                      style: {
+                        fontSize: "16px",
+                        color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
+                        marginTop: 2
                       }
-                    ),
-                    !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                  ] }),
-                  fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-                ]
-              }
-            ) }),
-            fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
-            /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                placeholder: "Alt text",
-                appearance: "underline",
-                disabled,
-                onChange: (_, d) => setAltText(d.value),
-                value: altText
-              }
-            ) }),
-            selectedValue === "URL" && /* @__PURE__ */ jsx(
-              InsertImageByURL,
-              {
-                disabled,
-                setIsOpen: (open) => setIsOpen(open),
-                onClick: (payload) => onClick(payload)
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsxs(DialogActions, { children: [
-            /* @__PURE__ */ jsx(Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
-            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+                    }
+                  ),
+                  !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+                ] }),
+                fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+              ]
+            }
+          ) }),
+          fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+          /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Alt text",
+              appearance: "underline",
+              disabled,
+              onChange: (_, d) => setAltText(d.value),
+              value: altText
+            }
+          ) }),
+          selectedValue === "URL" && /* @__PURE__ */ jsx(
+            InsertImageByURL,
+            {
+              disabled,
+              setIsOpen: (open) => setIsOpen(open),
+              onClick: (payload) => onClick(payload)
+            }
+          )
+        ] })
+      }
+    )
+  ] });
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = useLexicalComposerContext();
@@ -3962,135 +4018,132 @@ var InsertInlineImageDialog = ({
     setFileName("");
     setFileSizeError(null);
   };
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add Inline Image",
+        disabled,
+        icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setIsOpen((prev) => !prev);
+          setAltText("");
+          setSrc("");
+          setFileName("");
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add Inline Image",
-            disabled,
-            icon: /* @__PURE__ */ jsx(ImageEditRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
+      "upload-inline-image"
+    ),
+    /* @__PURE__ */ jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Insert inline image",
+        maxWidth: 360,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              disabled: isDisabled,
+              onClick: handleOnClick,
+              children: "Add"
             },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setAltText("");
-              setSrc("");
-              setFileName("");
-            }
-          },
-          "upload-inline-image"
-        ) }),
-        /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: 360 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert inline image" }),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
-            /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
-              "label",
-              {
-                style: {
-                  cursor: disabled ? "not-allowed" : "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  opacity: disabled ? 0.75 : 1
-                },
-                children: [
+            "file-inline-upload-btn"
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              disabled,
+              onClick: () => setIsOpen(false),
+              children: "Cancel"
+            },
+            "file-inline-upload-cancel"
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+          /* @__PURE__ */ jsx(Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxs(
+            "label",
+            {
+              style: {
+                cursor: disabled ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                opacity: disabled ? 0.75 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "file",
+                    accept: "image/*",
+                    style: { display: "none" },
+                    disabled,
+                    onChange: loadImage
+                  },
+                  "inline-image-upload"
+                ),
+                /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
                   /* @__PURE__ */ jsx(
-                    "input",
+                    AttachFilled,
                     {
-                      type: "file",
-                      accept: "image/*",
-                      style: { display: "none" },
-                      disabled,
-                      onChange: loadImage
-                    },
-                    "inline-image-upload"
-                  ),
-                  /* @__PURE__ */ jsxs(Stack, { horizontal: true, children: [
-                    /* @__PURE__ */ jsx(
-                      AttachFilled,
-                      {
-                        style: {
-                          fontSize: "16px",
-                          color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
-                          marginTop: 2
-                        }
+                      style: {
+                        fontSize: "16px",
+                        color: disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#808080",
+                        marginTop: 2
                       }
-                    ),
-                    !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                  ] }),
-                  fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxs(
-              Dropdown,
-              {
-                className: styles.alignDropdown,
-                disabled,
-                value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
-                selectedOptions: [position ?? "left"],
-                listbox: { style: { width: "120px" } },
-                root: { style: { borderBottom: "1px solid black" } },
-                onOptionSelect: (_, data) => setPosition(data.optionValue),
-                children: [
-                  /* @__PURE__ */ jsx(Option, { value: "left", children: "Left" }, "left"),
-                  /* @__PURE__ */ jsx(Option, { value: "right", children: "Right" }, "right"),
-                  /* @__PURE__ */ jsx(Option, { value: "full", children: "Full" }, "full")
-                ]
-              }
-            ) }),
-            fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
-            /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                placeholder: "Alt text",
-                appearance: "underline",
-                disabled,
-                value: altText,
-                onChange: (_, d) => setAltText(d.value)
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsxs(DialogActions, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "small",
-                disabled: isDisabled,
-                onClick: handleOnClick,
-                children: "Add"
-              },
-              "file-inline-upload-btn"
-            ),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "small",
-                disabled,
-                onClick: () => setIsOpen(false),
-                children: "Cancel"
-              },
-              "file-inline-upload-cancel"
-            )
-          ] })
-        ] }) })
-      ]
-    }
-  );
+                    }
+                  ),
+                  !fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+                ] }),
+                fileName && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxs(
+            Dropdown,
+            {
+              className: styles.alignDropdown,
+              disabled,
+              value: position === "full" ? "Full" : position === "right" ? "Right" : "Left",
+              selectedOptions: [position ?? "left"],
+              listbox: { style: { width: "120px" } },
+              root: { style: { borderBottom: "1px solid black" } },
+              onOptionSelect: (_, data) => setPosition(data.optionValue),
+              children: [
+                /* @__PURE__ */ jsx(Option, { value: "left", children: "Left" }, "left"),
+                /* @__PURE__ */ jsx(Option, { value: "right", children: "Right" }, "right"),
+                /* @__PURE__ */ jsx(Option, { value: "full", children: "Full" }, "full")
+              ]
+            }
+          ) }),
+          fileSizeError && /* @__PURE__ */ jsx(MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsx(MessageBarBody, { children: fileSizeError }) }),
+          /* @__PURE__ */ jsx(Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              placeholder: "Alt text",
+              appearance: "underline",
+              disabled,
+              value: altText,
+              onChange: (_, d) => setAltText(d.value)
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
 };
 var InlineImagePlugin = () => {
   const [editor] = useLexicalComposerContext();
@@ -6591,79 +6644,76 @@ var TableItemPlugin = ({ disabled }) => {
     setColumns("");
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "small",
+        title: "Add table",
+        disabled,
+        icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setIsOpen((prev) => !prev);
+          setRows("");
+          setColumns("");
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "small",
-            title: "Add table",
-            disabled,
-            icon: /* @__PURE__ */ jsx(TableAddRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setRows("");
-              setColumns("");
+      "insert-table-nodes"
+    ),
+    /* @__PURE__ */ jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Insert table",
+        maxWidth: 300,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              appearance: "primary",
+              disabled: disabled || !rows || !columns,
+              onClick: onAddTable,
+              children: "Add"
             }
-          },
-          "insert-table-nodes"
-        ) }),
-        /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: 300 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Insert table" }),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
-            /* @__PURE__ */ jsx(Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                autoFocus: !disabled,
-                value: rows,
-                placeholder: "Rows",
-                appearance: "underline",
-                disabled,
-                onChange: (_, v) => setRows(v.value)
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsx(
-              Input,
-              {
-                value: columns,
-                placeholder: "Columns",
-                appearance: "underline",
-                disabled,
-                onChange: (_, v) => setColumns(v.value)
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsxs(DialogActions, { children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                size: "small",
-                appearance: "primary",
-                disabled: disabled || !rows || !columns,
-                onClick: onAddTable,
-                children: "Add"
-              }
-            ),
-            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+          ),
+          /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+        ] }),
+        children: /* @__PURE__ */ jsxs(Stack, { tokens: { childrenGap: 8 }, children: [
+          /* @__PURE__ */ jsx(Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              autoFocus: !disabled,
+              value: rows,
+              placeholder: "Rows",
+              appearance: "underline",
+              disabled,
+              onChange: (_, v) => setRows(v.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsx(
+            Input,
+            {
+              value: columns,
+              placeholder: "Columns",
+              appearance: "underline",
+              disabled,
+              onChange: (_, v) => setColumns(v.value)
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
 };
 var YoutubeUploadPlugin = ({ disabled }) => {
   const [url, setURL] = useState("");
@@ -6683,57 +6733,54 @@ var YoutubeUploadPlugin = ({ disabled }) => {
     setURL("");
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxs(
-    Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        title: "Add youtube URL",
+        size: "small",
+        disabled,
+        icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: iconColor } }),
+        style: {
+          background: isOpen && !disabled ? "#ebebeb" : "none",
+          border: "none",
+          margin: 2,
+          opacity: disabled ? 0.55 : 1,
+          cursor: disabled ? "not-allowed" : "pointer"
+        },
+        onClick: () => {
+          if (disabled) return;
+          setIsOpen((prev) => !prev);
+          setURL("");
+        }
       },
-      children: [
-        /* @__PURE__ */ jsx(DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsx(
-          Button,
+      "upload-video"
+    ),
+    /* @__PURE__ */ jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Embed YouTube video",
+        maxWidth: 320,
+        actions: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
+          /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+        ] }),
+        children: /* @__PURE__ */ jsx(Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsx(Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsx(
+          Input,
           {
-            title: "Add youtube URL",
-            size: "small",
+            autoFocus: !disabled,
             disabled,
-            icon: /* @__PURE__ */ jsx(VideoClipRegular, { style: { color: iconColor } }),
-            style: {
-              background: isOpen && !disabled ? "#ebebeb" : "none",
-              border: "none",
-              margin: 2,
-              opacity: disabled ? 0.55 : 1,
-              cursor: disabled ? "not-allowed" : "pointer"
-            },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setURL("");
-            }
-          },
-          "upload-video"
-        ) }),
-        /* @__PURE__ */ jsx(DialogSurface, { style: { maxWidth: 320 }, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-          /* @__PURE__ */ jsx(DialogTitle, { children: "Embed YouTube video" }),
-          /* @__PURE__ */ jsx(DialogContent, { children: /* @__PURE__ */ jsx(Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsx(Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              autoFocus: !disabled,
-              disabled,
-              value: url,
-              appearance: "underline",
-              placeholder: "Add Youtube video URL",
-              onChange: (_, v) => setURL(v.value)
-            }
-          ) }) }) }),
-          /* @__PURE__ */ jsxs(DialogActions, { children: [
-            /* @__PURE__ */ jsx(Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
-            /* @__PURE__ */ jsx(Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+            value: url,
+            appearance: "underline",
+            placeholder: "Add Youtube video URL",
+            onChange: (_, v) => setURL(v.value)
+          }
+        ) }) })
+      }
+    )
+  ] });
 };
 var TextAlphaListLtrFilled = ({ style }) => /* @__PURE__ */ jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style, children: [
   /* @__PURE__ */ jsx("path", { d: "M8.75 4a.75.75 0 1 0 0 1.5h7.5a.75.75 0 0 0 0-1.5h-7.5Z" }),
@@ -6815,6 +6862,7 @@ var ToolBarPlugins = (props) => {
   const [isLowercase, setIsLowercase] = useState(false);
   const [isCapitalize, setIsCapitalize] = useState(false);
   const [alignment, setAlignment] = useState("left");
+  const [hasTextSelection, setHasTextSelection] = useState(false);
   const [decoratorOpen, setDecoratorOpen] = useState(false);
   const decoratorSelectingRef = React9__default.useRef(false);
   const presetGroups = props.customToolbar ?? getToolbarGroupsByLevel(props.level);
@@ -6833,8 +6881,10 @@ var ToolBarPlugins = (props) => {
       setIsLowercase(false);
       setIsCapitalize(false);
       setSelectNodeType("paragraph");
+      setHasTextSelection(false);
       return;
     }
+    setHasTextSelection(!selection.isCollapsed());
     setIsBold(selection.hasFormat("bold"));
     setIsItalic(selection.hasFormat("italic"));
     setIsUnderline(selection.hasFormat("underline"));
@@ -7090,7 +7140,7 @@ var ToolBarPlugins = (props) => {
         return /* @__PURE__ */ jsx(
           InsertLinkPlugin,
           {
-            disabled: !isEditable || props.readOnly,
+            disabled: !isEditable || props.readOnly || !hasTextSelection,
             setIsLinkEditMode: props.setIsLinkEditMode
           },
           key
@@ -8156,8 +8206,13 @@ var ContentEditorComponent = forwardRef(
         color: "var(--colorNeutralForeground3, grey)",
         position: "absolute",
         top: props.level !== "none" /* None */ ? "17px" : "27px",
-        left: pageCanvas.paddingPx,
-        right: pageCanvas.paddingPx,
+        left: 0,
+        right: 0,
+        maxWidth: pageCanvas.widthPx,
+        marginLeft: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+        marginRight: pageCanvas.widthPx !== void 0 ? "auto" : void 0,
+        paddingLeft: pageCanvas.paddingPx,
+        paddingRight: pageCanvas.paddingPx,
         fontSize: "14px",
         pointerEvents: "none",
         userSelect: "none"
@@ -8274,7 +8329,7 @@ var ContentEditorComponent = forwardRef(
     const trimmedErrorMessage = props.errorMessage?.trim() || "";
     const hasValidationError = validationErrors.length > 0 || !!trimmedErrorMessage;
     return /* @__PURE__ */ jsx(FluentProvider, { theme: webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsxs(LexicalComposer, { initialConfig, children: [
-      /* @__PURE__ */ jsx("div", { ref: containerRef, className: "lexical-rich-editor-root", style: { height: "100%" }, children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { ref: containerRef, className: "lexical-rich-editor-root", style: { height: "100%", position: "relative" }, children: /* @__PURE__ */ jsxs(
         Stack,
         {
           style: {