@tarviks/lexical-rich-editor 1.0.9 → 1.0.11

package/dist/index.js

@@ -5137,6 +5137,7 @@ function useDrag(onMove, onEnd, interactingRef) {
             interactingRef.current = false;
           }, 0);
         }
+        onEnd?.();
       };
       window.addEventListener("mousemove", move);
       window.addEventListener("mouseup", up);
@@ -5145,11 +5146,18 @@ function useDrag(onMove, onEnd, interactingRef) {
   );
   return start;
 }
-var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
+var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange }) => {
   const [open, setOpen] = React9__namespace.useState(false);
   const btnRef = React9__namespace.useRef(null);
+  const setOpenAndNotify = React9__namespace.useCallback(
+    (next) => {
+      setOpen(next);
+      onOpenChange?.(next);
+    },
+    [onOpenChange]
+  );
   const interactingRef = React9__namespace.useRef(false);
-  const handleDismiss = React9__namespace.useCallback(() => setOpen(false), []);
+  const handleDismiss = React9__namespace.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
   const preventDismissOnEvent = React9__namespace.useCallback(
     (ev) => {
       if (interactingRef.current) return true;
@@ -5205,17 +5213,33 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     setS(next.s);
     setV(next.v);
   }, [value, open]);
+  const updateHexFromHsv = React9__namespace.useCallback((hh, ss, vv) => {
+    const rgb = hsvToRgb(hh, ss, vv);
+    const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
+    setHex(nextHex);
+    return nextHex;
+  }, []);
   const commitHsv = React9__namespace.useCallback(
     (hh, ss, vv, close) => {
-      const rgb = hsvToRgb(hh, ss, vv);
-      const nextHex = rgbToHex(rgb.r, rgb.g, rgb.b);
-      setHex(nextHex);
+      const nextHex = updateHexFromHsv(hh, ss, vv);
       console.log("[AO-ColorPicker]", title, "commitHsv -> onChange", { nextHex, close: !!close });
       onChange(nextHex);
-      if (close) setOpen(false);
+      if (close) setOpenAndNotify(false);
     },
-    [onChange, title]
+    [onChange, title, setOpenAndNotify, updateHexFromHsv]
   );
+  const hRef = React9__namespace.useRef(h);
+  const sRef = React9__namespace.useRef(s);
+  const vRef = React9__namespace.useRef(v);
+  React9__namespace.useEffect(() => {
+    hRef.current = h;
+  }, [h]);
+  React9__namespace.useEffect(() => {
+    sRef.current = s;
+  }, [s]);
+  React9__namespace.useEffect(() => {
+    vRef.current = v;
+  }, [v]);
   const svRef = React9__namespace.useRef(null);
   const onSVMove = React9__namespace.useCallback(
     (clientX, clientY) => {
@@ -5227,11 +5251,16 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
       const vv = rect.height === 0 ? 0 : 1 - y / rect.height;
       setS(ss);
       setV(vv);
-      commitHsv(h, ss, vv);
+      sRef.current = ss;
+      vRef.current = vv;
+      updateHexFromHsv(hRef.current, ss, vv);
     },
-    [h, commitHsv]
+    [updateHexFromHsv]
   );
-  const startSV = useDrag(onSVMove, void 0, interactingRef);
+  const commitSV = React9__namespace.useCallback(() => {
+    commitHsv(hRef.current, sRef.current, vRef.current);
+  }, [commitHsv]);
+  const startSV = useDrag(onSVMove, commitSV, interactingRef);
   const hueRef = React9__namespace.useRef(null);
   const onHueMove = React9__namespace.useCallback(
     (clientX) => {
@@ -5240,11 +5269,15 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
       const x = clamp3(clientX - rect.left, 0, rect.width);
       const hh = rect.width === 0 ? 0 : x / rect.width * 360;
       setH(hh);
-      commitHsv(hh, s, v);
+      hRef.current = hh;
+      updateHexFromHsv(hh, sRef.current, vRef.current);
     },
-    [s, v, commitHsv]
+    [updateHexFromHsv]
   );
-  const startHue = useDrag((x) => onHueMove(x), void 0, interactingRef);
+  const commitHue = React9__namespace.useCallback(() => {
+    commitHsv(hRef.current, sRef.current, vRef.current);
+  }, [commitHsv]);
+  const startHue = useDrag((x) => onHueMove(x), commitHue, 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(() => {
@@ -5273,7 +5306,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
             wasOpen: open,
             activeElementBeforeToggle: document.activeElement?.tagName
           });
-          setOpen((p) => !p);
+          setOpenAndNotify(!open);
         }
       }
     ),
@@ -5368,7 +5401,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(react.DefaultButton, { type: "button", text: "Close", onClick: () => setOpen(false) })
+            /* @__PURE__ */ jsxRuntime.jsx(react.DefaultButton, { type: "button", text: "Close", onClick: () => setOpenAndNotify(false) })
           ] })
         ] })
       }
@@ -5413,53 +5446,68 @@ var ColorPickerPlugin = ({ disabled }) => {
       )
     );
   }, [editor]);
