@tarviks/lexical-rich-editor 1.0.5 → 1.0.7

package/dist/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var utils = require('@lexical/utils');
-var React6 = require('react');
+var React9 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var LexicalComposerContext = require('@lexical/react/LexicalComposerContext');
 var useLexicalEditable = require('@lexical/react/useLexicalEditable');
@@ -50,7 +50,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
+var React9__namespace = /*#__PURE__*/_interopNamespace(React9);
 
 var __defProp = Object.defineProperty;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -84,12 +84,12 @@ var init_ImageResizer = __esm({
       setShowCaption,
       captionsEnabled
     }) => {
-      const controlWrapperRef = React6.useRef(null);
-      const userSelect = React6.useRef({
+      const controlWrapperRef = React9.useRef(null);
+      const userSelect = React9.useRef({
         priority: "",
         value: "default"
       });
-      const positioningRef = React6.useRef({
+      const positioningRef = React9.useRef({
         currentHeight: 0,
         currentWidth: 0,
         direction: 0,
@@ -420,15 +420,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] = React6.useState(null);
-      const [isLoadError, setIsLoadError] = React6.useState(false);
-      const [isResizing, setIsResizing] = React6.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 = React6.useRef(null);
-      const buttonRef = React6.useRef(null);
-      const imageRef = React6.useRef(null);
+      const activeEditorRef = React9.useRef(null);
+      const buttonRef = React9.useRef(null);
+      const imageRef = React9.useRef(null);
       const isEditable = useLexicalEditable.useLexicalEditable();
-      const $onDelete = React6.useCallback(
+      const $onDelete = React9.useCallback(
         (payload) => {
           const deleteSelection = lexical.$getSelection();
           if (isSelected && lexical.$isNodeSelection(deleteSelection)) {
@@ -444,7 +444,7 @@ var init_ImageComponent = __esm({
         },
         [isSelected]
       );
-      const $onEnter = React6.useCallback(
+      const $onEnter = React9.useCallback(
         (event) => {
           const latestSelection = lexical.$getSelection();
           const buttonElem = buttonRef.current;
@@ -464,7 +464,7 @@ var init_ImageComponent = __esm({
         },
         [caption, isSelected, showCaption]
       );
-      const $onEscape = React6.useCallback(
+      const $onEscape = React9.useCallback(
         (event) => {
           if (activeEditorRef.current === caption || buttonRef.current === event.target) {
             lexical.$setSelection(null);
@@ -481,7 +481,7 @@ var init_ImageComponent = __esm({
         },
         [caption, editor, setSelected]
       );
-      const onClick = React6.useCallback(
+      const onClick = React9.useCallback(
         (payload) => {
           const event = payload;
           if (isResizing) {
@@ -500,7 +500,7 @@ var init_ImageComponent = __esm({
         },
         [isResizing, isSelected, setSelected, clearSelection]
       );
-      const onRightClick = React6.useCallback(
+      const onRightClick = React9.useCallback(
         (event) => {
           editor.getEditorState().read(() => {
             const latestSelection = lexical.$getSelection();
@@ -515,7 +515,7 @@ var init_ImageComponent = __esm({
         },
         [editor]
       );
-      React6.useEffect(() => {
+      React9.useEffect(() => {
         const rootElement = editor.getRootElement();
         const unregister = utils.mergeRegister(
           editor.registerUpdateListener(({ editorState }) => {
@@ -614,7 +614,7 @@ var init_ImageComponent = __esm({
       };
       const draggable = isSelected && lexical.$isNodeSelection(selection) && !isResizing;
       const isFocused = (isSelected || isResizing) && isEditable;
-      return /* @__PURE__ */ jsxRuntime.jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { draggable, children: isLoadError ? /* @__PURE__ */ jsxRuntime.jsx(BrokenImage, {}) : /* @__PURE__ */ jsxRuntime.jsx(
           LazyImage,
           {
@@ -668,7 +668,7 @@ function parseDimFromStyleOrAttr(img3) {
 var ImageComponent2, isGoogleDocCheckboxImg, $convertImageElement, ImageNode, $createImageNode, $isImageNode;
 var init_ImageNode = __esm({
   "src/Nodes/ImageNode.tsx"() {
-    ImageComponent2 = React6__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";
     };
@@ -912,13 +912,13 @@ var init_InlineImageComponent = __esm({
     };
     InlineImageComponent = ({ src, altText, nodeKey, width, height, showCaption, caption, position }) => {
       const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-      const [selection, setSelection] = React6.useState(null);
-      const activeEditorRef = React6.useRef(null);
-      const imageRef = React6.useRef(null);
-      const buttonRef = React6.useRef(null);
+      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 = React6.useCallback(
+      const $onDelete = React9.useCallback(
         (payload) => {
           const deleteSelection = lexical.$getSelection();
           if (isSelected && lexical.$isNodeSelection(deleteSelection)) {
@@ -936,7 +936,7 @@ var init_InlineImageComponent = __esm({
         },
         [isSelected]
       );
-      const $onEnter = React6.useCallback(
+      const $onEnter = React9.useCallback(
         (event) => {
           const latestSelection = lexical.$getSelection();
           const buttonElem = buttonRef.current;
@@ -956,7 +956,7 @@ var init_InlineImageComponent = __esm({
         },
         [caption, isSelected, showCaption]
       );
-      const $onEscape = React6.useCallback(
+      const $onEscape = React9.useCallback(
         (event) => {
           if (activeEditorRef.current === caption || buttonRef.current === event.target) {
             lexical.$setSelection(null);
@@ -973,7 +973,7 @@ var init_InlineImageComponent = __esm({
         },
         [caption, editor, setSelected]
       );
-      React6.useEffect(() => {
+      React9.useEffect(() => {
         let isMounted = true;
         const unregister = utils.mergeRegister(
           editor.registerUpdateListener(({ editorState }) => {
@@ -1050,7 +1050,7 @@ var init_InlineImageComponent = __esm({
       ]);
       const draggable = isSelected && lexical.$isNodeSelection(selection);
       const isFocused = isSelected && isEditable;
-      return /* @__PURE__ */ jsxRuntime.jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx("span", { draggable, children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx(React9.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx("span", { draggable, children: /* @__PURE__ */ jsxRuntime.jsx(
         LazyImage2,
         {
           className: isFocused ? `focused ${lexical.$isNodeSelection(selection) ? "draggable" : ""}` : null,
@@ -1069,7 +1069,7 @@ var init_InlineImageComponent = __esm({
 var InlineImageComponent2, $convertInlineImageElement, InlineImageNode, $createInlineImageNode, $isInlineImageNode;
 var init_InlineImageNode = __esm({
   "src/Nodes/InlineImageNode.tsx"() {
-    InlineImageComponent2 = React6__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;
@@ -1364,7 +1364,7 @@ init_InlineImageNode();
 var PageBreakComponent = ({ nodeKey }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection.useLexicalNodeSelection(nodeKey);
-  const $onDelete = React6.useCallback(
+  const $onDelete = React9.useCallback(
     (event) => {
       event.preventDefault();
       const deleteSelection = lexical.$getSelection();
@@ -1379,7 +1379,7 @@ var PageBreakComponent = ({ nodeKey }) => {
     },
     [isSelected]
   );
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.CLICK_COMMAND,
@@ -1408,7 +1408,7 @@ var PageBreakComponent = ({ nodeKey }) => {
       )
     );
   }, [clearSelection, editor, isSelected, nodeKey, $onDelete, setSelected]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const pbElem = editor.getElementByKey(nodeKey);
     if (pbElem !== null) {
       pbElem.className = isSelected ? "selected" : "";
@@ -1550,7 +1550,7 @@ function VideoResizer({
   onResizeStart,
   onResizeEnd
 }) {
-  const resizeState = React6__namespace.useRef(null);
+  const resizeState = React9__namespace.useRef(null);
   const startResize = (e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1643,9 +1643,9 @@ function YouTubeComponent({
   height,
   editor
 }) {
-  const containerRef = React6__namespace.useRef(null);
-  const [isHovered, setIsHovered] = React6__namespace.useState(false);
-  const [isResizing, setIsResizing] = React6__namespace.useState(false);
+  const containerRef = React9__namespace.useRef(null);
+  const [isHovered, setIsHovered] = React9__namespace.useState(false);
+  const [isResizing, setIsResizing] = React9__namespace.useState(false);
   const handleDelete = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1905,13 +1905,13 @@ function AutocompletePlugin({
   prefixWindow = 300
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const ghostKeyRef = React6__namespace.useRef(null);
-  const idleTimerRef = React6__namespace.useRef(null);
-  const inflightRef = React6__namespace.useRef(null);
-  const reqCounterRef = React6__namespace.useRef(0);
-  const lastTriggerRef = React6__namespace.useRef("");
-  const lastShownCtxRef = React6__namespace.useRef("");
-  const clearGhost = React6__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;
@@ -1923,7 +1923,7 @@ function AutocompletePlugin({
       { tag: "autocomplete-ghost" }
     );
   }, [editor]);
-  const upsertGhost = React6__namespace.useCallback(
+  const upsertGhost = React9__namespace.useCallback(
     (text, insertAtCharOffset) => {
       editor.update(
         () => {
@@ -1987,12 +1987,12 @@ function AutocompletePlugin({
     },
     [editor]
   );
-  const cancelInflight = React6__namespace.useCallback(() => {
+  const cancelInflight = React9__namespace.useCallback(() => {
     if (!inflightRef.current) return;
     inflightRef.current.dismiss();
     inflightRef.current = null;
   }, []);
-  const resetIdleTimer = React6__namespace.useCallback(
+  const resetIdleTimer = React9__namespace.useCallback(
     (callback) => {
       if (idleTimerRef.current) {
         clearTimeout(idleTimerRef.current);
@@ -2007,7 +2007,7 @@ function AutocompletePlugin({
     },
     [idleMs, cancelInflight, clearGhost]
   );
-  const fireQuery = React6__namespace.useCallback(() => {
+  const fireQuery = React9__namespace.useCallback(() => {
     if (!useQuery || isReadOnly) return;
     let context = "";
     let prefix = "";
@@ -2079,7 +2079,7 @@ function AutocompletePlugin({
     upsertGhost,
     onSuggestionShown
   ]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (tags.has("history-merge") || tags.has("collaboration")) return;
@@ -2088,7 +2088,7 @@ function AutocompletePlugin({
       resetIdleTimer(fireQuery);
     });
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerCommand(
       lexical.SELECTION_CHANGE_COMMAND,
@@ -2112,7 +2112,7 @@ function AutocompletePlugin({
       lexical.COMMAND_PRIORITY_LOW
     );
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DOWN_COMMAND,
       (e) => {
@@ -2153,7 +2153,7 @@ function AutocompletePlugin({
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor, clearGhost, onSuggestionAccept, prefixWindow]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return () => {
       cancelInflight();
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -2165,8 +2165,8 @@ function clamp2(n, min, max) {
   return Math.max(min, Math.min(max, n));
 }
 function useFloatingPortalContainer(editor) {
-  const [container, setContainer] = React6.useState(null);
-  React6.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;
@@ -2204,22 +2204,22 @@ function FloatingCharacterStylesEditor({
   isEditable,
   readOnly
 }) {
-  const popupRef = React6.useRef(null);
-  const mouseDownRef = React6.useRef(false);
+  const popupRef = React9.useRef(null);
+  const mouseDownRef = React9.useRef(false);
   const theme2 = react.useTheme();
   const disabled = !(isEditable ?? editor.isEditable()) || !!readOnly;
-  const format = React6.useCallback(
+  const format = React9.useCallback(
     (type) => {
       if (disabled) return;
       editor.dispatchCommand(lexical.FORMAT_TEXT_COMMAND, type);
     },
     [editor, disabled]
   );
-  const toggleLink = React6.useCallback(() => {
+  const toggleLink = React9.useCallback(() => {
     if (disabled) return;
     editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, isLink ? null : "https://");
   }, [editor, disabled, isLink]);
-  const updatePosition = React6.useCallback(() => {
+  const updatePosition = React9.useCallback(() => {
     const popupEl = popupRef.current;
     if (!popupEl) return;
     const sel = window.getSelection();
@@ -2235,7 +2235,7 @@ function FloatingCharacterStylesEditor({
     }
     popupEl.classList.add("is-open");
   }, [editor]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const onResize = () => editor.getEditorState().read(updatePosition);
     const onScroll = () => editor.getEditorState().read(updatePosition);
     const root = editor.getRootElement();
@@ -2248,7 +2248,7 @@ function FloatingCharacterStylesEditor({
       root?.removeEventListener("scroll", onScroll);
     };
   }, [editor, updatePosition]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     editor.getEditorState().read(updatePosition);
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
@@ -2419,18 +2419,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] = React6.useState(false);
-  const [isLink, setIsLink] = React6.useState(false);
-  const [isBold, setIsBold] = React6.useState(false);
-  const [isItalic, setIsItalic] = React6.useState(false);
-  const [isUnderline, setIsUnderline] = React6.useState(false);
-  const [isStrikethrough, setIsStrikethrough] = React6.useState(false);
-  const [isSubscript, setIsSubscript] = React6.useState(false);
-  const [isSuperscript, setIsSuperscript] = React6.useState(false);
-  const [isCode, setIsCode] = React6.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 = React6.useCallback(() => {
+  const updatePopupState = React9.useCallback(() => {
     editor.getEditorState().read(() => {
       const selection = lexical.$getSelection();
       const nativeSelection = window.getSelection();
@@ -2457,11 +2457,11 @@ function useCharacterStylesPopup(editor, opts) {
       }
     });
   }, [editor]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     document.addEventListener("selectionchange", updatePopupState);
     return () => document.removeEventListener("selectionchange", updatePopupState);
   }, [updatePopupState]);
-  React6.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(
@@ -2489,10 +2489,10 @@ function CharacterStylesPopupPlugin(props) {
 }
 var CustomOnChangePlugin = ({ value, onChange }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const initializedRef = React6.useRef(false);
-  const onChangeRef = React6.useRef(onChange);
+  const initializedRef = React9.useRef(false);
+  const onChangeRef = React9.useRef(onChange);
   onChangeRef.current = onChange;
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!value || initializedRef.current) return;
     initializedRef.current = true;
     editor.update(() => {
@@ -2505,7 +2505,7 @@ var CustomOnChangePlugin = ({ value, onChange }) => {
       lexical.$setSelection(null);
     });
   }, [editor, value]);
-  const handleChange = React6.useCallback((editorState) => {
+  const handleChange = React9.useCallback((editorState) => {
     editorState.read(() => {
       onChangeRef.current(html.$generateHtmlFromNodes(editor));
     });
@@ -2580,12 +2580,12 @@ var preventDefault = (event) => {
   event.preventDefault();
 };
 var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMode, setIsLinkEditMode }) => {
-  const [editedLinkUrl, setEditedLinkUrl] = React6.useState("https://");
-  const [lastSelection, setLastSelection] = React6.useState(null);
-  const [linkUrl, setLinkUrl] = React6.useState("");
-  const editorRef = React6.useRef(null);
-  const inputRef = React6.useRef(null);
-  const $updateLinkEditor = React6.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);
@@ -2625,7 +2625,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
     }
     return true;
   }, [anchorElem, editor, setIsLinkEditMode, isLinkEditMode, linkUrl]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const scrollerElem = anchorElem.parentElement;
     const update = () => {
       editor.getEditorState().read(() => {
@@ -2643,7 +2643,7 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       }
     };
   }, [anchorElem.parentElement, editor, $updateLinkEditor]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => {
@@ -2671,12 +2671,12 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
       )
     );
   }, [editor, $updateLinkEditor, setIsLink, isLink]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     editor.getEditorState().read(() => {
       $updateLinkEditor();
     });
   }, [editor, $updateLinkEditor]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (isLinkEditMode && inputRef.current) {
       inputRef.current.focus();
     }
@@ -2794,9 +2794,9 @@ var FloatingLinkEditor = ({ editor, isLink, setIsLink, anchorElem, isLinkEditMod
   ] }) });
 };
 var useFloatingLinkEditorToolbar = (editor, anchorElem, isLinkEditMode, setIsLinkEditMode) => {
-  const [activeEditor, setActiveEditor] = React6.useState(editor);
-  const [isLink, setIsLink] = React6.useState(false);
-  React6.useEffect(() => {
+  const [activeEditor, setActiveEditor] = React9.useState(editor);
+  const [isLink, setIsLink] = React9.useState(false);
+  React9.useEffect(() => {
     function $updateToolbar() {
       const selection = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection)) {
@@ -2896,8 +2896,8 @@ var InsertImageByURL = ({
   onClick,
   disabled
 }) => {
-  const [altText, setAltText] = React6.useState("");
-  const [src, setSrc] = React6.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", orientation: "horizontal", size: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2951,15 +2951,15 @@ var InsertImageDialog = ({
   activeEditor,
   disabled
 }) => {
-  const [src, setSrc] = React6.useState("");
-  const [altText, setAltText] = React6.useState("");
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [selectedValue, setSelectedValue] = React6.useState("Upload");
-  const [fileName, setFileName] = React6.useState("");
-  const hasModifier = React6.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 hasModifier = React9.useRef(false);
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const isDisabled = disabled || src === "";
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     hasModifier.current = false;
     const handler = (e) => {
       hasModifier.current = e.altKey;
@@ -3103,7 +3103,7 @@ var InsertImageDialog = ({
 };
 var ImagesPlugin = ({ captionsEnabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!editor.hasNodes([ImageNode])) {
       throw new Error("ImagesPlugin: ImageNode not registered on editor");
     }
@@ -3267,12 +3267,12 @@ var InsertInlineImageDialog = ({
   disabled,
   activeEditor
 }) => {
-  const hasModifier = React6.useRef(false);
-  const [src, setSrc] = React6.useState("");
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [altText, setAltText] = React6.useState("");
-  const [fileName, setFileName] = React6.useState("");
-  const [position, setPosition] = React6.useState("left");
+  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 styles = useStyles();
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const isDisabled = disabled || src === "";
@@ -3289,7 +3289,7 @@ var InsertInlineImageDialog = ({
     };
     reader.readAsDataURL(files[0]);
   };
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const handler = (e) => {
       hasModifier.current = e.altKey;
     };
@@ -3443,7 +3443,7 @@ var InsertInlineImageDialog = ({
 };
 var InlineImagePlugin = () => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!editor.hasNodes([InlineImageNode])) {
       throw new Error("ImagesPlugin: ImageNode not registered on editor");
     }
@@ -3567,7 +3567,7 @@ var getDragSelection2 = (event) => {
 var INSERT_PAGE_BREAK = lexical.createCommand();
 function PageBreakPlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!editor.hasNodes([PageBreakNode])) {
       throw new Error(
         "PageBreakPlugin: PageBreakNode is not registered on editor"
@@ -3845,7 +3845,7 @@ function RefApiPlugin({
   setRefErrors
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useImperativeHandle(
+  React9.useImperativeHandle(
     forwardedRef,
     () => ({
       setValue: (html$1) => {
@@ -4031,28 +4031,28 @@ function SpellPopover({
   onImprove,
   onAcceptGrammar
 }) {
-  const ref = React6__namespace.useRef(null);
+  const ref = React9__namespace.useRef(null);
   const type = state.issue.type ?? "spelling";
-  const [pos, setPos] = React6__namespace.useState({ left: state.x, top: state.y });
-  React6__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]);
-  React6__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]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     const h = () => onClose();
     window.addEventListener("scroll", h, { capture: true, passive: true });
     return () => window.removeEventListener("scroll", h, true);
   }, [onClose]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -4169,17 +4169,17 @@ function SpellCheckPlugin({
   enabled = true
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const timerRef = React6__namespace.useRef(null);
-  const dismissRef = React6__namespace.useRef(null);
-  const reqIdRef = React6__namespace.useRef(0);
-  const lastTextRef = React6__namespace.useRef("");
-  const applyingRef = React6__namespace.useRef(false);
-  const grammarCorrectionRef = React6__namespace.useRef(void 0);
-  const [popover, setPopover] = React6__namespace.useState(null);
-  React6__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 = React6__namespace.useCallback(() => {
+  const clearErrors = React9__namespace.useCallback(() => {
     setPopover(null);
     grammarCorrectionRef.current = void 0;
     applyingRef.current = true;
@@ -4195,7 +4195,7 @@ function SpellCheckPlugin({
       }
     );
   }, [editor]);
-  const applyIssues = React6__namespace.useCallback(
+  const applyIssues = React9__namespace.useCallback(
     (issues, improvedText, trimOffset = 0) => {
       let savedCharOffset = -1;
       editor.getEditorState().read(() => {
@@ -4338,7 +4338,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     let currentRoot = null;
     const onClick = (e) => {
       const span = e.target.closest("[data-spell-offset]");
@@ -4382,7 +4382,7 @@ function SpellCheckPlugin({
       if (currentRoot) currentRoot.removeEventListener("click", onClick);
     };
   }, [editor]);
-  const handleAccept = React6__namespace.useCallback(
+  const handleAccept = React9__namespace.useCallback(
     (replacement, nodeKey) => {
       let original = "";
       editor.getEditorState().read(() => {
@@ -4408,7 +4408,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept, popover]
   );
-  const handleDismiss = React6__namespace.useCallback(
+  const handleDismiss = React9__namespace.useCallback(
     (nodeKey) => {
       editor.update(
         () => {
@@ -4422,7 +4422,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  const handleImprove = React6__namespace.useCallback(
+  const handleImprove = React9__namespace.useCallback(
     (text) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -4442,7 +4442,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  const handleAcceptGrammar = React6__namespace.useCallback(
+  const handleAcceptGrammar = React9__namespace.useCallback(
     (corrected) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -4462,7 +4462,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (!enabled || !useSpellCheck) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (applyingRef.current) return;
@@ -4500,13 +4500,13 @@ function SpellCheckPlugin({
       }, idleMs);
     });
   }, [editor, useSpellCheck, enabled, idleMs, applyIssues, clearErrors]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (!enabled) {
       clearErrors();
       lastTextRef.current = "";
     }
   }, [enabled, clearErrors]);
-  React6__namespace.useEffect(
+  React9__namespace.useEffect(
     () => () => {
       dismissRef.current?.();
       if (timerRef.current) clearTimeout(timerRef.current);
@@ -4527,10 +4527,10 @@ function SpellCheckPlugin({
 }
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isInTable, setIsInTable] = React6__namespace.useState(false);
-  const [anchorRect, setAnchorRect] = React6__namespace.useState(null);
-  const [open, setOpen] = React6__namespace.useState(false);
-  const updateFromSelection = React6__namespace.useCallback(() => {
+  const [isInTable, setIsInTable] = React9__namespace.useState(false);
+  const [anchorRect, setAnchorRect] = React9__namespace.useState(null);
+  const [open, setOpen] = React9__namespace.useState(false);
+  const updateFromSelection = React9__namespace.useCallback(() => {
     const root = editor.getRootElement();
     if (!root) return;
     editor.getEditorState().read(() => {
@@ -4568,7 +4568,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       setAnchorRect(cellDom.getBoundingClientRect());
     });
   }, [editor]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return utils.mergeRegister(
       editor.registerCommand(
         lexical.SELECTION_CHANGE_COMMAND,
@@ -4583,7 +4583,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       })
     );
   }, [editor, updateFromSelection]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DOWN_COMMAND,
       (event) => {
@@ -4624,11 +4624,11 @@ function TableActionMenuPlugin({ disabled = false }) {
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor, disabled]);
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     if (!isInTable && open) setOpen(false);
   }, [isInTable, open]);
   const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React6__namespace.useMemo(() => {
+  const handleStyle = React9__namespace.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
     const left = Math.max(8, anchorRect.right - 34);
@@ -4642,7 +4642,7 @@ function TableActionMenuPlugin({ disabled = false }) {
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
-  const run = React6__namespace.useCallback(
+  const run = React9__namespace.useCallback(
     (fn) => {
       if (disabled) return;
       editor.focus();
@@ -4737,17 +4737,17 @@ function TableCellResizer({
   editor,
   anchorElem
 }) {
-  const targetRef = React6.useRef(null);
-  const resizerRef = React6.useRef(null);
-  const tableRectRef = React6.useRef(null);
-  const mouseStartPosRef = React6.useRef(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = React6.useState(null);
-  const [activeCell, updateActiveCell] = React6.useState(null);
-  const [isSelectingGrid, updateIsSelectingGrid] = React6.useState(false);
-  const [draggingDirection, updateDraggingDirection] = React6.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
   );
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       lexical.SELECTION_CHANGE_COMMAND,
       () => {
@@ -4770,7 +4770,7 @@ function TableCellResizer({
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor]);
-  const resetState = React6.useCallback(() => {
+  const resetState = React9.useCallback(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -4778,7 +4778,7 @@ function TableCellResizer({
     tableRectRef.current = null;
     updateMouseCurrentPos(null);
   }, []);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const onMouseMove = (event) => {
       if (draggingDirection) {
         updateMouseCurrentPos({ x: event.clientX, y: event.clientY });
@@ -4822,7 +4822,7 @@ function TableCellResizer({
     };
   }, [activeCell, draggingDirection, editor, resetState, anchorElem]);
   const isHeightChanging = (direction) => direction === "bottom";
-  const updateRowHeight = React6.useCallback(
+  const updateRowHeight = React9.useCallback(
     (newHeight) => {
       if (!activeCell) return;
       editor.update(() => {
@@ -4839,7 +4839,7 @@ function TableCellResizer({
     },
     [activeCell, editor]
   );
-  const updateColumnWidth = React6.useCallback(
+  const updateColumnWidth = React9.useCallback(
     (newWidth) => {
       if (!activeCell) return;
       editor.update(() => {
@@ -4861,7 +4861,7 @@ function TableCellResizer({
     },
     [activeCell, editor]
   );
-  const toggleResize = React6.useCallback(
+  const toggleResize = React9.useCallback(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -4892,7 +4892,7 @@ function TableCellResizer({
     },
     [activeCell, draggingDirection, resetState, updateColumnWidth, updateRowHeight]
   );
-  const getResizers = React6.useCallback(() => {
+  const getResizers = React9.useCallback(() => {
     const empty = { bottom: {}, right: {} };
     if (!activeCell) return empty;
     const cellRect = activeCell.elem.getBoundingClientRect();
@@ -4967,7 +4967,7 @@ function TableCellResizerPlugin({
   anchorElem
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  return React6.useMemo(
+  return React9.useMemo(
     () => reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(TableCellResizer, { editor, anchorElem }), anchorElem),
     [editor, anchorElem]
   );
@@ -5106,11 +5106,12 @@ var hsvToRgb = (h, s, v) => {
     b: Math.round((bb + m) * 255)
   };
 };
-function useDrag(onMove, onEnd) {
-  const draggingRef = React6__namespace.useRef(false);
-  const start = React6__namespace.useCallback(
+function useDrag(onMove, onEnd, interactingRef) {
+  const draggingRef = React9__namespace.useRef(false);
+  const start = React9__namespace.useCallback(
     (e) => {
       draggingRef.current = true;
+      if (interactingRef) interactingRef.current = true;
       onMove(e.clientX, e.clientY);
       const move = (ev) => {
         if (!draggingRef.current) return;
@@ -5120,24 +5121,66 @@ function useDrag(onMove, onEnd) {
         draggingRef.current = false;
         window.removeEventListener("mousemove", move);
         window.removeEventListener("mouseup", up);
+        if (interactingRef) {
+          const clearFlag = () => {
+            interactingRef.current = false;
+          };
+          window.addEventListener("click", clearFlag, { once: true });
+          setTimeout(() => {
+            window.removeEventListener("click", clearFlag);
+            interactingRef.current = false;
+          }, 0);
+        }
       };
       window.addEventListener("mousemove", move);
       window.addEventListener("mouseup", up);
     },
-    [onMove, onEnd]
+    [onMove, onEnd, interactingRef]
   );
   return start;
 }
 var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
-  const [open, setOpen] = React6__namespace.useState(false);
-  const btnRef = React6__namespace.useRef(null);
-  const [hex, setHex] = React6__namespace.useState(normalizeHex(value || "#000000"));
-  const { r, g, b } = React6__namespace.useMemo(() => hexToRgb(hex), [hex]);
-  const hsv = React6__namespace.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
-  const [h, setH] = React6__namespace.useState(hsv.h);
-  const [s, setS] = React6__namespace.useState(hsv.s);
-  const [v, setV] = React6__namespace.useState(hsv.v);
-  React6__namespace.useEffect(() => {
+  const [open, setOpen] = React9__namespace.useState(false);
+  const btnRef = React9__namespace.useRef(null);
+  const interactingRef = React9__namespace.useRef(false);
+  const handleDismiss = React9__namespace.useCallback(() => setOpen(false), []);
+  const preventDismissOnEvent = React9__namespace.useCallback(
+    (ev) => {
+      if (interactingRef.current) return true;
+      return ev.type !== "click";
+    },
+    []
+  );
+  const [, forceReposition] = React9__namespace.useState(0);
+  React9__namespace.useEffect(() => {
+    if (!open) return;
+    let rafId = null;
+    const reposition = () => {
+      if (rafId != null) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        forceReposition((n) => n + 1);
+      });
+    };
+    window.addEventListener("scroll", reposition, true);
+    window.addEventListener("resize", reposition);
+    return () => {
+      if (rafId != null) cancelAnimationFrame(rafId);
+      window.removeEventListener("scroll", reposition, true);
+      window.removeEventListener("resize", reposition);
+    };
+  }, [open]);
+  const [hex, setHex] = React9__namespace.useState(normalizeHex(value || "#000000"));
+  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 wasOpenRef = React9__namespace.useRef(open);
+  React9__namespace.useEffect(() => {
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!justOpened) return;
     const n = normalizeHex(value || "#000000");
     setHex(n);
     const rgb = hexToRgb(n);
@@ -5145,8 +5188,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     setH(next.h);
     setS(next.s);
     setV(next.v);
-  }, [value]);
-  const commitHsv = React6__namespace.useCallback(
+  }, [value, open]);
+  const commitHsv = React9__namespace.useCallback(
     (hh, ss, vv, close) => {
       const rgb = hsvToRgb(hh, ss, vv);
       const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
@@ -5156,8 +5199,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     },
     [onChange]
   );
-  const svRef = React6__namespace.useRef(null);
-  const onSVMove = React6__namespace.useCallback(
+  const svRef = React9__namespace.useRef(null);
+  const onSVMove = React9__namespace.useCallback(
     (clientX, clientY) => {
       if (!svRef.current) return;
       const rect = svRef.current.getBoundingClientRect();
@@ -5171,9 +5214,9 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     },
     [h, commitHsv]
   );
-  const startSV = useDrag(onSVMove);
-  const hueRef = React6__namespace.useRef(null);
-  const onHueMove = React6__namespace.useCallback(
+  const startSV = useDrag(onSVMove, void 0, interactingRef);
+  const hueRef = React9__namespace.useRef(null);
+  const onHueMove = React9__namespace.useCallback(
     (clientX) => {
       if (!hueRef.current) return;
       const rect = hueRef.current.getBoundingClientRect();
@@ -5184,10 +5227,10 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     },
     [s, v, commitHsv]
   );
-  const startHue = useDrag((x) => onHueMove(x));
-  const svThumb = React6__namespace.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
-  const hueThumb = React6__namespace.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
-  const hueColor = React6__namespace.useMemo(() => {
+  const startHue = useDrag((x) => onHueMove(x), void 0, interactingRef);
+  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]);
@@ -5233,10 +5276,11 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
       react.Callout,
       {
         target: btnRef,
-        onDismiss: () => setOpen(false),
+        onDismiss: handleDismiss,
         setInitialFocus: true,
         directionalHint: 4,
         className: "aoColorCallout",
+        preventDismissOnEvent,
         children: /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { tokens: { childrenGap: 10 }, styles: { root: { padding: 12, width: 320 } }, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexRow", children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSwatch", style: { background: hex } }),
@@ -5308,8 +5352,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
 };
 var ColorPickerPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [{ color, bgColor }, setColors] = React6__namespace.default.useState({ color: "#000000", bgColor: "#ffffff" });
-  const lastRangeSelectionRef = React6__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)) {
@@ -5319,7 +5363,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       setColors({ color: c, bgColor: bg });
     }
   };
-  React6__namespace.default.useEffect(() => {
+  React9__namespace.default.useEffect(() => {
     return utils.mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => updateToolbar());
@@ -5408,9 +5452,9 @@ var FONT_FAMILY_OPTIONS = [
 var FontFamilyPlugin = ({ disabled = false }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const styles = useStyles2();
-  const [fontFamily, setFontFamily] = React6.useState("");
+  const [fontFamily, setFontFamily] = React9.useState("");
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const readFontFamily = () => {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
@@ -5432,7 +5476,7 @@ var FontFamilyPlugin = ({ disabled = false }) => {
       )
     );
   }, [editor]);
-  const handleClick = React6.useCallback(
+  const handleClick = React9.useCallback(
     (option) => {
       if (disabled) return;
       editor.update(() => {
@@ -5535,9 +5579,9 @@ var useStyles3 = reactComponents.makeStyles({
 var FontSizePlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const styles = useStyles3();
-  const [fontSize2, setFontSize] = React6__namespace.useState(String(DEFAULT_FONT_SIZE));
+  const [fontSize2, setFontSize] = React9__namespace.useState(String(DEFAULT_FONT_SIZE));
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React6__namespace.useEffect(() => {
+  React9__namespace.useEffect(() => {
     const readFontSize = () => {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
@@ -5615,9 +5659,9 @@ var FontSizePlugin = ({ disabled }) => {
 };
 var InsertLinkPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [text, setText] = React6.useState("");
-  const [link$1, setLink] = React6.useState("");
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [text, setText] = React9.useState("");
+  const [link$1, setLink] = React9.useState("");
   const iconColor = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
   const insertLink = (text2, link2) => {
     if (disabled) return;
@@ -5715,9 +5759,9 @@ var InsertLinkPlugin = ({ disabled }) => {
 };
 var TableItemPlugin = ({ disabled }) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  const [columns, setColumns] = React6.useState("");
-  const [rows, setRows] = React6.useState("");
-  const [isOpen, setIsOpen] = React6.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;
@@ -5822,8 +5866,8 @@ var TableItemPlugin = ({ disabled }) => {
   );
 };
 var YoutubeUploadPlugin = ({ disabled }) => {
-  const [url, setURL] = React6.useState("");
-  const [isOpen, setIsOpen] = React6.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 = () => {
@@ -5942,22 +5986,22 @@ var ToolBarPlugins = (props) => {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
   const theme2 = react.useTheme();
   const styles = useStyles4();
-  const [selectNodeType, setSelectNodeType] = React6.useState("paragraph");
-  const [isEditable, setIsEditable] = React6.useState(() => editor.isEditable());
-  const [isBold, setIsBold] = React6.useState(false);
-  const [isItalic, setIsItalic] = React6.useState(false);
-  const [isUnderline, setIsUnderline] = React6.useState(false);
-  const [isStrikethrough, setIsStrikethrough] = React6.useState(false);
-  const [isSuperscript, setIsSuperscript] = React6.useState(false);
-  const [isSubscript, setIsSubscript] = React6.useState(false);
-  const [isHighlight, setIsHighlight] = React6.useState(false);
-  const [isUppercase, setIsUppercase] = React6.useState(false);
-  const [isLowercase, setIsLowercase] = React6.useState(false);
-  const [isCapitalize, setIsCapitalize] = React6.useState(false);
-  const [alignment, setAlignment] = React6.useState("left");
-  const lastSelectionRef = React6__namespace.default.useRef(null);
+  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 lastSelectionRef = React9__namespace.default.useRef(null);
   const presetGroups = getToolbarGroupsByLevel(props.level);
-  const pluginGroups = React6.useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
+  const pluginGroups = React9.useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
     const selection = lexical.$getSelection();
     if (!lexical.$isRangeSelection(selection)) {
@@ -6009,7 +6053,7 @@ var ToolBarPlugins = (props) => {
       ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "quote", "code"].includes(type) ? type : "paragraph"
     );
   };
-  const applyToBlock = React6__namespace.default.useCallback(
+  const applyToBlock = React9__namespace.default.useCallback(
     (fn) => {
       editor.update(() => {
         const saved = lastSelectionRef.current;
@@ -6029,7 +6073,7 @@ var ToolBarPlugins = (props) => {
       }
     });
   };
-  React6__namespace.default.useEffect(() => {
+  React9__namespace.default.useEffect(() => {
     return utils.mergeRegister(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6490,7 +6534,7 @@ var ToolBarPlugins = (props) => {
         padding: "0px",
         minHeight: 36
       },
-      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsx(React6__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 {
@@ -6509,7 +6553,7 @@ function isYoutubeLikeNode(node) {
 }
 function YoutubeDeletePlugin() {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const removeIfYoutubeAtCursor = (direction) => {
       const selection = lexical.$getSelection();
       if (!lexical.$isRangeSelection(selection)) return false;
@@ -6541,7 +6585,7 @@ function YoutubeDeletePlugin() {
       lexical.COMMAND_PRIORITY_HIGH
     );
   }, [editor]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       lexical.KEY_DELETE_COMMAND,
       () => {
@@ -6630,14 +6674,14 @@ var theme = {
 };
 function ReadOnlyPlugin({ readonly }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     editor.setEditable(!readonly);
   }, [editor, readonly]);
   return null;
 }
 function BrowserSpellCheckPlugin({ enabled }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const el = editor.getRootElement();
     if (!el) return;
     el.spellcheck = enabled;
@@ -6650,7 +6694,7 @@ function BrowserSpellCheckPlugin({ enabled }) {
 }
 function WordCountPlugin({ onCountChange }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         const text = lexical.$getRoot().getTextContent();
@@ -6663,7 +6707,7 @@ function WordCountPlugin({ onCountChange }) {
 }
 function CharCountPlugin({ onCountChange }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerUpdateListener(({ editorState }) => {
       editorState.read(() => {
         onCountChange(lexical.$getRoot().getTextContent().length);
@@ -6679,7 +6723,7 @@ function FocusEventsPlugin({
   containerRef
 }) {
   const [editor] = LexicalComposerContext.useLexicalComposerContext();
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const root = editor.getRootElement();
     if (!root) return;
     const handleFocusIn = () => {
@@ -6800,33 +6844,33 @@ function _makeQueryFn(fn) {
     };
   };
 }
-var ContentEditorComponent = React6.forwardRef(
+var ContentEditorComponent = React9.forwardRef(
   (props, ref) => {
     const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React6__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 = React6__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] = React6.useState(null);
-    const [isLinkEditMode, setIsLinkEditMode] = React6.useState(false);
-    const [wordCount, setWordCount] = React6.useState(0);
-    const handleWordCount = React6.useCallback((count) => setWordCount(count), []);
-    const [charCount, setCharCount] = React6.useState(0);
-    const handleCharCount = React6.useCallback((count) => setCharCount(count), []);
-    const [refErrors, setRefErrors] = React6.useState([]);
-    const contentEditableDomRef = React6.useRef(null);
-    const previousOverLimitRef = React6.useRef(false);
-    const focusedRef = React6.useRef(false);
+    const [floatingAnchorElem, setFloatingAnchorElem] = React9.useState(null);
+    const [isLinkEditMode, setIsLinkEditMode] = React9.useState(false);
+    const [wordCount, setWordCount] = React9.useState(0);
+    const handleWordCount = React9.useCallback((count) => setWordCount(count), []);
+    const [charCount, setCharCount] = React9.useState(0);
+    const handleCharCount = React9.useCallback((count) => setCharCount(count), []);
+    const [refErrors, setRefErrors] = React9.useState([]);
+    const contentEditableDomRef = React9.useRef(null);
+    const previousOverLimitRef = React9.useRef(false);
+    const focusedRef = React9.useRef(false);
     const setFocused = (focused) => {
       focusedRef.current = focused;
     };
-    const containerRef = React6.useRef(null);
+    const containerRef = React9.useRef(null);
     const onAnchorRef = (elem) => {
       if (elem) setFloatingAnchorElem(elem);
     };
@@ -6899,7 +6943,7 @@ var ContentEditorComponent = React6.forwardRef(
         e.stopPropagation();
       }
     };
-    const [touched, setTouched] = React6.useState(false);
+    const [touched, setTouched] = React9.useState(false);
     const isOverLimit = props.wordLimit !== void 0 && wordCount > props.wordLimit;
     const internalErrors = [];
     if (isOverLimit) {
@@ -6934,7 +6978,7 @@ var ContentEditorComponent = React6.forwardRef(
     const allErrors = [...internalErrors, ...props.errors ?? [], ...refErrors];
     const hasErrors = allErrors.length > 0;
     const hasRedBorder = hasErrors;
-    React6.useEffect(() => {
+    React9.useEffect(() => {
       if (props.wordLimit === void 0 || !props.onWordLimitExceeded) return;
       const wasOverLimit = previousOverLimitRef.current;
       if (isOverLimit !== wasOverLimit) {