@prosekit/web 0.7.1 → 0.7.3

package/dist/inject-style-D5jj7cme.js

@@ -0,0 +1,79 @@
+import { getDocument, getId } from "@ocavue/utils";
+
+//#region src/utils/clone-element.ts
+/**
+* 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, important = false) {
+	const clonedElement = element.cloneNode(true);
+	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, important = false) {
+	const clonedElement = element.cloneNode();
+	const style = copyStyles(element, clonedElement, important);
+	return [clonedElement, style];
+}
+function deepCopyStyles(source, target, important) {
+	const sources = [source];
+	const targets = [target];
+	const styles = [];
+	while (sources.length > 0 && sources.length === targets.length) {
+		const source$1 = sources.pop();
+		const target$1 = targets.pop();
+		if (!source$1 || !target$1) break;
+		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, 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), important ? "important" : sourceStyle.getPropertyPriority(key) || "");
+	const styles = [];
+	for (const pseudoSelector of [":before", ":after"]) {
+		const sourcePseudoStyle = view.getComputedStyle(source, pseudoSelector);
+		const targetPseudoStyle = view.getComputedStyle(target, pseudoSelector);
+		if (!sourcePseudoStyle) continue;
+		const content = sourcePseudoStyle.getPropertyValue("content");
+		const hasPseudoElement = content && content !== "none" && content !== "normal";
+		if (!hasPseudoElement) continue;
+		const cssProps = [];
+		for (const property of sourcePseudoStyle) {
+			const sourceValue = sourcePseudoStyle.getPropertyValue(property);
+			const sourcePriority = sourcePseudoStyle.getPropertyPriority(property);
+			const targetValue = targetPseudoStyle.getPropertyValue(property);
+			const targetPriority = targetPseudoStyle.getPropertyPriority(property);
+			if (sourceValue !== targetValue || sourcePriority !== targetPriority) cssProps.push(`${property}: ${sourceValue}${sourcePriority ? " !important" : ""};`);
+		}
+		const uniqueClassName = `clone-pseudo-element-${getId()}`;
+		target.classList.add(uniqueClassName);
+		styles.push(`.${uniqueClassName}${pseudoSelector} { ${cssProps.join(" ")} }`);
+	}
+	return styles.join("\n");
+}
+
+//#endregion
+//#region src/utils/inject-style.ts
+function injectStyle(container, styleText) {
+	if (!styleText) return;
+	const document = getDocument(container);
+	const style = document.createElement("style");
+	style.textContent = styleText;
+	container.appendChild(style);
+}
+
+//#endregion
+export { cloneElement, deepCloneElement, injectStyle };

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

@@ -20,19 +20,19 @@ declare class AutocompleteEmptyElement extends AutocompleteEmptyElementBase {}
 //#endregion
 //#region src/components/autocomplete/autocomplete-empty/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare const useAutocompleteEmpty: typeof useListboxEmpty;
 //#endregion
 //#region src/components/autocomplete/autocomplete-item/types.d.ts
 interface AutocompleteItemProps {
   /**
-  * The value of the item, which will be matched against the query.
-  *
-  * If not provided, the value is the item's text content.
-  *
-  * @default ""
-  */
+   * The value of the item, which will be matched against the query.
+   *
+   * If not provided, the value is the item's text content.
+   *
+   * @default ""
+   */
   value: string;
 }
 /** @internal */
@@ -47,21 +47,21 @@ declare class AutocompleteItemElement extends AutocompleteItemElementBase {}
 //#endregion
 //#region src/components/autocomplete/autocomplete-item/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useAutocompleteItem(element: ConnectableElement, {
   state,
   emit
 }: SetupOptions<AutocompleteItemProps, AutocompleteItemEvents>): void;
 //#endregion
 //#region src/components/autocomplete/autocomplete-list/types.d.ts
