@tarviks/lexical-rich-editor 1.0.10 → 1.1.0

package/dist/index.js

@@ -5112,39 +5112,6 @@ var hsvToRgb = (h, s, v) => {
     b: Math.round((bb + m) * 255)
   };
 };
-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;
-        onMove(ev.clientX, ev.clientY);
-      };
-      const up = () => {
-        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, interactingRef]
-  );
-  return start;
-}
 var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange }) => {
   const [open, setOpen] = React9__namespace.useState(false);
   const btnRef = React9__namespace.useRef(null);
@@ -5155,13 +5122,9 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
     },
     [onOpenChange]
   );
-  const interactingRef = React9__namespace.useRef(false);
   const handleDismiss = React9__namespace.useCallback(() => setOpenAndNotify(false), [setOpenAndNotify]);
   const preventDismissOnEvent = React9__namespace.useCallback(
-    (ev) => {
-      if (interactingRef.current) return true;
-      return ev.type !== "click";
-    },
+    (ev) => ev.type !== "click",
     []
   );
   const [, forceReposition] = React9__namespace.useState(0);
@@ -5183,75 +5146,63 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
       window.removeEventListener("resize", reposition);
     };
   }, [open]);
-  const [hex, setHex] = React9__namespace.useState(normalizeHex(value || "#000000"));
+  const appliedHex = React9__namespace.useMemo(() => normalizeHex(value || "#000000"), [value]);
+  const [hex, setHex] = React9__namespace.useState(appliedHex);
   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 setDraft = React9__namespace.useCallback((nextHex) => {
+    setHex(nextHex);
+    const rgb = hexToRgb(nextHex);
+    const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
+    setH(next.h);
+    setS(next.s);
+    setV(next.v);
+  }, []);
+  const setDraftFromHsv = React9__namespace.useCallback((hh, ss, vv) => {
+    const rgb = hsvToRgb(hh, ss, vv);
+    setHex(rgbToHex(rgb.r, rgb.g, rgb.b));
+    setH(hh);
+    setS(ss);
+    setV(vv);
+  }, []);
   const wasOpenRef = React9__namespace.useRef(open);
-  console.log("[AO-ColorPicker]", title, "render with incoming value prop:", JSON.stringify(value));
   React9__namespace.useEffect(() => {
     const justOpened = open && !wasOpenRef.current;
     wasOpenRef.current = open;
-    console.log("[AO-ColorPicker]", title, "open-seed effect", {
-      open,
-      justOpened,
-      incomingValue: value
-    });
     if (!justOpened) return;
-    const n = normalizeHex(value || "#000000");
-    console.log("[AO-ColorPicker]", title, "seeding local state from value on open", {
-      incomingValue: value,
-      normalized: n
-    });
-    setHex(n);
-    const rgb = hexToRgb(n);
-    const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
-    setH(next.h);
-    setS(next.s);
-    setV(next.v);
-  }, [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);
-      setHex(nextHex);
-      console.log("[AO-ColorPicker]", title, "commitHsv -> onChange", { nextHex, close: !!close });
-      onChange(nextHex);
-      if (close) setOpenAndNotify(false);
-    },
-    [onChange, title, setOpenAndNotify]
-  );
+    setDraft(appliedHex);
+  }, [appliedHex, open, setDraft]);
   const svRef = React9__namespace.useRef(null);
-  const onSVMove = React9__namespace.useCallback(
-    (clientX, clientY) => {
+  const handleSVClick = React9__namespace.useCallback(
+    (e) => {
       if (!svRef.current) return;
       const rect = svRef.current.getBoundingClientRect();
-      const x = clamp3(clientX - rect.left, 0, rect.width);
-      const y = clamp3(clientY - rect.top, 0, rect.height);
+      const x = clamp3(e.clientX - rect.left, 0, rect.width);
+      const y = clamp3(e.clientY - rect.top, 0, rect.height);
       const ss = rect.width === 0 ? 0 : x / rect.width;
       const vv = rect.height === 0 ? 0 : 1 - y / rect.height;
-      setS(ss);
-      setV(vv);
-      commitHsv(h, ss, vv);
+      setDraftFromHsv(h, ss, vv);
     },
-    [h, commitHsv]
+    [h, setDraftFromHsv]
   );
-  const startSV = useDrag(onSVMove, void 0, interactingRef);
   const hueRef = React9__namespace.useRef(null);
-  const onHueMove = React9__namespace.useCallback(
-    (clientX) => {
+  const handleHueClick = React9__namespace.useCallback(
+    (e) => {
       if (!hueRef.current) return;
       const rect = hueRef.current.getBoundingClientRect();
-      const x = clamp3(clientX - rect.left, 0, rect.width);
+      const x = clamp3(e.clientX - rect.left, 0, rect.width);
       const hh = rect.width === 0 ? 0 : x / rect.width * 360;
-      setH(hh);
-      commitHsv(hh, s, v);
+      setDraftFromHsv(hh, s, v);
     },
-    [s, v, commitHsv]
+    [s, v, setDraftFromHsv]
   );
-  const startHue = useDrag((x) => onHueMove(x), void 0, interactingRef);
+  const handleApply = React9__namespace.useCallback(() => {
+    onChange(hex);
+    setOpenAndNotify(false);
+  }, [onChange, hex, setOpenAndNotify]);
   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(() => {
@@ -5276,10 +5227,6 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
         },
         onClick: () => {
           if (disabled) return;
-          console.log("[AO-ColorPicker]", title, "trigger button clicked", {
-            wasOpen: open,
-            activeElementBeforeToggle: document.activeElement?.tagName
-          });
           setOpenAndNotify(!open);
         }
       }
@@ -5294,7 +5241,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
           transform: "translateX(-50%)",
           width: 14,
           height: 3,
-          background: hex,
+          background: appliedHex,
           borderRadius: 1,
           border: "0.5px solid rgba(0,0,0,0.18)",
           pointerEvents: "none"
@@ -5322,17 +5269,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
               {
                 value: hex,
                 onChange: (_, val) => setHex(normalizeHex(val || "")),
-                onBlur: () => {
-                  const n = normalizeHex(hex);
-                  setHex(n);
-                  const rgb = hexToRgb(n);
-                  const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                  setH(next.h);
-                  setS(next.s);
-                  setV(next.v);
-                  console.log("[AO-ColorPicker]", title, "hex field blur -> onChange", { raw: hex, normalized: n });
-                  onChange(n);
-                }
+                onBlur: () => setDraft(normalizeHex(hex))
               }
             )
           ] }),
