@tarviks/lexical-rich-editor 1.3.2 → 1.3.4

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var utils = require('@lexical/utils');
-var React10 = require('react');
+var React9 = 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 React10__namespace = /*#__PURE__*/_interopNamespace(React10);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -83,12 +83,12 @@ var init_ImageResizer = __esm({
       setShowCaption,
       captionsEnabled
     }) => {
-      const controlWrapperRef = React10.useRef(null);
-      const userSelect = React10.useRef({
+      const controlWrapperRef = React9.useRef(null);
+      const userSelect = React9.useRef({
         priority: "",
         value: "default"
       });
-      const positioningRef = React10.useRef({
+      const positioningRef = React9.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] = React10.useState(null);
-      const [isLoadError, setIsLoadError] = React10.useState(false);
-      const [isResizing, setIsResizing] = React10.useState(false);
+      const [selection, setSelection] = React9.useState(null);
+      const [isLoadError, setIsLoadError] = React9.useState(false);
+      const [isResizing, setIsResizing] = React9.useState(false);
       const [editor] = LexicalComposerContext.useLexicalComposerContext();
-      const activeEditorRef = React10.useRef(null);
-      const buttonRef = React10.useRef(null);
-      const imageRef = React10.useRef(null);
+      const activeEditorRef = React9.useRef(null);
+      const buttonRef = React9.useRef(null);
+      const imageRef = React9.useRef(null);
       const isEditable = useLexicalEditable.useLexicalEditable();
-      const $onDelete = React10.useCallback(
+      const $onDelete = React9.useCallback(
         (payload) => {
           const deleteSelection = lexical.$getSelection();
           if (isSelected && lexical.$isNodeSelection(deleteSelection)) {
@@ -443,7 +443,7 @@ var init_ImageComponent = __esm({
         },
         [isSelected]
       );
-      const $onEnter = React10.useCallback(
+      const $onEnter = React9.useCallback(
         (event) => {
           const latestSelection = lexical.$getSelection();
           const buttonElem = buttonRef.current;
@@ -463,7 +463,7 @@ var init_ImageComponent = __esm({
         },
         [caption, isSelected, showCaption]
       );
-      const $onEscape = React10.useCallback(
+      const $onEscape = React9.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 = React10.useCallback(
+      const onClick = React9.useCallback(
         (payload) => {
           const event = payload;
           if (isResizing) {
@@ -499,7 +499,7 @@ var init_ImageComponent = __esm({
         },
         [isResizing, isSelected, setSelected, clearSelection]
       );
-      const onRightClick = React10.useCallback(
+      const onRightClick = React9.useCallback(
         (event) => {
           editor.getEditorState().read(() => {
             const latestSelection = lexical.$getSelection();
@@ -514,7 +514,7 @@ var init_ImageComponent = __esm({
         },
         [editor]
       );
-      React10.useEffect(() => {
+      React9.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(React10.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      return /* @__PURE__ */ jsxRuntime.jsx(React9.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 = React10__namespace.lazy(() => Promise.resolve().then(() => (init_ImageComponent(), ImageComponent_exports)));
+    ImageComponent2 = React9__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] = 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 [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 [editor] = LexicalComposerContext.useLexicalComposerContext();
       const isEditable = useLexicalEditable.useLexicalEditable();
-      const $onDelete = React10.useCallback(
+      const $onDelete = React9.useCallback(
         (payload) => {
           const deleteSelection = lexical.$getSelection();
           if (isSelected && lexical.$isNodeSelection(deleteSelection)) {
@@ -933,7 +933,7 @@ var init_InlineImageComponent = __esm({
         },
         [isSelected]
       );
-      const $onEnter = React10.useCallback(
+      const $onEnter = React9.useCallback(
         (event) => {
           const latestSelection = lexical.$getSelection();
           const buttonElem = buttonRef.current;
@@ -953,7 +953,7 @@ var init_InlineImageComponent = __esm({
         },
         [caption, isSelected, showCaption]
       );
-      const $onEscape = React10.useCallback(
+      const $onEscape = React9.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 = React10.useCallback(
+      const onClick = React9.useCallback(
         (payload) => {
           const event = payload;
           if (isResizing) {
@@ -989,7 +989,7 @@ var init_InlineImageComponent = __esm({
         },
         [isResizing, isSelected, setSelected, clearSelection]
       );
-      React10.useEffect(() => {
+      React9.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(React10.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { draggable, style: { position: "relative", display: "inline-block" }, children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(React9.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 = React10__namespace.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
+    InlineImageComponent2 = React9__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 = React10.useCallback(
+  const $onDelete = React9.useCallback(
     (event) => {
       event.preventDefault();
       const deleteSelection = lexical.$getSelection();
@@ -1552,7 +1552,7 @@ var PageBreakComponent = ({ nodeKey }) => {
     },
     [isSelected]
   );
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CLICK_COMMAND,
@@ -1581,7 +1581,7 @@ var PageBreakComponent = ({ nodeKey }) => {
       )
     );
   }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const pbElem = editor.getElementByKey(nodeKey);
     if (pbElem !== null) {
       pbElem.className = isSelected ? "selected" : "";
@@ -1723,7 +1723,7 @@ function VideoResizer({
   onResizeStart,
   onResizeEnd
 }) {
-  const resizeState = React10__namespace.useRef(null);
+  const resizeState = React9__namespace.useRef(null);
   const startResize = (e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1850,15 +1850,15 @@ function YouTubeComponent({
   height,
   editor
 }) {
-  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 wrapperRef = React9__namespace.useRef(null);
+  const containerRef = React9__namespace.useRef(null);
+  const iframeRef = React9__namespace.useRef(null);
+  const isResizingRef = React9__namespace.useRef(false);
   const [isNodeSelected, setNodeSelected, clearNodeSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-  const [isHovered, setIsHovered] = React10__namespace.useState(false);
-  const [isResizing, setIsResizing] = React10__namespace.useState(false);
-  const [isPlaying, setIsPlaying] = React10__namespace.useState(false);
-  React10__namespace.useEffect(() => {
+  const [isHovered, setIsHovered] = React9__namespace.useState(false);
+  const [isResizing, setIsResizing] = React9__namespace.useState(false);
+  const [isPlaying, setIsPlaying] = React9__namespace.useState(false);
+  React9__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 = 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(() => {
+  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(() => {
     editor.update(
       () => {
         const key = ghostKeyRef.current;
@@ -2265,7 +2265,7 @@ function AutocompletePlugin({
       { tag: "autocomplete-ghost" }
     );
   }, [editor]);
-  const upsertGhost = React10__namespace.useCallback(
+  const upsertGhost = React9__namespace.useCallback(
     (text, insertAtCharOffset) => {
       editor.update(
         () => {
@@ -2329,12 +2329,12 @@ function AutocompletePlugin({
     },
     [editor]
   );
-  const cancelInflight = React10__namespace.useCallback(() => {
+  const cancelInflight = React9__namespace.useCallback(() => {
     if (!inflightRef.current) return;
     inflightRef.current.dismiss();
     inflightRef.current = null;
   }, []);
-  const resetIdleTimer = React10__namespace.useCallback(
+  const resetIdleTimer = React9__namespace.useCallback(
     (callback) => {
       if (idleTimerRef.current) {
         clearTimeout(idleTimerRef.current);
@@ -2349,7 +2349,7 @@ function AutocompletePlugin({
     },
     [idleMs, cancelInflight, clearGhost]
   );
-  const fireQuery = React10__namespace.useCallback(() => {
+  const fireQuery = React9__namespace.useCallback(() => {
     if (!useQuery || isReadOnly) return;
     let context = "";
     let prefix = "";
@@ -2421,7 +2421,7 @@ function AutocompletePlugin({
     upsertGhost,
     onSuggestionShown
   ]);
-  React10__namespace.useEffect(() => {
+  React9__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]);
-  React10__namespace.useEffect(() => {
+  React9__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]);
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DOWN_COMMAND,
       (e) => {
@@ -2495,7 +2495,7 @@ function AutocompletePlugin({
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor, clearGhost, onSuggestionAccept, prefixWindow]);
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return () => {
       cancelInflight();
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -2503,18 +2503,14 @@ function AutocompletePlugin({
   }, [cancelInflight]);
   return null;
 }
-function clamp2(n, min, max) {
-  return Math.max(min, Math.min(max, n));
-}
 function useFloatingPortalContainer(editor) {
-  const [container, setContainer] = React10.useState(null);
-  React10.useEffect(() => {
+  const [container, setContainer] = React9.useState(null);
+  React9.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);
+    document.body.appendChild(host);
     setContainer(host);
     return () => {
       host.remove();
@@ -2523,6 +2519,22 @@ function useFloatingPortalContainer(editor) {
   }, [editor]);
   return container;
 }
+function getFixedPositionOrigin(fromElement) {
+  let node = fromElement.parentElement;
+  while (node && node !== document.body && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    const createsContainingBlock = style.transform && style.transform !== "none" || style.perspective && style.perspective !== "none" || style.filter && style.filter !== "none" || style.backdropFilter && style.backdropFilter !== "none" || style.willChange && /transform|perspective|filter/.test(style.willChange) || style.contain && /paint|layout|strict|content/.test(style.contain);
+    if (createsContainingBlock) {
+      const rect = node.getBoundingClientRect();
+      return { top: rect.top, left: rect.left };
+    }
+    node = node.parentElement;
+  }
+  return { top: 0, left: 0 };
+}
+function clamp2(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
 function setPopupPositionFixed(popupEl, rect, topBoundary) {
   const GAP = 8;
   const MARGIN = 8;
@@ -2530,6 +2542,9 @@ function setPopupPositionFixed(popupEl, rect, topBoundary) {
   let left = rect.left;
   if (top < topBoundary) top = rect.bottom + GAP;
   left = clamp2(left, MARGIN, window.innerWidth - popupEl.offsetWidth - MARGIN);
+  const origin = getFixedPositionOrigin(popupEl);
+  top -= origin.top;
+  left -= origin.left;
   popupEl.style.top = `${top}px`;
   popupEl.style.left = `${left}px`;
 }
@@ -2546,22 +2561,22 @@ function FloatingCharacterStylesEditor({
   isEditable,
   readOnly
 }) {
-  const popupRef = React10.useRef(null);
-  const mouseDownRef = React10.useRef(false);
+  const popupRef = React9.useRef(null);
+  const mouseDownRef = React9.useRef(false);
   const theme2 = react.useTheme();
   const disabled = !(isEditable ?? editor.isEditable()) || !!readOnly;
-  const format = React10.useCallback(
+  const format = React9.useCallback(
     (type) => {
       if (disabled) return;
       editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, type);
     },
     [editor, disabled]
   );
-  const toggleLink = React10.useCallback(() => {
+  const toggleLink = React9.useCallback(() => {
     if (disabled) return;
     editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, isLink ? null : "https://");
   }, [editor, disabled, isLink]);
-  const updatePosition = React10.useCallback(() => {
+  const updatePosition = React9.useCallback(() => {
     const popupEl = popupRef.current;
     if (!popupEl) return;
     const sel = window.getSelection();
@@ -2589,7 +2604,7 @@ function FloatingCharacterStylesEditor({
     }
     popupEl.classList.add("is-open");
   }, [editor]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const onResize = () => editor.getEditorState().read(updatePosition);
     const onScroll = () => editor.getEditorState().read(updatePosition);
     const root = editor.getRootElement();
@@ -2602,7 +2617,7 @@ function FloatingCharacterStylesEditor({
       root?.removeEventListener("scroll", onScroll);
     };
   }, [editor, updatePosition]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     editor.getEditorState().read(updatePosition);
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
@@ -2773,18 +2788,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] = 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 [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 isEditable = opts?.isEditable ?? editor.isEditable();
   const portalContainer = useFloatingPortalContainer(editor);
-  const updatePopupState = React10.useCallback(() => {
+  const updatePopupState = React9.useCallback(() => {
     editor.getEditorState().read(() => {
       const selection = lexical.$getSelection();
       const nativeSelection = window.getSelection();
@@ -2816,7 +2831,7 @@ function useCharacterStylesPopup(editor, opts) {
       }
     });
   }, [editor]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     document.addEventListener("selectionchange", updatePopupState);
     document.addEventListener("focusin", updatePopupState);
     return () => {
@@ -2824,7 +2839,7 @@ function useCharacterStylesPopup(editor, opts) {
       document.removeEventListener("focusin", updatePopupState);
     };
   }, [updatePopupState]);
-  React10.useEffect(() => editor.registerUpdateListener(updatePopupState), [editor, updatePopupState]);
+  React9.useEffect(() => editor.registerUpdateListener(updatePopupState), [editor, updatePopupState]);
   if (!portalContainer || !isText || isLink) return null;
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -3107,8 +3122,8 @@ function splitHeadingsAtBrSequences(html) {
 }
 var CustomOnChangePlugin = ({ value, onChange }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const initializedRef = React10.useRef(false);
-  React10.useEffect(() => {
+  const initializedRef = React9.useRef(false);
+  React9.useEffect(() => {
     if (!value || initializedRef.current) return;
     initializedRef.current = true;
     editor.update(() => {
@@ -3152,23 +3167,6 @@ var getSelectedNode2 = (selection$1) => {
 var VERTICAL_GAP = 10;
 var HORIZONTAL_OFFSET = 5;
 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";
@@ -3185,6 +3183,9 @@ var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, topBoundar
     top = topBoundary;
   }
   left = Math.max(VIEWPORT_MARGIN, Math.min(left, window.innerWidth - floatingElemRect.width - VIEWPORT_MARGIN));
+  const origin = getFixedPositionOrigin(floatingElem);
+  top -= origin.top;
+  left -= origin.left;
   floatingElem.style.opacity = "1";
   floatingElem.style.transform = "none";
   floatingElem.style.top = `${top}px`;
@@ -3212,12 +3213,12 @@ var preventDefault = (event) => {
   event.preventDefault();
 };
 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 [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(() => {
     const selection = lexical.$getSelection();
     if (lexical.$isRangeSelection(selection)) {
       const node = getSelectedNode2(selection);
@@ -3258,7 +3259,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
     }
     return true;
   }, [editor, setIsLinkEditMode, isLinkEditMode, isLink, linkUrl]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const update = () => {
       editor.getEditorState().read(() => {
         $updateLinkEditor();
@@ -3274,7 +3275,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
       root?.removeEventListener("scroll", update);
     };
   }, [editor, $updateLinkEditor]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -3302,12 +3303,12 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
       )
     );
   }, [editor, $updateLinkEditor, setIsLink, isLink]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     editor.getEditorState().read(() => {
       $updateLinkEditor();
     });
   }, [editor, $updateLinkEditor]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (isLinkEditMode && inputRef.current) {
       inputRef.current.focus();
     }
@@ -3437,10 +3438,10 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
   ] }) });
 };
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
-  const [activeEditor, setActiveEditor] = React10.useState(editor);
-  const [isLink, setIsLink] = React10.useState(false);
-  const portalContainer = useFloatingPortalContainer2(editor);
-  React10.useEffect(() => {
+  const [activeEditor, setActiveEditor] = React9.useState(editor);
+  const [isLink, setIsLink] = React9.useState(false);
+  const portalContainer = useFloatingPortalContainer(editor);
+  React9.useEffect(() => {
     function $updateToolbar() {
       const selection = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection)) {
@@ -3514,7 +3515,6 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
     setIsLinkEditMode
   );
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React10__namespace.useLayoutEffect : React10__namespace.useEffect;
 var AoModal = ({
   isOpen,
   onDismiss,
@@ -3524,18 +3524,8 @@ var AoModal = ({
   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]);
+  const [editor] = LexicalComposerContext.useLexicalComposerContext();
+  const hostElement = useFloatingPortalContainer(editor);
   if (!isOpen) return null;
   const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoModalBackdrop", onClick: onDismiss, children: /* @__PURE__ */ jsxRuntime.jsxs(
     reactComponents.FluentProvider,
@@ -3562,10 +3552,8 @@ var AoModal = ({
       ]
     }
   ) });
-  if (hostElement) {
-    return reactDom.createPortal(modalContent, hostElement);
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: mountRef, style: { display: "none" } });
+  if (!hostElement) return null;
+  return reactDom.createPortal(modalContent, hostElement);
 };
 
 // src/Plugins/ImagePlugin.tsx
@@ -3592,8 +3580,8 @@ var InsertImageByURL = ({
   onClick,
   disabled
 }) => {
-  const [altText, setAltText] = React10.useState("");
-  const [src, setSrc] = React10.useState("");
+  const [altText, setAltText] = React9.useState("");
+  const [src, setSrc] = React9.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(
@@ -3649,16 +3637,16 @@ var InsertImageDialog = ({
   maxImageSizeMB,
   validationMessages
 }) => {
-  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 [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 iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const isDisabled = disabled || src === "" || !!fileSizeError;
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
       hasModifier.current = e.altKey;
@@ -3804,7 +3792,7 @@ var InsertImageDialog = ({
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!editor.hasNodes([ImageNode])) {
       throw new Error("ImagesPlugin: ImageNode not registered on editor");
     }
@@ -3996,13 +3984,13 @@ var InsertInlineImageDialog = ({
   maxImageSizeMB,
   validationMessages
 }) => {
-  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 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 styles = useStyles();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const isDisabled = disabled || src === "" || !!fileSizeError;
@@ -4033,7 +4021,7 @@ var InsertInlineImageDialog = ({
     };
     reader.readAsDataURL(file);
   };
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const handler = (e) => {
       hasModifier.current = e.altKey;
     };
@@ -4179,7 +4167,7 @@ var InsertInlineImageDialog = ({
 };
 var InlineImagePlugin = () => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!editor.hasNodes([InlineImageNode])) {
       throw new Error("ImagesPlugin: ImageNode not registered on editor");
     }
@@ -4322,7 +4310,7 @@ var getDragSelection2 = (event) => {
 var INSERT_PAGE_BREAK = lexical.createCommand();
 function PageBreakPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!editor.hasNodes([PageBreakNode])) {
       throw new Error(
         "PageBreakPlugin: PageBreakNode is not registered on editor"
@@ -4438,8 +4426,8 @@ function RefApiPlugin({
   focusedRef
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const cleanBaselineRef = React10__namespace.default.useRef(null);
-  React10__namespace.default.useEffect(() => {
+  const cleanBaselineRef = React9__namespace.default.useRef(null);
+  React9__namespace.default.useEffect(() => {
     const capture = () => {
       if (cleanBaselineRef.current === null) {
         cleanBaselineRef.current = getUserContentSignature(editor);
@@ -4460,7 +4448,7 @@ function RefApiPlugin({
       unregister();
     };
   }, [editor]);
-  React10.useImperativeHandle(
+  React9.useImperativeHandle(
     forwardedRef,
     () => ({
       setValue: (html$1) => {
@@ -4653,28 +4641,28 @@ function SpellPopover({
   onImprove,
   onAcceptGrammar
 }) {
-  const ref = React10__namespace.useRef(null);
+  const ref = React9__namespace.useRef(null);
   const type = state.issue.type ?? "spelling";
-  const [pos, setPos] = React10__namespace.useState({ left: state.x, top: state.y });
-  React10__namespace.useEffect(() => {
+  const [pos, setPos] = React9__namespace.useState({ left: state.x, top: state.y });
+  React9__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]);
-  React10__namespace.useEffect(() => {
+  React9__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]);
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     const h = () => onClose();
     window.addEventListener("scroll", h, { capture: true, passive: true });
     return () => window.removeEventListener("scroll", h, true);
   }, [onClose]);
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -4791,17 +4779,17 @@ function SpellCheckPlugin({
   enabled = true
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  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(() => {
+  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(() => {
     injectCSS();
   }, []);
-  const clearErrors = React10__namespace.useCallback(() => {
+  const clearErrors = React9__namespace.useCallback(() => {
     setPopover(null);
     grammarCorrectionRef.current = void 0;
     applyingRef.current = true;
@@ -4817,7 +4805,7 @@ function SpellCheckPlugin({
       }
     );
   }, [editor]);
-  const applyIssues = React10__namespace.useCallback(
+  const applyIssues = React9__namespace.useCallback(
     (issues, improvedText, trimOffset = 0) => {
       let savedCharOffset = -1;
       editor.getEditorState().read(() => {
@@ -4960,7 +4948,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     let currentRoot = null;
     const onClick = (e) => {
       const span = e.target.closest("[data-spell-offset]");
@@ -5004,7 +4992,7 @@ function SpellCheckPlugin({
       if (currentRoot) currentRoot.removeEventListener("click", onClick);
     };
   }, [editor]);
-  const handleAccept = React10__namespace.useCallback(
+  const handleAccept = React9__namespace.useCallback(
     (replacement, nodeKey) => {
       let original = "";
       editor.getEditorState().read(() => {
@@ -5030,7 +5018,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept, popover]
   );
-  const handleDismiss = React10__namespace.useCallback(
+  const handleDismiss = React9__namespace.useCallback(
     (nodeKey) => {
       editor.update(
         () => {
@@ -5044,7 +5032,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  const handleImprove = React10__namespace.useCallback(
+  const handleImprove = React9__namespace.useCallback(
     (text) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -5064,7 +5052,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  const handleAcceptGrammar = React10__namespace.useCallback(
+  const handleAcceptGrammar = React9__namespace.useCallback(
     (corrected) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -5084,7 +5072,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (!enabled || !useSpellCheck) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (applyingRef.current) return;
@@ -5122,13 +5110,13 @@ function SpellCheckPlugin({
       }, idleMs);
     });
   }, [editor, useSpellCheck, enabled, idleMs, applyIssues, clearErrors]);
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (!enabled) {
       clearErrors();
       lastTextRef.current = "";
     }
   }, [enabled, clearErrors]);
-  React10__namespace.useEffect(
+  React9__namespace.useEffect(
     () => () => {
       dismissRef.current?.();
       if (timerRef.current) clearTimeout(timerRef.current);
@@ -5149,13 +5137,13 @@ function SpellCheckPlugin({
 }
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  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) => {
+  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) => {
     try {
       const range = document.createRange();
       range.selectNodeContents(cellDom);
@@ -5165,7 +5153,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       return null;
     }
   }, []);
-  const updateFromSelection = React10__namespace.useCallback(() => {
+  const updateFromSelection = React9__namespace.useCallback(() => {
     if (openRef.current) return;
     const root = editor.getRootElement();
     if (!root) return;
@@ -5216,7 +5204,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       }
     });
   }, [editor, measureContentRight]);
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.SELECTION_CHANGE_COMMAND,
@@ -5231,7 +5219,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       })
     );
   }, [editor, updateFromSelection]);
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DOWN_COMMAND,
       (event) => {
@@ -5273,7 +5261,7 @@ function TableActionMenuPlugin({ disabled = false }) {
     );
   }, [editor, disabled]);
   const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React10__namespace.useMemo(() => {
+  const handleStyle = React9__namespace.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
     const clampedCellRight = Math.min(anchorRect.right, window.innerWidth - 8);
@@ -5288,7 +5276,7 @@ function TableActionMenuPlugin({ disabled = false }) {
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
-  const run = React10__namespace.useCallback(
+  const run = React9__namespace.useCallback(
     (fn) => {
       if (disabled) return;
       openRef.current = false;
@@ -5391,17 +5379,17 @@ function TableCellResizer({
   editor,
   anchorElem
 }) {
-  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(
+  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(
     null
   );
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       lexical.SELECTION_CHANGE_COMMAND,
       () => {
@@ -5424,7 +5412,7 @@ function TableCellResizer({
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor]);
-  const resetState = React10.useCallback(() => {
+  const resetState = React9.useCallback(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -5432,7 +5420,7 @@ function TableCellResizer({
     tableRectRef.current = null;
     updateMouseCurrentPos(null);
   }, []);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const onMouseMove = (event) => {
       if (draggingDirection) {
         updateMouseCurrentPos({ x: event.clientX, y: event.clientY });
@@ -5476,7 +5464,7 @@ function TableCellResizer({
     };
   }, [activeCell, draggingDirection, editor, resetState, anchorElem]);
   const isHeightChanging = (direction) => direction === "bottom";
-  const updateRowHeight = React10.useCallback(
+  const updateRowHeight = React9.useCallback(
     (newHeight) => {
       if (!activeCell) return;
       editor.update(() => {
@@ -5493,7 +5481,7 @@ function TableCellResizer({
     },
     [activeCell, editor]
   );
-  const updateColumnWidth = React10.useCallback(
+  const updateColumnWidth = React9.useCallback(
     (newWidth) => {
       if (!activeCell) return;
       editor.update(() => {
@@ -5515,7 +5503,7 @@ function TableCellResizer({
     },
     [activeCell, editor]
   );
-  const toggleResize = React10.useCallback(
+  const toggleResize = React9.useCallback(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -5546,7 +5534,7 @@ function TableCellResizer({
     },
     [activeCell, draggingDirection, resetState, updateColumnWidth, updateRowHeight]
   );
-  const getResizers = React10.useCallback(() => {
+  const getResizers = React9.useCallback(() => {
     const empty = { bottom: {}, right: {} };
     if (!activeCell) return empty;
     const cellRect = activeCell.elem.getBoundingClientRect();
@@ -5621,7 +5609,7 @@ function TableCellResizerPlugin({
   anchorElem
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  return React10.useMemo(
+  return React9.useMemo(
     () => reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(TableCellResizer, { editor, anchorElem }), anchorElem),
     [editor, anchorElem]
   );
@@ -5849,22 +5837,22 @@ var hsvToRgb = (h, s, v) => {
   };
 };
 var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange }) => {
-  const [open, setOpen] = React10__namespace.useState(false);
-  const btnRef = React10__namespace.useRef(null);
-  const setOpenAndNotify = React10__namespace.useCallback(
+  const [open, setOpen] = React9__namespace.useState(false);
+  const btnRef = React9__namespace.useRef(null);
+  const setOpenAndNotify = React9__namespace.useCallback(
     (next) => {
       setOpen(next);
       onOpenChange?.(next);
     },
     [onOpenChange]
   );
-  const handleDismiss = React10__namespace.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
-  const preventDismissOnEvent = React10__namespace.useCallback(
+  const handleDismiss = React9__namespace.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
+  const preventDismissOnEvent = React9__namespace.useCallback(
     (ev) => ev.type !== "click",
     []
   );
-  const [, forceReposition] = React10__namespace.useState(0);
-  React10__namespace.useEffect(() => {
+  const [, forceReposition] = React9__namespace.useState(0);
+  React9__namespace.useEffect(() => {
     if (!open) return;
     let rafId = null;
     const reposition = () => {
@@ -5882,15 +5870,15 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       window.removeEventListener("resize", reposition);
     };
   }, [open]);
-  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(
+  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(
     (nextHex) => {
       const rgb = hexToRgb(nextHex);
       const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -5903,7 +5891,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const commitFromHsv = React10__namespace.useCallback(
+  const commitFromHsv = React9__namespace.useCallback(
     (hh, ss, vv) => {
       const rgb = hsvToRgb(hh, ss, vv);
       const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
@@ -5916,8 +5904,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const wasOpenRef = React10__namespace.useRef(open);
-  React10__namespace.useEffect(() => {
+  const wasOpenRef = React9__namespace.useRef(open);
+  React9__namespace.useEffect(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
     if (!justOpened) return;
@@ -5929,8 +5917,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     setS(next.s);
     setV(next.v);
   }, [appliedHex, open]);
-  const svRef = React10__namespace.useRef(null);
-  const svPointFromEvent = React10__namespace.useCallback((clientX, clientY) => {
+  const svRef = React9__namespace.useRef(null);
+  const svPointFromEvent = React9__namespace.useCallback((clientX, clientY) => {
     if (!svRef.current) return null;
     const rect = svRef.current.getBoundingClientRect();
     const x = clamp3(clientX - rect.left, 0, rect.width);
@@ -5939,9 +5927,9 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     const vv = rect.height === 0 ? 0 : 1 - y / rect.height;
     return { ss, vv };
   }, []);
-  const hRef = React10__namespace.useRef(h);
+  const hRef = React9__namespace.useRef(h);
   hRef.current = h;
-  const handleSVPointerDown = React10__namespace.useCallback(
+  const handleSVPointerDown = React9__namespace.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5949,7 +5937,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const handleSVPointerMove = React10__namespace.useCallback(
+  const handleSVPointerMove = React9__namespace.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5957,18 +5945,18 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const hueRef = React10__namespace.useRef(null);
-  const sRef = React10__namespace.useRef(s);
+  const hueRef = React9__namespace.useRef(null);
+  const sRef = React9__namespace.useRef(s);
   sRef.current = s;
-  const vRef = React10__namespace.useRef(v);
+  const vRef = React9__namespace.useRef(v);
   vRef.current = v;
-  const huePointFromEvent = React10__namespace.useCallback((clientX) => {
+  const huePointFromEvent = React9__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 = React10__namespace.useCallback(
+  const handleHuePointerDown = React9__namespace.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const hh = huePointFromEvent(e.clientX);
@@ -5976,7 +5964,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHuePointerMove = React10__namespace.useCallback(
+  const handleHuePointerMove = React9__namespace.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const hh = huePointFromEvent(e.clientX);
@@ -5984,7 +5972,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHexChange = React10__namespace.useCallback(
+  const handleHexChange = React9__namespace.useCallback(
     (_, val) => {
       const next = val ?? "";
       setHexText(next);
@@ -5992,12 +5980,12 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [commit]
   );
-  const handleHexBlur = React10__namespace.useCallback(() => {
+  const handleHexBlur = React9__namespace.useCallback(() => {
     commit(normalizeHex(hexText));
   }, [hexText, commit]);
-  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 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 { r: r2, g: g2, b: b2 } = hsvToRgb(h, 1, 1);
     return rgbToHex(r2, g2, b2);
   }, [h]);
@@ -6243,8 +6231,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
 };
 var ColorPickerPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [{ color, bgColor }, setColors] = React10__namespace.default.useState({ color: "#000000", bgColor: "#ffffff" });
-  const lastRangeSelectionRef = React10__namespace.default.useRef(null);
+  const [{ color, bgColor }, setColors] = React9__namespace.default.useState({ color: "#000000", bgColor: "#ffffff" });
+  const lastRangeSelectionRef = React9__namespace.default.useRef(null);
   const updateToolbar = () => {
     const selection$1 = lexical.$getSelection();
     if (lexical.$isRangeSelection(selection$1)) {
@@ -6254,7 +6242,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       setColors({ color: c, bgColor: bg });
     }
   };
-  React10__namespace.default.useEffect(() => {
+  React9__namespace.default.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => updateToolbar());
@@ -6269,7 +6257,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       )
     );
   }, [editor]);
-  const wasEditorActiveRef = React10__namespace.default.useRef(false);
+  const wasEditorActiveRef = React9__namespace.default.useRef(false);
   const handleOpenChange = (open) => {
     if (open) {
       const root = editor.getRootElement();
@@ -6361,9 +6349,9 @@ var FONT_FAMILY_OPTIONS = [
 var FontFamilyPlugin = ({ disabled = false }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const styles = useStyles2();
-  const [fontFamily, setFontFamily] = React10.useState("");
+  const [fontFamily, setFontFamily] = React9.useState("");
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const readFontFamily = () => {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
@@ -6385,7 +6373,7 @@ var FontFamilyPlugin = ({ disabled = false }) => {
       )
     );
   }, [editor]);
-  const handleClick = React10.useCallback(
+  const handleClick = React9.useCallback(
     (option) => {
       if (disabled) return;
       editor.update(() => {
@@ -6487,9 +6475,9 @@ var useStyles3 = reactComponents.makeStyles({
 var FontSizePlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const styles = useStyles3();
-  const [fontSize2, setFontSize] = React10__namespace.useState(String(DEFAULT_FONT_SIZE));
+  const [fontSize2, setFontSize] = React9__namespace.useState(String(DEFAULT_FONT_SIZE));
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React10__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     const readFontSize = () => {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
@@ -6659,9 +6647,9 @@ function PageSetupPlugin({ disabled, value, onChange }) {
 }
 var TableItemPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [columns, setColumns] = React10.useState("");
-  const [rows, setRows] = React10.useState("");
-  const [isOpen, setIsOpen] = React10.useState(false);
+  const [columns, setColumns] = React9.useState("");
+  const [rows, setRows] = React9.useState("");
+  const [isOpen, setIsOpen] = React9.useState(false);
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const onAddTable = () => {
     if (disabled) return;
@@ -6748,8 +6736,8 @@ var TableItemPlugin = ({ disabled }) => {
   ] });
 };
 var YoutubeUploadPlugin = ({ disabled }) => {
-  const [url, setURL] = React10.useState("");
-  const [isOpen, setIsOpen] = React10.useState(false);
+  const [url, setURL] = React9.useState("");
+  const [isOpen, setIsOpen] = React9.useState(false);
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#424242";
   const onHandleEmbeded = () => {
@@ -6881,24 +6869,24 @@ var ToolBarPlugins = (props) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const theme2 = react.useTheme();
   const styles = useStyles4();
-  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 [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 [hasTextSelection, setHasTextSelection] = React9.useState(false);
+  const [decoratorOpen, setDecoratorOpen] = React9.useState(false);
+  const decoratorSelectingRef = React9__namespace.default.useRef(false);
   const presetGroups = props.customToolbar ?? getToolbarGroupsByLevel(props.level);
-  const pluginGroups = React10.useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
+  const pluginGroups = React9.useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
@@ -6968,7 +6956,7 @@ var ToolBarPlugins = (props) => {
       }
     });
   };
-  React10__namespace.default.useEffect(() => {
+  React9__namespace.default.useEffect(() => {
     return utils.mergeRegister(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -7842,7 +7830,7 @@ var ToolBarPlugins = (props) => {
         padding: "0px",
         minHeight: 36
       },
-      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsx(React10__namespace.default.Fragment, { children: group.map((token, tokenIndex) => {
+      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsx(React9__namespace.default.Fragment, { children: group.map((token, tokenIndex) => {
         try {
           return renderToken(token, groupIndex, tokenIndex);
         } catch {
@@ -7861,7 +7849,7 @@ function isYoutubeLikeNode(node) {
 }
 function YoutubeDeletePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const removeIfYoutubeAtCursor = (direction) => {
       const selection = lexical.$getSelection();
       if (!lexical.$isRangeSelection(selection)) return false;
@@ -7893,7 +7881,7 @@ function YoutubeDeletePlugin() {
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DELETE_COMMAND,
       () => {
@@ -7982,14 +7970,14 @@ var theme = {
 };
 function ReadOnlyPlugin({ readonly }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     editor.setEditable(!readonly);
   }, [editor, readonly]);
   return null;
 }
 function BrowserSpellCheckPlugin({ enabled }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const el = editor.getRootElement();
     if (!el) return;
     el.spellcheck = enabled;
@@ -8004,8 +7992,8 @@ function ContentMetricsPlugin({
   onMetricsChange
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const prevRef = React10.useRef({ words: 0, chars: 0, images: 0, links: 0, tables: 0 });
-  React10.useEffect(() => {
+  const prevRef = React9.useRef({ words: 0, chars: 0, images: 0, links: 0, tables: 0 });
+  React9.useEffect(() => {
     return editor.registerUpdateListener(({ dirtyElements, dirtyLeaves }) => {
       if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
       const root = editor.getRootElement();
@@ -8034,7 +8022,7 @@ function FocusEventsPlugin({
   containerRef
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const root = editor.getRootElement();
     if (!root) return;
     const handleFocusIn = () => {
@@ -8158,51 +8146,51 @@ function _makeQueryFn(fn) {
 }
 function EditorReadyPlugin({ onReady }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const calledRef = React10.useRef(false);
-  React10.useEffect(() => {
+  const calledRef = React9.useRef(false);
+  React9.useEffect(() => {
     if (!onReady || calledRef.current) return;
     calledRef.current = true;
     onReady(editor);
   }, [editor, onReady]);
   return null;
 }
-var ContentEditorComponent = React10.forwardRef(
+var ContentEditorComponent = React9.forwardRef(
   (props, ref) => {
     const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React10__namespace.default.useMemo(
+    const resolvedSpellCheck = React9__namespace.default.useMemo(
       () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [props.spellCheckFn, props.useSpellCheck]
     );
-    const resolvedQuery = React10__namespace.default.useMemo(
+    const resolvedQuery = React9__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] = React10.useState(null);
-    const [isLinkEditMode, setIsLinkEditMode] = React10.useState(false);
-    const [metrics, setMetrics] = React10.useState({
+    const [floatingAnchorElem, setFloatingAnchorElem] = React9.useState(null);
+    const [isLinkEditMode, setIsLinkEditMode] = React9.useState(false);
+    const [metrics, setMetrics] = React9.useState({
       words: 0,
       chars: 0,
       images: 0,
       links: 0,
       tables: 0
     });
-    const handleMetrics = React10.useCallback((m) => setMetrics(m), []);
-    const [pageSetup, setPageSetup] = React10.useState(DEFAULT_PAGE_SETUP);
+    const handleMetrics = React9.useCallback((m) => setMetrics(m), []);
+    const [pageSetup, setPageSetup] = React9.useState(DEFAULT_PAGE_SETUP);
     const pageCanvas = resolvePageCanvasMetrics(pageSetup);
     const wordCount = metrics.words;
-    const contentEditableDomRef = React10.useRef(null);
-    const previousOverLimitRef = React10.useRef(false);
-    const focusedRef = React10.useRef(false);
+    const contentEditableDomRef = React9.useRef(null);
+    const previousOverLimitRef = React9.useRef(false);
+    const focusedRef = React9.useRef(false);
     const setFocused = (focused) => {
       focusedRef.current = focused;
     };
-    const containerRef = React10.useRef(null);
+    const containerRef = React9.useRef(null);
     const onAnchorRef = (elem) => {
       if (elem) setFloatingAnchorElem(elem);
     };
-    const initialConfig = React10__namespace.default.useMemo(() => {
+    const initialConfig = React9__namespace.default.useMemo(() => {
       const config = {
         namespace: props.namespace ?? "",
         theme,
@@ -8280,7 +8268,7 @@ var ContentEditorComponent = React10.forwardRef(
       }
     };
     const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
-    React10.useEffect(() => {
+    React9.useEffect(() => {
       if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
       const wasOverLimit = previousOverLimitRef.current;
       if (isOverLimit !== wasOverLimit) {
@@ -8292,7 +8280,7 @@ var ContentEditorComponent = React10.forwardRef(
         previousOverLimitRef.current = isOverLimit;
       }
     }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    const validationErrors = React10__namespace.default.useMemo(() => {
+    const validationErrors = React9__namespace.default.useMemo(() => {
       const errors = [];
       const custom = props.validationMessages ?? {};
       const { words, chars, images, links, tables } = metrics;
@@ -8349,8 +8337,8 @@ var ContentEditorComponent = React10.forwardRef(
       props.noTables,
       props.validationMessages
     ]);
-    const previousErrorTypesRef = React10.useRef("");
-    React10.useEffect(() => {
+    const previousErrorTypesRef = React9.useRef("");
+    React9.useEffect(() => {
       if (!props.onValidationChange) return;
       const key = validationErrors.map((e) => e.type).join(",");
       if (key !== previousErrorTypesRef.current) {