@ohhwells/bridge 0.1.42-next.100 → 0.1.42-next.102

package/dist/index.cjs

@@ -7252,9 +7252,10 @@ function lockItemDuringDrag() {
   clearTextSelection();
 }
 function unlockItemDragInteraction() {
+  const wasDragging = document.documentElement.hasAttribute("data-ohw-item-dragging");
   document.documentElement.removeAttribute("data-ohw-footer-press-drag");
   document.documentElement.removeAttribute("data-ohw-item-dragging");
-  clearTextSelection();
+  if (wasDragging) clearTextSelection();
 }
 var armFooterPressDrag = armItemPressDrag;
 var lockFooterDuringDrag = lockItemDuringDrag;
@@ -8569,9 +8570,16 @@ function sanitizeHtml(html) {
       if (!SAFE_TAGS.has(el.tagName)) {
         parent.replaceChild(document.createTextNode(el.textContent ?? ""), el);
       } else {
-        const textAlign = el.style?.textAlign || el.getAttribute("align") || "";
+        const htmlEl = el;
+        const textAlign = htmlEl.style?.textAlign || el.getAttribute("align") || "";
+        const fontWeight = htmlEl.style?.fontWeight || "";
+        const fontStyle = htmlEl.style?.fontStyle || "";
+        const textDecorationLine = htmlEl.style?.textDecorationLine || htmlEl.style?.textDecoration || "";
         for (const attr of Array.from(el.attributes)) el.removeAttribute(attr.name);
-        if (textAlign) el.style.textAlign = textAlign;
+        if (textAlign) htmlEl.style.textAlign = textAlign;
+        if (fontWeight) htmlEl.style.fontWeight = fontWeight;
+        if (fontStyle) htmlEl.style.fontStyle = fontStyle;
+        if (textDecorationLine) htmlEl.style.textDecorationLine = textDecorationLine;
         walk(el);
       }
     }
@@ -8759,6 +8767,79 @@ function resolveItemInteractionState(rect, parentScroll) {
   const { transform } = calcToolbarPos(rect, parentScroll, 120);
   return transform.includes("translateY(-100%)") ? "active-top" : "active-bottom";
 }
