@prosekit/web 0.5.11 → 0.6.0

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

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

package/dist/prosekit-web-autocomplete.js

@@ -1,4 +1,4 @@
-import { getStateWithDefaults } from "./get-default-state-CIEy7xrl.js";
+import { getSafeEditorView, getStateWithDefaults } from "./get-safe-editor-view-CqJWgxo1.js";
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.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";
@@ -227,7 +227,8 @@ function useAutocompleteExtension(host, editor, regex, reference, query, onDismi
 }
 function createAutocompleteRule(editor, regex, reference, query, onDismiss, onSubmit) {
 	const handleEnter = (options) => {
-		const span = editor.view.dom.querySelector(".prosemirror-prediction-match");
+		const view = getSafeEditorView(editor);
+		const span = view?.dom.querySelector(".prosemirror-prediction-match");
 		if (span) reference.set(span);
 		query.set(defaultQueryBuilder(options.match));
 		onDismiss.set(options.ignoreMatch);

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

@@ -1,6 +1,7 @@
-import { BaseElementConstructor, ConnectableElement, EventDeclarations, PropDeclarations, SignalState } from "@aria-ui/core";
+import { BaseElementConstructor, ConnectableElement, EventDeclarations, PropDeclarations, SetupOptions, SignalState } from "@aria-ui/core";
 import { Editor } from "@prosekit/core";
-import { OverlayPositionerProps } from "@aria-ui/overlay/elements";
+import { OverlayPositionerEvents, OverlayPositionerProps } from "@aria-ui/overlay/elements";
+import { ProseMirrorNode } from "@prosekit/pm/model";
 import { Placement } from "@floating-ui/dom";
 
 //#region src/components/block-handle/block-handle-add/types.d.ts
@@ -90,8 +91,15 @@ interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, "placemen
 }
 /** @internal */
 declare const blockHandlePopoverProps: PropDeclarations<BlockHandlePopoverProps>;
-/** @internal */
-interface BlockHandlePopoverEvents {}
+interface BlockHandlePopoverEvents extends OverlayPositionerEvents {
+  /**
+  * Fired when the hovered block changes.
+  */
+  stateChange: CustomEvent<{
+    node: ProseMirrorNode;
+    pos: number;
+  } | null>;
+}
 /** @internal */
 declare const blockHandlePopoverEvents: EventDeclarations<BlockHandlePopoverEvents>;
 //#endregion
@@ -104,9 +112,8 @@ declare class BlockHandlePopoverElement extends BlockHandlePopoverElementBase {}
 * @internal
 */
 declare function useBlockHandlePopover(host: ConnectableElement, {
-  state
-}: {
-  state: SignalState<BlockHandlePopoverProps>;
-}): void;
+  state,
+  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 };

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