-interface AutocompleteListProps extends Pick<ListboxProps, "filter"> {
+interface AutocompleteListProps extends Pick<ListboxProps, 'filter'> {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
 }
 declare const autocompleteListProps: PropDeclarations<AutocompleteListProps>;
@@ -74,8 +74,8 @@ declare class AutocompleteListElement extends AutocompleteListElementBase {}
 //#endregion
 //#region src/components/autocomplete/autocomplete-list/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useAutocompleteList(element: ConnectableElement, {
   state,
   emit
@@ -84,61 +84,61 @@ declare function useAutocompleteList(element: ConnectableElement, {
 //#region src/components/autocomplete/autocomplete-popover/types.d.ts
 interface AutocompletePopoverProps extends OverlayPositionerProps {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
   /**
-  * The regular expression to match the query text to autocomplete.
-  *
-  * @default null
-  */
+   * The regular expression to match the query text to autocomplete.
+   *
+   * @default null
+   */
   regex: RegExp | null;
   /**
-  * The placement of the popover, relative to the text cursor.
-  *
-  * @default "bottom-start"
-  */
-  placement: OverlayPositionerProps["placement"];
+   * The placement of the popover, relative to the text cursor.
+   *
+   * @default "bottom-start"
+   */
+  placement: OverlayPositionerProps['placement'];
   /**
-  * The distance between the popover and the hovered block.
-  *
-  * @default 4
-  */
-  offset: OverlayPositionerProps["offset"];
+   * The distance between the popover and the hovered block.
+   *
+   * @default 4
+   */
+  offset: OverlayPositionerProps['offset'];
   /**
-  * @default true
-  */
-  inline: OverlayPositionerProps["inline"];
+   * @default true
+   */
+  inline: OverlayPositionerProps['inline'];
   /**
-  * @default true
-  */
-  hoist: OverlayPositionerProps["hoist"];
+   * @default true
+   */
+  hoist: OverlayPositionerProps['hoist'];
   /**
-  * @default true
-  */
-  fitViewport: OverlayPositionerProps["fitViewport"];
+   * @default true
+   */
+  fitViewport: OverlayPositionerProps['fitViewport'];
   /**
-  * @default "The body element"
-  */
-  boundary: OverlayPositionerProps["boundary"];
+   * @default "The body element"
+   */
+  boundary: OverlayPositionerProps['boundary'];
   /**
-  * @default 8
-  */
-  overflowPadding: OverlayPositionerProps["overflowPadding"];
+   * @default 8
+   */
+  overflowPadding: OverlayPositionerProps['overflowPadding'];
 }
 /** @internal */
 declare const autocompletePopoverProps: PropDeclarations<AutocompletePopoverProps>;
 interface AutocompletePopoverEvents extends OverlayPositionerEvents {
   /**
-  * Fired when the open state changes.
-  */
+   * Fired when the open state changes.
+   */
   openChange: CustomEvent<boolean>;
   /**
-  * Fired when the query changes.
-  */
+   * Fired when the query changes.
+   */
   queryChange: CustomEvent<string>;
 }
 /** @internal */
@@ -150,8 +150,8 @@ declare class AutocompletePopoverElement extends AutocompletePopoverElementBase
 //#endregion
 //#region src/components/autocomplete/autocomplete-popover/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useAutocompletePopover(host: ConnectableElement, {
   state,
   emit

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

@@ -7,11 +7,11 @@ import { Placement } from "@floating-ui/dom";
 //#region src/components/block-handle/block-handle-add/types.d.ts
 interface BlockHandleAddProps {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
 }
 /** @internal */
@@ -27,8 +27,8 @@ declare class BlockHandleAddElement extends BlockHandleAddElementBase {}
 //#endregion
 //#region src/components/block-handle/block-handle-add/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useBlockHandleAdd(host: ConnectableElement, {
   state
 }: {
@@ -38,11 +38,11 @@ declare function useBlockHandleAdd(host: ConnectableElement, {
 //#region src/components/block-handle/block-handle-draggable/types.d.ts
 interface BlockHandleDraggableProps {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
 }
 /** @internal */
@@ -58,8 +58,8 @@ declare class BlockHandleDraggableElement extends BlockHandleDraggableElementBas
 //#endregion
 //#region src/components/block-handle/block-handle-draggable/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useBlockHandleDraggable(host: ConnectableElement, {
   state
 }: {
@@ -67,49 +67,49 @@ declare function useBlockHandleDraggable(host: ConnectableElement, {
 }): void;
 //#endregion
 //#region src/components/block-handle/block-handle-popover/types.d.ts
-interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, "placement" | "hoist" | "flip" | "shift" | "hide"> {
+interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
   /**
-  * The placement of the popover, relative to the hovered block.
-  *
-  * @default "left"
-  */
+   * The placement of the popover, relative to the hovered block.
+   *
+   * @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
-  */
+   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * to place the floating element on top of other page content.
+   *
+   * @default false
+   */
   hoist: boolean;
   /**
-  * @default false
-  * @hidden
-  */
+   * @default false
+   * @hidden
+   */
   flip: boolean;
   /**
-  * @default false
-  * @hidden
-  */
+   * @default false
+   * @hidden
+   */
   shift: boolean;
   /**
-  * @default true
-  * @hidden
-  */
+   * @default true
+   * @hidden
+   */
   hide: boolean;
 }
 /** @internal */
 declare const blockHandlePopoverProps: PropDeclarations<BlockHandlePopoverProps>;
 interface BlockHandlePopoverEvents extends OverlayPositionerEvents {
   /**
-  * Fired when the hovered block changes.
-  */
+   * Fired when the hovered block changes.
+   */
   stateChange: CustomEvent<{
     node: ProseMirrorNode;
     pos: number;
@@ -124,8 +124,8 @@ declare class BlockHandlePopoverElement extends BlockHandlePopoverElementBase {}
 //#endregion
 //#region src/components/block-handle/block-handle-popover/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useBlockHandlePopover(host: ConnectableElement, {
   state,
   emit

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 } from "./clone-element-CwLKm7c_.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,13 +145,13 @@ function setDragPreview(event, element) {
 		width: `${width + borderX}px`,
 		height: `${height + borderY}px`
 	});
-	const clonedElement = 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);
 	event.dataTransfer?.setDragImage(container, Math.max(-outsideX, 0), Math.max(-outsideY, 0));
 	requestAnimationFrame(() => {
 		container.remove();
@@ -187,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-drop-indicator.d.ts

@@ -4,17 +4,17 @@ import { Editor } from "@prosekit/core";
 //#region src/components/drop-indicator/drop-indicator/types.d.ts
 interface DropIndicatorProps {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
   /**
-  * The line width in pixels.
-  *
-  * @default 2
-  */
+   * The line width in pixels.
+   *
+   * @default 2
+   */
   width: number;
 }
 /** @internal */
@@ -29,8 +29,8 @@ declare class DropIndicatorElement extends DropIndicatorElementBase {}
 //#endregion
 //#region src/components/drop-indicator/drop-indicator/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useDropIndicator(host: ConnectableElement, {
   state
 }: SetupOptions<DropIndicatorProps, DropIndicatorEvents>): void;

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

@@ -3,72 +3,72 @@ import { Editor } from "@prosekit/core";
 import { OverlayPositionerEvents, OverlayPositionerProps } from "@aria-ui/overlay";
 
 //#region src/components/inline-popover/inline-popover/types.d.ts
-interface InlinePopoverProps extends Omit<OverlayPositionerProps, "placement" | "offset" | "hide" | "overlap" | "inline" | "overflowPadding"> {
+interface InlinePopoverProps extends Omit<OverlayPositionerProps, 'placement' | 'offset' | 'hide' | 'overlap' | 'inline' | 'overflowPadding'> {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
   /**
-  * Whether the popover is open by default when some inline content is
-  * selected.
-  *
-  * When `defaultOpen` is true, the popover will open or close based on the
-  * inline selection. When `defaultOpen` is false, the popover will never be
-  * opened unless the `open` prop is true.
-  *
-  * @default true
-  */
+   * Whether the popover is open by default when some inline content is
+   * selected.
+   *
+   * When `defaultOpen` is true, the popover will open or close based on the
+   * inline selection. When `defaultOpen` is false, the popover will never be
+   * opened unless the `open` prop is true.
+   *
+   * @default true
+   */
   defaultOpen: boolean;
   /**
-  * Whether the popover is open.
-  *
-  * Notice that the popover will be always hidden if the inline selection is
-  * empty.
-  *
-  * @default false
-  */
+   * Whether the popover is open.
+   *
+   * Notice that the popover will be always hidden if the inline selection is
+   * empty.
+   *
+   * @default false
+   */
   open: boolean;
   /**
-  * Whether the inline popover should be dismissed when the editor receives an
-  * Escape key press.
-  *
-  * @default true
-  */
+   * Whether the inline popover should be dismissed when the editor receives an
+   * Escape key press.
+   *
+   * @default true
+   */
   dismissOnEscape: boolean;
   /**
-  * @default "top"
-  */
-  placement: OverlayPositionerProps["placement"];
+   * @default "top"
+   */
+  placement: OverlayPositionerProps['placement'];
   /**
-  * @default 12
-  */
-  offset: OverlayPositionerProps["offset"];
+   * @default 12
+   */
+  offset: OverlayPositionerProps['offset'];
   /**
-  * @default true
-  */
-  hide: OverlayPositionerProps["hide"];
+   * @default true
+   */
+  hide: OverlayPositionerProps['hide'];
   /**
-  * @default true
-  */
-  overlap: OverlayPositionerProps["overlap"];
+   * @default true
+   */
+  overlap: OverlayPositionerProps['overlap'];
   /**
-  * @default true
-  */
-  inline: OverlayPositionerProps["inline"];
+   * @default true
+   */
+  inline: OverlayPositionerProps['inline'];
   /**
-  * @default 8
-  */
-  overflowPadding: OverlayPositionerProps["overflowPadding"];
+   * @default 8
+   */
+  overflowPadding: OverlayPositionerProps['overflowPadding'];
 }
 /** @internal */
 declare const inlinePopoverProps: PropDeclarations<InlinePopoverProps>;
 interface InlinePopoverEvents extends OverlayPositionerEvents {
   /**
-  * Fired when the open state changes.
-  */
+   * Fired when the open state changes.
+   */
   openChange: CustomEvent<boolean>;
 }
 /** @internal */
@@ -80,8 +80,8 @@ declare class InlinePopoverElement extends InlinePopoverElementBase {}
 //#endregion
 //#region src/components/inline-popover/inline-popover/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useInlinePopover(host: ConnectableElement, {
   state,
   emit

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

@@ -3,11 +3,11 @@ import { BaseElementConstructor, ConnectableElement, EventDeclarations, PropDecl
 //#region src/components/resizable/resizable-handle/types.d.ts
 interface ResizableHandleProps {
   /**
-  * The position of the handle.
-  *
-  * @default "bottom-right"
-  */
-  position: "top" | "right" | "bottom" | "left" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+   * The position of the handle.
+   *
+   * @default "bottom-right"
+   */
+  position: 'top' | 'right' | 'bottom' | 'left' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }
 /** @internal */
 declare const resizableHandleProps: PropDeclarations<ResizableHandleProps>;
@@ -22,8 +22,8 @@ declare class ResizableHandleElement extends ResizableHandleElementBase {}
 //#endregion
 //#region src/components/resizable/resizable-handle/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useResizableHandle(host: ConnectableElement, {
   state
 }: {
@@ -57,8 +57,8 @@ declare class ResizableRootElement extends ResizableRootElementBase {}
 //#endregion
 //#region src/components/resizable/resizable-root/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useResizableRoot(host: ConnectableElement, {
   state,
   emit

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

@@ -7,41 +7,41 @@ 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" | "hoist" | "flip" | "shift" | "hide"> {
+interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
   /**
-  * The placement of the popover, relative to the hovered table cell.
-  *
-  * @default "top"
-  */
+   * The placement of the popover, relative to the hovered table cell.
+   *
+   * @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
-  */
+   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * to place the floating element on top of other page content.
+   *
+   * @default false
+   */
   hoist: boolean;
   /**
-  * @default false
-  * @hidden
-  */
+   * @default false
+   * @hidden
+   */
   flip: boolean;
   /**
-  * @default false
-  * @hidden
-  */
+   * @default false
+   * @hidden
+   */
   shift: boolean;
   /**
-  * @default true
-  * @hidden
-  */
+   * @default true
+   * @hidden
+   */
   hide: boolean;
 }
 /** @internal */
@@ -57,8 +57,8 @@ declare class TableHandleColumnRootElement extends TableHandleColumnRootElementB
 //#endregion
 //#region src/components/table-handle/table-handle-column-root/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandleColumnRoot(host: ConnectableElement, {
   state
 }: {
@@ -83,8 +83,8 @@ declare class TableHandleColumnTriggerElement extends TableHandleColumnTriggerEl
 //#endregion
 //#region src/components/table-handle/table-handle-column-trigger/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandleColumnTrigger(host: ConnectableElement, {
   state
 }: SetupOptions<TableHandleColumnTriggerProps, TableHandleColumnTriggerEvents>): void;
@@ -103,8 +103,8 @@ declare class TableHandleDragPreviewElement extends TableHandleDragPreviewElemen
 //#endregion
 //#region src/components/table-handle/table-handle-drag-preview/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandleDragPreview(host: ConnectableElement, {
   state
 }: {
@@ -125,8 +125,8 @@ declare class TableHandleDropIndicatorElement extends TableHandleDropIndicatorEl
 //#endregion
 //#region src/components/table-handle/table-handle-drop-indicator/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandleDropIndicator(host: ConnectableElement, {
   state
 }: {
@@ -134,15 +134,15 @@ declare function useTableHandleDropIndicator(host: ConnectableElement, {
 }): void;
 //#endregion
 //#region src/components/table-handle/table-handle-popover-content/types.d.ts
-interface TableHandlePopoverContentProps extends Omit<MenuContentProps, "placement" | "offset"> {
+interface TableHandlePopoverContentProps extends Omit<MenuContentProps, 'placement' | 'offset'> {
   /**
-  * @default 'bottom-start'
-  */
-  placement: MenuContentProps["placement"];
+   * @default 'bottom-start'
+   */
+  placement: MenuContentProps['placement'];
   /**
-  * @default {mainAxis: -4, crossAxis: 4}
-  */
-  offset: MenuContentProps["offset"];
+   * @default {mainAxis: -4, crossAxis: 4}
+   */
+  offset: MenuContentProps['offset'];
   editor: Editor | null;
 }
 /** @internal */
@@ -157,8 +157,8 @@ declare class TableHandlePopoverContentElement extends TableHandlePopoverContent
 //#endregion
 //#region src/components/table-handle/table-handle-popover-content/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandlePopoverContent(host: ConnectableElement, {
   state,
   emit
@@ -178,8 +178,8 @@ declare class TableHandlePopoverItemElement extends TableHandlePopoverItemElemen
 //#endregion
 //#region src/components/table-handle/table-handle-popover-item/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandlePopoverItem(element: ConnectableElement, {
   state,
   emit
@@ -188,11 +188,11 @@ declare function useTableHandlePopoverItem(element: ConnectableElement, {
 //#region src/components/table-handle/table-handle-root/types.d.ts
 interface TableHandleRootProps {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
 }
 /** @internal */
@@ -208,8 +208,8 @@ declare class TableHandleRootElement extends TableHandleRootElementBase {}
 //#endregion
 //#region src/components/table-handle/table-handle-root/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandleRoot(host: ConnectableElement, {
   state
 }: {
@@ -217,41 +217,41 @@ 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" | "hoist" | "flip" | "shift" | "hide"> {
+interface TableHandleRowRootProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
   /**
-  * The ProseKit editor instance.
-  *
-  * @default null
-  * @hidden
-  */
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
   editor: Editor | null;
   /**
-  * The placement of the popover, relative to the hovered table cell.
-  *
-  * @default "left"
-  */
+   * The placement of the popover, relative to the hovered table cell.
+   *
+   * @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
-  */
+   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * to place the floating element on top of other page content.
+   *
+   * @default false
+   */
   hoist: boolean;
   /**
-  * @default false
-  * @hidden
-  */
+   * @default false
+   * @hidden
+   */
   flip: boolean;
   /**
-  * @default false
-  * @hidden
-  */
+   * @default false
+   * @hidden
+   */
   shift: boolean;
   /**
-  * @default true
-  * @hidden
-  */
+   * @default true
+   * @hidden
+   */
   hide: boolean;
 }
 /** @internal */
@@ -267,8 +267,8 @@ declare class TableHandleRowRootElement extends TableHandleRowRootElementBase {}
 //#endregion
 //#region src/components/table-handle/table-handle-row-root/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandleRowRoot(host: ConnectableElement, {
   state
 }: SetupOptions<TableHandleRowRootProps, TableHandleRowRootEvents>): void;
@@ -292,8 +292,8 @@ declare class TableHandleRowTriggerElement extends TableHandleRowTriggerElementB
 //#endregion
 //#region src/components/table-handle/table-handle-row-trigger/setup.d.ts
 /**
-* @internal
-*/
+ * @internal
+ */
 declare function useTableHandleRowTrigger(host: ConnectableElement, {
   state
 }: SetupOptions<TableHandleRowTriggerProps, TableHandleRowTriggerEvents>): void;

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

@@ -2,12 +2,12 @@ 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 } from "./clone-element-CwLKm7c_.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";
 import { usePresence } from "@aria-ui/presence";
-import { isHTMLElement } from "@ocavue/utils";
+import { isHTMLElement, once } 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 { moveTableColumn, moveTableRow, selectTableColumn, selectTableRow } from "@prosekit/extensions/table";
@@ -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
@@ -286,6 +269,45 @@ function getDndRelatedDOMs(view, cellPos, draggingIndex, direction) {
 	};
 }
 