+function resolveSelectionStartElement(sel) {
+  if (!sel || sel.rangeCount === 0) return null;
+  const range = sel.getRangeAt(0);
+  let startNode = range.startContainer;
+  if (startNode.nodeType === Node.ELEMENT_NODE) {
+    const el = startNode;
+    startNode = el.childNodes[range.startOffset] ?? el.childNodes[range.startOffset - 1] ?? el;
+  }
+  return startNode.nodeType === Node.TEXT_NODE ? startNode.parentElement : startNode;
+}
+function detectActiveFormats(startEl, activeRoot) {
+  const formats = /* @__PURE__ */ new Set();
+  const cs = getComputedStyle(startEl);
+  const weight = parseInt(cs.fontWeight, 10);
+  let hasBold = cs.fontWeight === "bold" || !Number.isNaN(weight) && weight >= 600;
+  let hasItalic = cs.fontStyle === "italic" || cs.fontStyle === "oblique";
+  let hasUnderline = false;
+  let hasStrike = false;
+  let hasUl = false;
+  let hasOl = false;
+  for (let el = startEl; el; el = el.parentElement) {
+    if (el.tagName === "B" || el.tagName === "STRONG") hasBold = true;
+    if (el.tagName === "I" || el.tagName === "EM") hasItalic = true;
+    const decoration = getComputedStyle(el).textDecorationLine;
+    if (decoration.includes("underline") || el.tagName === "U" || el.tagName === "INS") hasUnderline = true;
+    if (decoration.includes("line-through") || el.tagName === "S" || el.tagName === "STRIKE" || el.tagName === "DEL") hasStrike = true;
+    if (el.tagName === "UL") hasUl = true;
+    if (el.tagName === "OL") hasOl = true;
+    if (el === activeRoot) break;
+  }
+  if (hasBold) formats.add("bold");
+  if (hasItalic) formats.add("italic");
+  if (hasUnderline) formats.add("underline");
+  if (hasStrike) formats.add("strikeThrough");
+  if (hasUl) formats.add("insertUnorderedList");
+  if (hasOl) formats.add("insertOrderedList");
+  const block = startEl.closest("div, p, h1, h2, h3, h4, h5, h6, li, td, th") ?? startEl;
+  const align = getComputedStyle(block).textAlign;
+  if (align === "center") formats.add("justifyCenter");
+  else if (align === "right" || align === "end") formats.add("justifyRight");
+  else formats.add("justifyLeft");
+  return formats;
+}
+function setsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const item of a) {
+    if (!b.has(item)) return false;
+  }
+  return true;
+}
+function textOffsetInRoot(root, node, offset) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let total = 0;
+  let current;
+  while (current = walker.nextNode()) {
+    if (current === node) return total + offset;
+    total += (current.textContent ?? "").length;
+  }
+  return total;
+}
+function pointAtTextOffset(root, targetOffset) {
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+  let total = 0;
+  let current;
+  let last = null;
+  while (current = walker.nextNode()) {
+    const len = (current.textContent ?? "").length;
+    if (total + len >= targetOffset) return { node: current, offset: targetOffset - total };
+    total += len;
+    last = current;
+  }
+  return last ? { node: last, offset: (last.textContent ?? "").length } : null;
+}
 function FloatingToolbar({
   rect,
   parentScroll,
@@ -10230,15 +10311,6 @@ function OhhwellsBridge() {
           e.stopPropagation();
           const selection = window.getSelection();
           const hasRangeSelection = Boolean(selection && !selection.isCollapsed);
-          console.log(
-            "[OHW DEBUG handleClick] already-active branch",
-            "detail=",
-            e.detail,
-            "hasRangeSelection=",
-            hasRangeSelection,
-            "willPlaceCaret=",
-            e.detail < 2 && !hasRangeSelection
-          );
           if (e.detail < 2 && !hasRangeSelection) {
             placeCaretAtPoint(active, e.clientX, e.clientY);
             refreshActiveCommandsRef.current();
@@ -10282,15 +10354,6 @@ function OhhwellsBridge() {
         }
         e.preventDefault();
         e.stopPropagation();
-        console.log(
-          "[OHW DEBUG handleClick] first-activation branch",
-          "detail=",
-          e.detail,
-          "selectionAtClick=",
-          JSON.stringify(window.getSelection()?.toString() ?? ""),
-          "collapsedAtClick=",
-          window.getSelection()?.isCollapsed
-        );
         activateRef.current(editable);
         return;
       }
@@ -11406,62 +11469,9 @@ function OhhwellsBridge() {
       selectionChangeRaf = null;
       const activeRoot = activeElRef.current;
       if (!activeRoot) return;
-      const next = /* @__PURE__ */ new Set();
-      const sel = window.getSelection();
-      let startNode = null;
-      if (sel && sel.rangeCount > 0) {
-        const range = sel.getRangeAt(0);
-        startNode = range.startContainer;
-        if (startNode.nodeType === Node.ELEMENT_NODE) {
-          const el = startNode;
-          startNode = el.childNodes[range.startOffset] ?? el.childNodes[range.startOffset - 1] ?? el;
-        }
-      }
-      const startEl = startNode ? startNode.nodeType === Node.TEXT_NODE ? startNode.parentElement : startNode : null;
-      if (startEl) {
-        const cs = getComputedStyle(startEl);
-        const weight = parseInt(cs.fontWeight, 10);
-        let hasBold = cs.fontWeight === "bold" || !Number.isNaN(weight) && weight >= 600;
-        let hasItalic = cs.fontStyle === "italic" || cs.fontStyle === "oblique";
-        let hasUnderline = false;
-        let hasStrike = false;
-        let hasUl = false;
-        let hasOl = false;
-        for (let el = startEl; el; el = el.parentElement) {
-          if (el.tagName === "B" || el.tagName === "STRONG") hasBold = true;
-          if (el.tagName === "I" || el.tagName === "EM") hasItalic = true;
-          const decoration = getComputedStyle(el).textDecorationLine;
-          if (decoration.includes("underline") || el.tagName === "U" || el.tagName === "INS") hasUnderline = true;
-          if (decoration.includes("line-through") || el.tagName === "S" || el.tagName === "STRIKE" || el.tagName === "DEL") hasStrike = true;
-          if (el.tagName === "UL") hasUl = true;
-          if (el.tagName === "OL") hasOl = true;
-          if (el === activeRoot) break;
-        }
-        if (hasBold) next.add("bold");
-        if (hasItalic) next.add("italic");
-        if (hasUnderline) next.add("underline");
-        if (hasStrike) next.add("strikeThrough");
-        if (hasUl) next.add("insertUnorderedList");
-        if (hasOl) next.add("insertOrderedList");
-        const block = startEl.closest("div, p, h1, h2, h3, h4, h5, h6, li, td, th") ?? startEl;
-        const align = getComputedStyle(block).textAlign;
-        if (align === "center") next.add("justifyCenter");
-        else if (align === "right" || align === "end") next.add("justifyRight");
-        else next.add("justifyLeft");
-      }
-      setActiveCommands((prev) => {
-        if (prev.size === next.size) {
-          let same = true;
-          for (const cmd of prev) {
-            if (!next.has(cmd)) {
-              same = false;
-              break;
-            }
-          }
-          if (same) return prev;
-        }
-        return next;
-      });
+      const startEl = resolveSelectionStartElement(window.getSelection());
+      const next = startEl ? detectActiveFormats(startEl, activeRoot) : /* @__PURE__ */ new Set();
+      setActiveCommands((prev) => setsEqual(prev, next) ? prev : next);
     };
     const handleSelectionChange = () => {
       if (pointerHeldRef.current) return;
@@ -11848,22 +11858,6 @@ function OhhwellsBridge() {
       unlockFooterDragInteraction();
     };
   }, [isEditMode]);
-  (0, import_react9.useEffect)(() => {
-    if (!isEditMode) return;
-    const debugSelectionChange = () => {
-      const sel = window.getSelection();
-      console.log(
-        "[OHW DEBUG selectionchange]",
-        JSON.stringify(sel?.toString() ?? ""),
-        "collapsed=",
-        sel?.isCollapsed,
-        "anchorNode=",
-        sel?.anchorNode,
-        "activeEl=",
-        activeElRef.current
-      );
-    };
-  }, [isEditMode]);
   (0, import_react9.useEffect)(() => {
     const handler = (e) => {
       if (e.data?.type !== "ow:request-schedule-config") return;
@@ -11922,10 +11916,39 @@ function OhhwellsBridge() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [pathname]);
   const handleCommand = (0, import_react9.useCallback)((cmd) => {
+    const el = activeElRef.current;
+    const selBefore = window.getSelection();
+    let savedOffsets = null;
+    if (el && selBefore && selBefore.rangeCount > 0 && !selBefore.isCollapsed) {
+      const r2 = selBefore.getRangeAt(0);
+      if (el.contains(r2.commonAncestorContainer)) {
+        savedOffsets = {
+          start: textOffsetInRoot(el, r2.startContainer, r2.startOffset),
+          end: textOffsetInRoot(el, r2.endContainer, r2.endOffset)
+        };
+      }
+    }
     document.execCommand("styleWithCSS", false, true);
     document.execCommand(cmd, false);
-    activeElRef.current?.focus();
-    if (activeElRef.current) setToolbarRect(getEditMeasureEl(activeElRef.current).getBoundingClientRect());
+    if (el && document.activeElement !== el) {
+      el.focus();
+    }
+    const selAfter = window.getSelection();
+    if (el && savedOffsets && selAfter?.isCollapsed) {
+      const start = pointAtTextOffset(el, savedOffsets.start);
+      const end = pointAtTextOffset(el, savedOffsets.end);
+      if (start && end) {
+        try {
+          const range = document.createRange();
+          range.setStart(start.node, start.offset);
+          range.setEnd(end.node, end.offset);
+          selAfter.removeAllRanges();
+          selAfter.addRange(range);
+        } catch {
+        }
+      }
+    }
+    if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
     refreshActiveCommandsRef.current();
   }, []);
   const handleStateChange = (0, import_react9.useCallback)((state) => {