@@ -5342,39 +5279,21 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon, onOpenChange
               type: "button",
               className: "aoLexSwatchBtn",
               style: { background: c },
-              onClick: () => {
-                setHex(c);
-                const rgb = hexToRgb(c);
-                const next = rgbToHsv(rgb.r, rgb.g, rgb.b);
-                setH(next.h);
-                setS(next.s);
-                setV(next.v);
-                console.log("[AO-ColorPicker]", title, "preset swatch click -> onChange", { color: c });
-                onChange(c);
-              },
+              onClick: () => setDraft(c),
               title: c
             },
             c
           )) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexSV", ref: svRef, onMouseDown: startSV, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexSV", ref: svRef, onClick: handleSVClick, children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVHue", style: { background: hueColor } }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVWhite" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVBlack" }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexSVThumb", style: svThumb })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexHue", ref: hueRef, onMouseDown: startHue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexHueThumb", style: hueThumb }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexHue", ref: hueRef, onClick: handleHueClick, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexHueThumb", style: hueThumb }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aoLexPreview", style: { background: hex } }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aoLexActions", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              react.DefaultButton,
-              {
-                type: "button",
-                text: "Apply",
-                onClick: () => {
-                  commitHsv(h, s, v, true);
-                }
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(react.DefaultButton, { type: "button", text: "Apply", onClick: handleApply }),
             /* @__PURE__ */ jsxRuntime.jsx(react.DefaultButton, { type: "button", text: "Close", onClick: () => setOpenAndNotify(false) })
           ] })
         ] })
@@ -5388,20 +5307,10 @@ var ColorPickerPlugin = ({ disabled }) => {
   const lastRangeSelectionRef = React9__namespace.default.useRef(null);
   const updateToolbar = () => {
     const selection$1 = lexical.$getSelection();
-    const isRange = lexical.$isRangeSelection(selection$1);
-    console.log("[AO-ColorPicker] updateToolbar", {
-      isRangeSelection: isRange,
-      isCollapsed: isRange ? selection$1.isCollapsed() : null
-    });
-    if (isRange) {
+    if (lexical.$isRangeSelection(selection$1)) {
       lastRangeSelectionRef.current = selection$1.clone();
       const c = selection.$getSelectionStyleValueForProperty(selection$1, "color", "#000000");
-      const bg = selection.$getSelectionStyleValueForProperty(
-        selection$1,
-        "background-color",
-        "#ffffff"
-      );
-      console.log("[AO-ColorPicker] updateToolbar readback", { color: c, bgColor: bg });
+      const bg = selection.$getSelectionStyleValueForProperty(selection$1, "background-color", "#ffffff");
       setColors({ color: c, bgColor: bg });
     }
   };
@@ -5431,15 +5340,6 @@ var ColorPickerPlugin = ({ disabled }) => {
   };
   const applyStyle = (args) => {
     if (disabled) return;
-    console.log("[AO-ColorPicker] applyStyle called", {
-      property: args.property,
-      color: args.color,
-      hasSavedSelection: !!lastRangeSelectionRef.current,
-      savedSelectionIsCollapsed: lastRangeSelectionRef.current?.isCollapsed() ?? null,
-      wasEditorActiveAtOpen: wasEditorActiveRef.current,
-      activeElementTag: document.activeElement?.tagName,
-      activeElementClass: document.activeElement?.className
-    });
     editor.update(
       () => {
         const saved = lastRangeSelectionRef.current;
@@ -5447,39 +5347,17 @@ var ColorPickerPlugin = ({ disabled }) => {
           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) {
+        if (lexical.$isRangeSelection(selection$1)) {
           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.
+      // focused — which it isn't while the color picker's Callout holds
+      // focus. The picker now only calls applyStyle once, on Apply, so this
+      // is no longer fighting for focus on every drag pixel, but there's no
+      // reason to force a focus change here at all — handleOpenChange above
+      // already does that deliberately, once, on close.
       { tag: lexical.SKIP_SELECTION_FOCUS_TAG }
     );
   };
@@ -6825,12 +6703,6 @@ function FocusEventsPlugin({
       const next = e.relatedTarget;
       const container = containerRef.current;
       const stillInside = !!next && (container ? container.contains(next) : root.contains(next));
-      console.log("[AO-ColorPicker] FocusEventsPlugin focusout", {
-        relatedTargetTag: next ? next.tagName : null,
-        relatedTargetClass: next ? next.className : null,
-        stillInside,
-        willClearSelection: !stillInside
-      });
       if (stillInside) return;
       editor.update(() => {
         lexical.$setSelection(null);