@prosekit/web 0.6.1 → 0.7.1

package/dist/{clone-element-B55UD54E.js → clone-element-CwLKm7c_.js}

@@ -1,16 +1,7 @@
-//#region src/utils/assign-styles.ts
-/**
-* A type-safe version of `Object.assign` for `element.style`.
-*/
-function assignStyles(element, styles) {
-	Object.assign(element.style, styles);
-}
-
-//#endregion
 //#region src/utils/clone-element.ts
 /**
 * Creates a deep clone of an Element, including all computed styles so that
-* it looks the same as the original element.
+* it looks almost exactly the same as the original element.
 */
 function deepCloneElement(element) {
 	const clonedElement = element.cloneNode(true);
@@ -47,4 +38,4 @@ function copyStyles(source, target) {
 }
 
 //#endregion
-export { assignStyles, cloneElement, deepCloneElement };
+export { cloneElement, deepCloneElement };

package/dist/{get-safe-editor-view-CqJWgxo1.js → get-default-state-CIEy7xrl.js}

@@ -8,14 +8,4 @@ function getStateWithDefaults(state, props) {
 }
 
 //#endregion
-//#region src/utils/get-safe-editor-view.ts
-/**
-* @internal
-*/
-function getSafeEditorView(editor) {
-	if (!editor || !editor.mounted) return;
-	return editor.view;
-}
-
-//#endregion
-export { getSafeEditorView, getStateWithDefaults };
+export { getStateWithDefaults };

package/dist/get-safe-editor-view-DENm4avv.js

@@ -0,0 +1,11 @@
+//#region src/utils/get-safe-editor-view.ts
+/**
+* @internal
+*/
+function getSafeEditorView(editor) {
+	if (!editor || !editor.mounted) return;
+	return editor.view;
+}
+
+//#endregion
+export { getSafeEditorView };

package/dist/prosekit-web-autocomplete.d.ts

@@ -157,4 +157,4 @@ declare function useAutocompletePopover(host: ConnectableElement, {
   emit
 }: SetupOptions<AutocompletePopoverProps, AutocompletePopoverEvents>): void;
 //#endregion
-export { AutocompleteEmptyElement, AutocompleteEmptyEvents, AutocompleteEmptyProps, AutocompleteItemElement, AutocompleteItemEvents, AutocompleteItemProps, AutocompleteListElement, AutocompleteListEvents, AutocompleteListProps, AutocompletePopoverElement, AutocompletePopoverEvents, AutocompletePopoverProps, autocompleteEmptyEvents, autocompleteEmptyProps, autocompleteItemEvents, autocompleteItemProps, autocompleteListEvents, autocompleteListProps, autocompletePopoverEvents, autocompletePopoverProps, useAutocompleteEmpty, useAutocompleteItem, useAutocompleteList, useAutocompletePopover };
+export { AutocompleteEmptyElement, type AutocompleteEmptyEvents, type AutocompleteEmptyProps, AutocompleteItemElement, type AutocompleteItemEvents, type AutocompleteItemProps, AutocompleteListElement, type AutocompleteListEvents, type AutocompleteListProps, AutocompletePopoverElement, type AutocompletePopoverEvents, type AutocompletePopoverProps, autocompleteEmptyEvents, autocompleteEmptyProps, autocompleteItemEvents, autocompleteItemProps, autocompleteListEvents, autocompleteListProps, autocompletePopoverEvents, autocompletePopoverProps, useAutocompleteEmpty, useAutocompleteItem, useAutocompleteList, useAutocompletePopover };

package/dist/prosekit-web-autocomplete.js

@@ -1,5 +1,6 @@
-import { getSafeEditorView, getStateWithDefaults } from "./get-safe-editor-view-CqJWgxo1.js";
+import { getStateWithDefaults } from "./get-default-state-CIEy7xrl.js";
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
+import { getSafeEditorView } from "./get-safe-editor-view-DENm4avv.js";
 import { createComputed, createContext, createSignal, defineCustomElement, registerCustomElement, useAnimationFrame, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
 import { listboxProps, useListbox, useListboxEmpty, useListboxItem } from "@aria-ui/listbox/elements";
 import { listboxEvents, listboxItemEvents, listboxProps as listboxProps$1 } from "@aria-ui/listbox";

package/dist/prosekit-web-block-handle.d.ts

@@ -67,7 +67,7 @@ declare function useBlockHandleDraggable(host: ConnectableElement, {
 }): void;
 //#endregion
 //#region src/components/block-handle/block-handle-popover/types.d.ts
-interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, "placement" | "hoist"> {
+interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, "placement" | "hoist" | "flip" | "shift" | "hide"> {
   /**
   * The ProseKit editor instance.
   *
@@ -88,6 +88,21 @@ interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, "placemen
   * @default false
   */
   hoist: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  flip: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  shift: boolean;
+  /**
+  * @default true
+  * @hidden
+  */
+  hide: boolean;
 }
 /** @internal */
 declare const blockHandlePopoverProps: PropDeclarations<BlockHandlePopoverProps>;
@@ -116,4 +131,4 @@ declare function useBlockHandlePopover(host: ConnectableElement, {
   emit
 }: SetupOptions<BlockHandlePopoverProps, BlockHandlePopoverEvents>): void;
 //#endregion
-export { BlockHandleAddElement, BlockHandleAddEvents, BlockHandleAddProps, BlockHandleDraggableElement, BlockHandleDraggableEvents, BlockHandleDraggableProps, BlockHandlePopoverElement, BlockHandlePopoverEvents, BlockHandlePopoverProps, blockHandleAddEvents, blockHandleAddProps, blockHandleDraggableEvents, blockHandleDraggableProps, blockHandlePopoverEvents, blockHandlePopoverProps, useBlockHandleAdd, useBlockHandleDraggable, useBlockHandlePopover };
+export { BlockHandleAddElement, type BlockHandleAddEvents, type BlockHandleAddProps, BlockHandleDraggableElement, type BlockHandleDraggableEvents, type BlockHandleDraggableProps, BlockHandlePopoverElement, type BlockHandlePopoverEvents, type BlockHandlePopoverProps, blockHandleAddEvents, blockHandleAddProps, blockHandleDraggableEvents, blockHandleDraggableProps, blockHandlePopoverEvents, blockHandlePopoverProps, useBlockHandleAdd, useBlockHandleDraggable, useBlockHandlePopover };

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

@@ -1,6 +1,8 @@
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
-import { assignStyles, deepCloneElement } from "./clone-element-B55UD54E.js";
-import { createContext, createSignal, defineCustomElement, registerCustomElement, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
+import { getSafeEditorView } from "./get-safe-editor-view-DENm4avv.js";
+import { assignStyles, useScrolling } from "./use-scrolling-BNfsQs3S.js";
+import { deepCloneElement } from "./clone-element-CwLKm7c_.js";
+import { createComputed, createContext, createSignal, defineCustomElement, registerCustomElement, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
 import { defineDOMEventHandler, insertDefaultBlock, union } from "@prosekit/core";
 import { overlayPositionerEvents, overlayPositionerProps, useOverlayPositionerState } from "@aria-ui/overlay/elements";
 import { usePresence } from "@aria-ui/presence";
@@ -13,6 +15,10 @@ import { NodeSelection } from "@prosekit/pm/state";
 * @internal
 */
 const blockPopoverContext = createContext("prosekit-block-popover-context", null);
+/**
+* @internal
+*/
+const draggingContext = createContext("prosekit-block-handle-dragging-context", false);
 
 //#endregion
 //#region src/components/block-handle/block-handle-add/setup.ts
@@ -50,6 +56,38 @@ const BlockHandleAddElementBase = defineCustomElement({
 var BlockHandleAddElement = class extends BlockHandleAddElementBase {};
 registerCustomElement("prosekit-block-handle-add", BlockHandleAddElement);
 
+//#endregion
+//#region src/utils/get-client-rect.ts
+/**
+* Similar to `element.getBoundingClientRect`, but handles `display: contents` elements.
+*/
+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));
+			if (rects.length === 0) return rect;
+			if (rects.length === 1) return rects[0];
+			let { top, bottom, left, right } = rects[0];
+			for (let i = 1; i < rects.length; i++) {
+				const r = rects[i];
+				if (r.top < top) top = r.top;
+				if (r.bottom > bottom) bottom = r.bottom;
+				if (r.left < left) left = r.left;
+				if (r.right > right) right = r.right;
+			}
+			return {
+				top,
+				bottom,
+				left,
+				right
+			};
+		}
+	}
+	return rect;
+}
+
 //#endregion
 //#region src/utils/max-z-index.ts
 const maxZIndex = "2147483647";
@@ -68,8 +106,11 @@ const maxZIndex = "2147483647";
 * - Removes the container from the document body after the next frame.
 */
 function setDragPreview(event, element) {
-	const rect = element.getBoundingClientRect();
-	const { width, height, x: elementX, y: elementY } = rect;
+	const { top, bottom, left, right } = getClientRect(element);
+	const width = right - left;
+	const height = bottom - top;
+	const elementX = left;
+	const elementY = top;
 	const { clientX, clientY } = event;
 	const document = element.ownerDocument;
 	const container = document.createElement("div");
@@ -90,8 +131,8 @@ function setDragPreview(event, element) {
 	});
 	const clonedElement = deepCloneElement(element);
 	assignStyles(clonedElement, {
-		outline: "none",
-		opacity: "0.5"
+		opacity: "0.5",
+		margin: "0"
 	});
 	document.body.appendChild(container);
 	container.appendChild(clonedElement);
@@ -108,12 +149,27 @@ function setDragPreview(event, element) {
 */
 function useBlockHandleDraggable(host, { state }) {
 	const context = blockPopoverContext.consume(host);
+	const dragging = draggingContext.consume(host);
 	useEffect(host, () => {
 		host.draggable = true;
 	});
 	usePointerDownHandler(host, context, state.editor);
-	useDraggingPreview(host, context, state.editor);
-	useDataDraggingAttribute(host);
+	useEventListener(host, "dragstart", (event) => {
+		dragging.set(true);
+		const view = getSafeEditorView(state.editor.get());
+		const hoverState = context.get();
+		if (view && hoverState) {
+			view.dom.classList.add("prosekit-dragging");
+			createDraggingPreview(view, hoverState, event);
+			setViewDragging(view, hoverState);
+		}
+	});
+	useEventListener(host, "dragend", () => {
+		dragging.set(false);
+		const view = getSafeEditorView(state.editor.get());
+		if (view) view.dom.classList.remove("prosekit-dragging");
+	});
+	useAttribute(host, "data-dragging", () => dragging.get() ? "" : void 0);
 }
 function usePointerDownHandler(host, context, editor) {
 	useEventListener(host, "pointerdown", () => {
@@ -126,39 +182,24 @@ function usePointerDownHandler(host, context, editor) {
 		});
 	});
 }
-function useDraggingPreview(host, context, editor) {
-	useEventListener(host, "dragstart", (event) => {
-		const hoverState = context.get();
-		const { view } = editor.get() ?? {};
-		if (!hoverState || !view || !event.dataTransfer) return;
-		const { node, pos } = hoverState;
-		const element = view.nodeDOM(pos);
-		if (!element || !isHTMLElement(element)) return;
-		event.dataTransfer.clearData();
-		event.dataTransfer.setData("text/html", element.outerHTML);
-		event.dataTransfer.effectAllowed = "copyMove";
-		setDragPreview(event, element);
-		const dragging = {
-			slice: new Slice(Fragment.from(node), 0, 0),
-			move: true,
-			node: NodeSelection.create(view.state.doc, pos)
-		};
-		view.dragging = dragging;
-	});
+function createDraggingPreview(view, hoverState, event) {
+	if (!event.dataTransfer) return;
+	const { pos } = hoverState;
+	const element = view.nodeDOM(pos);
+	if (!element || !isHTMLElement(element)) return;
+	event.dataTransfer.clearData();
+	event.dataTransfer.setData("text/html", element.outerHTML);
+	event.dataTransfer.effectAllowed = "copyMove";
+	setDragPreview(event, element);
 }
-function useDataDraggingAttribute(host) {
-	const dragging = useDragging(host);
-	useAttribute(host, "data-dragging", () => dragging.get() ? "" : void 0);
-}
-function useDragging(host) {
-	const dragging = createSignal(false);
-	useEventListener(host, "dragstart", () => {
-		dragging.set(true);
-	});
-	useEventListener(host, "dragend", () => {
-		dragging.set(false);
-	});
-	return dragging;
+function setViewDragging(view, hoverState) {
+	const { node, pos } = hoverState;
+	const dragging = {
+		slice: new Slice(Fragment.from(node), 0, 0),
+		move: true,
+		node: NodeSelection.create(view.state.doc, pos)
+	};
+	view.dragging = dragging;
 }
 
 //#endregion
@@ -178,30 +219,6 @@ const BlockHandleDraggableElementBase = defineCustomElement({
 var BlockHandleDraggableElement = class extends BlockHandleDraggableElementBase {};
 registerCustomElement("prosekit-block-handle-draggable", BlockHandleDraggableElement);
 
-//#endregion
-//#region src/utils/get-client-rect.ts
-/**
-* Similar to `element.getBoundingClientRect`, but handles `display: contents` elements.
-*/
-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((rect$1) => rect$1.top)),
-				right: Math.max(...rects.map((rect$1) => rect$1.right)),
-				bottom: Math.max(...rects.map((rect$1) => rect$1.bottom)),
-				left: Math.min(...rects.map((rect$1) => rect$1.left))
-			};
-		}
-	}
-	return rect;
-}
-
 //#endregion
 //#region src/utils/throttle.ts
 /**
@@ -236,7 +253,7 @@ function defineElementHoverHandler(handler) {
 	};
 	const handlePointerEvent = (view, event) => {
 		const { x, y } = event;
-		const block = findBlockByCoordinate(view, x, y);
+		const block = findBlockByCoords(view, x, y);
 		if (!block) {
 			handler(null, null);
 			return;
@@ -257,9 +274,8 @@ function defineElementHoverHandler(handler) {
 	};
 	return union(defineDOMEventHandler("pointermove", throttle(handlePointerEvent, 200)), defineDOMEventHandler("pointerout", handlePointerEvent), defineDOMEventHandler("keypress", () => handler(null, null)));
 }
-function findBlockByCoordinate(view, x, y) {
-	const dom = view.dom;
-	const rect = getClientRect(dom);
+function findBlockByCoords(view, x, y) {
+	const rect = getClientRect(view.dom);
 	if (!isWithinRect(rect, x, y)) return;
 	let parent = view.state.doc;
 	let pos = -1;
@@ -281,7 +297,7 @@ function findBlockByCoordinate(view, x, y) {
 			const childDOM = view.nodeDOM(positions[i]);
 			const childRect = getNodeRect(childDOM);
 			if (!childRect) {
-				console.warn("[prosekit] Unable to get rect at position", positions[i]);
+				console.warn(`[prosekit] Unable to get rect at position: ${positions[i]}`);
 				return;
 			}
 			if (childRect.top > y) hi = i - 1;
@@ -403,9 +419,11 @@ function useBlockHandlePopover(host, { state, emit }) {
 	useOverlayPositionerState(host, overlayState, { reference });
 	const context = createSignal(null);
 	blockPopoverContext.provide(host, context);
-	const open = createSignal(false);
-	useEffect(host, () => {
-		open.set(!!context.get());
+	const dragging = createSignal(false);
+	draggingContext.provide(host, dragging);
+	const scrolling = useScrolling(host);
+	const open = createComputed(() => {
+		return !!context.get() && !scrolling.get();
 	});
 	useHoverExtension(host, editor, (referenceValue, hoverState) => {
 		reference.set(referenceValue);
@@ -441,7 +459,10 @@ const blockHandlePopoverProps = {
 	...overlayPositionerProps,
 	editor: { default: null },
 	placement: { default: "left" },
-	hoist: { default: false }
+	hoist: { default: false },
+	flip: { default: false },
+	shift: { default: false },
+	hide: { default: true }
 };
 /** @internal */
 const blockHandlePopoverEvents = {

package/dist/prosekit-web-drop-indicator.d.ts

@@ -0,0 +1,38 @@
+import { BaseElementConstructor, ConnectableElement, EventDeclarations, PropDeclarations, SetupOptions } from "@aria-ui/core";
+import { Editor } from "@prosekit/core";
+
+//#region src/components/drop-indicator/drop-indicator/types.d.ts
+interface DropIndicatorProps {
+  /**
+  * The ProseKit editor instance.
+  *
+  * @default null
+  * @hidden
+  */
+  editor: Editor | null;
+  /**
+  * The line width in pixels.
+  *
+  * @default 2
+  */
+  width: number;
+}
+/** @internal */
+declare const dropIndicatorProps: PropDeclarations<DropIndicatorProps>;
+interface DropIndicatorEvents {}
+/** @internal */
+declare const dropIndicatorEvents: EventDeclarations<DropIndicatorEvents>;
+//#endregion
+//#region src/components/drop-indicator/drop-indicator/element.gen.d.ts
+declare const DropIndicatorElementBase: BaseElementConstructor<DropIndicatorProps>;
+declare class DropIndicatorElement extends DropIndicatorElementBase {}
+//#endregion
+//#region src/components/drop-indicator/drop-indicator/setup.d.ts
+/**
+* @internal
+*/
+declare function useDropIndicator(host: ConnectableElement, {
+  state
+}: SetupOptions<DropIndicatorProps, DropIndicatorEvents>): void;
+//#endregion
+export { DropIndicatorElement, type DropIndicatorEvents, type DropIndicatorProps, dropIndicatorEvents, dropIndicatorProps, useDropIndicator };

package/dist/prosekit-web-drop-indicator.js

@@ -0,0 +1,78 @@
+import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
+import { assignStyles, useScrolling } from "./use-scrolling-BNfsQs3S.js";
+import { createComputed, createSignal, defineCustomElement, registerCustomElement, useEffect } from "@aria-ui/core";
+import { usePresence } from "@aria-ui/presence";
+import { defineDropIndicator } from "@prosekit/extensions/drop-indicator";
+
+//#region src/components/drop-indicator/drop-indicator/setup.ts
+/**
+* @internal
+*/
+function useDropIndicator(host, { state }) {
+	const context = createSignal(null);
+	const extension = defineDropIndicator({
+		onShow: (options) => context.set(options),
+		onHide: () => context.set(null)
+	});
+	useEditorExtension(host, state.editor, extension);
+	const line = createComputed(() => context.get()?.line);
+	const scrolling = useScrolling(host);
+	const presence = createComputed(() => {
+		return !!context.get() && !scrolling.get();
+	});
+	usePresence(host, presence);
+	useEffect(host, () => {
+		const lineValue = line.get();
+		const lineWidth = state.width.get();
+		if (!lineValue) return;
+		const { p1: { x: x1, y: y1 }, p2: { x: x2, y: y2 } } = lineValue;
+		const horizontal = y1 === y2;
+		let width;
+		let height;
+		let top = y1;
+		let left = x1;
+		if (horizontal) {
+			width = x2 - x1;
+			height = lineWidth;
+			top -= lineWidth / 2;
+		} else {
+			width = lineWidth;
+			height = y2 - y1;
+			left -= lineWidth / 2;
+		}
+		top = Math.round(top);
+		left = Math.round(left);
+		assignStyles(host, {
+			position: "fixed",
+			pointerEvents: "none",
+			width: `${width}px`,
+			height: `${height}px`,
+			transform: `translate(${left}px, ${top}px)`,
+			left: "0px",
+			top: "0px"
+		});
+	});
+}
+
+//#endregion
+//#region src/components/drop-indicator/drop-indicator/types.ts
+/** @internal */
+const dropIndicatorProps = Object.freeze({
+	editor: { default: null },
+	width: { default: 2 }
+});
+/** @internal */
+const dropIndicatorEvents = {};
+
+//#endregion
+//#region src/components/drop-indicator/drop-indicator/element.gen.ts
+const DropIndicatorElementBase = defineCustomElement({
+	props: dropIndicatorProps,
+	events: dropIndicatorEvents,
+	setup: useDropIndicator
+});
+var DropIndicatorElement = class extends DropIndicatorElementBase {};
+registerCustomElement("prosekit-drop-indicator", DropIndicatorElement);
+
+//#endregion
+export { DropIndicatorElement, dropIndicatorEvents, dropIndicatorProps, useDropIndicator };

package/dist/prosekit-web-inline-popover.d.ts

@@ -87,4 +87,4 @@ declare function useInlinePopover(host: ConnectableElement, {
   emit
 }: SetupOptions<InlinePopoverProps, InlinePopoverEvents>): void;
 //#endregion
-export { InlinePopoverElement, InlinePopoverEvents, InlinePopoverProps, inlinePopoverEvents, inlinePopoverProps, useInlinePopover };
+export { InlinePopoverElement, type InlinePopoverEvents, type InlinePopoverProps, inlinePopoverEvents, inlinePopoverProps, useInlinePopover };

package/dist/prosekit-web-popover.d.ts

@@ -25,4 +25,4 @@ interface PopoverTriggerEvents extends PopoverTriggerEvents$1 {}
 declare const PopoverTriggerElementBase: BaseElementConstructor<PopoverTriggerProps>;
 declare class PopoverTriggerElement extends PopoverTriggerElementBase {}
 //#endregion
-export { PopoverContentElement, PopoverContentEvents, PopoverContentProps, PopoverRootElement, PopoverRootEvents, PopoverRootProps, PopoverTriggerElement, PopoverTriggerEvents, PopoverTriggerProps, popoverContentEvents, popoverContentProps, popoverRootEvents, popoverRootProps, popoverTriggerEvents, popoverTriggerProps, usePopoverContent, usePopoverRoot, usePopoverTrigger };
+export { PopoverContentElement, type PopoverContentEvents, type PopoverContentProps, PopoverRootElement, type PopoverRootEvents, type PopoverRootProps, PopoverTriggerElement, type PopoverTriggerEvents, type PopoverTriggerProps, popoverContentEvents, popoverContentProps, popoverRootEvents, popoverRootProps, popoverTriggerEvents, popoverTriggerProps, usePopoverContent, usePopoverRoot, usePopoverTrigger };

package/dist/prosekit-web-resizable.d.ts

@@ -64,4 +64,4 @@ declare function useResizableRoot(host: ConnectableElement, {
   emit
 }: SetupOptions<ResizableRootProps, ResizableRootEvents>): void;
 //#endregion
-export { ResizableHandleElement, ResizableHandleEvents, ResizableHandleProps, ResizableRootElement, ResizableRootEvents, ResizableRootProps, resizableHandleEvents, resizableHandleProps, resizableRootEvents, resizableRootProps, useResizableHandle, useResizableRoot };
+export { ResizableHandleElement, type ResizableHandleEvents, type ResizableHandleProps, ResizableRootElement, type ResizableRootEvents, type ResizableRootProps, resizableHandleEvents, resizableHandleProps, resizableRootEvents, resizableRootProps, useResizableHandle, useResizableRoot };

package/dist/prosekit-web-table-handle.d.ts

@@ -7,7 +7,7 @@ import { Placement } from "@floating-ui/dom";
 import { MenuItemEvents, MenuItemProps } from "@aria-ui/menu";
 
 //#region src/components/table-handle/table-handle-column-root/types.d.ts
-interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, "placement"> {
+interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, "placement" | "hoist" | "flip" | "shift" | "hide"> {
   /**
   * The ProseKit editor instance.
   *
@@ -21,6 +21,28 @@ interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, "place
   * @default "top"
   */
   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;
+  /**
+  * @default false
+  * @hidden
+  */
+  flip: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  shift: boolean;
+  /**
+  * @default true
+  * @hidden
+  */
+  hide: boolean;
 }
 /** @internal */
 declare const tableHandleColumnRootProps: PropDeclarations<TableHandleColumnRootProps>;
@@ -195,7 +217,7 @@ declare function useTableHandleRoot(host: ConnectableElement, {
 }): void;
 //#endregion
 //#region src/components/table-handle/table-handle-row-root/types.d.ts
-interface TableHandleRowRootProps extends Omit<OverlayPositionerProps, "placement"> {
+interface TableHandleRowRootProps extends Omit<OverlayPositionerProps, "placement" | "hoist" | "flip" | "shift" | "hide"> {
   /**
   * The ProseKit editor instance.
   *
@@ -209,6 +231,28 @@ interface TableHandleRowRootProps extends Omit<OverlayPositionerProps, "placemen
   * @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;
+  /**
+  * @default false
+  * @hidden
+  */
+  flip: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  shift: boolean;
+  /**
+  * @default true
+  * @hidden
+  */
+  hide: boolean;
 }
 /** @internal */
 declare const tableHandleRowRootProps: PropDeclarations<TableHandleRowRootProps>;
@@ -254,4 +298,4 @@ declare function useTableHandleRowTrigger(host: ConnectableElement, {
   state
 }: SetupOptions<TableHandleRowTriggerProps, TableHandleRowTriggerEvents>): void;
 //#endregion
-export { TableHandleColumnRootElement, TableHandleColumnRootEvents, TableHandleColumnRootProps, TableHandleColumnTriggerElement, TableHandleColumnTriggerEvents, TableHandleColumnTriggerProps, TableHandleDragPreviewElement, TableHandleDragPreviewEvents, TableHandleDragPreviewProps, TableHandleDropIndicatorElement, TableHandleDropIndicatorEvents, TableHandleDropIndicatorProps, TableHandlePopoverContentElement, TableHandlePopoverContentEvents, TableHandlePopoverContentProps, TableHandlePopoverItemElement, TableHandlePopoverItemEvents, TableHandlePopoverItemProps, TableHandleRootElement, TableHandleRootEvents, TableHandleRootProps, TableHandleRowRootElement, TableHandleRowRootEvents, TableHandleRowRootProps, TableHandleRowTriggerElement, TableHandleRowTriggerEvents, TableHandleRowTriggerProps, tableHandleColumnRootEvents, tableHandleColumnRootProps, tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, tableHandleDragPreviewEvents, tableHandleDragPreviewProps, tableHandleDropIndicatorEvents, tableHandleDropIndicatorProps, tableHandlePopoverContentEvents, tableHandlePopoverContentProps, tableHandlePopoverItemEvents, tableHandlePopoverItemProps, tableHandleRootEvents, tableHandleRootProps, tableHandleRowRootEvents, tableHandleRowRootProps, tableHandleRowTriggerEvents, tableHandleRowTriggerProps, useTableHandleColumnRoot, useTableHandleColumnTrigger, useTableHandleDragPreview, useTableHandleDropIndicator, useTableHandlePopoverContent, useTableHandlePopoverItem, useTableHandleRoot, useTableHandleRowRoot, useTableHandleRowTrigger };
+export { TableHandleColumnRootElement, type TableHandleColumnRootEvents, type TableHandleColumnRootProps, TableHandleColumnTriggerElement, type TableHandleColumnTriggerEvents, type TableHandleColumnTriggerProps, TableHandleDragPreviewElement, type TableHandleDragPreviewEvents, type TableHandleDragPreviewProps, TableHandleDropIndicatorElement, type TableHandleDropIndicatorEvents, type TableHandleDropIndicatorProps, TableHandlePopoverContentElement, type TableHandlePopoverContentEvents, type TableHandlePopoverContentProps, TableHandlePopoverItemElement, type TableHandlePopoverItemEvents, type TableHandlePopoverItemProps, TableHandleRootElement, type TableHandleRootEvents, type TableHandleRootProps, TableHandleRowRootElement, type TableHandleRowRootEvents, type TableHandleRowRootProps, TableHandleRowTriggerElement, type TableHandleRowTriggerEvents, type TableHandleRowTriggerProps, tableHandleColumnRootEvents, tableHandleColumnRootProps, tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, tableHandleDragPreviewEvents, tableHandleDragPreviewProps, tableHandleDropIndicatorEvents, tableHandleDropIndicatorProps, tableHandlePopoverContentEvents, tableHandlePopoverContentProps, tableHandlePopoverItemEvents, tableHandlePopoverItemProps, tableHandleRootEvents, tableHandleRootProps, tableHandleRowRootEvents, tableHandleRowRootProps, tableHandleRowTriggerEvents, tableHandleRowTriggerProps, useTableHandleColumnRoot, useTableHandleColumnTrigger, useTableHandleDragPreview, useTableHandleDropIndicator, useTableHandlePopoverContent, useTableHandlePopoverItem, useTableHandleRoot, useTableHandleRowRoot, useTableHandleRowTrigger };

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

@@ -1,6 +1,8 @@
-import { getSafeEditorView, getStateWithDefaults } from "./get-safe-editor-view-CqJWgxo1.js";
+import { getStateWithDefaults } from "./get-default-state-CIEy7xrl.js";
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
-import { assignStyles, cloneElement, deepCloneElement } from "./clone-element-B55UD54E.js";
+import { getSafeEditorView } from "./get-safe-editor-view-DENm4avv.js";
+import { assignStyles, useScrolling } from "./use-scrolling-BNfsQs3S.js";
+import { cloneElement, deepCloneElement } from "./clone-element-CwLKm7c_.js";
 import { createComputed, createContext, createSignal, defineCustomElement, defineEmit, registerCustomElement, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
 import { defineDOMEventHandler, union } from "@prosekit/core";
 import { useOverlayPositionerState } from "@aria-ui/overlay/elements";
@@ -75,7 +77,11 @@ function useTableHandleColumnRoot(host, { state }) {
 const tableHandleColumnRootProps = Object.freeze({
 	...overlayPositionerProps$1,
 	editor: { default: null },
-	placement: { default: "top" }
+	placement: { default: "top" },
+	hoist: { default: false },
+	flip: { default: false },
+	shift: { default: false },
+	hide: { default: true }
 });
 /** @internal */
 const tableHandleColumnRootEvents = overlayPositionerEvents$1;
@@ -704,6 +710,43 @@ function useEditorTyping(host, editor) {
 	return typing;
 }
 
+//#endregion
+//#region src/hooks/use-selecting.ts
+/**
+* Detect if the user is selecting text inside the editor, in which case some
+* components should be disabled or hidden.
+*/
+function useSelecting(host, editor, enabled) {
+	const selecting = createSignal(false);
+	const isPointerDown = createSignal(false);
+	useEffect(host, () => {
+		if (!enabled.get()) return;
+		const view = getSafeEditorView(editor.peek());
+		if (!view) return;
+		const { dom, root } = view;
+		if (!root) return;
+		const handlePointerDown = () => {
+			selecting.set(true);
+			isPointerDown.set(true);
+		};
+		const handlePointerUp = () => {
+			isPointerDown.set(false);
+		};
+		const handleMouseMove = () => {
+			if (!isPointerDown.get()) selecting.set(false);
+		};
+		dom.addEventListener("pointerdown", handlePointerDown);
+		root.addEventListener("pointerup", handlePointerUp);
+		root.addEventListener("pointermove", handleMouseMove);
+		return () => {
+			dom.removeEventListener("pointerdown", handlePointerDown);
+			root.removeEventListener("pointerup", handlePointerUp);
+			root.removeEventListener("pointermove", handleMouseMove);
+		};
+	});
+	return selecting;
+}
+
 //#endregion
 //#region src/components/table-handle/hooks/use-drop.ts
 function useDrop(host, editor, dndContext) {
@@ -814,11 +857,12 @@ function useTableHandleRoot(host, { state }) {
 	const typing = useEditorTyping(host, editor);
 	const isInTable = createComputed(() => !!hoveringCell.get());
 	const selecting = useSelecting(host, editor, isInTable);
+	const scrolling = useScrolling(host);
+	const canShow = createComputed(() => {
+		return !typing.get() && !selecting.get() && !scrolling.get();
+	});
 	useEffect(host, () => {
-		const typingValue = typing.get();
-		const selectingValue = selecting.get();
-		const hoveringCellValue = hoveringCell.get();
-		context.set(typingValue || selectingValue ? null : hoveringCellValue);
+		context.set(canShow.get() ? hoveringCell.get() : null);
 	});
 	tableHandleRootContext.provide(host, context);
 	tableHandleDndContext.provide(host, dndContext);
@@ -840,33 +884,6 @@ function defineCellHoverHandler(handler) {
 	};
 	return defineDOMEventHandler("pointerover", pointerHandler);
 }
-/**
-* Detect if the user is selecting text by dragging.
-*/
-function useSelecting(host, editor, isInTable) {
-	const selecting = createSignal(false);
-	useEffect(host, () => {
-		if (!isInTable.get()) return;
-		const view = getSafeEditorView(editor.peek());
-		const root = view?.root;
-		if (!root) return;
-		const pointerDownHandler = (event) => {
-			const target = event.target;
-			if (!target || host.contains(event.target)) return;
-			selecting.set(true);
-		};
-		const pointerUpHandler = () => {
-			selecting.set(false);
-		};
-		root.addEventListener("pointerdown", pointerDownHandler);
-		root.addEventListener("pointerup", pointerUpHandler);
-		return () => {
-			root.removeEventListener("pointerdown", pointerDownHandler);
-			root.removeEventListener("pointerup", pointerUpHandler);
-		};
-	});
-	return selecting;
-}
 
 //#endregion
 //#region src/components/table-handle/table-handle-root/types.ts
@@ -924,7 +941,11 @@ function useTableHandleRowRoot(host, { state }) {
 const tableHandleRowRootProps = {
 	...overlayPositionerProps$1,
 	editor: { default: null },
-	placement: { default: "left" }
+	placement: { default: "left" },
+	hoist: { default: false },
+	flip: { default: false },
+	shift: { default: false },
+	hide: { default: true }
 };
 /** @internal */
 const tableHandleRowRootEvents = {};

package/dist/prosekit-web-tooltip.d.ts

@@ -25,4 +25,4 @@ interface TooltipTriggerEvents extends TooltipTriggerEvents$1 {}
 declare const TooltipTriggerElementBase: BaseElementConstructor<TooltipTriggerProps>;
 declare class TooltipTriggerElement extends TooltipTriggerElementBase {}
 //#endregion
-export { TooltipContentElement, TooltipContentEvents, TooltipContentProps, TooltipRootElement, TooltipRootEvents, TooltipRootProps, TooltipTriggerElement, TooltipTriggerEvents, TooltipTriggerProps, tooltipContentEvents, tooltipContentProps, tooltipRootEvents, tooltipRootProps, tooltipTriggerEvents, tooltipTriggerProps, useTooltipContent, useTooltipRoot, useTooltipTrigger };
+export { TooltipContentElement, type TooltipContentEvents, type TooltipContentProps, TooltipRootElement, type TooltipRootEvents, type TooltipRootProps, TooltipTriggerElement, type TooltipTriggerEvents, type TooltipTriggerProps, tooltipContentEvents, tooltipContentProps, tooltipRootEvents, tooltipRootProps, tooltipTriggerEvents, tooltipTriggerProps, useTooltipContent, useTooltipRoot, useTooltipTrigger };

package/dist/use-scrolling-BNfsQs3S.js

@@ -0,0 +1,35 @@
+import { createSignal, useEffect } from "@aria-ui/core";
+import { getNearestOverflowAncestor } from "@zag-js/dom-query";
+
+//#region src/utils/assign-styles.ts
+/**
+* A type-safe version of `Object.assign` for `element.style`.
+*/
+function assignStyles(element, styles) {
+	Object.assign(element.style, styles);
+}
+
+//#endregion
+//#region src/hooks/use-scrolling.ts
+function useScrolling(host) {
+	const scrolling = createSignal(false);
+	useEffect(host, () => {
+		const scrollableParent = getNearestOverflowAncestor(host);
+		const handleScroll = () => {
+			scrolling.set(true);
+		};
+		const handleMouseMove = () => {
+			scrolling.set(false);
+		};
+		scrollableParent.addEventListener("scroll", handleScroll, { passive: true });
+		window.addEventListener("mousemove", handleMouseMove, { passive: true });
+		return () => {
+			scrollableParent.removeEventListener("scroll", handleScroll);
+			window.removeEventListener("mousemove", handleMouseMove);
+		};
+	});
+	return scrolling;
+}
+
+//#endregion
+export { assignStyles, useScrolling };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -10,14 +10,14 @@
   },
   "license": "MIT",
   "funding": "https://github.com/sponsors/ocavue",
-  "homepage": "https://github.com/ocavue/prosekit#readme",
+  "homepage": "https://github.com/prosekit/prosekit#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ocavue/prosekit.git",
+    "url": "git+https://github.com/prosekit/prosekit.git",
     "directory": "packages/web"
   },
   "bugs": {
-    "url": "https://github.com/ocavue/prosekit/issues"
+    "url": "https://github.com/prosekit/prosekit/issues"
   },
   "keywords": [
     "ProseMirror"
@@ -38,6 +38,10 @@
       "types": "./dist/prosekit-web-block-handle.d.ts",
       "default": "./dist/prosekit-web-block-handle.js"
     },
+    "./drop-indicator": {
+      "types": "./dist/prosekit-web-drop-indicator.d.ts",
+      "default": "./dist/prosekit-web-drop-indicator.js"
+    },
     "./inline-popover": {
       "types": "./dist/prosekit-web-inline-popover.d.ts",
       "default": "./dist/prosekit-web-inline-popover.js"
@@ -71,15 +75,16 @@
     "@aria-ui/popover": "^0.0.27",
     "@aria-ui/presence": "^0.0.19",
     "@aria-ui/tooltip": "^0.0.29",
-    "@floating-ui/dom": "^1.7.2",
-    "@ocavue/utils": "^0.5.0",
+    "@floating-ui/dom": "^1.7.3",
+    "@ocavue/utils": "^0.6.0",
+    "@zag-js/dom-query": "^1.21.1",
     "prosemirror-tables": "^1.7.1",
     "@prosekit/core": "^0.8.3",
-    "@prosekit/extensions": "^0.10.0",
+    "@prosekit/extensions": "^0.11.1",
     "@prosekit/pm": "^0.1.11"
   },
   "devDependencies": {
-    "tsdown": "^0.12.9",
+    "tsdown": "^0.13.1",
     "typescript": "~5.8.3",
     "vitest": "^3.2.4",
     "@prosekit/config-tsdown": "0.0.0",
@@ -93,6 +98,7 @@
       "prosekit-web": "./src/index.ts",
       "prosekit-web-autocomplete": "./src/components/autocomplete/index.gen.ts",
       "prosekit-web-block-handle": "./src/components/block-handle/index.gen.ts",
+      "prosekit-web-drop-indicator": "./src/components/drop-indicator/index.gen.ts",
       "prosekit-web-inline-popover": "./src/components/inline-popover/index.gen.ts",
       "prosekit-web-popover": "./src/components/popover/index.gen.ts",
       "prosekit-web-resizable": "./src/components/resizable/index.gen.ts",
@@ -116,6 +122,9 @@
       "block-handle": [
         "./dist/prosekit-web-block-handle.d.ts"
       ],
+      "drop-indicator": [
+        "./dist/prosekit-web-drop-indicator.d.ts"
+      ],
       "inline-popover": [
         "./dist/prosekit-web-inline-popover.d.ts"
       ],