@tarviks/lexical-rich-editor 1.0.10 → 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);
@@ -5212,17 +5213,33 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     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) setOpenAndNotify(false);
     },
-    [onChange, title, setOpenAndNotify]
+    [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) => {
@@ -5234,11 +5251,16 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       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) => {
@@ -5247,11 +5269,15 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       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(() => {