@tarviks/lexical-rich-editor 1.3.2 → 1.3.4

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { mergeRegister, $wrapNodeInElement, $insertNodeToNearestRoot, $getNearestNodeOfType, $findMatchingParent as $findMatchingParent$1, calculateZoomLevel } from '@lexical/utils';
-import * as React10 from 'react';
-import React10__default, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, useImperativeHandle, Suspense } from 'react';
+import * as React9 from 'react';
+import React9__default, { forwardRef, useState, useCallback, useRef, useEffect, useMemo, useImperativeHandle, Suspense } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
 import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
@@ -642,7 +642,7 @@ function parseDimFromStyleOrAttr(img3) {
 var ImageComponent2, isGoogleDocCheckboxImg, $convertImageElement, ImageNode, $createImageNode, $isImageNode;
 var init_ImageNode = __esm({
   "src/Nodes/ImageNode.tsx"() {
-    ImageComponent2 = React10.lazy(() => Promise.resolve().then(() => (init_ImageComponent(), ImageComponent_exports)));
+    ImageComponent2 = React9.lazy(() => Promise.resolve().then(() => (init_ImageComponent(), ImageComponent_exports)));
     isGoogleDocCheckboxImg = (img3) => {
       return img3.parentElement != null && img3.parentElement.tagName === "LI" && img3.previousSibling === null && img3.getAttribute("aria-roledescription") === "checkbox";
     };
@@ -1061,7 +1061,7 @@ var init_InlineImageComponent = __esm({
 var InlineImageComponent2, $convertInlineImageElement, InlineImageNode, $createInlineImageNode, $isInlineImageNode;
 var init_InlineImageNode = __esm({
   "src/Nodes/InlineImageNode.tsx"() {
-    InlineImageComponent2 = React10.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
+    InlineImageComponent2 = React9.lazy(() => Promise.resolve().then(() => (init_InlineImageComponent(), InlineImageComponent_exports)));
     $convertInlineImageElement = (domNode) => {
       if (isHTMLElement(domNode) && domNode.nodeName === "IMG") {
         const { alt: altText, src, width, height } = domNode;
@@ -1702,7 +1702,7 @@ function VideoResizer({
   onResizeStart,
   onResizeEnd
 }) {
-  const resizeState = React10.useRef(null);
+  const resizeState = React9.useRef(null);
   const startResize = (e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1829,15 +1829,15 @@ function YouTubeComponent({
   height,
   editor
 }) {
-  const wrapperRef = React10.useRef(null);
-  const containerRef = React10.useRef(null);
-  const iframeRef = React10.useRef(null);
-  const isResizingRef = React10.useRef(false);
+  const wrapperRef = React9.useRef(null);
+  const containerRef = React9.useRef(null);
+  const iframeRef = React9.useRef(null);
+  const isResizingRef = React9.useRef(false);
   const [isNodeSelected, setNodeSelected, clearNodeSelection] = useLexicalNodeSelection(nodeKey);
-  const [isHovered, setIsHovered] = React10.useState(false);
-  const [isResizing, setIsResizing] = React10.useState(false);
-  const [isPlaying, setIsPlaying] = React10.useState(false);
-  React10.useEffect(() => {
+  const [isHovered, setIsHovered] = React9.useState(false);
+  const [isResizing, setIsResizing] = React9.useState(false);
+  const [isPlaying, setIsPlaying] = React9.useState(false);
+  React9.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         FORMAT_ELEMENT_COMMAND,
@@ -2226,13 +2226,13 @@ function AutocompletePlugin({
   prefixWindow = 300
 }) {
   const [editor] = useLexicalComposerContext();
-  const ghostKeyRef = React10.useRef(null);
-  const idleTimerRef = React10.useRef(null);
-  const inflightRef = React10.useRef(null);
-  const reqCounterRef = React10.useRef(0);
-  const lastTriggerRef = React10.useRef("");
-  const lastShownCtxRef = React10.useRef("");
-  const clearGhost = React10.useCallback(() => {
+  const ghostKeyRef = React9.useRef(null);
+  const idleTimerRef = React9.useRef(null);
+  const inflightRef = React9.useRef(null);
+  const reqCounterRef = React9.useRef(0);
+  const lastTriggerRef = React9.useRef("");
+  const lastShownCtxRef = React9.useRef("");
+  const clearGhost = React9.useCallback(() => {
     editor.update(
       () => {
         const key = ghostKeyRef.current;
@@ -2244,7 +2244,7 @@ function AutocompletePlugin({
       { tag: "autocomplete-ghost" }
     );
   }, [editor]);
-  const upsertGhost = React10.useCallback(
+  const upsertGhost = React9.useCallback(
     (text, insertAtCharOffset) => {
       editor.update(
         () => {
@@ -2308,12 +2308,12 @@ function AutocompletePlugin({
     },
     [editor]
   );
-  const cancelInflight = React10.useCallback(() => {
+  const cancelInflight = React9.useCallback(() => {
     if (!inflightRef.current) return;
     inflightRef.current.dismiss();
     inflightRef.current = null;
   }, []);
-  const resetIdleTimer = React10.useCallback(
+  const resetIdleTimer = React9.useCallback(
     (callback) => {
       if (idleTimerRef.current) {
         clearTimeout(idleTimerRef.current);
@@ -2328,7 +2328,7 @@ function AutocompletePlugin({
     },
     [idleMs, cancelInflight, clearGhost]
   );
-  const fireQuery = React10.useCallback(() => {
+  const fireQuery = React9.useCallback(() => {
     if (!useQuery || isReadOnly) return;
     let context = "";
     let prefix = "";
@@ -2400,7 +2400,7 @@ function AutocompletePlugin({
     upsertGhost,
     onSuggestionShown
   ]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (tags.has("history-merge") || tags.has("collaboration")) return;
@@ -2409,7 +2409,7 @@ function AutocompletePlugin({
       resetIdleTimer(fireQuery);
     });
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -2433,7 +2433,7 @@ function AutocompletePlugin({
       COMMAND_PRIORITY_LOW
     );
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
       (e) => {
@@ -2474,7 +2474,7 @@ function AutocompletePlugin({
       COMMAND_PRIORITY_HIGH
     );
   }, [editor, clearGhost, onSuggestionAccept, prefixWindow]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return () => {
       cancelInflight();
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -2482,18 +2482,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] = useState(null);
   useEffect(() => {
     const root = editor.getRootElement();
     if (!root) return;
-    const panelOrLayer = root.closest(".ms-Panel-main") || root.closest(".ms-Panel") || root.closest(".ms-Layer") || document.body;
     const host = document.createElement("div");
     host.className = "lexical-floating-ui-host";
-    panelOrLayer.appendChild(host);
+    document.body.appendChild(host);
     setContainer(host);
     return () => {
       host.remove();
@@ -2502,6 +2498,22 @@ function useFloatingPortalContainer(editor) {
   }, [editor]);
   return container;
 }
+function getFixedPositionOrigin(fromElement) {
+  let node = fromElement.parentElement;
+  while (node && node !== document.body && node !== document.documentElement) {
+    const style = getComputedStyle(node);
+    const createsContainingBlock = style.transform && style.transform !== "none" || style.perspective && style.perspective !== "none" || style.filter && style.filter !== "none" || style.backdropFilter && style.backdropFilter !== "none" || style.willChange && /transform|perspective|filter/.test(style.willChange) || style.contain && /paint|layout|strict|content/.test(style.contain);
+    if (createsContainingBlock) {
+      const rect = node.getBoundingClientRect();
+      return { top: rect.top, left: rect.left };
+    }
+    node = node.parentElement;
+  }
+  return { top: 0, left: 0 };
+}
+function clamp2(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
 function setPopupPositionFixed(popupEl, rect, topBoundary) {
   const GAP = 8;
   const MARGIN = 8;
@@ -2509,6 +2521,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`;
 }
@@ -3131,23 +3146,6 @@ var getSelectedNode2 = (selection) => {
 var VERTICAL_GAP = 10;
 var HORIZONTAL_OFFSET = 5;
 var VIEWPORT_MARGIN = 8;
-function useFloatingPortalContainer2(editor) {
-  const [container, setContainer] = useState(null);
-  useEffect(() => {
-    const root = editor.getRootElement();
-    if (!root) return;
-    const panelOrLayer = root.closest(".ms-Panel-main") || root.closest(".ms-Panel") || root.closest(".ms-Layer") || document.body;
-    const host = document.createElement("div");
-    host.className = "lexical-floating-ui-host";
-    panelOrLayer.appendChild(host);
-    setContainer(host);
-    return () => {
-      host.remove();
-      setContainer(null);
-    };
-  }, [editor]);
-  return container;
-}
 var setFloatingElemPositionForLinkEditor = (targetRect, floatingElem, topBoundary = VIEWPORT_MARGIN, verticalGap = VERTICAL_GAP, horizontalOffset = HORIZONTAL_OFFSET) => {
   if (targetRect === null) {
     floatingElem.style.opacity = "0";
@@ -3164,6 +3162,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`;
@@ -3418,7 +3419,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, isLinkEditMode, setIsLink
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
   const [activeEditor, setActiveEditor] = useState(editor);
   const [isLink, setIsLink] = useState(false);
-  const portalContainer = useFloatingPortalContainer2(editor);
+  const portalContainer = useFloatingPortalContainer(editor);
   useEffect(() => {
     function $updateToolbar() {
       const selection = $getSelection();
@@ -3493,7 +3494,6 @@ var FloatingLinkEditorPlugin = ({ anchorElem, isLinkEditMode, setIsLinkEditMode
     setIsLinkEditMode
   );
 };
-var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React10.useLayoutEffect : React10.useEffect;
 var AoModal = ({
   isOpen,
   onDismiss,
@@ -3503,18 +3503,8 @@ var AoModal = ({
   actions,
   children
 }) => {
-  const [hostElement, setHostElement] = React10.useState(null);
-  const mountRef = React10.useRef(null);
-  useIsomorphicLayoutEffect(() => {
-    if (isOpen && mountRef.current) {
-      const root = mountRef.current.closest(".lexical-rich-editor-root");
-      if (root) {
-        setHostElement(root);
-      } else {
-        setHostElement(mountRef.current.parentElement);
-      }
-    }
-  }, [isOpen]);
+  const [editor] = useLexicalComposerContext();
+  const hostElement = useFloatingPortalContainer(editor);
   if (!isOpen) return null;
   const modalContent = /* @__PURE__ */ jsx("div", { className: "aoModalBackdrop", onClick: onDismiss, children: /* @__PURE__ */ jsxs(
     FluentProvider,
@@ -3541,10 +3531,8 @@ var AoModal = ({
       ]
     }
   ) });
-  if (hostElement) {
-    return createPortal(modalContent, hostElement);
-  }
-  return /* @__PURE__ */ jsx("div", { ref: mountRef, style: { display: "none" } });
+  if (!hostElement) return null;
+  return createPortal(modalContent, hostElement);
 };
 
 // src/Plugins/ImagePlugin.tsx
@@ -4417,8 +4405,8 @@ function RefApiPlugin({
   focusedRef
 }) {
   const [editor] = useLexicalComposerContext();
-  const cleanBaselineRef = React10__default.useRef(null);
-  React10__default.useEffect(() => {
+  const cleanBaselineRef = React9__default.useRef(null);
+  React9__default.useEffect(() => {
     const capture = () => {
       if (cleanBaselineRef.current === null) {
         cleanBaselineRef.current = getUserContentSignature(editor);
@@ -4632,28 +4620,28 @@ function SpellPopover({
   onImprove,
   onAcceptGrammar
 }) {
-  const ref = React10.useRef(null);
+  const ref = React9.useRef(null);
   const type = state.issue.type ?? "spelling";
-  const [pos, setPos] = React10.useState({ left: state.x, top: state.y });
-  React10.useEffect(() => {
+  const [pos, setPos] = React9.useState({ left: state.x, top: state.y });
+  React9.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.useEffect(() => {
+  React9.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.useEffect(() => {
+  React9.useEffect(() => {
     const h = () => onClose();
     window.addEventListener("scroll", h, { capture: true, passive: true });
     return () => window.removeEventListener("scroll", h, true);
   }, [onClose]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -4770,17 +4758,17 @@ function SpellCheckPlugin({
   enabled = true
 }) {
   const [editor] = useLexicalComposerContext();
-  const timerRef = React10.useRef(null);
-  const dismissRef = React10.useRef(null);
-  const reqIdRef = React10.useRef(0);
-  const lastTextRef = React10.useRef("");
-  const applyingRef = React10.useRef(false);
-  const grammarCorrectionRef = React10.useRef(void 0);
-  const [popover, setPopover] = React10.useState(null);
-  React10.useEffect(() => {
+  const timerRef = React9.useRef(null);
+  const dismissRef = React9.useRef(null);
+  const reqIdRef = React9.useRef(0);
+  const lastTextRef = React9.useRef("");
+  const applyingRef = React9.useRef(false);
+  const grammarCorrectionRef = React9.useRef(void 0);
+  const [popover, setPopover] = React9.useState(null);
+  React9.useEffect(() => {
     injectCSS();
   }, []);
-  const clearErrors = React10.useCallback(() => {
+  const clearErrors = React9.useCallback(() => {
     setPopover(null);
     grammarCorrectionRef.current = void 0;
     applyingRef.current = true;
@@ -4796,7 +4784,7 @@ function SpellCheckPlugin({
       }
     );
   }, [editor]);
-  const applyIssues = React10.useCallback(
+  const applyIssues = React9.useCallback(
     (issues, improvedText, trimOffset = 0) => {
       let savedCharOffset = -1;
       editor.getEditorState().read(() => {
@@ -4939,7 +4927,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     let currentRoot = null;
     const onClick = (e) => {
       const span = e.target.closest("[data-spell-offset]");
@@ -4983,7 +4971,7 @@ function SpellCheckPlugin({
       if (currentRoot) currentRoot.removeEventListener("click", onClick);
     };
   }, [editor]);
-  const handleAccept = React10.useCallback(
+  const handleAccept = React9.useCallback(
     (replacement, nodeKey) => {
       let original = "";
       editor.getEditorState().read(() => {
@@ -5009,7 +4997,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept, popover]
   );
-  const handleDismiss = React10.useCallback(
+  const handleDismiss = React9.useCallback(
     (nodeKey) => {
       editor.update(
         () => {
@@ -5023,7 +5011,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  const handleImprove = React10.useCallback(
+  const handleImprove = React9.useCallback(
     (text) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -5043,7 +5031,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  const handleAcceptGrammar = React10.useCallback(
+  const handleAcceptGrammar = React9.useCallback(
     (corrected) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -5063,7 +5051,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!enabled || !useSpellCheck) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (applyingRef.current) return;
@@ -5101,13 +5089,13 @@ function SpellCheckPlugin({
       }, idleMs);
     });
   }, [editor, useSpellCheck, enabled, idleMs, applyIssues, clearErrors]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     if (!enabled) {
       clearErrors();
       lastTextRef.current = "";
     }
   }, [enabled, clearErrors]);
-  React10.useEffect(
+  React9.useEffect(
     () => () => {
       dismissRef.current?.();
       if (timerRef.current) clearTimeout(timerRef.current);
@@ -5128,13 +5116,13 @@ function SpellCheckPlugin({
 }
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = useLexicalComposerContext();
-  const [isInTable, setIsInTable] = React10.useState(false);
-  const [anchorRect, setAnchorRect] = React10.useState(null);
-  const [contentRight, setContentRight] = React10.useState(null);
-  const [open, setOpen] = React10.useState(false);
-  const openRef = React10.useRef(false);
-  const savedAnchorRef = React10.useRef(null);
-  const measureContentRight = React10.useCallback((cellDom) => {
+  const [isInTable, setIsInTable] = React9.useState(false);
+  const [anchorRect, setAnchorRect] = React9.useState(null);
+  const [contentRight, setContentRight] = React9.useState(null);
+  const [open, setOpen] = React9.useState(false);
+  const openRef = React9.useRef(false);
+  const savedAnchorRef = React9.useRef(null);
+  const measureContentRight = React9.useCallback((cellDom) => {
     try {
       const range = document.createRange();
       range.selectNodeContents(cellDom);
@@ -5144,7 +5132,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       return null;
     }
   }, []);
-  const updateFromSelection = React10.useCallback(() => {
+  const updateFromSelection = React9.useCallback(() => {
     if (openRef.current) return;
     const root = editor.getRootElement();
     if (!root) return;
@@ -5195,7 +5183,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       }
     });
   }, [editor, measureContentRight]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
@@ -5210,7 +5198,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       })
     );
   }, [editor, updateFromSelection]);
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
       (event) => {
@@ -5252,7 +5240,7 @@ function TableActionMenuPlugin({ disabled = false }) {
     );
   }, [editor, disabled]);
   const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React10.useMemo(() => {
+  const handleStyle = React9.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
     const clampedCellRight = Math.min(anchorRect.right, window.innerWidth - 8);
@@ -5267,7 +5255,7 @@ function TableActionMenuPlugin({ disabled = false }) {
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
-  const run = React10.useCallback(
+  const run = React9.useCallback(
     (fn) => {
       if (disabled) return;
       openRef.current = false;
@@ -5828,22 +5816,22 @@ var hsvToRgb = (h, s, v) => {
   };
 };
 var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange }) => {
-  const [open, setOpen] = React10.useState(false);
-  const btnRef = React10.useRef(null);
-  const setOpenAndNotify = React10.useCallback(
+  const [open, setOpen] = React9.useState(false);
+  const btnRef = React9.useRef(null);
+  const setOpenAndNotify = React9.useCallback(
     (next) => {
       setOpen(next);
       onOpenChange?.(next);
     },
     [onOpenChange]
   );
-  const handleDismiss = React10.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
-  const preventDismissOnEvent = React10.useCallback(
+  const handleDismiss = React9.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
+  const preventDismissOnEvent = React9.useCallback(
     (ev) => ev.type !== "click",
     []
   );
-  const [, forceReposition] = React10.useState(0);
-  React10.useEffect(() => {
+  const [, forceReposition] = React9.useState(0);
+  React9.useEffect(() => {
     if (!open) return;
     let rafId = null;
     const reposition = () => {
@@ -5861,15 +5849,15 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       window.removeEventListener("resize", reposition);
     };
   }, [open]);
-  const appliedHex = React10.useMemo(() => normalizeHex(value || "#000000"), [value]);
-  const [hex, setHexState] = React10.useState(appliedHex);
-  const [hexText, setHexText] = React10.useState(appliedHex);
-  const { r, g, b } = React10.useMemo(() => hexToRgb(hex), [hex]);
-  const hsv = React10.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
-  const [h, setH] = React10.useState(hsv.h);
-  const [s, setS] = React10.useState(hsv.s);
-  const [v, setV] = React10.useState(hsv.v);
-  const commit = React10.useCallback(
+  const appliedHex = React9.useMemo(() => normalizeHex(value || "#000000"), [value]);
+  const [hex, setHexState] = React9.useState(appliedHex);
+  const [hexText, setHexText] = React9.useState(appliedHex);
+  const { r, g, b } = React9.useMemo(() => hexToRgb(hex), [hex]);
+  const hsv = React9.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
+  const [h, setH] = React9.useState(hsv.h);
+  const [s, setS] = React9.useState(hsv.s);
+  const [v, setV] = React9.useState(hsv.v);
+  const commit = React9.useCallback(
     (nextHex) => {
       const rgb = hexToRgb(nextHex);
       const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
@@ -5882,7 +5870,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const commitFromHsv = React10.useCallback(
+  const commitFromHsv = React9.useCallback(
     (hh, ss, vv) => {
       const rgb = hsvToRgb(hh, ss, vv);
       const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
@@ -5895,8 +5883,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onChange]
   );
-  const wasOpenRef = React10.useRef(open);
-  React10.useEffect(() => {
+  const wasOpenRef = React9.useRef(open);
+  React9.useEffect(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
     if (!justOpened) return;
@@ -5908,8 +5896,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     setS(next.s);
     setV(next.v);
   }, [appliedHex, open]);
-  const svRef = React10.useRef(null);
-  const svPointFromEvent = React10.useCallback((clientX, clientY) => {
+  const svRef = React9.useRef(null);
+  const svPointFromEvent = React9.useCallback((clientX, clientY) => {
     if (!svRef.current) return null;
     const rect = svRef.current.getBoundingClientRect();
     const x = clamp3(clientX - rect.left, 0, rect.width);
@@ -5918,9 +5906,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.useRef(h);
+  const hRef = React9.useRef(h);
   hRef.current = h;
-  const handleSVPointerDown = React10.useCallback(
+  const handleSVPointerDown = React9.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5928,7 +5916,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const handleSVPointerMove = React10.useCallback(
+  const handleSVPointerMove = React9.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const pt = svPointFromEvent(e.clientX, e.clientY);
@@ -5936,18 +5924,18 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [svPointFromEvent, commitFromHsv]
   );
-  const hueRef = React10.useRef(null);
-  const sRef = React10.useRef(s);
+  const hueRef = React9.useRef(null);
+  const sRef = React9.useRef(s);
   sRef.current = s;
-  const vRef = React10.useRef(v);
+  const vRef = React9.useRef(v);
   vRef.current = v;
-  const huePointFromEvent = React10.useCallback((clientX) => {
+  const huePointFromEvent = React9.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.useCallback(
+  const handleHuePointerDown = React9.useCallback(
     (e) => {
       e.currentTarget.setPointerCapture(e.pointerId);
       const hh = huePointFromEvent(e.clientX);
@@ -5955,7 +5943,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHuePointerMove = React10.useCallback(
+  const handleHuePointerMove = React9.useCallback(
     (e) => {
       if (e.buttons !== 1) return;
       const hh = huePointFromEvent(e.clientX);
@@ -5963,7 +5951,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [huePointFromEvent, commitFromHsv]
   );
-  const handleHexChange = React10.useCallback(
+  const handleHexChange = React9.useCallback(
     (_, val) => {
       const next = val ?? "";
       setHexText(next);
@@ -5971,12 +5959,12 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [commit]
   );
-  const handleHexBlur = React10.useCallback(() => {
+  const handleHexBlur = React9.useCallback(() => {
     commit(normalizeHex(hexText));
   }, [hexText, commit]);
-  const svThumb = React10.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
-  const hueThumb = React10.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
-  const hueColor = React10.useMemo(() => {
+  const svThumb = React9.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
+  const hueThumb = React9.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
+  const hueColor = React9.useMemo(() => {
     const { r: r2, g: g2, b: b2 } = hsvToRgb(h, 1, 1);
     return rgbToHex(r2, g2, b2);
   }, [h]);
@@ -6222,8 +6210,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
 };
 var ColorPickerPlugin = ({ disabled }) => {
   const [editor] = useLexicalComposerContext();
-  const [{ color, bgColor }, setColors] = React10__default.useState({ color: "#000000", bgColor: "#ffffff" });
-  const lastRangeSelectionRef = React10__default.useRef(null);
+  const [{ color, bgColor }, setColors] = React9__default.useState({ color: "#000000", bgColor: "#ffffff" });
+  const lastRangeSelectionRef = React9__default.useRef(null);
   const updateToolbar = () => {
     const selection = $getSelection();
     if ($isRangeSelection(selection)) {
@@ -6233,7 +6221,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       setColors({ color: c, bgColor: bg });
     }
   };
-  React10__default.useEffect(() => {
+  React9__default.useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => updateToolbar());
@@ -6248,7 +6236,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       )
     );
   }, [editor]);
-  const wasEditorActiveRef = React10__default.useRef(false);
+  const wasEditorActiveRef = React9__default.useRef(false);
   const handleOpenChange = (open) => {
     if (open) {
       const root = editor.getRootElement();
@@ -6466,9 +6454,9 @@ var useStyles3 = makeStyles({
 var FontSizePlugin = ({ disabled }) => {
   const [editor] = useLexicalComposerContext();
   const styles = useStyles3();
-  const [fontSize2, setFontSize] = React10.useState(String(DEFAULT_FONT_SIZE));
+  const [fontSize2, setFontSize] = React9.useState(String(DEFAULT_FONT_SIZE));
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React10.useEffect(() => {
+  React9.useEffect(() => {
     const readFontSize = () => {
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
@@ -6875,7 +6863,7 @@ var ToolBarPlugins = (props) => {
   const [alignment, setAlignment] = useState("left");
   const [hasTextSelection, setHasTextSelection] = useState(false);
   const [decoratorOpen, setDecoratorOpen] = useState(false);
-  const decoratorSelectingRef = React10__default.useRef(false);
+  const decoratorSelectingRef = React9__default.useRef(false);
   const presetGroups = props.customToolbar ?? getToolbarGroupsByLevel(props.level);
   const pluginGroups = useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
@@ -6947,7 +6935,7 @@ var ToolBarPlugins = (props) => {
       }
     });
   };
-  React10__default.useEffect(() => {
+  React9__default.useEffect(() => {
     return mergeRegister(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -7821,7 +7809,7 @@ var ToolBarPlugins = (props) => {
         padding: "0px",
         minHeight: 36
       },
-      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(React10__default.Fragment, { children: group.map((token, tokenIndex) => {
+      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(React9__default.Fragment, { children: group.map((token, tokenIndex) => {
         try {
           return renderToken(token, groupIndex, tokenIndex);
         } catch {
@@ -8148,12 +8136,12 @@ function EditorReadyPlugin({ onReady }) {
 var ContentEditorComponent = forwardRef(
   (props, ref) => {
     const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React10__default.useMemo(
+    const resolvedSpellCheck = React9__default.useMemo(
       () => props.spellCheckFn ? _makeSpellCheckFn(props.spellCheckFn) : props.useSpellCheck,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [props.spellCheckFn, props.useSpellCheck]
     );
-    const resolvedQuery = React10__default.useMemo(
+    const resolvedQuery = React9__default.useMemo(
       () => props.suggestFn ? _makeQueryFn(props.suggestFn) : props.useQuery,
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [props.suggestFn, props.useQuery]
@@ -8181,7 +8169,7 @@ var ContentEditorComponent = forwardRef(
     const onAnchorRef = (elem) => {
       if (elem) setFloatingAnchorElem(elem);
     };
-    const initialConfig = React10__default.useMemo(() => {
+    const initialConfig = React9__default.useMemo(() => {
       const config = {
         namespace: props.namespace ?? "",
         theme,
@@ -8271,7 +8259,7 @@ var ContentEditorComponent = forwardRef(
         previousOverLimitRef.current = isOverLimit;
       }
     }, [isOverLimit, wordCount, props.wordLimit, props.onWordLimitExceeded]);
-    const validationErrors = React10__default.useMemo(() => {
+    const validationErrors = React9__default.useMemo(() => {
       const errors = [];
       const custom = props.validationMessages ?? {};
       const { words, chars, images, links, tables } = metrics;