@tarviks/lexical-rich-editor 1.3.1 → 1.3.2

package/dist/index.mjs

@@ -1,13 +1,13 @@
 import { mergeRegister, $wrapNodeInElement, $insertNodeToNearestRoot, $getNearestNodeOfType, $findMatchingParent as $findMatchingParent$1, calculateZoomLevel } from '@lexical/utils';
-import * as React9 from 'react';
-import React9__default, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, useImperativeHandle, Suspense } from 'react';
+import * as React10 from 'react';
+import React10__default, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, useImperativeHandle, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
 import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
 import { createCommand, 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';
@@ -642,7 +642,7 @@ function parseDimFromStyleOrAttr(img3) {
 var ImageComponent2, isGoogleDocCheckboxImg, $convertImageElement, ImageNode, $createImageNode, $isImageNode;
 var init_ImageNode = __esm({
   "src/Nodes/ImageNode.tsx"() {
-    ImageComponent2 = React9.lazy(() => Promise.resolve().then(() => (init_ImageComponent(), ImageComponent_exports)));
+    ImageComponent2 = React10.lazy(() => Promise.resolve().then(() => (init_ImageComponent(), ImageComponent_exports)));
     isGoogleDocCheckboxImg = (img3) => {
       return img3.parentElement != null && img3.parentElement.tagName === "LI" && img3.previousSibling === null && img3.getAttribute("aria-roledescription") === "checkbox";
     };
@@ -1061,7 +1061,7 @@ var init_InlineImageComponent = __esm({
 var InlineImageComponent2, $convertInlineImageElement, InlineImageNode, $createInlineImageNode, $isInlineImageNode;
 var init_InlineImageNode = __esm({
   "src/Nodes/InlineImageNode.tsx"() {
-    InlineImageComponent2 = React9.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
+    InlineImageComponent2 = React10.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
     $convertInlineImageElement = (domNode) => {
       if (isHTMLElement(domNode) && domNode.nodeName === "IMG") {
         const { alt: altText, src, width, height } = domNode;
@@ -1702,7 +1702,7 @@ function VideoResizer({
   onResizeStart,
   onResizeEnd
 }) {
-  const resizeState = React9.useRef(null);
+  const resizeState = React10.useRef(null);
   const startResize = (e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1829,15 +1829,15 @@ function YouTubeComponent({
   height,
   editor
 }) {
-  const wrapperRef = React9.useRef(null);
-  const containerRef = React9.useRef(null);
-  const iframeRef = React9.useRef(null);
-  const isResizingRef = React9.useRef(false);
+  const wrapperRef = React10.useRef(null);
+  const containerRef = React10.useRef(null);
+  const iframeRef = React10.useRef(null);
+  const isResizingRef = React10.useRef(false);
   const [isNodeSelected, setNodeSelected, clearNodeSelection] = useLexicalNodeSelection(nodeKey);
-  const [isHovered, setIsHovered] = React9.useState(false);
-  const [isResizing, setIsResizing] = React9.useState(false);
-  const [isPlaying, setIsPlaying] = React9.useState(false);
-  React9.useEffect(() => {
+  const [isHovered, setIsHovered] = React10.useState(false);
+  const [isResizing, setIsResizing] = React10.useState(false);
+  const [isPlaying, setIsPlaying] = React10.useState(false);
+  React10.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         FORMAT_ELEMENT_COMMAND,
@@ -2226,13 +2226,13 @@ function AutocompletePlugin({
   prefixWindow = 300
 }) {
   const [editor] = useLexicalComposerContext();
-  const ghostKeyRef = React9.useRef(null);
-  const idleTimerRef = React9.useRef(null);
-  const inflightRef = React9.useRef(null);
-  const reqCounterRef = React9.useRef(0);
-  const lastTriggerRef = React9.useRef("");
-  const lastShownCtxRef = React9.useRef("");
-  const clearGhost = React9.useCallback(() => {
+  const ghostKeyRef = React10.useRef(null);
+  const idleTimerRef = React10.useRef(null);
+  const inflightRef = React10.useRef(null);
+  const reqCounterRef = React10.useRef(0);
+  const lastTriggerRef = React10.useRef("");
+  const lastShownCtxRef = React10.useRef("");
+  const clearGhost = React10.useCallback(() => {
     editor.update(
       () => {
         const key = ghostKeyRef.current;
@@ -2244,7 +2244,7 @@ function AutocompletePlugin({
       { tag: "autocomplete-ghost" }
     );
   }, [editor]);
-  const upsertGhost = React9.useCallback(
+  const upsertGhost = React10.useCallback(
     (text, insertAtCharOffset) => {
       editor.update(
         () => {
@@ -2308,12 +2308,12 @@ function AutocompletePlugin({
     },
     [editor]
   );
-  const cancelInflight = React9.useCallback(() => {
+  const cancelInflight = React10.useCallback(() => {
     if (!inflightRef.current) return;
     inflightRef.current.dismiss();
     inflightRef.current = null;
   }, []);
-  const resetIdleTimer = React9.useCallback(
+  const resetIdleTimer = React10.useCallback(
     (callback) => {
       if (idleTimerRef.current) {
         clearTimeout(idleTimerRef.current);
@@ -2328,7 +2328,7 @@ function AutocompletePlugin({
     },
     [idleMs, cancelInflight, clearGhost]
   );
-  const fireQuery = React9.useCallback(() => {
+  const fireQuery = React10.useCallback(() => {
     if (!useQuery || isReadOnly) return;
     let context = "";
     let prefix = "";
@@ -2400,7 +2400,7 @@ function AutocompletePlugin({
     upsertGhost,
     onSuggestionShown
   ]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (tags.has("history-merge") || tags.has("collaboration")) return;
@@ -2409,7 +2409,7 @@ function AutocompletePlugin({
       resetIdleTimer(fireQuery);
     });
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -2433,7 +2433,7 @@ function AutocompletePlugin({
       COMMAND_PRIORITY_LOW
     );
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
       (e) => {
@@ -2474,7 +2474,7 @@ function AutocompletePlugin({
       COMMAND_PRIORITY_HIGH
     );
   }, [editor, clearGhost, onSuggestionAccept, prefixWindow]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     return () => {
       cancelInflight();
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -3130,28 +3130,44 @@ 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;
+function useFloatingPortalContainer2(editor) {
+  const [container, setContainer] = useState(null);
+  useEffect(() => {
+    const root = editor.getRootElement();
+    if (!root) return;
+    const panelOrLayer = root.closest(".ms-Panel-main") || root.closest(".ms-Panel") || root.closest(".ms-Layer") || document.body;
+    const host = document.createElement("div");
+    host.className = "lexical-floating-ui-host";
+    panelOrLayer.appendChild(host);
+    setContainer(host);
+    return () => {
+      host.remove();
+      setContainer(null);
+    };
+  }, [editor]);
+  return container;
+}
+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));
   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 +3190,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 +3222,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 +3418,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 = useFloatingPortalContainer2(editor);
   useEffect(() => {
     function $updateToolbar() {
       const selection = $getSelection();
@@ -3450,7 +3466,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 +3476,11 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
         isLink,
         editor: activeEditor,
         setIsLink,
-        anchorElem,
         isLinkEditMode,
         setIsLinkEditMode
       }
     ),
-    anchorElem
+    portalContainer
   );
 };
 var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
@@ -3478,6 +3493,61 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
     setIsLinkEditMode
   );
 };
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React10.useLayoutEffect : React10.useEffect;
+var AoModal = ({
+  isOpen,
+  onDismiss,
+  title,
+  maxWidth = 280,
+  // Default to a smaller, compact size
+  actions,
+  children
+}) => {
+  const [hostElement, setHostElement] = React10.useState(null);
+  const mountRef = React10.useRef(null);
+  useIsomorphicLayoutEffect(() => {
+    if (isOpen && mountRef.current) {
+      const root = mountRef.current.closest(".lexical-rich-editor-root");
+      if (root) {
+        setHostElement(root);
+      } else {
+        setHostElement(mountRef.current.parentElement);
+      }
+    }
+  }, [isOpen]);
+  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 createPortal(modalContent, hostElement);
+  }
+  return /* @__PURE__ */ jsx("div", { ref: mountRef, style: { display: "none" } });
+};
+
+// src/Plugins/ImagePlugin.tsx
 init_ImageNode();
 var INSERT_IMAGE_COMMAND = createCommand("INSERT_IMAGE_COMMAND");
 var readClipboardImageAsDataURL = async (event) => {
@@ -3611,108 +3681,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 +4029,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();
@@ -4353,8 +4417,8 @@ function RefApiPlugin({
   focusedRef
 }) {
   const [editor] = useLexicalComposerContext();
-  const cleanBaselineRef = React9__default.useRef(null);
-  React9__default.useEffect(() => {
+  const cleanBaselineRef = React10__default.useRef(null);
+  React10__default.useEffect(() => {
     const capture = () => {
       if (cleanBaselineRef.current === null) {
         cleanBaselineRef.current = getUserContentSignature(editor);
@@ -4568,28 +4632,28 @@ function SpellPopover({
   onImprove,
   onAcceptGrammar
 }) {
-  const ref = React9.useRef(null);
+  const ref = React10.useRef(null);
   const type = state.issue.type ?? "spelling";
-  const [pos, setPos] = React9.useState({ left: state.x, top: state.y });
-  React9.useEffect(() => {
+  const [pos, setPos] = React10.useState({ left: state.x, top: state.y });
+  React10.useEffect(() => {
     if (!ref.current) return;
     const { offsetHeight: h, offsetWidth: w } = ref.current;
     const top = state.y + h > window.innerHeight - 8 ? state.y - h - 32 : state.y;
     setPos({ left: Math.min(state.x, window.innerWidth - w - 8), top });
   }, [state.x, state.y]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const h = (e) => {
       if (ref.current && !ref.current.contains(e.target)) onClose();
     };
     document.addEventListener("mousedown", h, true);
     return () => document.removeEventListener("mousedown", h, true);
   }, [onClose]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const h = () => onClose();
     window.addEventListener("scroll", h, { capture: true, passive: true });
     return () => window.removeEventListener("scroll", h, true);
   }, [onClose]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -4706,17 +4770,17 @@ function SpellCheckPlugin({
   enabled = true
 }) {
   const [editor] = useLexicalComposerContext();
-  const timerRef = React9.useRef(null);
-  const dismissRef = React9.useRef(null);
-  const reqIdRef = React9.useRef(0);
-  const lastTextRef = React9.useRef("");
-  const applyingRef = React9.useRef(false);
-  const grammarCorrectionRef = React9.useRef(void 0);
-  const [popover, setPopover] = React9.useState(null);
-  React9.useEffect(() => {
+  const timerRef = React10.useRef(null);
+  const dismissRef = React10.useRef(null);
+  const reqIdRef = React10.useRef(0);
+  const lastTextRef = React10.useRef("");
+  const applyingRef = React10.useRef(false);
+  const grammarCorrectionRef = React10.useRef(void 0);
+  const [popover, setPopover] = React10.useState(null);
+  React10.useEffect(() => {
     injectCSS();
   }, []);
-  const clearErrors = React9.useCallback(() => {
+  const clearErrors = React10.useCallback(() => {
     setPopover(null);
     grammarCorrectionRef.current = void 0;
     applyingRef.current = true;
@@ -4732,7 +4796,7 @@ function SpellCheckPlugin({
       }
     );
   }, [editor]);
-  const applyIssues = React9.useCallback(
+  const applyIssues = React10.useCallback(
     (issues, improvedText, trimOffset = 0) => {
       let savedCharOffset = -1;
       editor.getEditorState().read(() => {
@@ -4875,7 +4939,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     let currentRoot = null;
     const onClick = (e) => {
       const span = e.target.closest("[data-spell-offset]");
@@ -4919,7 +4983,7 @@ function SpellCheckPlugin({
       if (currentRoot) currentRoot.removeEventListener("click", onClick);
     };
   }, [editor]);
-  const handleAccept = React9.useCallback(
+  const handleAccept = React10.useCallback(
     (replacement, nodeKey) => {
       let original = "";
       editor.getEditorState().read(() => {
@@ -4945,7 +5009,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept, popover]
   );
-  const handleDismiss = React9.useCallback(
+  const handleDismiss = React10.useCallback(
     (nodeKey) => {
       editor.update(
         () => {
@@ -4959,7 +5023,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  const handleImprove = React9.useCallback(
+  const handleImprove = React10.useCallback(
     (text) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -4979,7 +5043,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  const handleAcceptGrammar = React9.useCallback(
+  const handleAcceptGrammar = React10.useCallback(
     (corrected) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -4999,7 +5063,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!enabled || !useSpellCheck) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (applyingRef.current) return;
@@ -5037,13 +5101,13 @@ function SpellCheckPlugin({
       }, idleMs);
     });
   }, [editor, useSpellCheck, enabled, idleMs, applyIssues, clearErrors]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!enabled) {
       clearErrors();
       lastTextRef.current = "";
     }
   }, [enabled, clearErrors]);
-  React9.useEffect(
+  React10.useEffect(
     () => () => {
       dismissRef.current?.();
       if (timerRef.current) clearTimeout(timerRef.current);
@@ -5064,13 +5128,13 @@ function SpellCheckPlugin({
 }
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = useLexicalComposerContext();
-  const [isInTable, setIsInTable] = React9.useState(false);
-  const [anchorRect, setAnchorRect] = React9.useState(null);
-  const [contentRight, setContentRight] = React9.useState(null);
-  const [open, setOpen] = React9.useState(false);
-  const openRef = React9.useRef(false);
-  const savedAnchorRef = React9.useRef(null);
-  const measureContentRight = React9.useCallback((cellDom) => {
+  const [isInTable, setIsInTable] = React10.useState(false);
+  const [anchorRect, setAnchorRect] = React10.useState(null);
+  const [contentRight, setContentRight] = React10.useState(null);
+  const [open, setOpen] = React10.useState(false);
+  const openRef = React10.useRef(false);
+  const savedAnchorRef = React10.useRef(null);
+  const measureContentRight = React10.useCallback((cellDom) => {
     try {
       const range = document.createRange();
       range.selectNodeContents(cellDom);
@@ -5080,7 +5144,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       return null;
     }
   }, []);
-  const updateFromSelection = React9.useCallback(() => {
+  const updateFromSelection = React10.useCallback(() => {
     if (openRef.current) return;
     const root = editor.getRootElement();
     if (!root) return;
@@ -5131,7 +5195,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       }
     });
   }, [editor, measureContentRight]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
@@ -5146,7 +5210,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       })
     );
   }, [editor, updateFromSelection]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
       (event) => {
@@ -5188,7 +5252,7 @@ function TableActionMenuPlugin({ disabled = false }) {
     );
   }, [editor, disabled]);
   const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React9.useMemo(() => {
+  const handleStyle = React10.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
     const clampedCellRight = Math.min(anchorRect.right, window.innerWidth - 8);
@@ -5203,7 +5267,7 @@ function TableActionMenuPlugin({ disabled = false }) {
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
-  const run = React9.useCallback(
+  const run = React10.useCallback(
     (fn) => {
       if (disabled) return;
       openRef.current = false;
@@ -5764,22 +5828,22 @@ var hsvToRgb = (h, s, v) => {
   };
 };
 var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange }) => {
-  const [open, setOpen] = React9.useState(false);
-  const btnRef = React9.useRef(null);
-  const setOpenAndNotify = React9.useCallback(
+  const [open, setOpen] = React10.useState(false);
+  const btnRef = React10.useRef(null);
+  const setOpenAndNotify = React10.useCallback(
     (next) => {
       setOpen(next);
       onOpenChange?.(next);
     },
     [onOpenChange]
   );
-  const handleDismiss = React9.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
-  const preventDismissOnEvent = React9.useCallback(
+  const handleDismiss = React10.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
+  const preventDismissOnEvent = React10.useCallback(
     (ev) => ev.type !== "click",
     []
   );
-  const [, forceReposition] = React9.useState(0);
-  React9.useEffect(() => {
+  const [, forceReposition] = React10.useState(0);
+  React10.useEffect(() => {
     if (!open) return;
     let rafId = null;
     const reposition = () => {
@@ -5797,15 +5861,15 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       window.removeEventListener("resize", reposition);
     };
   }, [open]);
-  const appliedHex = React9.useMemo(() => normalizeHex(value || "#000000"), [value]);
-  const [hex, setHexState] = React9.useState(appliedHex);
-  const [hexText, setHexText] = React9.useState(appliedHex);
-  const { r, g, b } = React9.useMemo(() => hexToRgb(hex), [hex]);
-  const hsv = React9.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
-  const [h, setH] = React9.useState(hsv.h);
-  const [s, setS] = React9.useState(hsv.s);
-  const [v, setV] = React9.useState(hsv.v);
-  const commit = React9.useCallback(
+  const appliedHex = React10.useMemo(() => normalizeHex(value || "#000000"), [value]);
+  const [hex, setHexState] = React10.useState(appliedHex);
+  const [hexText, setHexText] = React10.useState(appliedHex);
+  const { r, g, b } = React10.useMemo(() => hexToRgb(hex), [hex]);
+  const hsv = React10.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
+  const [h, setH] = React10.useState(hsv.h);
+  const [s, setS] = React10.useState(hsv.s);
+  const [v, setV] = React10.useState(hsv.v);
+  const commit = React10.useCallback(
     (nextHex) => {
       const rgb = hexToRgb(nextHex);
       const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -5818,7 +5882,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const commitFromHsv = React9.useCallback(
+  const commitFromHsv = React10.useCallback(
     (hh, ss, vv) => {
       const rgb = hsvToRgb(hh, ss, vv);
       const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
@@ -5831,8 +5895,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const wasOpenRef = React9.useRef(open);
-  React9.useEffect(() => {
+  const wasOpenRef = React10.useRef(open);
+  React10.useEffect(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
     if (!justOpened) return;
@@ -5844,8 +5908,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     setS(next.s);
     setV(next.v);
   }, [appliedHex, open]);
-  const svRef = React9.useRef(null);
-  const svPointFromEvent = React9.useCallback((clientX, clientY) => {
+  const svRef = React10.useRef(null);
+  const svPointFromEvent = React10.useCallback((clientX, clientY) => {
     if (!svRef.current) return null;
     const rect = svRef.current.getBoundingClientRect();
     const x = clamp3(clientX - rect.left, 0, rect.width);
@@ -5854,9 +5918,9 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     const vv = rect.height === 0 ? 0 : 1 - y / rect.height;
     return { ss, vv };
   }, []);
-  const hRef = React9.useRef(h);
+  const hRef = React10.useRef(h);
   hRef.current = h;
-  const handleSVPointerDown = React9.useCallback(
+  const handleSVPointerDown = React10.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5864,7 +5928,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const handleSVPointerMove = React9.useCallback(
+  const handleSVPointerMove = React10.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5872,18 +5936,18 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const hueRef = React9.useRef(null);
-  const sRef = React9.useRef(s);
+  const hueRef = React10.useRef(null);
+  const sRef = React10.useRef(s);
   sRef.current = s;
-  const vRef = React9.useRef(v);
+  const vRef = React10.useRef(v);
   vRef.current = v;
-  const huePointFromEvent = React9.useCallback((clientX) => {
+  const huePointFromEvent = React10.useCallback((clientX) => {
     if (!hueRef.current) return null;
     const rect = hueRef.current.getBoundingClientRect();
     const x = clamp3(clientX - rect.left, 0, rect.width);
     return rect.width === 0 ? 0 : x / rect.width * 360;
   }, []);
-  const handleHuePointerDown = React9.useCallback(
+  const handleHuePointerDown = React10.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const hh = huePointFromEvent(e.clientX);
@@ -5891,7 +5955,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHuePointerMove = React9.useCallback(
+  const handleHuePointerMove = React10.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const hh = huePointFromEvent(e.clientX);
@@ -5899,7 +5963,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHexChange = React9.useCallback(
+  const handleHexChange = React10.useCallback(
     (_, val) => {
       const next = val ?? "";
       setHexText(next);
@@ -5907,12 +5971,12 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [commit]
   );
-  const handleHexBlur = React9.useCallback(() => {
+  const handleHexBlur = React10.useCallback(() => {
     commit(normalizeHex(hexText));
   }, [hexText, commit]);
-  const svThumb = React9.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
-  const hueThumb = React9.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
-  const hueColor = React9.useMemo(() => {
+  const svThumb = React10.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
+  const hueThumb = React10.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
+  const hueColor = React10.useMemo(() => {
     const { r: r2, g: g2, b: b2 } = hsvToRgb(h, 1, 1);
     return rgbToHex(r2, g2, b2);
   }, [h]);
@@ -6158,8 +6222,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
 };
 var ColorPickerPlugin = ({ disabled }) => {
   const [editor] = useLexicalComposerContext();
-  const [{ color, bgColor }, setColors] = React9__default.useState({ color: "#000000", bgColor: "#ffffff" });
-  const lastRangeSelectionRef = React9__default.useRef(null);
+  const [{ color, bgColor }, setColors] = React10__default.useState({ color: "#000000", bgColor: "#ffffff" });
+  const lastRangeSelectionRef = React10__default.useRef(null);
   const updateToolbar = () => {
     const selection = $getSelection();
     if ($isRangeSelection(selection)) {
@@ -6169,7 +6233,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       setColors({ color: c, bgColor: bg });
     }
   };
-  React9__default.useEffect(() => {
+  React10__default.useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => updateToolbar());
@@ -6184,7 +6248,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       )
     );
   }, [editor]);
-  const wasEditorActiveRef = React9__default.useRef(false);
+  const wasEditorActiveRef = React10__default.useRef(false);
   const handleOpenChange = (open) => {
     if (open) {
       const root = editor.getRootElement();
@@ -6402,9 +6466,9 @@ var useStyles3 = makeStyles({
 var FontSizePlugin = ({ disabled }) => {
   const [editor] = useLexicalComposerContext();
   const styles = useStyles3();
-  const [fontSize2, setFontSize] = React9.useState(String(DEFAULT_FONT_SIZE));
+  const [fontSize2, setFontSize] = React10.useState(String(DEFAULT_FONT_SIZE));
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const readFontSize = () => {
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
@@ -6591,79 +6655,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 +6744,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,8 +6873,9 @@ 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 decoratorSelectingRef = React10__default.useRef(false);
   const presetGroups = props.customToolbar ?? getToolbarGroupsByLevel(props.level);
   const pluginGroups = useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
@@ -6833,8 +6892,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"));
@@ -6886,7 +6947,7 @@ var ToolBarPlugins = (props) => {
       }
     });
   };
-  React9__default.useEffect(() => {
+  React10__default.useEffect(() => {
     return mergeRegister(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -7090,7 +7151,7 @@ var ToolBarPlugins = (props) => {
         return /* @__PURE__ */ jsx(
           InsertLinkPlugin,
           {
-            disabled: !isEditable || props.readOnly,
+            disabled: !isEditable || props.readOnly || !hasTextSelection,
             setIsLinkEditMode: props.setIsLinkEditMode
           },
           key
@@ -7760,7 +7821,7 @@ var ToolBarPlugins = (props) => {
         padding: "0px",
         minHeight: 36
       },
-      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(React9__default.Fragment, { children: group.map((token, tokenIndex) => {
+      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(React10__default.Fragment, { children: group.map((token, tokenIndex) => {
         try {
           return renderToken(token, groupIndex, tokenIndex);
         } catch {
@@ -8087,12 +8148,12 @@ function EditorReadyPlugin({ onReady }) {
 var ContentEditorComponent = forwardRef(
   (props, ref) => {
     const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React9__default.useMemo(
+    const resolvedSpellCheck = React10__default.useMemo(
       () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [props.spellCheckFn, props.useSpellCheck]
     );
-    const resolvedQuery = React9__default.useMemo(
+    const resolvedQuery = React10__default.useMemo(
       () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [props.suggestFn, props.useQuery]
@@ -8120,7 +8181,7 @@ var ContentEditorComponent = forwardRef(
     const onAnchorRef = (elem) => {
       if (elem) setFloatingAnchorElem(elem);
     };
-    const initialConfig = React9__default.useMemo(() => {
+    const initialConfig = React10__default.useMemo(() => {
       const config = {
         namespace: props.namespace ?? "",
         theme,
@@ -8156,8 +8217,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"
@@ -8205,7 +8271,7 @@ var ContentEditorComponent = forwardRef(
         previousOverLimitRef.current = isOverLimit;
       }
     }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    const validationErrors = React9__default.useMemo(() => {
+    const validationErrors = React10__default.useMemo(() => {
       const errors = [];
       const custom = props.validationMessages ?? {};
       const { words, chars, images, links, tables } = metrics;
@@ -8274,7 +8340,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: {