+//#endregion
+//#region src/utils/css-feature-detection.ts
+const isColorMixSupported = once(() => {
+	try {
+		return CSS.supports("background-color", "color-mix(in srgb, red, blue)");
+	} catch {
+		return false;
+	}
+});
+
+//#endregion
+//#region src/utils/fade-color.ts
+/**
+* Convert a color to a color with opacity
+* @param color - The color to convert
+* @param opacity - The opacity to apply
+* @returns The converted color if color-mix is supported, otherwise undefined
+*/
+function fadeColor(color, opacity) {
+	if (isColorMixSupported()) {
+		const transparentWeight = (1 - opacity) * 100;
+		const colorWeight = opacity * 100;
+		return `color-mix(in srgb, ${color} ${colorWeight}%, transparent ${transparentWeight}%)`;
+	}
+}
+
+//#endregion
+//#region src/utils/get-effective-background-color.ts
+function getEffectiveBackgroundColor(element) {
+	let current = element;
+	while (current) {
+		const style = current.ownerDocument.defaultView?.getComputedStyle(current);
+		const backgroundColor = style?.backgroundColor;
+		if (backgroundColor && backgroundColor !== "transparent" && backgroundColor !== "rgba(0, 0, 0, 0)") return backgroundColor;
+		current = current.parentElement;
+	}
+	return void 0;
+}
+
 //#endregion
 //#region src/components/table-handle/table-handle-drag-preview/render-preview.ts
 function clearPreviewDOM(previewRoot) {
@@ -293,35 +315,40 @@ function clearPreviewDOM(previewRoot) {
 }
 function createPreviewDOM(table, previewRoot, index, direction) {
 	clearPreviewDOM(previewRoot);
-	const previewTable = cloneElementWithoutSize(table);
+	const [previewTable, previewTableStyle] = cloneElement(table);
+	injectStyle(previewRoot, previewTableStyle);
+	unsetSize(previewTable);
 	const tableBody = table.querySelector("tbody");
-	const previewTableBody = tableBody ? cloneElementWithoutSize(tableBody) : table.ownerDocument.createElement("tbody");
+	const [previewTableBody, previewTableBodyStyle] = tableBody ? cloneElement(tableBody) : [table.ownerDocument.createElement("tbody"), ""];
+	injectStyle(previewRoot, previewTableBodyStyle);
 	unsetSize(previewTableBody);
-	unsetSize(previewTable);
+	const backgroundColor = getEffectiveBackgroundColor(table);
+	if (backgroundColor) {
+		const backgroundColorWithOpacity = fadeColor(backgroundColor, .8);
+		if (backgroundColorWithOpacity) assignStyles(previewTable, { backgroundColor: backgroundColorWithOpacity });
+	}
 	previewTable.appendChild(previewTableBody);
 	previewRoot.appendChild(previewTable);
 	const rows = table.querySelectorAll("tr");
 	if (direction === "row") {
 		const row = rows[index];
-		const previewRow = deepCloneElement(row);
+		const [previewRow, previewRowStyle] = deepCloneElement(row);
+		injectStyle(previewRoot, previewRowStyle);
 		previewTableBody.appendChild(previewRow);
 	} else rows.forEach((row) => {
-		const previewRow = cloneElementWithoutSize(row);
+		const [previewRow, previewRowStyle] = cloneElement(row);
+		injectStyle(previewRoot, previewRowStyle);
 		unsetSize(previewRow);
 		const cells = row.querySelectorAll("td");
 		const cell = cells[index];
 		if (cell) {
-			const previewCell = deepCloneElement(cell);
+			const [previewCell, previewCellStyle] = deepCloneElement(cell);
+			injectStyle(previewRoot, previewCellStyle);
 			previewRow.appendChild(previewCell);
 			previewTableBody.appendChild(previewRow);
 		}
 	});
 }
-function cloneElementWithoutSize(element) {
-	const clonedElement = cloneElement(element);
-	unsetSize(clonedElement);
-	return clonedElement;
-}
 function unsetSize(element) {
 	assignStyles(element, {
 		width: "unset",
@@ -752,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();
@@ -784,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);
 		};
 	});
 }
@@ -1002,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.1",
+  "version": "0.7.3",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -76,16 +76,17 @@
     "@aria-ui/presence": "^0.0.19",
     "@aria-ui/tooltip": "^0.0.29",
     "@floating-ui/dom": "^1.7.3",
-    "@ocavue/utils": "^0.6.0",
+    "@ocavue/utils": "^0.7.1",
     "@zag-js/dom-query": "^1.21.1",
     "prosemirror-tables": "^1.7.1",
     "@prosekit/core": "^0.8.3",
-    "@prosekit/extensions": "^0.11.1",
+    "@prosekit/extensions": "^0.11.4",
     "@prosekit/pm": "^0.1.11"
   },
   "devDependencies": {
-    "tsdown": "^0.13.1",
-    "typescript": "~5.8.3",
+    "tsdown": "^0.13.4",
+    "type-fest": "^4.41.0",
+    "typescript": "~5.9.2",
     "vitest": "^3.2.4",
     "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0"

package/dist/clone-element-CwLKm7c_.js

@@ -1,41 +0,0 @@
-//#region src/utils/clone-element.ts
-/**
-* 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) {
-	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 };