+  const wasEditorActiveRef = React9__namespace.default.useRef(false);
+  const handleOpenChange = (open) => {
+    if (open) {
+      const root = editor.getRootElement();
+      wasEditorActiveRef.current = !!root && (document.activeElement === root || root.contains(document.activeElement));
+    } else if (wasEditorActiveRef.current) {
+      editor.focus();
+    }
+  };
   const applyStyle = (args) => {
     if (disabled) return;
-    const root = editor.getRootElement();
-    const editorIsActive = !!lastRangeSelectionRef.current && !!root && (document.activeElement === root || root.contains(document.activeElement));
     console.log("[AO-ColorPicker] applyStyle called", {
       property: args.property,
       color: args.color,
       hasSavedSelection: !!lastRangeSelectionRef.current,
       savedSelectionIsCollapsed: lastRangeSelectionRef.current?.isCollapsed() ?? null,
-      editorIsActive,
+      wasEditorActiveAtOpen: wasEditorActiveRef.current,
       activeElementTag: document.activeElement?.tagName,
-      activeElementClass: document.activeElement?.className,
-      rootIsActiveElement: document.activeElement === root,
-      rootContainsActiveElement: !!root && root.contains(document.activeElement)
+      activeElementClass: document.activeElement?.className
     });
-    if (editorIsActive) editor.focus();
-    editor.update(() => {
-      const saved = lastRangeSelectionRef.current;
-      if (saved) {
-        lexical.$setSelection(saved.clone());
-      }
-      const selection$1 = lexical.$getSelection();
-      const isRange = lexical.$isRangeSelection(selection$1);
-      console.log("[AO-ColorPicker] applyStyle inside editor.update", {
-        hadSavedSelection: !!saved,
-        selectionAfterRestoreIsRange: isRange,
-        selectionAfterRestoreIsCollapsed: isRange ? selection$1.isCollapsed() : null
-      });
-      if (isRange) {
-        selection.$patchStyleText(selection$1, { [args.property]: args.color });
-        const verify = selection.$getSelectionStyleValueForProperty(
-          selection$1,
-          args.property,
-          "<none>"
-        );
-        console.log("[AO-ColorPicker] applyStyle after patchStyleText, readback in same update", {
-          property: args.property,
-          appliedColor: args.color,
-          readBack: verify
+    editor.update(
+      () => {
+        const saved = lastRangeSelectionRef.current;
+        if (saved) {
+          lexical.$setSelection(saved.clone());
+        }
+        const selection$1 = lexical.$getSelection();
+        const isRange = lexical.$isRangeSelection(selection$1);
+        console.log("[AO-ColorPicker] applyStyle inside editor.update", {
+          hadSavedSelection: !!saved,
+          selectionAfterRestoreIsRange: isRange,
+          selectionAfterRestoreIsCollapsed: isRange ? selection$1.isCollapsed() : null
         });
-      } else {
-        console.warn(
-          "[AO-ColorPicker] applyStyle: no range selection available \u2014 style was NOT applied",
-          { property: args.property, color: args.color }
-        );
-      }
-    });
+        if (isRange) {
+          selection.$patchStyleText(selection$1, { [args.property]: args.color });
+          const verify = selection.$getSelectionStyleValueForProperty(
+            selection$1,
+            args.property,
+            "<none>"
+          );
+          console.log("[AO-ColorPicker] applyStyle after patchStyleText, readback in same update", {
+            property: args.property,
+            appliedColor: args.color,
+            readBack: verify
+          });
+        } else {
+          console.warn(
+            "[AO-ColorPicker] applyStyle: no range selection available \u2014 style was NOT applied",
+            { property: args.property, color: args.color }
+          );
+        }
+      },
+      // Without this tag, Lexical's reconciler force-focuses the editor root
+      // whenever this update's selection diff finds the root isn't already
+      // focused (see Lexical.dev.mjs ~8112) — which it never is while the
+      // color picker's Callout legitimately holds focus. That forced focus
+      // then fights Fluent's Callout for focus on every single drag-driven
+      // commit, repeatedly bouncing focus (and, via FocusEventsPlugin,
+      // nulling and restoring the selection) between the editor and the
+      // popover until the drag's tracked color desynced from the cursor.
+      { tag: lexical.SKIP_SELECTION_FOCUS_TAG }
+    );
   };
   const containerStyle = disabled ? {
     display: "flex",
@@ -5483,7 +5531,8 @@ var ColorPickerPlugin = ({ disabled }) => {
         title: "Text color",
         disabled,
         icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.TextColorRegular, { style: { color: iconColor } }),
-        onChange: (c) => applyStyle({ property: "color", color: c })
+        onChange: (c) => applyStyle({ property: "color", color: c }),
+        onOpenChange: handleOpenChange
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -5493,7 +5542,8 @@ var ColorPickerPlugin = ({ disabled }) => {
         title: "Background color",
         disabled,
         icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.PaintBucket16Filled, { style: { color: iconColor } }),
-        onChange: (c) => applyStyle({ property: "background-color", color: c })
+        onChange: (c) => applyStyle({ property: "background-color", color: c }),
+        onOpenChange: handleOpenChange
       }
     )
   ] });