@tarviks/lexical-rich-editor 1.0.6 → 1.0.7

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { mergeRegister, $wrapNodeInElement, $insertNodeToNearestRoot, $getNearestNodeOfType, $findMatchingParent as $findMatchingParent$1, calculateZoomLevel } from '@lexical/utils';
-import * as React6 from 'react';
-import React6__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';
@@ -647,7 +647,7 @@ function parseDimFromStyleOrAttr(img3) {
 var ImageComponent2, isGoogleDocCheckboxImg, $convertImageElement, ImageNode, $createImageNode, $isImageNode;
 var init_ImageNode = __esm({
   "src/Nodes/ImageNode.tsx"() {
-    ImageComponent2 = React6.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";
     };
@@ -1048,7 +1048,7 @@ var init_InlineImageComponent = __esm({
 var InlineImageComponent2, $convertInlineImageElement, InlineImageNode, $createInlineImageNode, $isInlineImageNode;
 var init_InlineImageNode = __esm({
   "src/Nodes/InlineImageNode.tsx"() {
-    InlineImageComponent2 = React6.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;
@@ -1529,7 +1529,7 @@ function VideoResizer({
   onResizeStart,
   onResizeEnd
 }) {
-  const resizeState = React6.useRef(null);
+  const resizeState = React9.useRef(null);
   const startResize = (e, dir) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1622,9 +1622,9 @@ function YouTubeComponent({
   height,
   editor
 }) {
-  const containerRef = React6.useRef(null);
-  const [isHovered, setIsHovered] = React6.useState(false);
-  const [isResizing, setIsResizing] = React6.useState(false);
+  const containerRef = React9.useRef(null);
+  const [isHovered, setIsHovered] = React9.useState(false);
+  const [isResizing, setIsResizing] = React9.useState(false);
   const handleDelete = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1884,13 +1884,13 @@ function AutocompletePlugin({
   prefixWindow = 300
 }) {
   const [editor] = useLexicalComposerContext();
-  const ghostKeyRef = React6.useRef(null);
-  const idleTimerRef = React6.useRef(null);
-  const inflightRef = React6.useRef(null);
-  const reqCounterRef = React6.useRef(0);
-  const lastTriggerRef = React6.useRef("");
-  const lastShownCtxRef = React6.useRef("");
-  const clearGhost = React6.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;
@@ -1902,7 +1902,7 @@ function AutocompletePlugin({
       { tag: "autocomplete-ghost" }
     );
   }, [editor]);
-  const upsertGhost = React6.useCallback(
+  const upsertGhost = React9.useCallback(
     (text, insertAtCharOffset) => {
       editor.update(
         () => {
@@ -1966,12 +1966,12 @@ function AutocompletePlugin({
     },
     [editor]
   );
-  const cancelInflight = React6.useCallback(() => {
+  const cancelInflight = React9.useCallback(() => {
     if (!inflightRef.current) return;
     inflightRef.current.dismiss();
     inflightRef.current = null;
   }, []);
-  const resetIdleTimer = React6.useCallback(
+  const resetIdleTimer = React9.useCallback(
     (callback) => {
       if (idleTimerRef.current) {
         clearTimeout(idleTimerRef.current);
@@ -1986,7 +1986,7 @@ function AutocompletePlugin({
     },
     [idleMs, cancelInflight, clearGhost]
   );
-  const fireQuery = React6.useCallback(() => {
+  const fireQuery = React9.useCallback(() => {
     if (!useQuery || isReadOnly) return;
     let context = "";
     let prefix = "";
@@ -2058,7 +2058,7 @@ function AutocompletePlugin({
     upsertGhost,
     onSuggestionShown
   ]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (tags.has("history-merge") || tags.has("collaboration")) return;
@@ -2067,7 +2067,7 @@ function AutocompletePlugin({
       resetIdleTimer(fireQuery);
     });
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!useQuery || isReadOnly) return;
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -2091,7 +2091,7 @@ function AutocompletePlugin({
       COMMAND_PRIORITY_LOW
     );
   }, [editor, useQuery, isReadOnly, resetIdleTimer, fireQuery]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
       (e) => {
@@ -2132,7 +2132,7 @@ function AutocompletePlugin({
       COMMAND_PRIORITY_HIGH
     );
   }, [editor, clearGhost, onSuggestionAccept, prefixWindow]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return () => {
       cancelInflight();
       if (idleTimerRef.current) clearTimeout(idleTimerRef.current);
@@ -4010,28 +4010,28 @@ function SpellPopover({
   onImprove,
   onAcceptGrammar
 }) {
-  const ref = React6.useRef(null);
+  const ref = React9.useRef(null);
   const type = state.issue.type ?? "spelling";
-  const [pos, setPos] = React6.useState({ left: state.x, top: state.y });
-  React6.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]);
-  React6.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]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const h = () => onClose();
     window.addEventListener("scroll", h, { capture: true, passive: true });
     return () => window.removeEventListener("scroll", h, true);
   }, [onClose]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const h = (e) => {
       if (e.key === "Escape") onClose();
     };
@@ -4148,17 +4148,17 @@ function SpellCheckPlugin({
   enabled = true
 }) {
   const [editor] = useLexicalComposerContext();
-  const timerRef = React6.useRef(null);
-  const dismissRef = React6.useRef(null);
-  const reqIdRef = React6.useRef(0);
-  const lastTextRef = React6.useRef("");
-  const applyingRef = React6.useRef(false);
-  const grammarCorrectionRef = React6.useRef(void 0);
-  const [popover, setPopover] = React6.useState(null);
-  React6.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 = React6.useCallback(() => {
+  const clearErrors = React9.useCallback(() => {
     setPopover(null);
     grammarCorrectionRef.current = void 0;
     applyingRef.current = true;
@@ -4174,7 +4174,7 @@ function SpellCheckPlugin({
       }
     );
   }, [editor]);
-  const applyIssues = React6.useCallback(
+  const applyIssues = React9.useCallback(
     (issues, improvedText, trimOffset = 0) => {
       let savedCharOffset = -1;
       editor.getEditorState().read(() => {
@@ -4317,7 +4317,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     let currentRoot = null;
     const onClick = (e) => {
       const span = e.target.closest("[data-spell-offset]");
@@ -4361,7 +4361,7 @@ function SpellCheckPlugin({
       if (currentRoot) currentRoot.removeEventListener("click", onClick);
     };
   }, [editor]);
-  const handleAccept = React6.useCallback(
+  const handleAccept = React9.useCallback(
     (replacement, nodeKey) => {
       let original = "";
       editor.getEditorState().read(() => {
@@ -4387,7 +4387,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept, popover]
   );
-  const handleDismiss = React6.useCallback(
+  const handleDismiss = React9.useCallback(
     (nodeKey) => {
       editor.update(
         () => {
@@ -4401,7 +4401,7 @@ function SpellCheckPlugin({
     },
     [editor]
   );
-  const handleImprove = React6.useCallback(
+  const handleImprove = React9.useCallback(
     (text) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -4421,7 +4421,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  const handleAcceptGrammar = React6.useCallback(
+  const handleAcceptGrammar = React9.useCallback(
     (corrected) => {
       const original = lastTextRef.current;
       applyingRef.current = true;
@@ -4441,7 +4441,7 @@ function SpellCheckPlugin({
     },
     [editor, onSpellCheckAccept]
   );
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!enabled || !useSpellCheck) return;
     return editor.registerUpdateListener(({ tags }) => {
       if (applyingRef.current) return;
@@ -4479,13 +4479,13 @@ function SpellCheckPlugin({
       }, idleMs);
     });
   }, [editor, useSpellCheck, enabled, idleMs, applyIssues, clearErrors]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!enabled) {
       clearErrors();
       lastTextRef.current = "";
     }
   }, [enabled, clearErrors]);
-  React6.useEffect(
+  React9.useEffect(
     () => () => {
       dismissRef.current?.();
       if (timerRef.current) clearTimeout(timerRef.current);
@@ -4506,10 +4506,10 @@ function SpellCheckPlugin({
 }
 function TableActionMenuPlugin({ disabled = false }) {
   const [editor] = useLexicalComposerContext();
-  const [isInTable, setIsInTable] = React6.useState(false);
-  const [anchorRect, setAnchorRect] = React6.useState(null);
-  const [open, setOpen] = React6.useState(false);
-  const updateFromSelection = React6.useCallback(() => {
+  const [isInTable, setIsInTable] = React9.useState(false);
+  const [anchorRect, setAnchorRect] = React9.useState(null);
+  const [open, setOpen] = React9.useState(false);
+  const updateFromSelection = React9.useCallback(() => {
     const root = editor.getRootElement();
     if (!root) return;
     editor.getEditorState().read(() => {
@@ -4547,7 +4547,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       setAnchorRect(cellDom.getBoundingClientRect());
     });
   }, [editor]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return mergeRegister(
       editor.registerCommand(
         SELECTION_CHANGE_COMMAND,
@@ -4562,7 +4562,7 @@ function TableActionMenuPlugin({ disabled = false }) {
       })
     );
   }, [editor, updateFromSelection]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     return editor.registerCommand(
       KEY_DOWN_COMMAND,
       (event) => {
@@ -4603,11 +4603,11 @@ function TableActionMenuPlugin({ disabled = false }) {
       COMMAND_PRIORITY_HIGH
     );
   }, [editor, disabled]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!isInTable && open) setOpen(false);
   }, [isInTable, open]);
   const canShow = isInTable && !!anchorRect && !disabled;
-  const handleStyle = React6.useMemo(() => {
+  const handleStyle = React9.useMemo(() => {
     if (!anchorRect) return void 0;
     const top = Math.max(8, anchorRect.top + 6);
     const left = Math.max(8, anchorRect.right - 34);
@@ -4621,7 +4621,7 @@ function TableActionMenuPlugin({ disabled = false }) {
   const dangerStyle = {
     color: "var(--colorPaletteRedForeground1)"
   };
-  const run = React6.useCallback(
+  const run = React9.useCallback(
     (fn) => {
       if (disabled) return;
       editor.focus();
@@ -5086,8 +5086,8 @@ var hsvToRgb = (h, s, v) => {
   };
 };
 function useDrag(onMove, onEnd, interactingRef) {
-  const draggingRef = React6.useRef(false);
-  const start = React6.useCallback(
+  const draggingRef = React9.useRef(false);
+  const start = React9.useCallback(
     (e) => {
       draggingRef.current = true;
       if (interactingRef) interactingRef.current = true;
@@ -5119,19 +5119,19 @@ function useDrag(onMove, onEnd, interactingRef) {
   return start;
 }
 var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
-  const [open, setOpen] = React6.useState(false);
-  const btnRef = React6.useRef(null);
-  const interactingRef = React6.useRef(false);
-  const handleDismiss = React6.useCallback(() => setOpen(false), []);
-  const preventDismissOnEvent = React6.useCallback(
+  const [open, setOpen] = React9.useState(false);
+  const btnRef = React9.useRef(null);
+  const interactingRef = React9.useRef(false);
+  const handleDismiss = React9.useCallback(() => setOpen(false), []);
+  const preventDismissOnEvent = React9.useCallback(
     (ev) => {
       if (interactingRef.current) return true;
       return ev.type !== "click";
     },
     []
   );
-  const [, forceReposition] = React6.useState(0);
-  React6.useEffect(() => {
+  const [, forceReposition] = React9.useState(0);
+  React9.useEffect(() => {
     if (!open) return;
     let rafId = null;
     const reposition = () => {
@@ -5149,13 +5149,17 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
       window.removeEventListener("resize", reposition);
     };
   }, [open]);
-  const [hex, setHex] = React6.useState(normalizeHex(value || "#000000"));
-  const { r, g, b } = React6.useMemo(() => hexToRgb(hex), [hex]);
-  const hsv = React6.useMemo(() => rgbToHsv(r, g, b), [r, g, b]);
-  const [h, setH] = React6.useState(hsv.h);
-  const [s, setS] = React6.useState(hsv.s);
-  const [v, setV] = React6.useState(hsv.v);
-  React6.useEffect(() => {
+  const [hex, setHex] = React9.useState(normalizeHex(value || "#000000"));
+  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 wasOpenRef = React9.useRef(open);
+  React9.useEffect(() => {
+    const justOpened = open && !wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!justOpened) return;
     const n = normalizeHex(value || "#000000");
     setHex(n);
     const rgb = hexToRgb(n);
@@ -5163,8 +5167,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     setH(next.h);
     setS(next.s);
     setV(next.v);
-  }, [value]);
-  const commitHsv = React6.useCallback(
+  }, [value, open]);
+  const commitHsv = React9.useCallback(
     (hh, ss, vv, close) => {
       const rgb = hsvToRgb(hh, ss, vv);
       const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
@@ -5174,8 +5178,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     },
     [onChange]
   );
-  const svRef = React6.useRef(null);
-  const onSVMove = React6.useCallback(
+  const svRef = React9.useRef(null);
+  const onSVMove = React9.useCallback(
     (clientX, clientY) => {
       if (!svRef.current) return;
       const rect = svRef.current.getBoundingClientRect();
@@ -5190,8 +5194,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     [h, commitHsv]
   );
   const startSV = useDrag(onSVMove, void 0, interactingRef);
-  const hueRef = React6.useRef(null);
-  const onHueMove = React6.useCallback(
+  const hueRef = React9.useRef(null);
+  const onHueMove = React9.useCallback(
     (clientX) => {
       if (!hueRef.current) return;
       const rect = hueRef.current.getBoundingClientRect();
@@ -5203,9 +5207,9 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     [s, v, commitHsv]
   );
   const startHue = useDrag((x) => onHueMove(x), void 0, interactingRef);
-  const svThumb = React6.useMemo(() => ({ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }), [s, v]);
-  const hueThumb = React6.useMemo(() => ({ left: `${h / 360 * 100}%` }), [h]);
-  const hueColor = React6.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]);
@@ -5327,8 +5331,8 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
 };
 var ColorPickerPlugin = ({ disabled }) => {
   const [editor] = useLexicalComposerContext();
-  const [{ color, bgColor }, setColors] = React6__default.useState({ color: "#000000", bgColor: "#ffffff" });
-  const lastRangeSelectionRef = React6__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)) {
@@ -5338,7 +5342,7 @@ var ColorPickerPlugin = ({ disabled }) => {
       setColors({ color: c, bgColor: bg });
     }
   };
-  React6__default.useEffect(() => {
+  React9__default.useEffect(() => {
     return mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
         editorState.read(() => updateToolbar());
@@ -5554,9 +5558,9 @@ var useStyles3 = makeStyles({
 var FontSizePlugin = ({ disabled }) => {
   const [editor] = useLexicalComposerContext();
   const styles = useStyles3();
-  const [fontSize2, setFontSize] = React6.useState(String(DEFAULT_FONT_SIZE));
+  const [fontSize2, setFontSize] = React9.useState(String(DEFAULT_FONT_SIZE));
   const fg = disabled ? "var(--colorNeutralForegroundDisabled, #A6A6A6)" : "#333333";
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     const readFontSize = () => {
       const selection = $getSelection();
       if ($isRangeSelection(selection)) {
@@ -5974,7 +5978,7 @@ var ToolBarPlugins = (props) => {
   const [isLowercase, setIsLowercase] = useState(false);
   const [isCapitalize, setIsCapitalize] = useState(false);
   const [alignment, setAlignment] = useState("left");
-  const lastSelectionRef = React6__default.useRef(null);
+  const lastSelectionRef = React9__default.useRef(null);
   const presetGroups = getToolbarGroupsByLevel(props.level);
   const pluginGroups = useMemo(() => sanitizePluginGroups(presetGroups), [presetGroups]);
   const updateToolbarPlugins = () => {
@@ -6028,7 +6032,7 @@ var ToolBarPlugins = (props) => {
       ["paragraph", "h1", "h2", "h3", "h4", "h5", "h6", "ul", "ol", "quote", "code"].includes(type) ? type : "paragraph"
     );
   };
-  const applyToBlock = React6__default.useCallback(
+  const applyToBlock = React9__default.useCallback(
     (fn) => {
       editor.update(() => {
         const saved = lastSelectionRef.current;
@@ -6048,7 +6052,7 @@ var ToolBarPlugins = (props) => {
       }
     });
   };
-  React6__default.useEffect(() => {
+  React9__default.useEffect(() => {
     return mergeRegister(
       editor.registerEditableListener((editable) => {
         setIsEditable(editable);
@@ -6509,7 +6513,7 @@ var ToolBarPlugins = (props) => {
         padding: "0px",
         minHeight: 36
       },
-      children: pluginGroups.map((group, groupIndex) => /* @__PURE__ */ jsx(React6__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 {
@@ -6822,12 +6826,12 @@ function _makeQueryFn(fn) {
 var ContentEditorComponent = forwardRef(
   (props, ref) => {
     const isReadOnly = !!props.readOnly;
-    const resolvedSpellCheck = React6__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 = React6__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]