@ohhwells/bridge 0.1.36-next.45 → 0.1.36-next.47

package/dist/index.cjs

@@ -4464,7 +4464,7 @@ function ItemActionToolbar({
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ToolbarActionTooltip,
       {
-        label: "Add link",
+        label: "Edit link",
         side: tooltipSide,
         buttonProps: {
           onMouseDown: (e) => {
@@ -6010,6 +6010,71 @@ function clearHrefKeyHover(anchor) {
 function isInsideNavigationItem(el) {
   return getNavigationItemAnchor(el) !== null;
 }
+function getNavigationRoot(el) {
+  const explicit = el.closest("[data-ohw-nav-root]");
+  if (explicit) return explicit;
+  return el.closest("nav, footer, aside");
+}
+function findFooterItemGroup(item) {
+  const footer = item.closest("footer");
+  if (!footer) return null;
+  let node = item.parentElement;
+  while (node && node !== footer) {
+    const hasDirectNavItems = Array.from(
+      node.querySelectorAll(":scope > [data-ohw-href-key]")
+    ).some(isNavigationItem);
+    if (hasDirectNavItems) return node;
+    node = node.parentElement;
+  }
+  return null;
+}
+function isNavigationRoot(el) {
+  return el.hasAttribute("data-ohw-nav-root") || el.matches("nav, footer, aside");
+}
+function isInferredFooterGroup(el) {
+  const footer = el.closest("footer");
+  if (!footer || el === footer) return false;
+  return Array.from(el.querySelectorAll(":scope > [data-ohw-href-key]")).some(isNavigationItem);
+}
+function isNavigationContainer(el) {
+  return el.hasAttribute("data-ohw-nav-container") || isNavigationRoot(el) || isInferredFooterGroup(el);
+}
+function getNavigationSelectionParent(el) {
+  if (isNavigationItem(el)) {
+    const explicit = el.closest("[data-ohw-nav-container]");
+    if (explicit) return explicit;
+    const footerGroup = findFooterItemGroup(el);
+    if (footerGroup) return footerGroup;
+    return getNavigationRoot(el);
+  }
+  if (el.hasAttribute("data-ohw-nav-container") || isInferredFooterGroup(el)) {
+    return getNavigationRoot(el);
+  }
+  return null;
+}
+function placeCaretAtPoint(el, x, y) {
+  const selection = window.getSelection();
+  if (!selection) return;
+  if (typeof document.caretRangeFromPoint === "function") {
+    const range = document.caretRangeFromPoint(x, y);
+    if (range && el.contains(range.startContainer)) {
+      selection.removeAllRanges();
+      selection.addRange(range);
+      return;
+    }
+  }
+  const caretPositionFromPoint = document.caretPositionFromPoint;
+  if (typeof caretPositionFromPoint === "function") {
+    const position = caretPositionFromPoint(x, y);
+    if (position && el.contains(position.offsetNode)) {
+      const range = document.createRange();
+      range.setStart(position.offsetNode, position.offset);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
+  }
+}
 function collectSections() {
   return collectSectionsFromDom();
 }
@@ -6490,6 +6555,8 @@ function OhhwellsBridge() {
   });
   const selectRef = (0, import_react6.useRef)(() => {
   });
+  const selectFrameRef = (0, import_react6.useRef)(() => {
+  });
   const deselectRef = (0, import_react6.useRef)(() => {
   });
   const reselectNavigationItemRef = (0, import_react6.useRef)(() => {
@@ -6780,7 +6847,24 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [deactivate]);
-  const activate = (0, import_react6.useCallback)((el) => {
+  const selectFrame = (0, import_react6.useCallback)((el) => {
+    if (!isNavigationContainer(el)) return;
+    if (activeElRef.current) deactivate();
+    selectedElRef.current = el;
+    clearHrefKeyHover(el);
+    setHoveredItemRect(null);
+    hoveredItemElRef.current = null;
+    siblingHintElRef.current = null;
+    setSiblingHintRect(null);
+    setIsItemDragging(false);
+    setReorderHrefKey(null);
+    setReorderDragDisabled(false);
+    setToolbarVariant("select-frame");
+    setToolbarRect(el.getBoundingClientRect());
+    setToolbarShowEditLink(false);
+    setActiveCommands(/* @__PURE__ */ new Set());
+  }, [deactivate]);
+  const activate = (0, import_react6.useCallback)((el, options) => {
     if (activeElRef.current === el) return;
     selectedElRef.current = null;
     deactivate();
@@ -6798,6 +6882,9 @@ function OhhwellsBridge() {
     activeElRef.current = el;
     originalContentRef.current = el.innerHTML;
     el.focus();
+    if (options?.caretX !== void 0 && options?.caretY !== void 0) {
+      placeCaretAtPoint(el, options.caretX, options.caretY);
+    }
     setToolbarShowEditLink(Boolean(getHrefKeyFromElement(el)));
     const navAnchor = getNavigationItemAnchor(el);
     if (navAnchor) {
@@ -6815,6 +6902,7 @@ function OhhwellsBridge() {
   activateRef.current = activate;
   deactivateRef.current = deactivate;
   selectRef.current = select;
+  selectFrameRef.current = selectFrame;
   deselectRef.current = deselect;
   (0, import_react6.useLayoutEffect)(() => {
     if (!subdomain || isEditMode) {
@@ -7076,7 +7164,7 @@ function OhhwellsBridge() {
           e.preventDefault();
           e.stopPropagation();
           if (selectedElRef.current === navAnchor) {
-            activateRef.current(editable);
+            activateRef.current(editable, { caretX: e.clientX, caretY: e.clientY });
             return;
           }
           selectRef.current(navAnchor);
@@ -7095,6 +7183,15 @@ function OhhwellsBridge() {
         selectRef.current(hrefAnchor);
         return;
       }
+      const selectedContainer = selectedElRef.current;
+      if (selectedContainer && isNavigationContainer(selectedContainer)) {
+        const navItem = getNavigationItemAnchor(target);
+        if (!navItem && (selectedContainer === target || selectedContainer.contains(target))) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+      }
       if (activeElRef.current) {
         const sel = window.getSelection();
         if (sel && !sel.isCollapsed) {
@@ -7698,7 +7795,12 @@ function OhhwellsBridge() {
         return;
       }
       if (e.key === "Escape" && selectedElRef.current && !activeElRef.current) {
-        deselectRef.current();
+        const parent = getNavigationSelectionParent(selectedElRef.current);
+        if (parent) {
+          selectFrameRef.current(parent);
+        } else {
+          deselectRef.current();
+        }
         return;
       }
       if (e.key === "Escape" && activeElRef.current) {
@@ -7937,7 +8039,17 @@ function OhhwellsBridge() {
         return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
       });
       if (textEditable) {
-        activateRef.current(textEditable);
+        const hrefCtx = getHrefKeyFromElement(textEditable);
+        const navAnchor = hrefCtx ? getNavigationItemAnchor(hrefCtx.anchor) : null;
+        if (navAnchor) {
+          if (selectedElRef.current === navAnchor) {
+            activateRef.current(textEditable, { caretX: clientX, caretY: clientY });
+          } else {
+            selectRef.current(navAnchor);
+          }
+          return;
+        }
+        activateRef.current(textEditable, { caretX: clientX, caretY: clientY });
         return;
       }
       deactivateRef.current();
@@ -8119,25 +8231,25 @@ function OhhwellsBridge() {
       /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
       siblingHintRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
       hoveredItemRect && !siblingHintRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-      toolbarRect && toolbarVariant === "link-action" && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
         ItemInteractionLayer,
         {
           rect: toolbarRect,
           elRef: glowElRef,
           state: isItemDragging ? "dragging" : resolveItemInteractionState(toolbarRect, parentScrollRef.current),
-          showHandle: Boolean(reorderHrefKey),
+          showHandle: toolbarVariant === "link-action" && Boolean(reorderHrefKey),
           dragDisabled: reorderDragDisabled,
           dragHandleLabel: reorderHrefKey ? `Reorder ${reorderHrefKey}` : "Reorder item",
           onDragHandleDragStart: handleItemDragStart,
           onDragHandleDragEnd: handleItemDragEnd,
-          toolbar: isItemDragging ? void 0 : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
             ItemActionToolbar,
             {
               onEditLink: openLinkPopoverForSelected,
               onAddItem: handleAddNavigationItem,
               addItemDisabled: false
             }
-          )
+          ) : void 0
         }
       ),
       toolbarRect && toolbarVariant === "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [