@prosekit/web 0.5.3 → 0.5.4

package/dist/_tsup-dts-rollup.d.ts

@@ -333,7 +333,7 @@ declare const blockHandlePopoverEvents: EventDeclarations<BlockHandlePopoverEven
 export { blockHandlePopoverEvents }
 export { blockHandlePopoverEvents as blockHandlePopoverEvents_alias_1 }
 
-declare interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, 'placement'> {
+declare interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist'> {
     /**
      * The ProseKit editor instance.
      *
@@ -344,9 +344,16 @@ declare interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, '
     /**
      * The placement of the popover, relative to the hovered block.
      *
-     * @default "left-start"
+     * @default "left"
      */
     placement: Placement;
+    /**
+     * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+     * to place the floating element on top of other page content.
+     *
+     * @default false
+     */
+    hoist: boolean;
 }
 export { BlockHandlePopoverProps }
 export { BlockHandlePopoverProps as BlockHandlePopoverProps_alias_1 }
@@ -376,6 +383,16 @@ export declare function defineElementHoverHandler(handler: ElementHoverHandler):
 
 export declare type ElementHoverHandler = (reference: VirtualElement | null, hoverState: HoverState | null) => void;
 
+/**
+ * Similar to `element.getBoundingClientRect`, but handles `display: contents` elements.
+ */
+export declare function getClientRect(element: Element): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+
 export declare function getHoveringCell(view: EditorView, event: MouseEvent): HoveringCellInfo | undefined;
 
 export declare function getStateWithDefaults<Props extends Record<string, any> = Record<string, any>>(state: Partial<SignalState<Props>>, props: PropDeclarations<Props>): SignalState<Props>;
@@ -597,6 +614,13 @@ export { popoverTriggerProps as popoverTriggerProps_alias_1 }
 
 export declare const queryContext: Context<string>;
 
