@ohhwells/bridge 0.1.42-next.98 → 0.1.42-next.99

package/dist/index.cjs

@@ -6717,6 +6717,8 @@ function applyNavOrderToContainer(container, order) {
   if (current.length === expected.length && current.every((key, i) => key === expected[i])) {
     return;
   }
+  const lastCurrentLinkEl = current.length > 0 ? findCounterpartByHrefKey(current[current.length - 1], container) : null;
+  const anchor = lastCurrentLinkEl?.parentElement === container ? lastCurrentLinkEl.nextElementSibling : null;
   const seen = /* @__PURE__ */ new Set();
   for (const hrefKey of desired) {
     if (seen.has(hrefKey)) continue;
@@ -6731,7 +6733,9 @@ function applyNavOrderToContainer(container, order) {
     orderedEls.push(el);
   }
   for (const el of orderedEls) {
-    if (container.lastElementChild !== el) {
+    if (anchor) {
+      if (el.nextSibling !== anchor) container.insertBefore(el, anchor);
+    } else if (container.lastElementChild !== el) {
       container.appendChild(el);
     }
   }
@@ -7073,6 +7077,11 @@ function reconcileFooterOrderFromContent(content) {
   }
   applyFooterOrder(order);
 }
+function isRowLayoutColumn(links) {
+  if (links.length < 2) return false;
+  const firstTop = links[0].getBoundingClientRect().top;
+  return links.every((link) => Math.abs(link.getBoundingClientRect().top - firstTop) < 4);
+}
 function buildLinkDropSlots(column, columnIndex) {
   const links = listFooterLinksInColumn(column);
   const colRect = column.getBoundingClientRect();
@@ -7090,6 +7099,32 @@ function buildLinkDropSlots(column, columnIndex) {
     });
     return slots;
   }
+  if (isRowLayoutColumn(links)) {
+    for (let i = 0; i <= links.length; i++) {
+      let left;
+      if (i === 0) {
+        left = links[0].getBoundingClientRect().left - barThickness / 2;
+      } else if (i === links.length) {
+        const last = links[links.length - 1].getBoundingClientRect();
+        left = last.right - barThickness / 2;
+      } else {
+        const prev = links[i - 1].getBoundingClientRect();
+        const next = links[i].getBoundingClientRect();
+        left = (prev.right + next.left) / 2 - barThickness / 2;
+      }
+      const heightRef = i === 0 ? links[0].getBoundingClientRect() : i === links.length ? links[links.length - 1].getBoundingClientRect() : links[i].getBoundingClientRect();
+      slots.push({
+        insertIndex: i,
+        columnIndex,
+        left,
+        top: heightRef.top,
+        width: barThickness,
+        height: Math.max(heightRef.height, colRect.height * 0.8),
+        direction: "vertical"
+      });
+    }
+    return slots;
+  }
   for (let i = 0; i <= links.length; i++) {
     let top;
     if (i === 0) {
@@ -7173,8 +7208,7 @@ function hitTestLinkDropSlot(clientX, clientY, draggedHrefKey) {
       return true;
     });
     for (const slot of slots) {
-      const cy = slot.top + slot.height / 2;
-      const dist = Math.abs(clientY - cy) + (inColX ? 0 : 1e3);
+      const dist = slot.direction === "vertical" ? Math.abs(clientX - (slot.left + slot.width / 2)) : Math.abs(clientY - (slot.top + slot.height / 2));
       if (!best || dist < best.dist) best = { slot, dist };
     }
   }
@@ -7584,7 +7618,6 @@ function useNavItemDrag({
       const hrefKey = anchor?.getAttribute("data-ohw-href-key") ?? null;
       if (!anchor || !isNavbarHrefKey(hrefKey)) return;
       if (isNavbarButton3(anchor) || isDragHandleDisabled2(anchor)) return;
-      armItemPressDrag();
       navPointerDragRef.current = {
         el: anchor,
         startX: e.clientX,
@@ -7611,6 +7644,7 @@ function useNavItemDrag({
       if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) return;
       e.preventDefault();
       pending.started = true;
+      armItemPressDrag();
       clearTextSelection();
       try {
         document.body.setPointerCapture(pending.pointerId);
@@ -7638,7 +7672,8 @@ function useNavItemDrag({
         }
       } catch {
       }
-      if (!pending?.started) {
+      if (!pending) return;
+      if (!pending.started) {
         unlockItemDragInteraction();
         return;
       }
@@ -7690,7 +7725,6 @@ function useNavItemDrag({
       const hrefKey = selected.getAttribute("data-ohw-href-key");
       if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
       if (isNavbarButton3(selected) || isDragHandleDisabled2(selected)) return false;
-      armItemPressDrag();
       navPointerDragRef.current = {
         el: selected,
         startX: clientX,
@@ -8917,6 +8951,7 @@ function OhhwellsBridge() {
   const [fetchState, setFetchState] = (0, import_react9.useState)("idle");
   const autoSaveTimers = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
   const activeElRef = (0, import_react9.useRef)(null);
+  const pointerHeldRef = (0, import_react9.useRef)(false);
   const selectedElRef = (0, import_react9.useRef)(null);
   const selectedHrefKeyRef = (0, import_react9.useRef)(null);
   const selectedFooterColAttrRef = (0, import_react9.useRef)(null);
@@ -9614,7 +9649,6 @@ function OhhwellsBridge() {
     if (e.button !== 0) return;
     const selected = selectedElRef.current;
     if (!selected) return;
-    armFooterPressDrag();
     const hrefKey = selected.getAttribute("data-ohw-href-key");
     if (hrefKey && isFooterHrefKey(hrefKey)) {
       footerPointerDragRef.current = {
@@ -9725,6 +9759,8 @@ function OhhwellsBridge() {
     siblingHintElRef.current = null;
     setSiblingHintRect(null);
     setIsItemDragging(false);
+    const preActivationSelection = window.getSelection();
+    const preservedRange = preActivationSelection && preActivationSelection.rangeCount > 0 && !preActivationSelection.isCollapsed && el.contains(preActivationSelection.getRangeAt(0).commonAncestorContainer) ? preActivationSelection.getRangeAt(0).cloneRange() : null;
     el.setAttribute("contenteditable", "true");
     el.setAttribute("data-ohw-editing", "");
     el.removeAttribute("data-ohw-hovered");
@@ -9732,7 +9768,11 @@ function OhhwellsBridge() {
     activeElRef.current = el;
     originalContentRef.current = el.innerHTML;
     el.focus({ preventScroll: true });
-    if (options?.caretX !== void 0 && options?.caretY !== void 0) {
+    if (preservedRange) {
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(preservedRange);
+    } else if (options?.caretX !== void 0 && options?.caretY !== void 0) {
       const { caretX, caretY } = options;
       placeCaretAtPoint(el, caretX, caretY);
       requestAnimationFrame(() => {
@@ -10188,7 +10228,18 @@ function OhhwellsBridge() {
         if (inActive || inActiveNav) {
           e.preventDefault();
           e.stopPropagation();
-          if (e.detail < 2) {
+          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();
           }
@@ -10231,6 +10282,15 @@ 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;
       }
@@ -11341,30 +11401,83 @@ function OhhwellsBridge() {
       const h = document.documentElement.scrollHeight;
       if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
     };
-    const handleSelectionChange = () => {
-      if (!activeElRef.current) return;
+    let selectionChangeRaf = null;
+    const runSelectionChange = () => {
+      selectionChangeRaf = null;
+      const activeRoot = activeElRef.current;
+      if (!activeRoot) return;
       const next = /* @__PURE__ */ new Set();
-      for (const cmd of ["bold", "italic", "underline", "strikeThrough", "insertUnorderedList", "insertOrderedList"]) {
-        try {
-          if (document.queryCommandState(cmd)) next.add(cmd);
-        } catch {
-        }
-      }
       const sel = window.getSelection();
-      const anchor = sel?.anchorNode;
-      if (anchor) {
-        const el = anchor.nodeType === Node.TEXT_NODE ? anchor.parentElement : anchor;
-        const block = el?.closest("div, p, h1, h2, h3, h4, h5, h6, li, td, th") ?? el;
-        if (block) {
-          const align = getComputedStyle(block).textAlign;
-          if (align === "center") next.add("justifyCenter");
-          else if (align === "right" || align === "end") next.add("justifyRight");
-          else next.add("justifyLeft");
+      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;
         }
       }
-      setActiveCommands(next);
+      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 handleSelectionChange = () => {
+      if (pointerHeldRef.current) return;
+      if (selectionChangeRaf !== null) return;
+      selectionChangeRaf = requestAnimationFrame(runSelectionChange);
+    };
+    const markPointerHeld = (e) => {
+      if (e.button !== 0) return;
+      pointerHeldRef.current = true;
+    };
+    const markPointerReleased = () => {
+      if (!pointerHeldRef.current) return;
+      pointerHeldRef.current = false;
+      handleSelectionChange();
     };
-    refreshActiveCommandsRef.current = handleSelectionChange;
+    refreshActiveCommandsRef.current = runSelectionChange;
     const handleDocMouseLeave = () => {
       hoveredImageRef.current = null;
       setMediaHover(null);
@@ -11604,7 +11717,6 @@ function OhhwellsBridge() {
       const anchor = getNavigationItemAnchor(target);
       const hrefKey = anchor?.getAttribute("data-ohw-href-key") ?? null;
       if (anchor && isFooterHrefKey(hrefKey)) {
-        armFooterPressDrag();
         footerPointerDragRef.current = {
           el: anchor,
           kind: "link",
@@ -11618,7 +11730,6 @@ function OhhwellsBridge() {
       }
       const col = target.closest("[data-ohw-footer-col]");
       if (col && !getNavigationItemAnchor(target)) {
-        armFooterPressDrag();
         footerPointerDragRef.current = {
           el: col,
           kind: "column",
@@ -11647,6 +11758,7 @@ function OhhwellsBridge() {
       if (dx * dx + dy * dy < THRESHOLD * THRESHOLD) return;
       e.preventDefault();
       pending.started = true;
+      armFooterPressDrag();
       clearTextSelection();
       try {
         document.body.setPointerCapture(pending.pointerId);
@@ -11700,7 +11812,8 @@ function OhhwellsBridge() {
         }
       } catch {
       }
-      if (!pending?.started) {
+      if (!pending) return;
+      if (!pending.started) {
         unlockFooterDragInteraction();
         return;
       }
@@ -11735,6 +11848,22 @@ 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;
@@ -11793,6 +11922,7 @@ function OhhwellsBridge() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [pathname]);
   const handleCommand = (0, import_react9.useCallback)((cmd) => {
+    document.execCommand("styleWithCSS", false, true);
     document.execCommand(cmd, false);
     activeElRef.current?.focus();
     if (activeElRef.current) setToolbarRect(getEditMeasureEl(activeElRef.current).getBoundingClientRect());