@tarviks/lexical-rich-editor 1.0.7 → 1.0.9

package/dist/index.js

@@ -5053,10 +5053,16 @@ var PRESET = [
 ];
 var clamp3 = (v, min, max) => Math.min(max, Math.max(min, v));
 var normalizeHex = (v) => {
-  let s = (v ?? "").trim();
+  const s = (v ?? "").trim();
   if (!s) return "#000000";
-  if (!s.startsWith("#")) s = `#${s}`;
-  if (s.length === 4 || s.length === 7) return s;
+  const rgbMatch = s.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(?:,\s*[\d.]+\s*)?\)$/i);
+  if (rgbMatch) {
+    const [, r, g, b] = rgbMatch;
+    return rgbToHex(clamp3(+r, 0, 255), clamp3(+g, 0, 255), clamp3(+b, 0, 255));
+  }
+  let hex = s.startsWith("#") ? s : `#${s}`;
+  if (hex.length === 9) hex = hex.slice(0, 7);
+  if (hex.length === 4 || hex.length === 7) return hex.toLowerCase();
   return "#000000";
 };
 var hexToRgb = (hex) => {
@@ -5177,11 +5183,21 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
   const [s, setS] = React9__namespace.useState(hsv.s);
   const [v, setV] = React9__namespace.useState(hsv.v);
   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);
@@ -5194,10 +5210,11 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
       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) setOpen(false);
     },
-    [onChange]
+    [onChange, title]
   );
   const svRef = React9__namespace.useRef(null);
   const onSVMove = React9__namespace.useCallback(
@@ -5238,6 +5255,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.Button,
       {
+        type: "button",
         size: "small",
         icon,
         value: title,
@@ -5251,6 +5269,10 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
         },
         onClick: () => {
           if (disabled) return;
+          console.log("[AO-ColorPicker]", title, "trigger button clicked", {
+            wasOpen: open,
+            activeElementBeforeToggle: document.activeElement?.tagName
+          });
           setOpen((p) => !p);
         }
       }
@@ -5301,6 +5323,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
                   setH(next.h);
                   setS(next.s);
                   setV(next.v);
+                  console.log("[AO-ColorPicker]", title, "hex field blur -> onChange", { raw: hex, normalized: n });
                   onChange(n);
                 }
               }
@@ -5319,6 +5342,7 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
                 setH(next.h);
                 setS(next.s);
                 setV(next.v);
+                console.log("[AO-ColorPicker]", title, "preset swatch click -> onChange", { color: c });
                 onChange(c);
               },
               title: c
@@ -5337,13 +5361,14 @@ var ColorPickerControl = ({ value, title, disabled, onChange, icon }) => {
             /* @__PURE__ */ jsxRuntime.jsx(
               react.DefaultButton,
               {
+                type: "button",
                 text: "Apply",
                 onClick: () => {
                   commitHsv(h, s, v, true);
                 }
               }
             ),
-            /* @__PURE__ */ jsxRuntime.jsx(react.DefaultButton, { text: "Close", onClick: () => setOpen(false) })
+            /* @__PURE__ */ jsxRuntime.jsx(react.DefaultButton, { type: "button", text: "Close", onClick: () => setOpen(false) })
           ] })
         ] })
       }
@@ -5356,10 +5381,20 @@ var ColorPickerPlugin = ({ disabled }) => {
   const lastRangeSelectionRef = React9__namespace.default.useRef(null);
   const updateToolbar = () => {
     const selection$1 = lexical.$getSelection();
-    if (lexical.$isRangeSelection(selection$1)) {
+    const isRange = lexical.$isRangeSelection(selection$1);
+    console.log("[AO-ColorPicker] updateToolbar", {
+      isRangeSelection: isRange,
+      isCollapsed: isRange ? selection$1.isCollapsed() : null
+    });
+    if (isRange) {
       lastRangeSelectionRef.current = selection$1.clone();
       const c = selection.$getSelectionStyleValueForProperty(selection$1, "color", "#000000");
-      const bg = selection.$getSelectionStyleValueForProperty(selection$1, "background-color", "#ffffff");
+      const bg = selection.$getSelectionStyleValueForProperty(
+        selection$1,
+        "background-color",
+        "#ffffff"
+      );
+      console.log("[AO-ColorPicker] updateToolbar readback", { color: c, bgColor: bg });
       setColors({ color: c, bgColor: bg });
     }
   };
@@ -5382,6 +5417,17 @@ var ColorPickerPlugin = ({ disabled }) => {
     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,
+      activeElementTag: document.activeElement?.tagName,
+      activeElementClass: document.activeElement?.className,
+      rootIsActiveElement: document.activeElement === root,
+      rootContainsActiveElement: !!root && root.contains(document.activeElement)
+    });
     if (editorIsActive) editor.focus();
     editor.update(() => {
       const saved = lastRangeSelectionRef.current;
@@ -5389,8 +5435,29 @@ var ColorPickerPlugin = ({ disabled }) => {
         lexical.$setSelection(saved.clone());
       }
       const selection$1 = lexical.$getSelection();
-      if (lexical.$isRangeSelection(selection$1)) {
+      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
+        });
+      } else {
+        console.warn(
+          "[AO-ColorPicker] applyStyle: no range selection available \u2014 style was NOT applied",
+          { property: args.property, color: args.color }
+        );
       }
     });
   };
@@ -6734,6 +6801,12 @@ 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);