+export declare interface Rect {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+
 declare class ResizableHandleElement extends ResizableHandleElement_base {
 }
 export { ResizableHandleElement }

package/dist/prosekit-web-block-handle.js

@@ -155,6 +155,30 @@ import {
   union
 } from "@prosekit/core";
 
+// src/utils/get-client-rect.ts
+function getClientRect(element) {
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0) {
+    if (element.getClientRects().length === 0) {
+      const children = Array.from(element.children);
+      const rects = children.map((child) => getClientRect(child)).filter((x) => !!x);
+      if (rects.length === 0) {
+        return rect;
+      }
+      if (rects.length === 1) {
+        return rects[0];
+      }
+      return {
+        top: Math.min(...rects.map((rect2) => rect2.top)),
+        right: Math.max(...rects.map((rect2) => rect2.right)),
+        bottom: Math.max(...rects.map((rect2) => rect2.bottom)),
+        left: Math.min(...rects.map((rect2) => rect2.left))
+      };
+    }
+  }
+  return rect;
+}
+
 // src/utils/throttle.ts
 function throttle(callback, wait) {
   let lastTime = 0;
@@ -168,56 +192,39 @@ function throttle(callback, wait) {
 }
 
 // src/components/block-handle/block-handle-popover/pointer-move.ts
+var TEXT_NODE = 3;
+var ELEMENT_NODE = 1;
 function defineElementHoverHandler(handler) {
+  const handleElement = (element, node, pos, parentElement) => {
+    const reference = {
+      contextElement: element,
+      getBoundingClientRect: () => {
+        const rect = findFirstLineRect(parentElement, element);
+        return rect ? fulfillRect(rect) : fallbackRect;
+      }
+    };
+    handler(reference, { element, node, pos });
+  };
   const handlePointerEvent = (view, event) => {
-    const rect = view.dom.getBoundingClientRect();
-    const pos = view.posAtCoords({
-      top: event.clientY,
-      // Use the center of the editor
-      left: rect.left + rect.width / 2
-    })?.inside;
-    if (pos == null || pos < 0) {
+    const { x, y } = event;
+    const block = findBlockByCoordinate(view, x, y);
+    if (!block) {
       handler(null, null);
       return;
     }
-    const $pos = view.state.doc.resolve(pos);
-    const node = view.state.doc.nodeAt(pos);
-    const element = view.nodeDOM(pos);
-    if ($pos.depth >= 1 && $pos.index($pos.depth) === 0) {
-      const ancestorPos = $pos.before($pos.depth);
-      const node2 = view.state.doc.nodeAt(ancestorPos);
-      const element2 = view.nodeDOM(ancestorPos);
-      if (!element2 || !node2) {
-        handler(null, null);
-        return;
-      }
-      const reference = {
-        contextElement: element2,
-        // Get the bounding client rect of the parent node, including its
-        // margins.
-        getBoundingClientRect: () => {
-          const rect2 = element2.getBoundingClientRect();
-          const style = window.getComputedStyle(element2);
-          const marginTop = Number.parseInt(style.marginTop, 10) || 0;
-          const marginRight = Number.parseInt(style.marginRight, 10) || 0;
-          const marginBottom = Number.parseInt(style.marginBottom, 10) || 0;
-          const marginLeft = Number.parseInt(style.marginLeft, 10) || 0;
-          return {
-            top: rect2.top - marginTop,
-            right: rect2.right + marginRight,
-            bottom: rect2.bottom + marginBottom,
-            left: rect2.left - marginLeft,
-            width: rect2.width + marginLeft + marginRight,
-            height: rect2.height + marginTop + marginBottom,
-            x: rect2.x - marginLeft,
-            y: rect2.y - marginTop
-          };
-        }
-      };
-      handler(reference, { element: element2, node: node2, pos: ancestorPos });
+    const { node, pos } = block;
+    const element = getElementAtPos(view, pos);
+    if (!element) {
+      handler(null, null);
       return;
     }
-    handler(element, element && node && { element, node, pos });
+    const $pos = view.state.doc.resolve(pos);
+    let parentElement;
+    if ($pos.depth > 0 && $pos.index($pos.depth) === 0) {
+      const parentPos = $pos.before($pos.depth);
+      parentElement = view.nodeDOM(parentPos);
+    }
+    handleElement(element, node, pos, parentElement);
   };
   return union(
     defineDOMEventHandler("pointermove", throttle(handlePointerEvent, 200)),
@@ -225,6 +232,154 @@ function defineElementHoverHandler(handler) {
     defineDOMEventHandler("keypress", () => handler(null, null))
   );
 }
+function getElementAtPos(view, pos) {
+  const node = view.nodeDOM(pos);
+  if (node && node.nodeType === ELEMENT_NODE) {
+    return node;
+  }
+}
+function findBlockByCoordinate(view, x, y) {
+  const dom = view.dom;
+  const rect = getClientRect(dom);
+  if (!isWithinRect(rect, x, y)) {
+    return;
+  }
+  let parent = view.state.doc;
+  let pos = -1;
+  while (parent) {
+    if (parent.isBlock && (parent.isTextblock || parent.isAtom)) {
+      return { node: parent, pos };
+    }
+    const children = [];
+    const positions = [];
+    parent.forEach((child, offset) => {
+      children.push(child);
+      positions.push(offset + pos + 1);
+    });
+    let lo = 0;
+    let hi = children.length - 1;
+    while (lo <= hi) {
+      const i = hi - (hi - lo >> 1);
+      const childDOM = view.nodeDOM(positions[i]);
+      const childRect = getNodeRect(childDOM);
+      if (!childRect) {
+        console.warn("[prosekit] Unable to get rect at position", positions[i]);
+        return;
+      }
+      if (childRect.top > y) {
+        hi = i - 1;
+      } else if (childRect.bottom < y) {
+        lo = i + 1;
+      } else {
+        lo = i;
+        break;
+      }
+    }
+    if (lo > hi) {
+      return;
+    }
+    parent = children[lo];
+    pos = positions[lo];
+  }
+}
+function getNodeRect(node) {
+  if (!node || node.nodeType !== ELEMENT_NODE) {
+    return;
+  }
+  const element = node;
+  if (!element.isConnected) {
+    return;
+  }
+  return getClientRect(element);
+}
+function isWithinRect(rect, x, y) {
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+function findFirstLineRect(outer, inner) {
+  if (outer && !outer.isConnected) {
+    return;
+  }
+  if (inner && !inner.isConnected) {
+    return;
+  }
+  if (outer && inner) {
+    const outerRect = findOuterRect(outer);
+    const innerRect = findFirstLineRectInNode(inner);
+    if (outerRect && innerRect) {
+      const { top, bottom } = innerRect;
+      const { left, right } = outerRect;
+      return { top, bottom, left, right };
+    } else {
+      return outerRect || innerRect;
+    }
+  } else if (outer) {
+    return findFirstLineRectInNode(outer);
+  } else if (inner) {
+    return findFirstLineRectInNode(inner);
+  }
+}
+function findOuterRect(node) {
+  if (node.nodeType !== ELEMENT_NODE) {
+    return;
+  }
+  const element = node;
+  const rect = getClientRect(element);
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  const marginLeft = style && Number.parseInt(style.marginLeft, 10) || 0;
+  const marginRight = style && Number.parseInt(style.marginRight, 10) || 0;
+  const left = rect.left - marginLeft;
+  const right = rect.right + marginRight;
+  return { top: rect.top, bottom: rect.bottom, left, right };
+}
+function findFirstLineRectInNode(node) {
+  switch (node.nodeType) {
+    case TEXT_NODE:
+      return findFirstLineRectInTextNode(node);
+    case ELEMENT_NODE:
+      return findFirstLineRectInElement(node);
+  }
+}
+function findFirstLineRectInTextNode(node) {
+  const ownerDocument = node.ownerDocument;
+  if (!ownerDocument) {
+    return;
+  }
+  const range = ownerDocument.createRange();
+  range.setStart(node, 0);
+  range.setEnd(node, 0);
+  const rects = range.getClientRects();
+  return rects[0];
+}
+function findFirstLineRectInElement(element) {
+  if (element.nodeName === "BR") {
+    return element.getBoundingClientRect();
+  }
+  const rect = getClientRect(element);
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  const marginLeft = style && Number.parseInt(style.marginLeft, 10) || 0;
+  const marginRight = style && Number.parseInt(style.marginRight, 10) || 0;
+  const left = rect.left - marginLeft;
+  const right = rect.right + marginRight;
+  const lineHeight = style && Number.parseInt(style.lineHeight, 10) || 24;
+  const paddingTop = style && Number.parseInt(style.paddingTop, 10) || 0;
+  const borderTop = style && Number.parseInt(style.borderTopWidth, 10) || 0;
+  const top = rect.top + paddingTop + borderTop;
+  const bottom = top + lineHeight;
+  return { top, bottom, left, right };
+}
+function fulfillRect({ top, right, bottom, left }) {
+  return { top, right, bottom, left, width: right - left, height: bottom - top, x: left, y: top };
+}
+var fallbackRect = Object.freeze({
+  top: -9999,
+  right: -9999,
+  bottom: -9999,
+  left: -9999,
+  width: 0,
+  height: 0,
+  x: -9999,
+  y: -9999
+});
 
 // src/components/block-handle/block-handle-popover/setup.ts
 function useBlockHandlePopover(host, { state }) {
@@ -268,7 +423,10 @@ import {
 var blockHandlePopoverProps = {
   ...overlayPositionerProps,
   editor: { default: null },
-  placement: { default: "left-start" }
+  placement: { default: "left" },
+  // Enabling `hoist` will cause the block handle to have a small delay when
+  // scrolling the page.
+  hoist: { default: false }
 };
 var blockHandlePopoverEvents = {};
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "private": false,
   "author": {
     "name": "ocavue",
@@ -72,20 +72,20 @@
   "dependencies": {
     "@aria-ui/collection": "^0.0.4",
     "@aria-ui/core": "^0.0.20",
-    "@aria-ui/listbox": "^0.0.22",
-    "@aria-ui/menu": "^0.0.17",
+    "@aria-ui/listbox": "^0.0.23",
+    "@aria-ui/menu": "^0.0.18",
     "@aria-ui/overlay": "^0.0.23",
-    "@aria-ui/popover": "^0.0.25",
-    "@aria-ui/presence": "^0.0.17",
-    "@aria-ui/tooltip": "^0.0.27",
-    "@floating-ui/dom": "^1.6.12",
-    "@zag-js/dom-query": "^0.79.3",
+    "@aria-ui/popover": "^0.0.26",
+    "@aria-ui/presence": "^0.0.18",
+    "@aria-ui/tooltip": "^0.0.28",
+    "@floating-ui/dom": "^1.6.13",
+    "@zag-js/dom-query": "^0.81.2",
     "just-map-values": "^3.2.0",
     "just-omit": "^2.2.0",
     "prosemirror-tables": "^1.6.2",
     "@prosekit/core": "^0.7.14",
-    "@prosekit/pm": "^0.1.9",
-    "@prosekit/extensions": "^0.7.23"
+    "@prosekit/extensions": "^0.7.23",
+    "@prosekit/pm": "^0.1.9"
   },
   "devDependencies": {
     "tsup": "^8.3.5",