@tarviks/lexical-rich-editor 1.3.1 → 1.3.2

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var utils = require('@lexical/utils');
-var React9 = require('react');
+var React10 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var useLexicalEditable = require('@lexical/react/useLexicalEditable');
@@ -49,7 +49,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
+var React10__namespace = /*#__PURE__*/_interopNamespace(React10);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -83,12 +83,12 @@ var init_ImageResizer = __esm({
       setShowCaption,
       captionsEnabled
     }) => {
-      const controlWrapperRef = React9.useRef(null);
-      const userSelect = React9.useRef({
+      const controlWrapperRef = React10.useRef(null);
+      const userSelect = React10.useRef({
         priority: "",
         value: "default"
       });
-      const positioningRef = React9.useRef({
+      const positioningRef = React10.useRef({
         currentHeight: 0,
         currentWidth: 0,
         direction: 0,
@@ -419,15 +419,15 @@ var init_ImageComponent = __esm({
     };
     ImageComponent = ({ src, altText, nodeKey, width, height, maxWidth, resizable, showCaption, caption, captionsEnabled }) => {
       const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-      const [selection, setSelection] = React9.useState(null);
-      const [isLoadError, setIsLoadError] = React9.useState(false);
-      const [isResizing, setIsResizing] = React9.useState(false);
+      const [selection, setSelection] = React10.useState(null);
+      const [isLoadError, setIsLoadError] = React10.useState(false);
+      const [isResizing, setIsResizing] = React10.useState(false);
       const [editor] = LexicalComposerContext.useLexicalComposerContext();
-      const activeEditorRef = React9.useRef(null);
-      const buttonRef = React9.useRef(null);
-      const imageRef = React9.useRef(null);
+      const activeEditorRef = React10.useRef(null);
+      const buttonRef = React10.useRef(null);
+      const imageRef = React10.useRef(null);
       const isEditable = useLexicalEditable.useLexicalEditable();
-      const $onDelete = React9.useCallback(
+      const $onDelete = React10.useCallback(
         (payload) => {
           const deleteSelection = lexical.$getSelection();
           if (isSelected && lexical.$isNodeSelection(deleteSelection)) {
@@ -443,7 +443,7 @@ var init_ImageComponent = __esm({
         },
         [isSelected]
       );
-      const $onEnter = React9.useCallback(
+      const $onEnter = React10.useCallback(
         (event) => {
           const latestSelection = lexical.$getSelection();
           const buttonElem = buttonRef.current;
@@ -463,7 +463,7 @@ var init_ImageComponent = __esm({
         },
         [caption, isSelected, showCaption]
       );
-      const $onEscape = React9.useCallback(
+      const $onEscape = React10.useCallback(
         (event) => {
           if (activeEditorRef.current === caption || buttonRef.current === event.target) {
             lexical.$setSelection(null);
@@ -480,7 +480,7 @@ var init_ImageComponent = __esm({
         },
         [caption, editor, setSelected]
       );
-      const onClick = React9.useCallback(
+      const onClick = React10.useCallback(
         (payload) => {
           const event = payload;
           if (isResizing) {
@@ -499,7 +499,7 @@ var init_ImageComponent = __esm({
         },
         [isResizing, isSelected, setSelected, clearSelection]
       );
-      const onRightClick = React9.useCallback(
+      const onRightClick = React10.useCallback(
         (event) => {
           editor.getEditorState().read(() => {
             const latestSelection = lexical.$getSelection();
@@ -514,7 +514,7 @@ var init_ImageComponent = __esm({
         },
         [editor]
       );
-      React9.useEffect(() => {
+      React10.useEffect(() => {
         const rootElement = editor.getRootElement();
         const unregister = utils.mergeRegister(
           editor.registerUpdateListener(({ editorState }) => {
@@ -602,7 +602,7 @@ var init_ImageComponent = __esm({
       };
       const draggable = !isResizing;
       const isFocused = (isSelected || isResizing) && isEditable;
-      return /* @__PURE__ */ jsxRuntime.jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(React10.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
           draggable,
@@ -663,7 +663,7 @@ function parseDimFromStyleOrAttr(img3) {
 var ImageComponent2, isGoogleDocCheckboxImg, $convertImageElement, ImageNode, $createImageNode, $isImageNode;
 var init_ImageNode = __esm({
   "src/Nodes/ImageNode.tsx"() {
-    ImageComponent2 = React9__namespace.lazy(() => Promise.resolve().then(() => (init_ImageComponent(), ImageComponent_exports)));
+    ImageComponent2 = React10__namespace.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";
     };
@@ -908,14 +908,14 @@ var init_InlineImageComponent = __esm({
     };
     InlineImageComponent = ({ src, altText, nodeKey, width, height, showCaption, caption, position }) => {
       const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-      const [isResizing, setIsResizing] = React9.useState(false);
-      const [selection, setSelection] = React9.useState(null);
-      const activeEditorRef = React9.useRef(null);
-      const imageRef = React9.useRef(null);
-      const buttonRef = React9.useRef(null);
+      const [isResizing, setIsResizing] = React10.useState(false);
+      const [selection, setSelection] = React10.useState(null);
+      const activeEditorRef = React10.useRef(null);
+      const imageRef = React10.useRef(null);
+      const buttonRef = React10.useRef(null);
       const [editor] = LexicalComposerContext.useLexicalComposerContext();
       const isEditable = useLexicalEditable.useLexicalEditable();
-      const $onDelete = React9.useCallback(
+      const $onDelete = React10.useCallback(
         (payload) => {
           const deleteSelection = lexical.$getSelection();
           if (isSelected && lexical.$isNodeSelection(deleteSelection)) {
@@ -933,7 +933,7 @@ var init_InlineImageComponent = __esm({
         },
         [isSelected]
       );
-      const $onEnter = React9.useCallback(
+      const $onEnter = React10.useCallback(
         (event) => {
           const latestSelection = lexical.$getSelection();
           const buttonElem = buttonRef.current;
@@ -953,7 +953,7 @@ var init_InlineImageComponent = __esm({
         },
         [caption, isSelected, showCaption]
       );
-      const $onEscape = React9.useCallback(
+      const $onEscape = React10.useCallback(
         (event) => {
           if (activeEditorRef.current === caption || buttonRef.current === event.target) {
             lexical.$setSelection(null);
@@ -970,7 +970,7 @@ var init_InlineImageComponent = __esm({
         },
         [caption, editor, setSelected]
       );
-      const onClick = React9.useCallback(
+      const onClick = React10.useCallback(
         (payload) => {
           const event = payload;
           if (isResizing) {
@@ -989,7 +989,7 @@ var init_InlineImageComponent = __esm({
         },
         [isResizing, isSelected, setSelected, clearSelection]
       );
-      React9.useEffect(() => {
+      React10.useEffect(() => {
         let isMounted = true;
         const unregister = utils.mergeRegister(
           editor.registerUpdateListener(({ editorState }) => {
@@ -1047,7 +1047,7 @@ var init_InlineImageComponent = __esm({
       };
       const draggable = !isResizing;
       const isFocused = (isSelected || isResizing) && isEditable;
-      return /* @__PURE__ */ jsxRuntime.jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { draggable, style: { position: "relative", display: "inline-block" }, children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(React10.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { draggable, style: { position: "relative", display: "inline-block" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           LazyImage2,
           {
@@ -1082,7 +1082,7 @@ var init_InlineImageComponent = __esm({
 var InlineImageComponent2, $convertInlineImageElement, InlineImageNode, $createInlineImageNode, $isInlineImageNode;
 var init_InlineImageNode = __esm({
   "src/Nodes/InlineImageNode.tsx"() {
-    InlineImageComponent2 = React9__namespace.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
+    InlineImageComponent2 = React10__namespace.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
     $convertInlineImageElement = (domNode) => {
       if (lexical.isHTMLElement(domNode) && domNode.nodeName === "IMG") {
         const { alt: altText, src, width, height } = domNode;
@@ -1537,7 +1537,7 @@ init_InlineImageNode();
 var PageBreakComponent = ({ nodeKey }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-  const $onDelete = React9.useCallback(
+  const $onDelete = React10.useCallback(
     (event) => {
       event.preventDefault();
       const deleteSelection = lexical.$getSelection();
@@ -1552,7 +1552,7 @@ var PageBreakComponent = ({ nodeKey }) => {
     },
     [isSelected]
   );
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CLICK_COMMAND,
@@ -1581,7 +1581,7 @@ var PageBreakComponent = ({ nodeKey }) => {
       )
     );
   }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const pbElem = editor.getElementByKey(nodeKey);
     if (pbElem !== null) {
       pbElem.className = isSelected ? "selected" : "";
@@ -1723,7 +1723,7 @@ function VideoResizer({
   onResizeStart,
   onResizeEnd
 }) {
-  const resizeState = React9__namespace.useRef(null);
+  const resizeState = React10__namespace.useRef(null);
   const startResize = (e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1850,15 +1850,15 @@ function YouTubeComponent({
   height,
   editor
 }) {
-  const wrapperRef = React9__namespace.useRef(null);
-  const containerRef = React9__namespace.useRef(null);
-  const iframeRef = React9__namespace.useRef(null);
-  const isResizingRef = React9__namespace.useRef(false);
+  const wrapperRef = React10__namespace.useRef(null);
+  const containerRef = React10__namespace.useRef(null);
+  const iframeRef = React10__namespace.useRef(null);
+  const isResizingRef = React10__namespace.useRef(false);
   const [isNodeSelected, setNodeSelected, clearNodeSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-  const [isHovered, setIsHovered] = React9__namespace.useState(false);
-  const [isResizing, setIsResizing] = React9__namespace.useState(false);
-  const [isPlaying, setIsPlaying] = React9__namespace.useState(false);
-  React9__namespace.useEffect(() => {
+  const [isHovered, setIsHovered] = React10__namespace.useState(false);
+  const [isResizing, setIsResizing] = React10__namespace.useState(false);
+  const [isPlaying, setIsPlaying] = React10__namespace.useState(false);
+  React10__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.FORMAT_ELEMENT_COMMAND,
@@ -2247,13 +2247,13 @@ function AutocompletePlugin({
   prefixWindow = 300
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const ghostKeyRef = React9__namespace.useRef(null);
-  const idleTimerRef = React9__namespace.useRef(null);
-  const inflightRef = React9__namespace.useRef(null);
-  const reqCounterRef = React9__namespace.useRef(0);
-  const lastTriggerRef = React9__namespace.useRef("");
-  const lastShownCtxRef = React9__namespace.useRef("");
-  const clearGhost = React9__namespace.useCallback(() => {
+  const ghostKeyRef = React10__namespace.useRef(null);
+  const idleTimerRef = React10__namespace.useRef(null);
+  const inflightRef = React10__namespace.useRef(null);
+  const reqCounterRef = React10__namespace.useRef(0);
+  const lastTriggerRef = React10__namespace.useRef("");
+  const lastShownCtxRef = React10__namespace.useRef("");
+  const clearGhost = React10__namespace.useCallback(() => {
     editor.update(
       () => {
         const key = ghostKeyRef.current;
@@ -2265,7 +2265,7 @@ function AutocompletePlugin({
       { tag: "autocomplete-ghost" }
     );
   }, [editor]);
-  const upsertGhost = React9__namespace.useCallback(
+  const upsertGhost = React10__namespace.useCallback(
     (text, insertAtCharOffset) => {
       editor.update(
         () => {
@@ -2329,12 +2329,12 @@ function AutocompletePlugin({
     },
     [editor]
   );
-  const cancelInflight = React9__namespace.useCallback(() => {
+  const cancelInflight = React10__namespace.useCallback(() => {
     if (!inflightRef.current) return;
     inflightRef.current.dismiss();
     inflightRef.current = null;
   }, []);
-  const resetIdleTimer = React9__namespace.useCallback(
+  const resetIdleTimer = React10__namespace.useCallback(
     (callback) => {
       if (idleTimerRef.current) {
         clearTimeout(idleTimerRef.current);
@@ -2349,7 +2349,7 @@ function AutocompletePlugin({
     },
     [idleMs, cancelInflight, clearGhost]
   );
-  const fireQuery = React9__namespace.useCallback(() => {
+  const fireQuery = React10__namespace.useCallback(() => {
     if (!useQuery || isReadOnly) return;
     let context = "";
     let prefix = "";
@@ -2421,7 +2421,7 @@ function AutocompletePlugin({
     upsertGhost,
     onSuggestionShown
   ]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (tags.has("history-merge") || tags.has("collaboration")) return;
@@ -2430,7 +2430,7 @@ function AutocompletePlugin({
       resetIdleTimer(fireQuery);
     });
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerCommand(
       lexical.SELECTION_CHANGE_COMMAND,
@@ -2454,7 +2454,7 @@ function AutocompletePlugin({
       lexical.COMMAND_PRIORITY_LOW
     );
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DOWN_COMMAND,
       (e) => {
@@ -2495,7 +2495,7 @@ function AutocompletePlugin({
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor, clearGhost, onSuggestionAccept, prefixWindow]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     return () => {
       cancelInflight();
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -2507,8 +2507,8 @@ function clamp2(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
 function useFloatingPortalContainer(editor) {
-  const [container, setContainer] = React9.useState(null);
-  React9.useEffect(() => {
+  const [container, setContainer] = React10.useState(null);
+  React10.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;
@@ -2546,22 +2546,22 @@ function FloatingCharacterStylesEditor({
   isEditable,
   readOnly
 }) {
-  const popupRef = React9.useRef(null);
-  const mouseDownRef = React9.useRef(false);
+  const popupRef = React10.useRef(null);
+  const mouseDownRef = React10.useRef(false);
   const theme2 = react.useTheme();
   const disabled = !(isEditable ?? editor.isEditable()) || !!readOnly;
-  const format = React9.useCallback(
+  const format = React10.useCallback(
     (type) => {
       if (disabled) return;
       editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, type);
     },
     [editor, disabled]
   );
-  const toggleLink = React9.useCallback(() => {
+  const toggleLink = React10.useCallback(() => {
     if (disabled) return;
     editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, isLink ? null : "https://");
   }, [editor, disabled, isLink]);
-  const updatePosition = React9.useCallback(() => {
+  const updatePosition = React10.useCallback(() => {
     const popupEl = popupRef.current;
     if (!popupEl) return;
     const sel = window.getSelection();
@@ -2589,7 +2589,7 @@ function FloatingCharacterStylesEditor({
     }
     popupEl.classList.add("is-open");
   }, [editor]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const onResize = () => editor.getEditorState().read(updatePosition);
     const onScroll = () => editor.getEditorState().read(updatePosition);
     const root = editor.getRootElement();
@@ -2602,7 +2602,7 @@ function FloatingCharacterStylesEditor({
       root?.removeEventListener("scroll", onScroll);
     };
   }, [editor, updatePosition]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     editor.getEditorState().read(updatePosition);
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
@@ -2773,18 +2773,18 @@ function getSelectedNode(selection$1) {
   return isBackward ? selection.$isAtNodeEnd(selection$1.focus) ? anchorNode : focusNode : selection.$isAtNodeEnd(selection$1.anchor) ? focusNode : anchorNode;
 }
 function useCharacterStylesPopup(editor, opts) {
-  const [isText, setIsText] = React9.useState(false);
-  const [isLink, setIsLink] = React9.useState(false);
-  const [isBold, setIsBold] = React9.useState(false);
-  const [isItalic, setIsItalic] = React9.useState(false);
-  const [isUnderline, setIsUnderline] = React9.useState(false);
-  const [isStrikethrough, setIsStrikethrough] = React9.useState(false);
-  const [isSubscript, setIsSubscript] = React9.useState(false);
-  const [isSuperscript, setIsSuperscript] = React9.useState(false);
-  const [isCode, setIsCode] = React9.useState(false);
+  const [isText, setIsText] = React10.useState(false);
+  const [isLink, setIsLink] = React10.useState(false);
+  const [isBold, setIsBold] = React10.useState(false);
+  const [isItalic, setIsItalic] = React10.useState(false);
+  const [isUnderline, setIsUnderline] = React10.useState(false);
+  const [isStrikethrough, setIsStrikethrough] = React10.useState(false);
+  const [isSubscript, setIsSubscript] = React10.useState(false);
+  const [isSuperscript, setIsSuperscript] = React10.useState(false);
+  const [isCode, setIsCode] = React10.useState(false);
   const isEditable = opts?.isEditable ?? editor.isEditable();
   const portalContainer = useFloatingPortalContainer(editor);
-  const updatePopupState = React9.useCallback(() => {
+  const updatePopupState = React10.useCallback(() => {
     editor.getEditorState().read(() => {
       const selection = lexical.$getSelection();
       const nativeSelection = window.getSelection();
@@ -2816,7 +2816,7 @@ function useCharacterStylesPopup(editor, opts) {
       }
     });
   }, [editor]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     document.addEventListener("selectionchange", updatePopupState);
     document.addEventListener("focusin", updatePopupState);
     return () => {
@@ -2824,7 +2824,7 @@ function useCharacterStylesPopup(editor, opts) {
       document.removeEventListener("focusin", updatePopupState);
     };
   }, [updatePopupState]);
-  React9.useEffect(() => editor.registerUpdateListener(updatePopupState), [editor, updatePopupState]);
+  React10.useEffect(() => editor.registerUpdateListener(updatePopupState), [editor, updatePopupState]);
   if (!portalContainer || !isText || isLink) return null;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3107,8 +3107,8 @@ function splitHeadingsAtBrSequences(html) {
 }
 var CustomOnChangePlugin = ({ value, onChange }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const initializedRef = React9.useRef(false);
-  React9.useEffect(() => {
+  const initializedRef = React10.useRef(false);
+  React10.useEffect(() => {
     if (!value || initializedRef.current) return;
     initializedRef.current = true;
     editor.update(() => {
@@ -3151,28 +3151,44 @@ var getSelectedNode2 = (selection$1) => {
 };
 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] = React10.useState(null);
+  React10.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:",
@@ -3195,13 +3211,13 @@ var sanitizeUrl = (url) => {
 var preventDefault = (event) => {
   event.preventDefault();
 };
-var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
-  const [editedLinkUrl, setEditedLinkUrl] = React9.useState("https://");
-  const [lastSelection, setLastSelection] = React9.useState(null);
-  const [linkUrl, setLinkUrl] = React9.useState("");
-  const editorRef = React9.useRef(null);
-  const inputRef = React9.useRef(null);
-  const $updateLinkEditor = React9.useCallback(() => {
+var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLinkEditMode }) => {
+  const [editedLinkUrl, setEditedLinkUrl] = React10.useState("https://");
+  const [lastSelection, setLastSelection] = React10.useState(null);
+  const [linkUrl, setLinkUrl] = React10.useState("");
+  const editorRef = React10.useRef(null);
+  const inputRef = React10.useRef(null);
+  const $updateLinkEditor = React10.useCallback(() => {
     const selection = lexical.$getSelection();
     if (lexical.$isRangeSelection(selection)) {
       const node = getSelectedNode2(selection);
@@ -3227,39 +3243,38 @@ 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]);
-  React9.useEffect(() => {
-    const scrollerElem = anchorElem.parentElement;
+  }, [editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
+  React10.useEffect(() => {
     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]);
-  React9.useEffect(() => {
+  }, [editor, $updateLinkEditor]);
+  React10.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -3287,12 +3302,12 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       )
     );
   }, [editor, $updateLinkEditor, setIsLink, isLink]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     editor.getEditorState().read(() => {
       $updateLinkEditor();
     });
   }, [editor, $updateLinkEditor]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (isLinkEditMode && inputRef.current) {
       inputRef.current.focus();
     }
@@ -3422,9 +3437,10 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
   ] }) });
 };
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
-  const [activeEditor, setActiveEditor] = React9.useState(editor);
-  const [isLink, setIsLink] = React9.useState(false);
-  React9.useEffect(() => {
+  const [activeEditor, setActiveEditor] = React10.useState(editor);
+  const [isLink, setIsLink] = React10.useState(false);
+  const portalContainer = useFloatingPortalContainer2(editor);
+  React10.useEffect(() => {
     function $updateToolbar() {
       const selection = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection)) {
@@ -3471,7 +3487,7 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
       )
     );
   }, [editor]);
-  if (!anchorElem || !(anchorElem instanceof HTMLElement)) {
+  if (!anchorElem || !(anchorElem instanceof HTMLElement) || !portalContainer) {
     return null;
   }
   return reactDom.createPortal(
@@ -3481,12 +3497,11 @@ var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLin
         isLink,
         editor: activeEditor,
         setIsLink,
-        anchorElem,
         isLinkEditMode,
         setIsLinkEditMode
       }
     ),
-    anchorElem
+    portalContainer
   );
 };
 var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
@@ -3499,6 +3514,61 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
     setIsLinkEditMode
   );
 };
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React10__namespace.useLayoutEffect : React10__namespace.useEffect;
+var AoModal = ({
+  isOpen,
+  onDismiss,
+  title,
+  maxWidth = 280,
+  // Default to a smaller, compact size
+  actions,
+  children
+}) => {
+  const [hostElement, setHostElement] = React10__namespace.useState(null);
+  const mountRef = React10__namespace.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__ */ jsxRuntime.jsx("div", { className: "aoModalBackdrop", onClick: onDismiss, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    reactComponents.FluentProvider,
+    {
+      theme: reactComponents.webLightTheme,
+      className: "aoModalWrapper aoModalContainer",
+      style: { maxWidth, width: "90vw" },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoModalHeader", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "aoModalTitle", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              className: "aoModalCloseButton",
+              "aria-label": "Close popup",
+              onClick: onDismiss,
+              children: "\u2715"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoModalBody", children }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoModalActions", children: actions })
+      ]
+    }
+  ) });
+  if (hostElement) {
+    return reactDom.createPortal(modalContent, hostElement);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mountRef, style: { display: "none" } });
+};
+
+// src/Plugins/ImagePlugin.tsx
 init_ImageNode();
 var INSERT_IMAGE_COMMAND = lexical.createCommand("INSERT_IMAGE_COMMAND");
 var readClipboardImageAsDataURL = async (event) => {
@@ -3522,8 +3592,8 @@ var InsertImageByURL = ({
   onClick,
   disabled
 }) => {
-  const [altText, setAltText] = React9.useState("");
-  const [src, setSrc] = React9.useState("");
+  const [altText, setAltText] = React10.useState("");
+  const [src, setSrc] = React10.useState("");
   const isDisabled = disabled || src === "";
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 6, padding: "10px 0px 0px 0px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Enter URL", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3579,16 +3649,16 @@ var InsertImageDialog = ({
   maxImageSizeMB,
   validationMessages
 }) => {
-  const [src, setSrc] = React9.useState("");
-  const [altText, setAltText] = React9.useState("");
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const [selectedValue, setSelectedValue] = React9.useState("Upload");
-  const [fileName, setFileName] = React9.useState("");
-  const [fileSizeError, setFileSizeError] = React9.useState(null);
-  const hasModifier = React9.useRef(false);
+  const [src, setSrc] = React10.useState("");
+  const [altText, setAltText] = React10.useState("");
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const [selectedValue, setSelectedValue] = React10.useState("Upload");
+  const [fileName, setFileName] = React10.useState("");
+  const [fileSizeError, setFileSizeError] = React10.useState(null);
+  const hasModifier = React10.useRef(false);
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const isDisabled = disabled || src === "" || !!fileSizeError;
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
       hasModifier.current = e.altKey;
@@ -3632,112 +3702,109 @@ var InsertImageDialog = ({
     };
     reader.readAsDataURL(file);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactComponents.Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Button,
+      {
+        size: "small",
+        title: "Add Image",
+        disabled,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Button,
-          {
-            size: "small",
-            title: "Add Image",
-            disabled,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 340 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Insert image" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              "label",
-              {
-                style: {
-                  cursor: disabled ? "not-allowed" : "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  gap: 8,
-                  opacity: disabled ? 0.75 : 1
-                },
-                children: [
+      "upload-image"
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Insert image",
+        maxWidth: 340,
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              style: {
+                cursor: disabled ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                opacity: disabled ? 0.75 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "file",
+                    accept: "image/*",
+                    style: { display: "none" },
+                    disabled,
+                    onChange: loadImage
+                  },
+                  "inline-image-upload"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
+                    reactIcons.AttachFilled,
                     {
-                      type: "file",
-                      accept: "image/*",
-                      style: { display: "none" },
-                      disabled,
-                      onChange: loadImage
-                    },
-                    "inline-image-upload"
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      reactIcons.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__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                  ] }),
-                  fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-                ]
-              }
-            ) }),
-            fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Input,
-              {
-                placeholder: "Alt text",
-                appearance: "underline",
-                disabled,
-                onChange: (_, d) => setAltText(d.value),
-                value: altText
-              }
-            ) }),
-            selectedValue === "URL" && /* @__PURE__ */ jsxRuntime.jsx(
-              InsertImageByURL,
-              {
-                disabled,
-                setIsOpen: (open) => setIsOpen(open),
-                onClick: (payload) => onClick(payload)
-              }
-            )
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: isDisabled, onClick: () => onClick({ altText, src }), children: "Add" }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+                    }
+                  ),
+                  !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+                ] }),
+                fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+              ]
+            }
+          ) }),
+          fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Input,
+            {
+              placeholder: "Alt text",
+              appearance: "underline",
+              disabled,
+              onChange: (_, d) => setAltText(d.value),
+              value: altText
+            }
+          ) }),
+          selectedValue === "URL" && /* @__PURE__ */ jsxRuntime.jsx(
+            InsertImageByURL,
+            {
+              disabled,
+              setIsOpen: (open) => setIsOpen(open),
+              onClick: (payload) => onClick(payload)
+            }
+          )
+        ] })
+      }
+    )
+  ] });
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!editor.hasNodes([ImageNode])) {
       throw new Error("ImagesPlugin: ImageNode not registered on editor");
     }
@@ -3929,13 +3996,13 @@ var InsertInlineImageDialog = ({
   maxImageSizeMB,
   validationMessages
 }) => {
-  const hasModifier = React9.useRef(false);
-  const [src, setSrc] = React9.useState("");
-  const [isOpen, setIsOpen] = React9.useState(false);
-  const [altText, setAltText] = React9.useState("");
-  const [fileName, setFileName] = React9.useState("");
-  const [position, setPosition] = React9.useState("left");
-  const [fileSizeError, setFileSizeError] = React9.useState(null);
+  const hasModifier = React10.useRef(false);
+  const [src, setSrc] = React10.useState("");
+  const [isOpen, setIsOpen] = React10.useState(false);
+  const [altText, setAltText] = React10.useState("");
+  const [fileName, setFileName] = React10.useState("");
+  const [position, setPosition] = React10.useState("left");
+  const [fileSizeError, setFileSizeError] = React10.useState(null);
   const styles = useStyles();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const isDisabled = disabled || src === "" || !!fileSizeError;
@@ -3966,7 +4033,7 @@ var InsertInlineImageDialog = ({
     };
     reader.readAsDataURL(file);
   };
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const handler = (e) => {
       hasModifier.current = e.altKey;
     };
@@ -3983,139 +4050,136 @@ var InsertInlineImageDialog = ({
     setFileName("");
     setFileSizeError(null);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactComponents.Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Button,
+      {
+        size: "small",
+        title: "Add Inline Image",
+        disabled,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Button,
-          {
-            size: "small",
-            title: "Add Inline Image",
-            disabled,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Insert inline image",
+        maxWidth: 360,
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              size: "small",
+              disabled: isDisabled,
+              onClick: handleOnClick,
+              children: "Add"
             },
-            onClick: () => {
-              if (disabled) return;
-              setIsOpen((prev) => !prev);
-              setAltText("");
-              setSrc("");
-              setFileName("");
-            }
-          },
-          "upload-inline-image"
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 360 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Insert inline image" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              size: "small",
+              disabled,
+              onClick: () => setIsOpen(false),
+              children: "Cancel"
+            },
+            "file-inline-upload-cancel"
+          )
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Upload", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "label",
+            {
+              style: {
+                cursor: disabled ? "not-allowed" : "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                opacity: disabled ? 0.75 : 1
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    type: "file",
+                    accept: "image/*",
+                    style: { display: "none" },
+                    disabled,
+                    onChange: loadImage
+                  },
+                  "inline-image-upload"
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    "input",
+                    reactIcons.AttachFilled,
                     {
-                      type: "file",
-                      accept: "image/*",
-                      style: { display: "none" },
-                      disabled,
-                      onChange: loadImage
-                    },
-                    "inline-image-upload"
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { horizontal: true, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      reactIcons.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__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
-                  ] }),
-                  fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
-              reactComponents.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__ */ jsxRuntime.jsx(reactComponents.Option, { value: "left", children: "Left" }, "left"),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "right", children: "Right" }, "right"),
-                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "full", children: "Full" }, "full")
-                ]
-              }
-            ) }),
-            fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Input,
-              {
-                placeholder: "Alt text",
-                appearance: "underline",
-                disabled,
-                value: altText,
-                onChange: (_, d) => setAltText(d.value)
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Button,
-              {
-                size: "small",
-                disabled: isDisabled,
-                onClick: handleOnClick,
-                children: "Add"
-              },
-              "file-inline-upload-btn"
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Button,
-              {
-                size: "small",
-                disabled,
-                onClick: () => setIsOpen(false),
-                children: "Cancel"
-              },
-              "file-inline-upload-cancel"
-            )
-          ] })
-        ] }) })
-      ]
-    }
-  );
+                    }
+                  ),
+                  !fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: "Upload File" })
+                ] }),
+                fileName && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#808080" }, children: fileName })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Position", size: "small", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            reactComponents.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__ */ jsxRuntime.jsx(reactComponents.Option, { value: "left", children: "Left" }, "left"),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "right", children: "Right" }, "right"),
+                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Option, { value: "full", children: "Full" }, "full")
+              ]
+            }
+          ) }),
+          fileSizeError && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { intent: "error", style: { marginTop: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: fileSizeError }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Alt Text", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Input,
+            {
+              placeholder: "Alt text",
+              appearance: "underline",
+              disabled,
+              value: altText,
+              onChange: (_, d) => setAltText(d.value)
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
 };
 var InlineImagePlugin = () => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!editor.hasNodes([InlineImageNode])) {
       throw new Error("ImagesPlugin: ImageNode not registered on editor");
     }
@@ -4258,7 +4322,7 @@ var getDragSelection2 = (event) => {
 var INSERT_PAGE_BREAK = lexical.createCommand();
 function PageBreakPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     if (!editor.hasNodes([PageBreakNode])) {
       throw new Error(
         "PageBreakPlugin: PageBreakNode is not registered on editor"
@@ -4374,8 +4438,8 @@ function RefApiPlugin({
   focusedRef
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const cleanBaselineRef = React9__namespace.default.useRef(null);
-  React9__namespace.default.useEffect(() => {
+  const cleanBaselineRef = React10__namespace.default.useRef(null);
+  React10__namespace.default.useEffect(() => {
     const capture = () => {
       if (cleanBaselineRef.current === null) {
         cleanBaselineRef.current = getUserContentSignature(editor);
@@ -4396,7 +4460,7 @@ function RefApiPlugin({
       unregister();
     };
   }, [editor]);
-  React9.useImperativeHandle(
+  React10.useImperativeHandle(
     forwardedRef,
     () => ({
       setValue: (html$1) => {
@@ -4589,28 +4653,28 @@ function SpellPopover({
   onImprove,
   onAcceptGrammar
 }) {
-  const ref = React9__namespace.useRef(null);
+  const ref = React10__namespace.useRef(null);
   const type = state.issue.type ?? "spelling";
-  const [pos, setPos] = React9__namespace.useState({ left: state.x, top: state.y });
-  React9__namespace.useEffect(() => {
+  const [pos, setPos] = React10__namespace.useState({ left: state.x, top: state.y });
+  React10__namespace.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__namespace.useEffect(() => {
+  React10__namespace.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__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     const h = () => onClose();
     window.addEventListener("scroll", h, { capture: true, passive: true });
     return () => window.removeEventListener("scroll", h, true);
   }, [onClose]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -4727,17 +4791,17 @@ function SpellCheckPlugin({
   enabled = true
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const timerRef = React9__namespace.useRef(null);
-  const dismissRef = React9__namespace.useRef(null);
-  const reqIdRef = React9__namespace.useRef(0);
-  const lastTextRef = React9__namespace.useRef("");
-  const applyingRef = React9__namespace.useRef(false);
-  const grammarCorrectionRef = React9__namespace.useRef(void 0);
-  const [popover, setPopover] = React9__namespace.useState(null);
-  React9__namespace.useEffect(() => {
+  const timerRef = React10__namespace.useRef(null);
+  const dismissRef = React10__namespace.useRef(null);
+  const reqIdRef = React10__namespace.useRef(0);
+  const lastTextRef = React10__namespace.useRef("");
+  const applyingRef = React10__namespace.useRef(false);
+  const grammarCorrectionRef = React10__namespace.useRef(void 0);
+  const [popover, setPopover] = React10__namespace.useState(null);
+  React10__namespace.useEffect(() => {
     injectCSS();
   }, []);
-  const clearErrors = React9__namespace.useCallback(() => {
+  const clearErrors = React10__namespace.useCallback(() => {
     setPopover(null);
     grammarCorrectionRef.current = void 0;
     applyingRef.current = true;
@@ -4753,7 +4817,7 @@ function SpellCheckPlugin({
       }
     );
   }, [editor]);
-  const applyIssues = React9__namespace.useCallback(
+  const applyIssues = React10__namespace.useCallback(
     (issues, improvedText, trimOffset = 0) => {
       let savedCharOffset = -1;
       editor.getEditorState().read(() => {
@@ -4896,7 +4960,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     let currentRoot = null;
     const onClick = (e) => {
       const span = e.target.closest("[data-spell-offset]");
@@ -4940,7 +5004,7 @@ function SpellCheckPlugin({
       if (currentRoot) currentRoot.removeEventListener("click", onClick);
     };
   }, [editor]);
-  const handleAccept = React9__namespace.useCallback(
+  const handleAccept = React10__namespace.useCallback(
     (replacement, nodeKey) => {
       let original = "";
       editor.getEditorState().read(() => {
@@ -4966,7 +5030,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept, popover]
   );
-  const handleDismiss = React9__namespace.useCallback(
+  const handleDismiss = React10__namespace.useCallback(
     (nodeKey) => {
       editor.update(
         () => {
@@ -4980,7 +5044,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  const handleImprove = React9__namespace.useCallback(
+  const handleImprove = React10__namespace.useCallback(
     (text) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -5000,7 +5064,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  const handleAcceptGrammar = React9__namespace.useCallback(
+  const handleAcceptGrammar = React10__namespace.useCallback(
     (corrected) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -5020,7 +5084,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     if (!enabled || !useSpellCheck) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (applyingRef.current) return;
@@ -5058,13 +5122,13 @@ function SpellCheckPlugin({
       }, idleMs);
     });
   }, [editor, useSpellCheck, enabled, idleMs, applyIssues, clearErrors]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     if (!enabled) {
       clearErrors();
       lastTextRef.current = "";
     }
   }, [enabled, clearErrors]);
-  React9__namespace.useEffect(
+  React10__namespace.useEffect(
     () => () => {
       dismissRef.current?.();
       if (timerRef.current) clearTimeout(timerRef.current);
@@ -5085,13 +5149,13 @@ function SpellCheckPlugin({
 }
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isInTable, setIsInTable] = React9__namespace.useState(false);
-  const [anchorRect, setAnchorRect] = React9__namespace.useState(null);
-  const [contentRight, setContentRight] = React9__namespace.useState(null);
-  const [open, setOpen] = React9__namespace.useState(false);
-  const openRef = React9__namespace.useRef(false);
-  const savedAnchorRef = React9__namespace.useRef(null);
-  const measureContentRight = React9__namespace.useCallback((cellDom) => {
+  const [isInTable, setIsInTable] = React10__namespace.useState(false);
+  const [anchorRect, setAnchorRect] = React10__namespace.useState(null);
+  const [contentRight, setContentRight] = React10__namespace.useState(null);
+  const [open, setOpen] = React10__namespace.useState(false);
+  const openRef = React10__namespace.useRef(false);
+  const savedAnchorRef = React10__namespace.useRef(null);
+  const measureContentRight = React10__namespace.useCallback((cellDom) => {
     try {
       const range = document.createRange();
       range.selectNodeContents(cellDom);
@@ -5101,7 +5165,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       return null;
     }
   }, []);
-  const updateFromSelection = React9__namespace.useCallback(() => {
+  const updateFromSelection = React10__namespace.useCallback(() => {
     if (openRef.current) return;
     const root = editor.getRootElement();
     if (!root) return;
@@ -5152,7 +5216,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       }
     });
   }, [editor, measureContentRight]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.SELECTION_CHANGE_COMMAND,
@@ -5167,7 +5231,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       })
     );
   }, [editor, updateFromSelection]);
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DOWN_COMMAND,
       (event) => {
@@ -5209,7 +5273,7 @@ function TableActionMenuPlugin({ disabled = false }) {
     );
   }, [editor, disabled]);
   const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React9__namespace.useMemo(() => {
+  const handleStyle = React10__namespace.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
     const clampedCellRight = Math.min(anchorRect.right, window.innerWidth - 8);
@@ -5224,7 +5288,7 @@ function TableActionMenuPlugin({ disabled = false }) {
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
-  const run = React9__namespace.useCallback(
+  const run = React10__namespace.useCallback(
     (fn) => {
       if (disabled) return;
       openRef.current = false;
@@ -5327,17 +5391,17 @@ function TableCellResizer({
   editor,
   anchorElem
 }) {
-  const targetRef = React9.useRef(null);
-  const resizerRef = React9.useRef(null);
-  const tableRectRef = React9.useRef(null);
-  const mouseStartPosRef = React9.useRef(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = React9.useState(null);
-  const [activeCell, updateActiveCell] = React9.useState(null);
-  const [isSelectingGrid, updateIsSelectingGrid] = React9.useState(false);
-  const [draggingDirection, updateDraggingDirection] = React9.useState(
+  const targetRef = React10.useRef(null);
+  const resizerRef = React10.useRef(null);
+  const tableRectRef = React10.useRef(null);
+  const mouseStartPosRef = React10.useRef(null);
+  const [mouseCurrentPos, updateMouseCurrentPos] = React10.useState(null);
+  const [activeCell, updateActiveCell] = React10.useState(null);
+  const [isSelectingGrid, updateIsSelectingGrid] = React10.useState(false);
+  const [draggingDirection, updateDraggingDirection] = React10.useState(
     null
   );
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     return editor.registerCommand(
       lexical.SELECTION_CHANGE_COMMAND,
       () => {
@@ -5360,7 +5424,7 @@ function TableCellResizer({
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor]);
-  const resetState = React9.useCallback(() => {
+  const resetState = React10.useCallback(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -5368,7 +5432,7 @@ function TableCellResizer({
     tableRectRef.current = null;
     updateMouseCurrentPos(null);
   }, []);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const onMouseMove = (event) => {
       if (draggingDirection) {
         updateMouseCurrentPos({ x: event.clientX, y: event.clientY });
@@ -5412,7 +5476,7 @@ function TableCellResizer({
     };
   }, [activeCell, draggingDirection, editor, resetState, anchorElem]);
   const isHeightChanging = (direction) => direction === "bottom";
-  const updateRowHeight = React9.useCallback(
+  const updateRowHeight = React10.useCallback(
     (newHeight) => {
       if (!activeCell) return;
       editor.update(() => {
@@ -5429,7 +5493,7 @@ function TableCellResizer({
     },
     [activeCell, editor]
   );
-  const updateColumnWidth = React9.useCallback(
+  const updateColumnWidth = React10.useCallback(
     (newWidth) => {
       if (!activeCell) return;
       editor.update(() => {
@@ -5451,7 +5515,7 @@ function TableCellResizer({
     },
     [activeCell, editor]
   );
-  const toggleResize = React9.useCallback(
+  const toggleResize = React10.useCallback(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -5482,7 +5546,7 @@ function TableCellResizer({
     },
     [activeCell, draggingDirection, resetState, updateColumnWidth, updateRowHeight]
   );
-  const getResizers = React9.useCallback(() => {
+  const getResizers = React10.useCallback(() => {
     const empty = { bottom: {}, right: {} };
     if (!activeCell) return empty;
     const cellRect = activeCell.elem.getBoundingClientRect();
@@ -5557,7 +5621,7 @@ function TableCellResizerPlugin({
   anchorElem
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  return React9.useMemo(
+  return React10.useMemo(
     () => reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(TableCellResizer, { editor, anchorElem }), anchorElem),
     [editor, anchorElem]
   );
@@ -5785,22 +5849,22 @@ var hsvToRgb = (h, s, v) => {
   };
 };
 var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange }) => {
-  const [open, setOpen] = React9__namespace.useState(false);
-  const btnRef = React9__namespace.useRef(null);
-  const setOpenAndNotify = React9__namespace.useCallback(
+  const [open, setOpen] = React10__namespace.useState(false);
+  const btnRef = React10__namespace.useRef(null);
+  const setOpenAndNotify = React10__namespace.useCallback(
     (next) => {
       setOpen(next);
       onOpenChange?.(next);
     },
     [onOpenChange]
   );
-  const handleDismiss = React9__namespace.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
-  const preventDismissOnEvent = React9__namespace.useCallback(
+  const handleDismiss = React10__namespace.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
+  const preventDismissOnEvent = React10__namespace.useCallback(
     (ev) => ev.type !== "click",
     []
   );
-  const [, forceReposition] = React9__namespace.useState(0);
-  React9__namespace.useEffect(() => {
+  const [, forceReposition] = React10__namespace.useState(0);
+  React10__namespace.useEffect(() => {
     if (!open) return;
     let rafId = null;
     const reposition = () => {
@@ -5818,15 +5882,15 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       window.removeEventListener("resize", reposition);
     };
   }, [open]);
-  const appliedHex = React9__namespace.useMemo(() => normalizeHex(value || "#000000"), [value]);
-  const [hex, setHexState] = React9__namespace.useState(appliedHex);
-  const [hexText, setHexText] = React9__namespace.useState(appliedHex);
-  const { r, g, b } = React9__namespace.useMemo(() => hexToRgb(hex), [hex]);
-  const hsv = React9__namespace.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
-  const [h, setH] = React9__namespace.useState(hsv.h);
-  const [s, setS] = React9__namespace.useState(hsv.s);
-  const [v, setV] = React9__namespace.useState(hsv.v);
-  const commit = React9__namespace.useCallback(
+  const appliedHex = React10__namespace.useMemo(() => normalizeHex(value || "#000000"), [value]);
+  const [hex, setHexState] = React10__namespace.useState(appliedHex);
+  const [hexText, setHexText] = React10__namespace.useState(appliedHex);
+  const { r, g, b } = React10__namespace.useMemo(() => hexToRgb(hex), [hex]);
+  const hsv = React10__namespace.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
+  const [h, setH] = React10__namespace.useState(hsv.h);
+  const [s, setS] = React10__namespace.useState(hsv.s);
+  const [v, setV] = React10__namespace.useState(hsv.v);
+  const commit = React10__namespace.useCallback(
     (nextHex) => {
       const rgb = hexToRgb(nextHex);
       const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -5839,7 +5903,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const commitFromHsv = React9__namespace.useCallback(
+  const commitFromHsv = React10__namespace.useCallback(
     (hh, ss, vv) => {
       const rgb = hsvToRgb(hh, ss, vv);
       const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
@@ -5852,8 +5916,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const wasOpenRef = React9__namespace.useRef(open);
-  React9__namespace.useEffect(() => {
+  const wasOpenRef = React10__namespace.useRef(open);
+  React10__namespace.useEffect(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
     if (!justOpened) return;
@@ -5865,8 +5929,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     setS(next.s);
     setV(next.v);
   }, [appliedHex, open]);
-  const svRef = React9__namespace.useRef(null);
-  const svPointFromEvent = React9__namespace.useCallback((clientX, clientY) => {
+  const svRef = React10__namespace.useRef(null);
+  const svPointFromEvent = React10__namespace.useCallback((clientX, clientY) => {
     if (!svRef.current) return null;
     const rect = svRef.current.getBoundingClientRect();
     const x = clamp3(clientX - rect.left, 0, rect.width);
@@ -5875,9 +5939,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__namespace.useRef(h);
+  const hRef = React10__namespace.useRef(h);
   hRef.current = h;
-  const handleSVPointerDown = React9__namespace.useCallback(
+  const handleSVPointerDown = React10__namespace.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5885,7 +5949,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const handleSVPointerMove = React9__namespace.useCallback(
+  const handleSVPointerMove = React10__namespace.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5893,18 +5957,18 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const hueRef = React9__namespace.useRef(null);
-  const sRef = React9__namespace.useRef(s);
+  const hueRef = React10__namespace.useRef(null);
+  const sRef = React10__namespace.useRef(s);
   sRef.current = s;
-  const vRef = React9__namespace.useRef(v);
+  const vRef = React10__namespace.useRef(v);
   vRef.current = v;
-  const huePointFromEvent = React9__namespace.useCallback((clientX) => {
+  const huePointFromEvent = React10__namespace.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__namespace.useCallback(
+  const handleHuePointerDown = React10__namespace.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const hh = huePointFromEvent(e.clientX);
@@ -5912,7 +5976,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHuePointerMove = React9__namespace.useCallback(
+  const handleHuePointerMove = React10__namespace.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const hh = huePointFromEvent(e.clientX);
@@ -5920,7 +5984,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHexChange = React9__namespace.useCallback(
+  const handleHexChange = React10__namespace.useCallback(
     (_, val) => {
       const next = val ?? "";
       setHexText(next);
@@ -5928,12 +5992,12 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [commit]
   );
-  const handleHexBlur = React9__namespace.useCallback(() => {
+  const handleHexBlur = React10__namespace.useCallback(() => {
     commit(normalizeHex(hexText));
   }, [hexText, commit]);
-  const svThumb = React9__namespace.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
-  const hueThumb = React9__namespace.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
-  const hueColor = React9__namespace.useMemo(() => {
+  const svThumb = React10__namespace.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
+  const hueThumb = React10__namespace.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
+  const hueColor = React10__namespace.useMemo(() => {
     const { r: r2, g: g2, b: b2 } = hsvToRgb(h, 1, 1);
     return rgbToHex(r2, g2, b2);
   }, [h]);
@@ -6179,8 +6243,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
 };
 var ColorPickerPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [{ color, bgColor }, setColors] = React9__namespace.default.useState({ color: "#000000", bgColor: "#ffffff" });
-  const lastRangeSelectionRef = React9__namespace.default.useRef(null);
+  const [{ color, bgColor }, setColors] = React10__namespace.default.useState({ color: "#000000", bgColor: "#ffffff" });
+  const lastRangeSelectionRef = React10__namespace.default.useRef(null);
   const updateToolbar = () => {
     const selection$1 = lexical.$getSelection();
     if (lexical.$isRangeSelection(selection$1)) {
@@ -6190,7 +6254,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       setColors({ color: c, bgColor: bg });
     }
   };
-  React9__namespace.default.useEffect(() => {
+  React10__namespace.default.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => updateToolbar());
@@ -6205,7 +6269,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       )
     );
   }, [editor]);
-  const wasEditorActiveRef = React9__namespace.default.useRef(false);
+  const wasEditorActiveRef = React10__namespace.default.useRef(false);
   const handleOpenChange = (open) => {
     if (open) {
       const root = editor.getRootElement();
@@ -6297,9 +6361,9 @@ var FONT_FAMILY_OPTIONS = [
 var FontFamilyPlugin = ({ disabled = false }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const styles = useStyles2();
-  const [fontFamily, setFontFamily] = React9.useState("");
+  const [fontFamily, setFontFamily] = React10.useState("");
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const readFontFamily = () => {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
@@ -6321,7 +6385,7 @@ var FontFamilyPlugin = ({ disabled = false }) => {
       )
     );
   }, [editor]);
-  const handleClick = React9.useCallback(
+  const handleClick = React10.useCallback(
     (option) => {
       if (disabled) return;
       editor.update(() => {
@@ -6423,9 +6487,9 @@ var useStyles3 = reactComponents.makeStyles({
 var FontSizePlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const styles = useStyles3();
-  const [fontSize2, setFontSize] = React9__namespace.useState(String(DEFAULT_FONT_SIZE));
+  const [fontSize2, setFontSize] = React10__namespace.useState(String(DEFAULT_FONT_SIZE));
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React9__namespace.useEffect(() => {
+  React10__namespace.useEffect(() => {
     const readFontSize = () => {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
@@ -6595,9 +6659,9 @@ function PageSetupPlugin({ disabled, value, onChange }) {
 }
 var TableItemPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [columns, setColumns] = React9.useState("");
-  const [rows, setRows] = React9.useState("");
-  const [isOpen, setIsOpen] = React9.useState(false);
+  const [columns, setColumns] = React10.useState("");
+  const [rows, setRows] = React10.useState("");
+  const [isOpen, setIsOpen] = React10.useState(false);
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const onAddTable = () => {
     if (disabled) return;
@@ -6612,83 +6676,80 @@ var TableItemPlugin = ({ disabled }) => {
     setColumns("");
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactComponents.Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Button,
+      {
+        size: "small",
+        title: "Add table",
+        disabled,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Button,
-          {
-            size: "small",
-            title: "Add table",
-            disabled,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Insert table",
+        maxWidth: 300,
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Button,
+            {
+              size: "small",
+              appearance: "primary",
+              disabled: disabled || !rows || !columns,
+              onClick: onAddTable,
+              children: "Add"
             }
-          },
-          "insert-table-nodes"
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 300 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Insert table" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Input,
-              {
-                autoFocus: !disabled,
-                value: rows,
-                placeholder: "Rows",
-                appearance: "underline",
-                disabled,
-                onChange: (_, v) => setRows(v.value)
-              }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Input,
-              {
-                value: columns,
-                placeholder: "Columns",
-                appearance: "underline",
-                disabled,
-                onChange: (_, v) => setColumns(v.value)
-              }
-            ) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Button,
-              {
-                size: "small",
-                appearance: "primary",
-                disabled: disabled || !rows || !columns,
-                onClick: onAddTable,
-                children: "Add"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
-          ] })
-        ] }) })
-      ]
-    }
-  );
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 8 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Rows", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Input,
+            {
+              autoFocus: !disabled,
+              value: rows,
+              placeholder: "Rows",
+              appearance: "underline",
+              disabled,
+              onChange: (_, v) => setRows(v.value)
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "Columns", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.Input,
+            {
+              value: columns,
+              placeholder: "Columns",
+              appearance: "underline",
+              disabled,
+              onChange: (_, v) => setColumns(v.value)
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
 };
 var YoutubeUploadPlugin = ({ disabled }) => {
-  const [url, setURL] = React9.useState("");
-  const [isOpen, setIsOpen] = React9.useState(false);
+  const [url, setURL] = React10.useState("");
+  const [isOpen, setIsOpen] = React10.useState(false);
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#424242";
   const onHandleEmbeded = () => {
@@ -6704,57 +6765,54 @@ var YoutubeUploadPlugin = ({ disabled }) => {
     setURL("");
     setIsOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactComponents.Dialog,
-    {
-      open: disabled ? false : isOpen,
-      onOpenChange: (_, data) => {
-        if (!disabled) setIsOpen(data.open);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Button,
+      {
+        title: "Add youtube URL",
+        size: "small",
+        disabled,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { disableButtonEnhancement: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Button,
+      "upload-video"
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AoModal,
+      {
+        isOpen: disabled ? false : isOpen,
+        onDismiss: () => !disabled && setIsOpen(false),
+        title: "Embed YouTube video",
+        maxWidth: 320,
+        actions: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled, onClick: () => setIsOpen(false), children: "Cancel" })
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Input,
           {
-            title: "Add youtube URL",
-            size: "small",
+            autoFocus: !disabled,
             disabled,
-            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.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__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { style: { maxWidth: 320 }, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTitle, { children: "Embed YouTube video" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Stack, { tokens: { childrenGap: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Field, { label: "URL", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
-            reactComponents.Input,
-            {
-              autoFocus: !disabled,
-              disabled,
-              value: url,
-              appearance: "underline",
-              placeholder: "Add Youtube video URL",
-              onChange: (_, v) => setURL(v.value)
-            }
-          ) }) }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogActions, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { size: "small", disabled: disabled || !url, onClick: onHandleEmbeded, children: "Add" }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.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__ */ jsxRuntime.jsxs("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", style, children: [
   /* @__PURE__ */ jsxRuntime.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" }),
@@ -6823,23 +6881,24 @@ var ToolBarPlugins = (props) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const theme2 = react.useTheme();
   const styles = useStyles4();
-  const [selectNodeType, setSelectNodeType] = React9.useState("paragraph");
-  const [isEditable, setIsEditable] = React9.useState(() => editor.isEditable());
-  const [isBold, setIsBold] = React9.useState(false);
-  const [isItalic, setIsItalic] = React9.useState(false);
-  const [isUnderline, setIsUnderline] = React9.useState(false);
-  const [isStrikethrough, setIsStrikethrough] = React9.useState(false);
-  const [isSuperscript, setIsSuperscript] = React9.useState(false);
-  const [isSubscript, setIsSubscript] = React9.useState(false);
-  const [isHighlight, setIsHighlight] = React9.useState(false);
-  const [isUppercase, setIsUppercase] = React9.useState(false);
-  const [isLowercase, setIsLowercase] = React9.useState(false);
-  const [isCapitalize, setIsCapitalize] = React9.useState(false);
-  const [alignment, setAlignment] = React9.useState("left");
-  const [decoratorOpen, setDecoratorOpen] = React9.useState(false);
-  const decoratorSelectingRef = React9__namespace.default.useRef(false);
+  const [selectNodeType, setSelectNodeType] = React10.useState("paragraph");
+  const [isEditable, setIsEditable] = React10.useState(() => editor.isEditable());
+  const [isBold, setIsBold] = React10.useState(false);
+  const [isItalic, setIsItalic] = React10.useState(false);
+  const [isUnderline, setIsUnderline] = React10.useState(false);
+  const [isStrikethrough, setIsStrikethrough] = React10.useState(false);
+  const [isSuperscript, setIsSuperscript] = React10.useState(false);
+  const [isSubscript, setIsSubscript] = React10.useState(false);
+  const [isHighlight, setIsHighlight] = React10.useState(false);
+  const [isUppercase, setIsUppercase] = React10.useState(false);
+  const [isLowercase, setIsLowercase] = React10.useState(false);
+  const [isCapitalize, setIsCapitalize] = React10.useState(false);
+  const [alignment, setAlignment] = React10.useState("left");
+  const [hasTextSelection, setHasTextSelection] = React10.useState(false);
+  const [decoratorOpen, setDecoratorOpen] = React10.useState(false);
+  const decoratorSelectingRef = React10__namespace.default.useRef(false);
   const presetGroups = props.customToolbar ?? getToolbarGroupsByLevel(props.level);
-  const pluginGroups = React9.useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
+  const pluginGroups = React10.useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
@@ -6854,8 +6913,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"));
@@ -6907,7 +6968,7 @@ var ToolBarPlugins = (props) => {
       }
     });
   };
-  React9__namespace.default.useEffect(() => {
+  React10__namespace.default.useEffect(() => {
     return utils.mergeRegister(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -7111,7 +7172,7 @@ var ToolBarPlugins = (props) => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           InsertLinkPlugin,
           {
-            disabled: !isEditable || props.readOnly,
+            disabled: !isEditable || props.readOnly || !hasTextSelection,
             setIsLinkEditMode: props.setIsLinkEditMode
           },
           key
@@ -7781,7 +7842,7 @@ var ToolBarPlugins = (props) => {
         padding: "0px",
         minHeight: 36
       },
-      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsx(React9__namespace.default.Fragment, { children: group.map((token, tokenIndex) => {
+      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsx(React10__namespace.default.Fragment, { children: group.map((token, tokenIndex) => {
         try {
           return renderToken(token, groupIndex, tokenIndex);
         } catch {
@@ -7800,7 +7861,7 @@ function isYoutubeLikeNode(node) {
 }
 function YoutubeDeletePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const removeIfYoutubeAtCursor = (direction) => {
       const selection = lexical.$getSelection();
       if (!lexical.$isRangeSelection(selection)) return false;
@@ -7832,7 +7893,7 @@ function YoutubeDeletePlugin() {
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DELETE_COMMAND,
       () => {
@@ -7921,14 +7982,14 @@ var theme = {
 };
 function ReadOnlyPlugin({ readonly }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     editor.setEditable(!readonly);
   }, [editor, readonly]);
   return null;
 }
 function BrowserSpellCheckPlugin({ enabled }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const el = editor.getRootElement();
     if (!el) return;
     el.spellcheck = enabled;
@@ -7943,8 +8004,8 @@ function ContentMetricsPlugin({
   onMetricsChange
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const prevRef = React9.useRef({ words: 0, chars: 0, images: 0, links: 0, tables: 0 });
-  React9.useEffect(() => {
+  const prevRef = React10.useRef({ words: 0, chars: 0, images: 0, links: 0, tables: 0 });
+  React10.useEffect(() => {
     return editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
       if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
       const root = editor.getRootElement();
@@ -7973,7 +8034,7 @@ function FocusEventsPlugin({
   containerRef
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const root = editor.getRootElement();
     if (!root) return;
     const handleFocusIn = () => {
@@ -8097,51 +8158,51 @@ function _makeQueryFn(fn) {
 }
 function EditorReadyPlugin({ onReady }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const calledRef = React9.useRef(false);
-  React9.useEffect(() => {
+  const calledRef = React10.useRef(false);
+  React10.useEffect(() => {
     if (!onReady || calledRef.current) return;
     calledRef.current = true;
     onReady(editor);
   }, [editor, onReady]);
   return null;
 }
-var ContentEditorComponent = React9.forwardRef(
+var ContentEditorComponent = React10.forwardRef(
   (props, ref) => {
     const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React9__namespace.default.useMemo(
+    const resolvedSpellCheck = React10__namespace.default.useMemo(
       () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [props.spellCheckFn, props.useSpellCheck]
     );
-    const resolvedQuery = React9__namespace.default.useMemo(
+    const resolvedQuery = React10__namespace.default.useMemo(
       () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [props.suggestFn, props.useQuery]
     );
-    const [floatingAnchorElem, setFloatingAnchorElem] = React9.useState(null);
-    const [isLinkEditMode, setIsLinkEditMode] = React9.useState(false);
-    const [metrics, setMetrics] = React9.useState({
+    const [floatingAnchorElem, setFloatingAnchorElem] = React10.useState(null);
+    const [isLinkEditMode, setIsLinkEditMode] = React10.useState(false);
+    const [metrics, setMetrics] = React10.useState({
       words: 0,
       chars: 0,
       images: 0,
       links: 0,
       tables: 0
     });
-    const handleMetrics = React9.useCallback((m) => setMetrics(m), []);
-    const [pageSetup, setPageSetup] = React9.useState(DEFAULT_PAGE_SETUP);
+    const handleMetrics = React10.useCallback((m) => setMetrics(m), []);
+    const [pageSetup, setPageSetup] = React10.useState(DEFAULT_PAGE_SETUP);
     const pageCanvas = resolvePageCanvasMetrics(pageSetup);
     const wordCount = metrics.words;
-    const contentEditableDomRef = React9.useRef(null);
-    const previousOverLimitRef = React9.useRef(false);
-    const focusedRef = React9.useRef(false);
+    const contentEditableDomRef = React10.useRef(null);
+    const previousOverLimitRef = React10.useRef(false);
+    const focusedRef = React10.useRef(false);
     const setFocused = (focused) => {
       focusedRef.current = focused;
     };
-    const containerRef = React9.useRef(null);
+    const containerRef = React10.useRef(null);
     const onAnchorRef = (elem) => {
       if (elem) setFloatingAnchorElem(elem);
     };
-    const initialConfig = React9__namespace.default.useMemo(() => {
+    const initialConfig = React10__namespace.default.useMemo(() => {
       const config = {
         namespace: props.namespace ?? "",
         theme,
@@ -8177,8 +8238,13 @@ var ContentEditorComponent = React9.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"
@@ -8214,7 +8280,7 @@ var ContentEditorComponent = React9.forwardRef(
       }
     };
     const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
-    React9.useEffect(() => {
+    React10.useEffect(() => {
       if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
       const wasOverLimit = previousOverLimitRef.current;
       if (isOverLimit !== wasOverLimit) {
@@ -8226,7 +8292,7 @@ var ContentEditorComponent = React9.forwardRef(
         previousOverLimitRef.current = isOverLimit;
       }
     }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    const validationErrors = React9__namespace.default.useMemo(() => {
+    const validationErrors = React10__namespace.default.useMemo(() => {
       const errors = [];
       const custom = props.validationMessages ?? {};
       const { words, chars, images, links, tables } = metrics;
@@ -8283,8 +8349,8 @@ var ContentEditorComponent = React9.forwardRef(
       props.noTables,
       props.validationMessages
     ]);
-    const previousErrorTypesRef = React9.useRef("");
-    React9.useEffect(() => {
+    const previousErrorTypesRef = React10.useRef("");
+    React10.useEffect(() => {
       if (!props.onValidationChange) return;
       const key = validationErrors.map((e) => e.type).join(",");
       if (key !== previousErrorTypesRef.current) {
@@ -8295,7 +8361,7 @@ var ContentEditorComponent = React9.forwardRef(
     const trimmedErrorMessage = props.errorMessage?.trim() || "";
     const hasValidationError = validationErrors.length > 0 || !!trimmedErrorMessage;
     return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.FluentProvider, { theme: reactComponents.webLightTheme, style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(LexicalComposer.LexicalComposer, { initialConfig, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "lexical-rich-editor-root", style: { height: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "lexical-rich-editor-root", style: { height: "100%", position: "relative" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
         react.Stack,
         {
           style: {