@@ -1,7 +1,7 @@
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
 import { createContext, createSignal, defineCustomElement, registerCustomElement, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
 import { defineDOMEventHandler, insertDefaultBlock, union } from "@prosekit/core";
-import { overlayPositionerProps, useOverlayPositionerState } from "@aria-ui/overlay/elements";
+import { overlayPositionerEvents, overlayPositionerProps, useOverlayPositionerState } from "@aria-ui/overlay/elements";
 import { usePresence } from "@aria-ui/presence";
 import { isElement, isHTMLElement, isTextNode } from "@ocavue/utils";
 import { Fragment, Slice } from "@prosekit/pm/model";
@@ -432,7 +432,7 @@ const fallbackRect = Object.freeze({
 /**
 * @internal
 */
-function useBlockHandlePopover(host, { state }) {
+function useBlockHandlePopover(host, { state, emit }) {
 	const { editor,...overlayState } = state;
 	const reference = createSignal(null);
 	useOverlayPositionerState(host, overlayState, { reference });
@@ -445,6 +445,11 @@ function useBlockHandlePopover(host, { state }) {
 	useHoverExtension(host, editor, (referenceValue, hoverState) => {
 		reference.set(referenceValue);
 		context.set(hoverState);
+		const stateChangeDetails = hoverState ? {
+			node: hoverState.node,
+			pos: hoverState.pos
+		} : null;
+		emit("stateChange", stateChangeDetails);
 	});
 	useAttribute(host, "data-state", () => open.get() ? "open" : "closed");
 	usePresence(host, open);
@@ -474,7 +479,10 @@ const blockHandlePopoverProps = {
 	hoist: { default: false }
 };
 /** @internal */
-const blockHandlePopoverEvents = {};
+const blockHandlePopoverEvents = {
+	...overlayPositionerEvents,
+	stateChange: {}
+};
 
 //#endregion
 //#region src/components/block-handle/block-handle-popover/element.gen.ts

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

@@ -2,9 +2,9 @@ import { BaseElementConstructor, ConnectableElement, EventDeclarations, PropDecl
 import { Editor } from "@prosekit/core";
 import { OverlayPositionerEvents, OverlayPositionerProps } from "@aria-ui/overlay";
 import { MenuContentEvents, MenuContentProps } from "@aria-ui/menu/elements";
-import { defineTableCommands } from "@prosekit/extensions/table";
-import { MenuItemEvents, MenuItemProps } from "@aria-ui/menu";
+import { TableCommandsExtension, defineTableCommands } from "@prosekit/extensions/table";
 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"> {
@@ -44,9 +44,9 @@ declare function useTableHandleColumnRoot(host: ConnectableElement, {
 }): void;
 //#endregion
 //#region src/components/table-handle/table-handle-column-trigger/types.d.ts
-type TableCommandsExtension$1 = ReturnType<typeof defineTableCommands>;
+type TableCommandsExtension$2 = ReturnType<typeof defineTableCommands>;
 interface TableHandleColumnTriggerProps {
-  editor: Editor<TableCommandsExtension$1> | null;
+  editor: Editor<TableCommandsExtension$2> | null;
 }
 /** @internal */
 declare const tableHandleColumnTriggerProps: PropDeclarations<TableHandleColumnTriggerProps>;
@@ -65,8 +65,50 @@ declare class TableHandleColumnTriggerElement extends TableHandleColumnTriggerEl
 */
 declare function useTableHandleColumnTrigger(host: ConnectableElement, {
   state
+}: SetupOptions<TableHandleColumnTriggerProps, TableHandleColumnTriggerEvents>): void;
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/types.d.ts
+interface TableHandleDragPreviewProps {
+  editor: Editor | null;
+}
+declare const tableHandleDragPreviewProps: PropDeclarations<TableHandleDragPreviewProps>;
+interface TableHandleDragPreviewEvents {}
+declare const tableHandleDragPreviewEvents: EventDeclarations<TableHandleDragPreviewEvents>;
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/element.gen.d.ts
+declare const TableHandleDragPreviewElementBase: BaseElementConstructor<TableHandleDragPreviewProps>;
+declare class TableHandleDragPreviewElement extends TableHandleDragPreviewElementBase {}
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/setup.d.ts
+/**
+* @internal
+*/
+declare function useTableHandleDragPreview(host: ConnectableElement, {
+  state
 }: {
-  state: SignalState<TableHandleColumnTriggerProps>;
+  state: SignalState<TableHandleDragPreviewProps>;
+}): void;
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/types.d.ts
+interface TableHandleDropIndicatorProps {
+  editor: Editor<TableCommandsExtension> | null;
+}
+declare const tableHandleDropIndicatorProps: PropDeclarations<TableHandleDropIndicatorProps>;
+interface TableHandleDropIndicatorEvents {}
+declare const tableHandleDropIndicatorEvents: EventDeclarations<TableHandleDropIndicatorEvents>;
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/element.gen.d.ts
+declare const TableHandleDropIndicatorElementBase: BaseElementConstructor<TableHandleDropIndicatorProps>;
+declare class TableHandleDropIndicatorElement extends TableHandleDropIndicatorElementBase {}
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/setup.d.ts
+/**
+* @internal
+*/
+declare function useTableHandleDropIndicator(host: ConnectableElement, {
+  state
+}: {
+  state: SignalState<TableHandleDropIndicatorProps>;
 }): void;
 //#endregion
 //#region src/components/table-handle/table-handle-popover-content/types.d.ts
@@ -188,9 +230,9 @@ declare function useTableHandleRowRoot(host: ConnectableElement, {
 }: SetupOptions<TableHandleRowRootProps, TableHandleRowRootEvents>): void;
 //#endregion
 //#region src/components/table-handle/table-handle-row-trigger/types.d.ts
-type TableCommandsExtension = ReturnType<typeof defineTableCommands>;
+type TableCommandsExtension$1 = ReturnType<typeof defineTableCommands>;
 interface TableHandleRowTriggerProps {
-  editor: Editor<TableCommandsExtension> | null;
+  editor: Editor<TableCommandsExtension$1> | null;
 }
 /** @internal */
 declare const tableHandleRowTriggerProps: PropDeclarations<TableHandleRowTriggerProps>;
@@ -212,4 +254,4 @@ declare function useTableHandleRowTrigger(host: ConnectableElement, {
   state
 }: SetupOptions<TableHandleRowTriggerProps, TableHandleRowTriggerEvents>): void;
 //#endregion
-export { TableHandleColumnRootElement, TableHandleColumnRootEvents, TableHandleColumnRootProps, TableHandleColumnTriggerElement, TableHandleColumnTriggerEvents, TableHandleColumnTriggerProps, TableHandlePopoverContentElement, TableHandlePopoverContentEvents, TableHandlePopoverContentProps, TableHandlePopoverItemElement, TableHandlePopoverItemEvents, TableHandlePopoverItemProps, TableHandleRootElement, TableHandleRootEvents, TableHandleRootProps, TableHandleRowRootElement, TableHandleRowRootEvents, TableHandleRowRootProps, TableHandleRowTriggerElement, TableHandleRowTriggerEvents, TableHandleRowTriggerProps, tableHandleColumnRootEvents, tableHandleColumnRootProps, tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, tableHandlePopoverContentEvents, tableHandlePopoverContentProps, tableHandlePopoverItemEvents, tableHandlePopoverItemProps, tableHandleRootEvents, tableHandleRootProps, tableHandleRowRootEvents, tableHandleRowRootProps, tableHandleRowTriggerEvents, tableHandleRowTriggerProps, useTableHandleColumnRoot, useTableHandleColumnTrigger, useTableHandlePopoverContent, useTableHandlePopoverItem, useTableHandleRoot, useTableHandleRowRoot, useTableHandleRowTrigger };
+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 };

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

@@ -1,12 +1,14 @@
-import { getStateWithDefaults } from "./get-default-state-CIEy7xrl.js";
+import { getSafeEditorView, getStateWithDefaults } from "./get-safe-editor-view-CqJWgxo1.js";
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.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";
 import { usePresence } from "@aria-ui/presence";
+import { isHTMLElement } from "@ocavue/utils";
 import { overlayPositionerEvents as overlayPositionerEvents$1, overlayPositionerProps as overlayPositionerProps$1 } from "@aria-ui/overlay";
 import { menuContentEvents, menuContentProps, menuRootEvents, menuRootProps, useMenuContent, useMenuItem, useMenuRoot, useMenuTrigger } from "@aria-ui/menu/elements";
-import { selectTableColumn, selectTableRow } from "@prosekit/extensions/table";
+import { moveTableColumn, moveTableRow, selectTableColumn, selectTableRow } from "@prosekit/extensions/table";
+import { computePosition, offset } from "@floating-ui/dom";
 import { menuItemEvents, menuItemProps } from "@aria-ui/menu";
 import { TableMap, cellAround } from "prosemirror-tables";
 
@@ -15,6 +17,23 @@ import { TableMap, cellAround } from "prosemirror-tables";
 * @internal
 */
 const tableHandleRootContext = createContext("prosekit-table-handle-root-context", null);
+/**
+* @internal
+*/
+const defaultTableHandleDndContext = {
+	dragging: false,
+	direction: "row",
+	draggingIndex: -1,
+	droppingIndex: -1,
+	x: -1,
+	y: -1,
+	startX: -1,
+	startY: -1
+};
+/**
+* @internal
+*/
+const tableHandleDndContext = createContext("prosekit-table-handle-dnd-context", defaultTableHandleDndContext);
 
 //#endregion
 //#region src/components/table-handle/table-handle-column-root/setup.ts
@@ -29,7 +48,7 @@ function useTableHandleColumnRoot(host, { state }) {
 	});
 	const referenceCell = createComputed(() => {
 		const pos = colFirstCellPos.get();
-		const view = editor.get()?.view;
+		const view = getSafeEditorView(editor.get());
 		if (!pos || !view) return null;
 		return view.nodeDOM(pos);
 	});
@@ -70,6 +89,31 @@ const TableHandleColumnRootElementBase = defineCustomElement({
 var TableHandleColumnRootElement = class extends TableHandleColumnRootElementBase {};
 registerCustomElement("prosekit-table-handle-column-root", TableHandleColumnRootElement);
 
+//#endregion
+//#region src/components/table-handle/hooks/use-empty-image.ts
+/**
+* Returns a function that returns a 1x1 transparent image. This is used to
+* prevent the browser from showing the default drag image. An earth icon in
+* chrome is used as the default drag image. This image must be loaded before
+* the dragStart event triggers.
+*
+* See https://stackoverflow.com/a/40923520
+*
+* @internal
+*/
+function useEmptyImage(host) {
+	let image;
+	useEffect(host, () => {
+		image = new Image(1, 1);
+		image.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+		return () => {
+			image?.remove();
+			image = void 0;
+		};
+	});
+	return () => image;
+}
+
 //#endregion
 //#region src/components/table-handle/table-handle-column-trigger/setup.ts
 /**
@@ -78,12 +122,58 @@ registerCustomElement("prosekit-table-handle-column-root", TableHandleColumnRoot
 function useTableHandleColumnTrigger(host, { state }) {
 	useMenuTrigger(host);
 	const context = tableHandleRootContext.consume(host);
+	const dndContext = tableHandleDndContext.consume(host);
 	useEventListener(host, "pointerdown", () => {
 		const editor = state.editor.peek();
 		const cellPos = context.peek()?.cellPos;
 		if (!editor || !cellPos) return;
 		editor.exec(selectTableColumn({ head: cellPos }));
 	});
+	useEffect(host, () => {
+		host.draggable = true;
+	});
+	const getEmptyImage = useEmptyImage(host);
+	useEventListener(host, "dragstart", (event) => {
+		const dataTransfer = event.dataTransfer;
+		if (dataTransfer) {
+			dataTransfer.effectAllowed = "move";
+			const emptyImage = getEmptyImage();
+			if (emptyImage) dataTransfer.setDragImage(emptyImage, 0, 0);
+		}
+		const prev = dndContext.peek();
+		const index = context.peek()?.colIndex ?? -1;
+		if (index < 0) {
+			console.warn("[prosekit] Invalid column index for drag operation:", index);
+			event.preventDefault();
+			return;
+		}
+		dndContext.set({
+			...prev,
+			direction: "col",
+			dragging: true,
+			draggingIndex: index,
+			startX: event.clientX,
+			startY: event.clientY
+		});
+	});
+	useEventListener(host, "drag", (event) => {
+		const prev = dndContext.peek();
+		if (event.clientX === 0 && event.clientY === 0) return;
+		dndContext.set({
+			...prev,
+			direction: "col",
+			dragging: true,
+			x: event.clientX,
+			y: event.clientY
+		});
+	});
+	useEventListener(host, "dragend", () => {
+		const prev = dndContext.peek();
+		dndContext.set({
+			...prev,
+			dragging: false
+		});
+	});
 }
 
 //#endregion
@@ -103,6 +193,384 @@ const TableHandleColumnTriggerElementBase = defineCustomElement({
 var TableHandleColumnTriggerElement = class extends TableHandleColumnTriggerElementBase {};
 registerCustomElement("prosekit-table-handle-column-trigger", TableHandleColumnTriggerElement);
 
+//#endregion
+//#region src/components/table-handle/dnd.ts
+function useInitDndPosition(host, editor, onInit) {
+	const dndContext = tableHandleDndContext.consume(host);
+	const rootContext = tableHandleRootContext.consume(host);
+	const draggingSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.dragging;
+	});
+	const directionSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.direction;
+	});
+	const draggingIndexSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.draggingIndex;
+	});
+	useEffect(host, () => {
+		const view = getSafeEditorView(editor.get());
+		if (!view) return;
+		const dragging = draggingSignal.get();
+		const direction = directionSignal.get();
+		host.dataset.direction = direction;
+		host.dataset.dragging = dragging.toString();
+		const draggingIndex = draggingIndexSignal.get();
+		const relatedDOMs = getDndRelatedDOMs(view, rootContext.peek()?.cellPos, draggingIndex, direction);
+		if (!relatedDOMs) return;
+		const { table, cell } = relatedDOMs;
+		onInit({
+			host,
+			direction,
+			dragging,
+			draggingIndex,
+			table,
+			cell
+		});
+		if (!dragging) return;
+		let cancelled = false;
+		computePosition(cell, host, {
+			placement: direction === "row" ? "right" : "bottom",
+			middleware: [offset(({ rects }) => {
+				if (direction === "col") return -rects.reference.height;
+				return -rects.reference.width;
+			})]
+		}).then(({ x, y }) => {
+			if (cancelled) return;
+			Object.assign(host.style, {
+				left: `${x}px`,
+				top: `${y}px`
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+}
+function getTableDOMByPos(view, pos) {
+	const dom = view.domAtPos(pos).node;
+	if (!dom) return;
+	const element = isHTMLElement(dom) ? dom : dom.parentElement;
+	const table = element?.closest("table");
+	return table ?? void 0;
+}
+function getTargetFirstCellDOM(table, index, direction) {
+	if (direction === "row") {
+		const row = table.querySelectorAll("tr")[index];
+		const cell = row?.querySelector("td");
+		return cell ?? void 0;
+	} else {
+		const row = table.querySelector("tr");
+		const cell = row?.querySelectorAll("td")[index];
+		return cell ?? void 0;
+	}
+}
+function getDndRelatedDOMs(view, cellPos, draggingIndex, direction) {
+	if (cellPos == null) return;
+	const table = getTableDOMByPos(view, cellPos);
+	if (!table) return;
+	const cell = getTargetFirstCellDOM(table, draggingIndex, direction);
+	if (!cell) return;
+	return {
+		table,
+		cell
+	};
+}
+
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/render-preview.ts
+function clearPreviewDOM(previewRoot) {
+	while (previewRoot.firstChild) previewRoot.removeChild(previewRoot.firstChild);
+}
+function createPreviewDOM(table, previewRoot, index, direction) {
+	clearPreviewDOM(previewRoot);
+	const previewTable = document.createElement("table");
+	const previewTableBody = document.createElement("tbody");
+	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);
+	} else rows.forEach((row) => {
+		const rowDOM = row.cloneNode(false);
+		const cells = row.querySelectorAll("td");
+		if (cells[index]) {
+			const cellDOM = cells[index].cloneNode(true);
+			rowDOM.appendChild(cellDOM);
+			previewTableBody.appendChild(rowDOM);
+		}
+	});
+}
+
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/updater.ts
+function useUpdatePreviewPosition(host, editor) {
+	const dndContext = tableHandleDndContext.consume(host);
+	const rootContext = tableHandleRootContext.consume(host);
+	const draggingSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.dragging;
+	});
+	const clientXSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.x;
+	});
+	const clientYSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.y;
+	});
+	useEffect(host, () => {
+		const view = getSafeEditorView(editor.get());
+		if (!view) return;
+		if (!draggingSignal.get()) return;
+		const { draggingIndex, direction } = dndContext.peek();
+		const x = clientXSignal.get();
+		const y = clientYSignal.get();
+		const relatedDOMs = getDndRelatedDOMs(view, rootContext.peek()?.cellPos, draggingIndex, direction);
+		if (!relatedDOMs) return;
+		const { cell } = relatedDOMs;
+		let cancelled = false;
+		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` });
+				return;
+			}
+			if (direction === "col") {
+				Object.assign(host.style, { left: `${x$1}px` });
+				return;
+			}
+		});
+		return () => {
+			cancelled = true;
+		};
+	});
+}
+function getVirtualElement(cell, x, y) {
+	return {
+		contextElement: cell,
+		getBoundingClientRect: () => {
+			const rect = cell.getBoundingClientRect();
+			return {
+				width: rect.width,
+				height: rect.height,
+				right: x + rect.width / 2,
+				bottom: y + rect.height / 2,
+				top: y - rect.height / 2,
+				left: x - rect.width / 2,
+				x: x - rect.width / 2,
+				y: y - rect.height / 2
+			};
+		}
+	};
+}
+
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/setup.ts
+/**
+* @internal
+*/
+function useTableHandleDragPreview(host, { state }) {
+	const { editor } = state;
+	useEffect(host, () => {
+		host.classList.add("ProseMirror");
+		Object.assign(host.style, {
+			position: "absolute",
+			pointerEvents: "none"
+		});
+	});
+	useInitDndPosition(host, editor, onInitPreviewPosition);
+	useUpdatePreviewPosition(host, editor);
+}
+function onInitPreviewPosition({ host, direction, dragging, table, cell, draggingIndex }) {
+	Object.assign(host.style, { display: dragging ? "block" : "none" });
+	if (!dragging) {
+		clearPreviewDOM(host);
+		return;
+	}
+	createPreviewDOM(table, host, draggingIndex, direction);
+	const tableRect = table.getBoundingClientRect();
+	const cellRect = cell.getBoundingClientRect();
+	if (direction === "col") Object.assign(host.style, {
+		width: `${cellRect.width}px`,
+		height: `${tableRect.height}px`
+	});
+	if (direction === "row") Object.assign(host.style, {
+		width: `${tableRect.width}px`,
+		height: `${cellRect.height}px`
+	});
+}
+
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/types.ts
+const tableHandleDragPreviewProps = { editor: { default: null } };
+const tableHandleDragPreviewEvents = {};
+
+//#endregion
+//#region src/components/table-handle/table-handle-drag-preview/element.gen.ts
+const TableHandleDragPreviewElementBase = defineCustomElement({
+	props: tableHandleDragPreviewProps,
+	events: tableHandleDragPreviewEvents,
+	setup: useTableHandleDragPreview
+});
+var TableHandleDragPreviewElement = class extends TableHandleDragPreviewElementBase {};
+registerCustomElement("prosekit-table-handle-drag-preview", TableHandleDragPreviewElement);
+
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/calc-drag-over.ts
+function findDragOverElement(elements, pointer, axis) {
+	const startProp = axis === "x" ? "left" : "top";
+	const endProp = axis === "x" ? "right" : "bottom";
+	const lastIndex = elements.length - 1;
+	const index = elements.findIndex((el, index$1) => {
+		const rect = el.getBoundingClientRect();
+		const boundaryStart = rect[startProp];
+		const boundaryEnd = rect[endProp];
+		if (boundaryStart <= pointer && pointer <= boundaryEnd) return true;
+		if (index$1 === lastIndex && pointer > boundaryEnd) return true;
+		if (index$1 === 0 && pointer < boundaryStart) return true;
+		return false;
+	});
+	return index >= 0 ? [elements[index], index] : void 0;
+}
+function getDragOverColumn(table, pointerX) {
+	const firstRow = table.querySelector("tr");
+	if (!firstRow) return;
+	const cells = Array.from(firstRow.children);
+	return findDragOverElement(cells, pointerX, "x");
+}
+function getDragOverRow(table, pointerY) {
+	const rows = Array.from(table.querySelectorAll("tr"));
+	return findDragOverElement(rows, pointerY, "y");
+}
+
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/updater.ts
+function useUpdateIndicatorPosition(host, editor, handleWidth) {
+	const dndContext = tableHandleDndContext.consume(host);
+	const rootContext = tableHandleRootContext.consume(host);
+	const draggingSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.dragging;
+	});
+	const clientXSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.x;
+	});
+	const clientYSignal = createComputed(() => {
+		const context = dndContext.get();
+		return context.y;
+	});
+	const startXSignal = createComputed(() => {
+		return dndContext.get().startX;
+	});
+	const startYSignal = createComputed(() => {
+		return dndContext.get().startY;
+	});
+	useEffect(host, () => {
+		const view = getSafeEditorView(editor.get());
+		if (!view) return;
+		if (!draggingSignal.get()) return;
+		const { draggingIndex, direction } = dndContext.peek();
+		const x = clientXSignal.get();
+		const y = clientYSignal.get();
+		const relatedDOMs = getDndRelatedDOMs(view, rootContext.peek()?.cellPos, draggingIndex, direction);
+		if (!relatedDOMs) return;
+		const { table } = relatedDOMs;
+		let cancelled = false;
+		let cleanup = () => {
+			cancelled = true;
+		};
+		if (direction === "col") {
+			const direction$1 = startXSignal.get() > x ? "left" : "right";
+			const dragOverColumn = getDragOverColumn(table, x);
+			if (dragOverColumn) {
+				const [col, index] = dragOverColumn;
+				dndContext.set({
+					...dndContext.peek(),
+					droppingIndex: index
+				});
+				computePosition(col, host, {
+					placement: direction$1 === "left" ? "left" : "right",
+					middleware: [offset(direction$1 === "left" ? -1 * handleWidth : 0)]
+				}).then(({ x: x$1 }) => {
+					if (cancelled) return;
+					Object.assign(host.style, { left: `${x$1}px` });
+				});
+			}
+			return cleanup;
+		}
+		if (direction === "row") {
+			const direction$1 = startYSignal.get() > y ? "up" : "down";
+			const dragOverRow = getDragOverRow(table, y);
+			if (dragOverRow) {
+				const [row, index] = dragOverRow;
+				dndContext.set({
+					...dndContext.peek(),
+					droppingIndex: index
+				});
+				computePosition(row, host, {
+					placement: direction$1 === "up" ? "top" : "bottom",
+					middleware: [offset(direction$1 === "up" ? -1 * handleWidth : 0)]
+				}).then(({ y: y$1 }) => {
+					if (cancelled) return;
+					Object.assign(host.style, { top: `${y$1}px` });
+				});
+			}
+			return cleanup;
+		}
+	});
+}
+
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/setup.ts
+const HANDLE_WIDTH = 2;
+/**
+* @internal
+*/
+function useTableHandleDropIndicator(host, { state }) {
+	const { editor } = state;
+	useEffect(host, () => {
+		Object.assign(host.style, {
+			pointerEvents: "none",
+			position: "absolute"
+		});
+	});
+	useInitDndPosition(host, editor, onInitIndicatorPosition);
+	useUpdateIndicatorPosition(host, editor, HANDLE_WIDTH);
+}
+function onInitIndicatorPosition({ host, direction, dragging, table }) {
+	Object.assign(host.style, { display: dragging ? "block" : "none" });
+	const tableRect = table.getBoundingClientRect();
+	if (direction === "col") Object.assign(host.style, {
+		width: `${HANDLE_WIDTH}px`,
+		height: `${tableRect.height}px`
+	});
+	if (direction === "row") Object.assign(host.style, {
+		width: `${tableRect.width}px`,
+		height: `${HANDLE_WIDTH}px`
+	});
+}
+
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/types.ts
+const tableHandleDropIndicatorProps = { editor: { default: null } };
+const tableHandleDropIndicatorEvents = {};
+
+//#endregion
+//#region src/components/table-handle/table-handle-drop-indicator/element.gen.ts
+const TableHandleDropIndicatorElementBase = defineCustomElement({
+	props: tableHandleDropIndicatorProps,
+	events: tableHandleDropIndicatorEvents,
+	setup: useTableHandleDropIndicator
+});
+var TableHandleDropIndicatorElement = class extends TableHandleDropIndicatorElementBase {};
+registerCustomElement("prosekit-table-handle-drop-indicator", TableHandleDropIndicatorElement);
+
 //#endregion
 //#region src/components/table-handle/table-handle-popover-content/setup.ts
 /**
@@ -216,6 +684,54 @@ function useEditorTyping(host, editor) {
 	return typing;
 }
 
+//#endregion
+//#region src/components/table-handle/hooks/use-drop.ts
+function useDrop(host, editor, dndContext) {
+	const dragging = createComputed(() => dndContext.get().dragging);
+	useEffect(host, () => {
+		if (!dragging.get()) return;
+		const view = getSafeEditorView(editor.peek());
+		if (!view || !view.editable) return;
+		const ownerDocument = view.dom?.ownerDocument;
+		if (!ownerDocument) return;
+		const handleDrop = () => {
+			const editorValue = editor.peek();
+			if (!editorValue) return;
+			const { droppingIndex, draggingIndex, direction } = dndContext.peek();
+			if (draggingIndex < 0 || droppingIndex < 0) {
+				console.warn("[prosekit] Invalid drag indices:", {
+					draggingIndex,
+					droppingIndex
+				});
+				return;
+			}
+			if (direction === "row") {
+				editorValue.exec(moveTableRow({
+					from: draggingIndex,
+					to: droppingIndex
+				}));
+				return;
+			}
+			if (direction === "col") {
+				editorValue.exec(moveTableColumn({
+					from: draggingIndex,
+					to: droppingIndex
+				}));
+				return;
+			}
+		};
+		const handleDragOver = (event) => {
+			event.preventDefault();
+		};
+		ownerDocument.addEventListener("dragover", handleDragOver);
+		ownerDocument.addEventListener("drop", handleDrop);
+		return () => {
+			ownerDocument.removeEventListener("dragover", handleDragOver);
+			ownerDocument.removeEventListener("drop", handleDrop);
+		};
+	});
+}
+
 //#endregion
 //#region src/components/table-handle/utils.ts
 function isHoveringCellInfoEqual(a, b) {
@@ -273,6 +789,7 @@ function getCellIndex(map, rowIndex, colIndex) {
 function useTableHandleRoot(host, { state }) {
 	const { editor } = state;
 	const context = createSignal(null);
+	const dndContext = createSignal(defaultTableHandleDndContext);
 	const hoveringCell = useHoveringCell(host, editor);
 	const typing = useEditorTyping(host, editor);
 	const isInTable = createComputed(() => !!hoveringCell.get());
@@ -284,6 +801,8 @@ function useTableHandleRoot(host, { state }) {
 		context.set(typingValue || selectingValue ? null : hoveringCellValue);
 	});
 	tableHandleRootContext.provide(host, context);
+	tableHandleDndContext.provide(host, dndContext);
+	useDrop(host, editor, dndContext);
 }
 function useHoveringCell(host, editor) {
 	const hoveringCell = createSignal(null);
@@ -308,7 +827,8 @@ function useSelecting(host, editor, isInTable) {
 	const selecting = createSignal(false);
 	useEffect(host, () => {
 		if (!isInTable.get()) return;
-		const root = editor.peek()?.view.root;
+		const view = getSafeEditorView(editor.peek());
+		const root = view?.root;
 		if (!root) return;
 		const pointerDownHandler = (event) => {
 			const target = event.target;
@@ -358,7 +878,7 @@ function useTableHandleRowRoot(host, { state }) {
 	});
 	const referenceCell = createComputed(() => {
 		const pos = rowFirstCellPos.get();
-		const view = editor.get()?.view;
+		const view = getSafeEditorView(editor.get());
 		if (!pos || !view) return null;
 		return view.nodeDOM(pos);
 	});
@@ -407,12 +927,58 @@ registerCustomElement("prosekit-table-handle-row-root", TableHandleRowRootElemen
 function useTableHandleRowTrigger(host, { state }) {
 	useMenuTrigger(host);
 	const context = tableHandleRootContext.consume(host);
+	const dndContext = tableHandleDndContext.consume(host);
 	useEventListener(host, "pointerdown", () => {
 		const editor = state.editor.peek();
 		const cellPos = context.peek()?.cellPos;
 		if (!editor || !cellPos) return;
 		editor.exec(selectTableRow({ head: cellPos }));
 	});
+	useEffect(host, () => {
+		host.draggable = true;
+	});
+	const getEmptyImage = useEmptyImage(host);
+	useEventListener(host, "dragstart", (event) => {
+		const dataTransfer = event.dataTransfer;
+		if (dataTransfer) {
+			dataTransfer.effectAllowed = "move";
+			const emptyImage = getEmptyImage();
+			if (emptyImage) dataTransfer.setDragImage(emptyImage, 0, 0);
+		}
+		const prev = dndContext.peek();
+		const index = context.peek()?.rowIndex ?? -1;
+		if (index < 0) {
+			console.warn("[prosekit] Invalid row index for drag operation:", index);
+			event.preventDefault();
+			return;
+		}
+		dndContext.set({
+			...prev,
+			direction: "row",
+			dragging: true,
+			draggingIndex: index,
+			startX: event.clientX,
+			startY: event.clientY
+		});
+	});
+	useEventListener(host, "drag", (event) => {
+		const prev = dndContext.peek();
+		if (event.clientX === 0 && event.clientY === 0) return;
+		dndContext.set({
+			...prev,
+			direction: "row",
+			dragging: true,
+			x: event.clientX,
+			y: event.clientY
+		});
+	});
+	useEventListener(host, "dragend", () => {
+		const prev = dndContext.peek();
+		dndContext.set({
+			...prev,
+			dragging: false
+		});
+	});
 }
 
 //#endregion
@@ -433,4 +999,4 @@ var TableHandleRowTriggerElement = class extends TableHandleRowTriggerElementBas
 registerCustomElement("prosekit-table-handle-row-trigger", TableHandleRowTriggerElement);
 
 //#endregion
-export { TableHandleColumnRootElement, TableHandleColumnTriggerElement, TableHandlePopoverContentElement, TableHandlePopoverItemElement, TableHandleRootElement, TableHandleRowRootElement, TableHandleRowTriggerElement, tableHandleColumnRootEvents, tableHandleColumnRootProps, tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, tableHandlePopoverContentEvents, tableHandlePopoverContentProps, tableHandlePopoverItemEvents, tableHandlePopoverItemProps, tableHandleRootEvents, tableHandleRootProps, tableHandleRowRootEvents, tableHandleRowRootProps, tableHandleRowTriggerEvents, tableHandleRowTriggerProps, useTableHandleColumnRoot, useTableHandleColumnTrigger, useTableHandlePopoverContent, useTableHandlePopoverItem, useTableHandleRoot, useTableHandleRowRoot, useTableHandleRowTrigger };
+export { TableHandleColumnRootElement, TableHandleColumnTriggerElement, TableHandleDragPreviewElement, TableHandleDropIndicatorElement, TableHandlePopoverContentElement, TableHandlePopoverItemElement, TableHandleRootElement, TableHandleRowRootElement, TableHandleRowTriggerElement, 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.5.11",
+  "version": "0.6.0",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -66,24 +66,24 @@
     "@aria-ui/collection": "^0.0.5",
     "@aria-ui/core": "^0.0.21",
     "@aria-ui/listbox": "^0.0.24",
-    "@aria-ui/menu": "^0.0.19",
+    "@aria-ui/menu": "^0.0.20",
     "@aria-ui/overlay": "^0.0.24",
     "@aria-ui/popover": "^0.0.27",
     "@aria-ui/presence": "^0.0.19",
     "@aria-ui/tooltip": "^0.0.29",
-    "@floating-ui/dom": "^1.7.1",
+    "@floating-ui/dom": "^1.7.2",
     "@ocavue/utils": "^0.5.0",
     "prosemirror-tables": "^1.7.1",
+    "@prosekit/extensions": "^0.10.0",
     "@prosekit/pm": "^0.1.11",
-    "@prosekit/core": "^0.8.2",
-    "@prosekit/extensions": "^0.9.3"
+    "@prosekit/core": "^0.8.3"
   },
   "devDependencies": {
-    "tsdown": "^0.12.7",
+    "tsdown": "^0.12.9",
     "typescript": "~5.8.3",
-    "vitest": "^3.2.3",
-    "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "vitest": "^3.2.4",
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0"
   },
   "publishConfig": {
     "dev": {}