@prosekit/web 0.6.0 → 0.7.0

package/dist/assign-styles-3yY6F1UX.js

@@ -0,0 +1,10 @@
+//#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
+export { assignStyles };

package/dist/clone-element-i6RFnyj4.js

@@ -0,0 +1,41 @@
+//#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.
+*/
+function deepCloneElement(element) {
+	const clonedElement = element.cloneNode(true);
+	deepCopyStyles(element, clonedElement);
+	return clonedElement;
+}
+/**
+* Creates a clone of an Element, including all computed styles so that
+* it looks similar enough to the original element.
+*/
+function cloneElement(element) {
+	const clonedElement = element.cloneNode();
+	copyStyles(element, clonedElement);
+	return clonedElement;
+}
+function deepCopyStyles(source, target) {
+	const sources = [source];
+	const targets = [target];
+	while (sources.length > 0 && sources.length === targets.length) {
+		const source$1 = sources.pop();
+		const target$1 = targets.pop();
+		if (!source$1 || !target$1) return;
+		copyStyles(source$1, target$1);
+		sources.push(...source$1.children);
+		targets.push(...target$1.children);
+	}
+}
+function copyStyles(source, target) {
+	if (!source || !target) return;
+	const sourceStyle = source.ownerDocument?.defaultView?.getComputedStyle(source);
+	const targetStyle = target.style;
+	if (!sourceStyle || !targetStyle) return;
+	for (const key of sourceStyle) targetStyle.setProperty(key, sourceStyle.getPropertyValue(key), sourceStyle.getPropertyPriority(key));
+}
+
+//#endregion
+export { cloneElement, deepCloneElement };

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-block-handle.d.ts

