@prosekit/web 0.6.0 → 0.6.1

package/dist/clone-element-B55UD54E.js

@@ -0,0 +1,50 @@
+//#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.
+*/
+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 { assignStyles, cloneElement, deepCloneElement };

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

@@ -1,4 +1,5 @@
 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 { defineDOMEventHandler, insertDefaultBlock, union } from "@prosekit/core";
 import { overlayPositionerEvents, overlayPositionerProps, useOverlayPositionerState } from "@aria-ui/overlay/elements";
@@ -49,46 +50,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
 /**

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

@@ -1,5 +1,6 @@
 import { getSafeEditorView, getStateWithDefaults } from "./get-safe-editor-view-CqJWgxo1.js";
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
+import { assignStyles, cloneElement, deepCloneElement } from "./clone-element-B55UD54E.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";
@@ -141,8 +142,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 +240,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 +287,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 +358,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 +398,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 +407,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 +415,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 +519,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 +538,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 +555,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 +564,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`
 	});
@@ -946,8 +966,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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -74,16 +74,16 @@
     "@floating-ui/dom": "^1.7.2",
     "@ocavue/utils": "^0.5.0",
     "prosemirror-tables": "^1.7.1",
+    "@prosekit/core": "^0.8.3",
     "@prosekit/extensions": "^0.10.0",
-    "@prosekit/pm": "^0.1.11",
-    "@prosekit/core": "^0.8.3"
+    "@prosekit/pm": "^0.1.11"
   },
   "devDependencies": {
     "tsdown": "^0.12.9",
     "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": {}