@prosekit/web 0.7.2 → 0.7.3

package/dist/{inject-style-RwRNoINh.js → inject-style-D5jj7cme.js}

@@ -5,21 +5,21 @@ import { getDocument, getId } from "@ocavue/utils";
 * Creates a deep clone of an Element, including all computed styles so that
 * it looks almost exactly the same as the original element.
 */
-function deepCloneElement(element) {
+function deepCloneElement(element, important = false) {
 	const clonedElement = element.cloneNode(true);
-	const style = deepCopyStyles(element, clonedElement);
+	const style = deepCopyStyles(element, clonedElement, important);
 	return [clonedElement, style];
 }
 /**
 * Creates a clone of an Element, including all computed styles so that
 * it looks similar enough to the original element.
 */
-function cloneElement(element) {
+function cloneElement(element, important = false) {
 	const clonedElement = element.cloneNode();
-	const style = copyStyles(element, clonedElement);
+	const style = copyStyles(element, clonedElement, important);
 	return [clonedElement, style];
 }
-function deepCopyStyles(source, target) {
+function deepCopyStyles(source, target, important) {
 	const sources = [source];
 	const targets = [target];
 	const styles = [];
@@ -27,21 +27,21 @@ function deepCopyStyles(source, target) {
 		const source$1 = sources.pop();
 		const target$1 = targets.pop();
 		if (!source$1 || !target$1) break;
-		const style = copyStyles(source$1, target$1);
+		const style = copyStyles(source$1, target$1, important);
 		if (style) styles.push(style);
 		sources.push(...source$1.children);
 		targets.push(...target$1.children);
 	}
 	return styles.join("\n");
 }
-function copyStyles(source, target) {
+function copyStyles(source, target, important) {
 	if (!source || !target) return "";
 	const view = source.ownerDocument?.defaultView;
 	if (!view) return "";
 	const sourceStyle = view.getComputedStyle(source);
 	const targetStyle = target.style;
 	if (!sourceStyle || !targetStyle) return "";
-	for (const key of sourceStyle) targetStyle.setProperty(key, sourceStyle.getPropertyValue(key), sourceStyle.getPropertyPriority(key));
+	for (const key of sourceStyle) targetStyle.setProperty(key, sourceStyle.getPropertyValue(key), important ? "important" : sourceStyle.getPropertyPriority(key) || "");
 	const styles = [];
 	for (const pseudoSelector of [":before", ":after"]) {
 		const sourcePseudoStyle = view.getComputedStyle(source, pseudoSelector);

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

@@ -1,7 +1,7 @@
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
 import { getSafeEditorView } from "./get-safe-editor-view-DENm4avv.js";
 import { assignStyles, useScrolling } from "./use-scrolling-BNfsQs3S.js";
-import { deepCloneElement, injectStyle } from "./inject-style-RwRNoINh.js";
+import { deepCloneElement, injectStyle } from "./inject-style-D5jj7cme.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";
@@ -56,6 +56,21 @@ const BlockHandleAddElementBase = defineCustomElement({
 var BlockHandleAddElement = class extends BlockHandleAddElementBase {};
 registerCustomElement("prosekit-block-handle-add", BlockHandleAddElement);
 
+//#endregion
+//#region src/utils/get-box-element.ts
+/**
+* Returns the element that has a box.
+*/
+function getBoxElement(element) {
+	const window = element.ownerDocument.defaultView;
+	if (!window) return;
+	const style = window.getComputedStyle(element);
+	const display = style.display;
+	if (display === "contents" && element.childElementCount === 1) return element.firstElementChild;
+	else if (display === "none") return;
+	return element;
+}
+
 //#endregion
 //#region src/utils/get-client-rect.ts
 /**
@@ -120,8 +135,9 @@ function setDragPreview(event, element) {
 	const borderY = Math.max(outsideY, 0);
 	assignStyles(container, {
 		position: "fixed",
-		top: "0",
-		left: "0",
+		top: "-1000vh",
+		left: "-1000vw",
+		pointerEvents: "none",
 		zIndex: maxZIndex,
 		borderLeft: `${borderX}px solid transparent`,
 		borderTop: `${borderY}px solid transparent`,
@@ -129,11 +145,10 @@ function setDragPreview(event, element) {
 		width: `${width + borderX}px`,
 		height: `${height + borderY}px`
 	});
-	const [clonedElement, styleText] = deepCloneElement(element);
-	assignStyles(clonedElement, {
-		opacity: "0.5",
-		margin: "0"
-	});
+	const [clonedElement, styleText] = deepCloneElement(element, true);
+	clonedElement.style.setProperty("opacity", "0.5", "important");
+	clonedElement.style.setProperty("margin", "0", "important");
+	clonedElement.style.setProperty("outline-color", "transparent", "important");
 	document.body.appendChild(container);
 	container.appendChild(clonedElement);
 	injectStyle(container, styleText);
@@ -188,10 +203,12 @@ function createDraggingPreview(view, hoverState, event) {
 	const { pos } = hoverState;
 	const element = view.nodeDOM(pos);
 	if (!element || !isHTMLElement(element)) return;
+	const boxElement = getBoxElement(element);
+	if (!boxElement || !isHTMLElement(boxElement)) return;
 	event.dataTransfer.clearData();
-	event.dataTransfer.setData("text/html", element.outerHTML);
+	event.dataTransfer.setData("text/html", boxElement.outerHTML);
 	event.dataTransfer.effectAllowed = "copyMove";
-	setDragPreview(event, element);
+	setDragPreview(event, boxElement);
 }
 function setViewDragging(view, hoverState) {
 	const { node, pos } = hoverState;

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

@@ -2,7 +2,7 @@ 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 { assignStyles, useScrolling } from "./use-scrolling-BNfsQs3S.js";
-import { cloneElement, deepCloneElement, injectStyle } from "./inject-style-RwRNoINh.js";
+import { cloneElement, deepCloneElement, injectStyle } from "./inject-style-D5jj7cme.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";
@@ -146,6 +146,7 @@ function useTableHandleColumnTrigger(host, { state }) {
 			dataTransfer.effectAllowed = "move";
 			const emptyImage = getEmptyImage();
 			if (emptyImage) dataTransfer.setDragImage(emptyImage, 0, 0);
+			dataTransfer.setData("application/x-prosekit-table-handle-drag", "");
 		}
 		const prev = dndContext.peek();
 		const index = context.peek()?.colIndex;
@@ -163,24 +164,6 @@ function useTableHandleColumnTrigger(host, { state }) {
 			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
@@ -796,12 +779,12 @@ function useSelecting(host, editor, enabled) {
 function useDrop(host, editor, dndContext) {
 	const dragging = createComputed(() => dndContext.get().dragging);
 	useEffect(host, () => {
-		if (!dragging.get()) return;
-		const view = getSafeEditorView(editor.peek());
+		const view = getSafeEditorView(editor.get());
 		if (!view || !view.editable) return;
 		const ownerDocument = view.dom?.ownerDocument;
 		if (!ownerDocument) return;
 		const handleDrop = () => {
+			if (!dragging.peek()) return;
 			const editorValue = editor.peek();
 			if (!editorValue) return;
 			const { droppingIndex, draggingIndex, direction } = dndContext.peek();
@@ -828,13 +811,31 @@ function useDrop(host, editor, dndContext) {
 			}
 		};
 		const handleDragOver = (event) => {
+			if (!dragging.peek()) return;
 			event.preventDefault();
+			const prev = dndContext.peek();
+			dndContext.set({
+				...prev,
+				dragging: true,
+				x: event.clientX,
+				y: event.clientY
+			});
+		};
+		const handleDragEnd = () => {
+			if (!dragging.peek()) return;
+			const prev = dndContext.peek();
+			dndContext.set({
+				...prev,
+				dragging: false
+			});
 		};
 		ownerDocument.addEventListener("dragover", handleDragOver);
 		ownerDocument.addEventListener("drop", handleDrop);
+		ownerDocument.addEventListener("dragend", handleDragEnd);
 		return () => {
 			ownerDocument.removeEventListener("dragover", handleDragOver);
 			ownerDocument.removeEventListener("drop", handleDrop);
+			ownerDocument.removeEventListener("dragend", handleDragEnd);
 		};
 	});
 }
@@ -1046,24 +1047,6 @@ function useTableHandleRowTrigger(host, { state }) {
 			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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -80,15 +80,16 @@
     "@zag-js/dom-query": "^1.21.1",
     "prosemirror-tables": "^1.7.1",
     "@prosekit/core": "^0.8.3",
-    "@prosekit/extensions": "^0.11.2",
+    "@prosekit/extensions": "^0.11.4",
     "@prosekit/pm": "^0.1.11"
   },
   "devDependencies": {
-    "tsdown": "^0.13.2",
-    "typescript": "~5.8.3",
+    "tsdown": "^0.13.4",
+    "type-fest": "^4.41.0",
+    "typescript": "~5.9.2",
     "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": {}