@@ -116,4 +116,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,5 +1,7 @@
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
-import { createContext, createSignal, defineCustomElement, registerCustomElement, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
+import { assignStyles } from "./assign-styles-3yY6F1UX.js";
+import { deepCloneElement } from "./clone-element-i6RFnyj4.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";
@@ -12,6 +14,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
@@ -49,46 +55,10 @@ const BlockHandleAddElementBase = defineCustomElement({
 var BlockHandleAddElement = class extends BlockHandleAddElementBase {};
 registerCustomElement("prosekit-block-handle-add", BlockHandleAddElement);
 
-//#endregion
-//#region src/utils/asset-styles.ts
-function assignStyles(element, styles) {
-	Object.assign(element.style, styles);
-}
-
 //#endregion
 //#region src/utils/max-z-index.ts
 const maxZIndex = "2147483647";
 
-//#endregion
-//#region src/components/block-handle/block-handle-draggable/deep-clone-element.ts
-/**
-* Creates a deep clone of an Element, including all computed styles so that
-* it looks the same as the original element.
-*/
-function deepCloneElement(element) {
-	const clonedElement = element.cloneNode(true);
-	deepCopyStyles(element, clonedElement);
-	return clonedElement;
-}
-function deepCopyStyles(source, target) {
-	const sources = [source];
-	const targets = [target];
-	while (sources.length > 0 && sources.length === targets.length) {
-		const source$1 = sources.pop();
-		const target$1 = targets.pop();
-		if (!source$1 || !target$1) return;
-		copyStyles(source$1, target$1);
-		sources.push(...source$1.children);
-		targets.push(...target$1.children);
-	}
-}
-function copyStyles(source, target) {
-	const sourceStyle = source.ownerDocument?.defaultView?.getComputedStyle(source);
-	const targetStyle = target.style;
-	if (!sourceStyle || !targetStyle) return;
-	for (const key of sourceStyle) targetStyle.setProperty(key, sourceStyle.getPropertyValue(key), sourceStyle.getPropertyPriority(key));
-}
-
 //#endregion
 //#region src/components/block-handle/block-handle-draggable/set-drag-preview.ts
 /**
@@ -186,7 +156,7 @@ function useDataDraggingAttribute(host) {
 	useAttribute(host, "data-dragging", () => dragging.get() ? "" : void 0);
 }
 function useDragging(host) {
-	const dragging = createSignal(false);
+	const dragging = draggingContext.consume(host);
 	useEventListener(host, "dragstart", () => {
 		dragging.set(true);
 	});
@@ -223,7 +193,7 @@ function getClientRect(element) {
 	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);
+			const rects = children.map((child) => getClientRect(child));
 			if (rects.length === 0) return rect;
 			if (rects.length === 1) return rects[0];
 			return {
@@ -271,7 +241,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;
@@ -292,9 +262,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;
@@ -316,7 +285,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;
@@ -438,10 +407,9 @@ 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 open = createComputed(() => !!context.get());
 	useHoverExtension(host, editor, (referenceValue, hoverState) => {
 		reference.set(referenceValue);
 		context.set(hoverState);

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,75 @@
+import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
+import { assignStyles } from "./assign-styles-3yY6F1UX.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 presence = createComputed(() => !!line.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"> {
   /**
   * The ProseKit editor instance.
   *
@@ -21,6 +21,13 @@ 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;
 }
 /** @internal */
 declare const tableHandleColumnRootProps: PropDeclarations<TableHandleColumnRootProps>;
@@ -195,7 +202,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"> {
   /**
   * The ProseKit editor instance.
   *
@@ -209,6 +216,13 @@ 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;
 }
 /** @internal */
 declare const tableHandleRowRootProps: PropDeclarations<TableHandleRowRootProps>;
@@ -254,4 +268,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,5 +1,7 @@
 import { getSafeEditorView, getStateWithDefaults } from "./get-safe-editor-view-CqJWgxo1.js";
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
+import { assignStyles } from "./assign-styles-3yY6F1UX.js";
+import { cloneElement, deepCloneElement } from "./clone-element-i6RFnyj4.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";
@@ -74,7 +76,8 @@ function useTableHandleColumnRoot(host, { state }) {
 const tableHandleColumnRootProps = Object.freeze({
 	...overlayPositionerProps$1,
 	editor: { default: null },
-	placement: { default: "top" }
+	placement: { default: "top" },
+	hoist: { default: false }
 });
 /** @internal */
 const tableHandleColumnRootEvents = overlayPositionerEvents$1;
@@ -141,8 +144,8 @@ function useTableHandleColumnTrigger(host, { state }) {
 			if (emptyImage) dataTransfer.setDragImage(emptyImage, 0, 0);
 		}
 		const prev = dndContext.peek();
-		const index = context.peek()?.colIndex ?? -1;
-		if (index < 0) {
+		const index = context.peek()?.colIndex;
+		if (index == null || index < 0) {
 			console.warn("[prosekit] Invalid column index for drag operation:", index);
 			event.preventDefault();
 			return;
@@ -239,7 +242,7 @@ function useInitDndPosition(host, editor, onInit) {
 			})]
 		}).then(({ x, y }) => {
 			if (cancelled) return;
-			Object.assign(host.style, {
+			assignStyles(host, {
 				left: `${x}px`,
 				top: `${y}px`
 			});
@@ -286,25 +289,45 @@ function clearPreviewDOM(previewRoot) {
 }
 function createPreviewDOM(table, previewRoot, index, direction) {
 	clearPreviewDOM(previewRoot);
-	const previewTable = document.createElement("table");
-	const previewTableBody = document.createElement("tbody");
+	const previewTable = cloneElementWithoutSize(table);
+	const tableBody = table.querySelector("tbody");
+	const previewTableBody = tableBody ? cloneElementWithoutSize(tableBody) : table.ownerDocument.createElement("tbody");
+	unsetSize(previewTableBody);
+	unsetSize(previewTable);
 	previewTable.appendChild(previewTableBody);
 	previewRoot.appendChild(previewTable);
 	const rows = table.querySelectorAll("tr");
 	if (direction === "row") {
 		const row = rows[index];
-		const rowDOM = row.cloneNode(true);
-		previewTableBody.appendChild(rowDOM);
+		const previewRow = deepCloneElement(row);
+		previewTableBody.appendChild(previewRow);
 	} else rows.forEach((row) => {
-		const rowDOM = row.cloneNode(false);
+		const previewRow = cloneElementWithoutSize(row);
+		unsetSize(previewRow);
 		const cells = row.querySelectorAll("td");
-		if (cells[index]) {
-			const cellDOM = cells[index].cloneNode(true);
-			rowDOM.appendChild(cellDOM);
-			previewTableBody.appendChild(rowDOM);
+		const cell = cells[index];
+		if (cell) {
+			const previewCell = deepCloneElement(cell);
+			previewRow.appendChild(previewCell);
+			previewTableBody.appendChild(previewRow);
 		}
 	});
 }
+function cloneElementWithoutSize(element) {
+	const clonedElement = cloneElement(element);
+	unsetSize(clonedElement);
+	return clonedElement;
+}
+function unsetSize(element) {
+	assignStyles(element, {
+		width: "unset",
+		height: "unset",
+		minWidth: "unset",
+		minHeight: "unset",
+		maxWidth: "unset",
+		maxHeight: "unset"
+	});
+}
 
 //#endregion
 //#region src/components/table-handle/table-handle-drag-preview/updater.ts
@@ -337,11 +360,11 @@ function useUpdatePreviewPosition(host, editor) {
 		computePosition(getVirtualElement(cell, x, y), host, { placement: direction === "row" ? "right" : "bottom" }).then(({ x: x$1, y: y$1 }) => {
 			if (cancelled) return;
 			if (direction === "row") {
-				Object.assign(host.style, { top: `${y$1}px` });
+				assignStyles(host, { top: `${y$1}px` });
 				return;
 			}
 			if (direction === "col") {
-				Object.assign(host.style, { left: `${x$1}px` });
+				assignStyles(host, { left: `${x$1}px` });
 				return;
 			}
 		});
@@ -377,8 +400,7 @@ function getVirtualElement(cell, x, y) {
 function useTableHandleDragPreview(host, { state }) {
 	const { editor } = state;
 	useEffect(host, () => {
-		host.classList.add("ProseMirror");
-		Object.assign(host.style, {
+		assignStyles(host, {
 			position: "absolute",
 			pointerEvents: "none"
 		});
@@ -387,7 +409,7 @@ function useTableHandleDragPreview(host, { state }) {
 	useUpdatePreviewPosition(host, editor);
 }
 function onInitPreviewPosition({ host, direction, dragging, table, cell, draggingIndex }) {
-	Object.assign(host.style, { display: dragging ? "block" : "none" });
+	assignStyles(host, { display: dragging ? "block" : "none" });
 	if (!dragging) {
 		clearPreviewDOM(host);
 		return;
@@ -395,11 +417,11 @@ function onInitPreviewPosition({ host, direction, dragging, table, cell, draggin
 	createPreviewDOM(table, host, draggingIndex, direction);
 	const tableRect = table.getBoundingClientRect();
 	const cellRect = cell.getBoundingClientRect();
-	if (direction === "col") Object.assign(host.style, {
+	if (direction === "col") assignStyles(host, {
 		width: `${cellRect.width}px`,
 		height: `${tableRect.height}px`
 	});
-	if (direction === "row") Object.assign(host.style, {
+	if (direction === "row") assignStyles(host, {
 		width: `${tableRect.width}px`,
 		height: `${cellRect.height}px`
 	});
@@ -499,7 +521,7 @@ function useUpdateIndicatorPosition(host, editor, handleWidth) {
 					middleware: [offset(direction$1 === "left" ? -1 * handleWidth : 0)]
 				}).then(({ x: x$1 }) => {
 					if (cancelled) return;
-					Object.assign(host.style, { left: `${x$1}px` });
+					assignStyles(host, { left: `${x$1}px` });
 				});
 			}
 			return cleanup;
@@ -518,7 +540,7 @@ function useUpdateIndicatorPosition(host, editor, handleWidth) {
 					middleware: [offset(direction$1 === "up" ? -1 * handleWidth : 0)]
 				}).then(({ y: y$1 }) => {
 					if (cancelled) return;
-					Object.assign(host.style, { top: `${y$1}px` });
+					assignStyles(host, { top: `${y$1}px` });
 				});
 			}
 			return cleanup;
@@ -535,7 +557,7 @@ const HANDLE_WIDTH = 2;
 function useTableHandleDropIndicator(host, { state }) {
 	const { editor } = state;
 	useEffect(host, () => {
-		Object.assign(host.style, {
+		assignStyles(host, {
 			pointerEvents: "none",
 			position: "absolute"
 		});
@@ -544,13 +566,13 @@ function useTableHandleDropIndicator(host, { state }) {
 	useUpdateIndicatorPosition(host, editor, HANDLE_WIDTH);
 }
 function onInitIndicatorPosition({ host, direction, dragging, table }) {
-	Object.assign(host.style, { display: dragging ? "block" : "none" });
+	assignStyles(host, { display: dragging ? "block" : "none" });
 	const tableRect = table.getBoundingClientRect();
-	if (direction === "col") Object.assign(host.style, {
+	if (direction === "col") assignStyles(host, {
 		width: `${HANDLE_WIDTH}px`,
 		height: `${tableRect.height}px`
 	});
-	if (direction === "row") Object.assign(host.style, {
+	if (direction === "row") assignStyles(host, {
 		width: `${tableRect.width}px`,
 		height: `${HANDLE_WIDTH}px`
 	});
@@ -904,7 +926,8 @@ function useTableHandleRowRoot(host, { state }) {
 const tableHandleRowRootProps = {
 	...overlayPositionerProps$1,
 	editor: { default: null },
-	placement: { default: "left" }
+	placement: { default: "left" },
+	hoist: { default: false }
 };
 /** @internal */
 const tableHandleRowRootEvents = {};
@@ -946,8 +969,8 @@ function useTableHandleRowTrigger(host, { state }) {
 			if (emptyImage) dataTransfer.setDragImage(emptyImage, 0, 0);
 		}
 		const prev = dndContext.peek();
-		const index = context.peek()?.rowIndex ?? -1;
-		if (index < 0) {
+		const index = context.peek()?.rowIndex;
+		if (index == null || index < 0) {
 			console.warn("[prosekit] Invalid row index for drag operation:", index);
 			event.preventDefault();
 			return;

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -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,19 +75,19 @@
     "@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",
     "prosemirror-tables": "^1.7.1",
-    "@prosekit/extensions": "^0.10.0",
+    "@prosekit/core": "^0.8.3",
     "@prosekit/pm": "^0.1.11",
-    "@prosekit/core": "^0.8.3"
+    "@prosekit/extensions": "^0.11.0"
   },
   "devDependencies": {
-    "tsdown": "^0.12.9",
+    "tsdown": "^0.13.1",
     "typescript": "~5.8.3",
     "vitest": "^3.2.4",
-    "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-tsdown": "0.0.0"
+    "@prosekit/config-tsdown": "0.0.0",
+    "@prosekit/config-vitest": "0.0.0"
   },
   "publishConfig": {
     "dev": {}
@@ -97,7 +101,8 @@
       "prosekit-web-popover": "./src/components/popover/index.gen.ts",
       "prosekit-web-resizable": "./src/components/resizable/index.gen.ts",
       "prosekit-web-table-handle": "./src/components/table-handle/index.gen.ts",
-      "prosekit-web-tooltip": "./src/components/tooltip/index.gen.ts"
+      "prosekit-web-tooltip": "./src/components/tooltip/index.gen.ts",
+      "prosekit-web-drop-indicator": "./src/components/drop-indicator/index.gen.ts"
     }
   },
   "scripts": {
@@ -116,6 +121,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"
       ],