@prosekit/web 0.7.0 → 0.7.2

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

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

package/dist/get-safe-editor-view-DENm4avv.js

@@ -0,0 +1,11 @@
+//#region src/utils/get-safe-editor-view.ts
+/**
+* @internal
+*/
+function getSafeEditorView(editor) {
+	if (!editor || !editor.mounted) return;
+	return editor.view;
+}
+
+//#endregion
+export { getSafeEditorView };

package/dist/inject-style-RwRNoINh.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) {
+	const clonedElement = element.cloneNode(true);
+	const style = deepCopyStyles(element, clonedElement);
+	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) {
+	const clonedElement = element.cloneNode();
+	const style = copyStyles(element, clonedElement);
+	return [clonedElement, style];
+}
+function deepCopyStyles(source, target) {
+	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);
+		if (style) styles.push(style);
+		sources.push(...source$1.children);
+		targets.push(...target$1.children);
+	}
+	return styles.join("\n");
+}
+function copyStyles(source, target) {
+	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));
+	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-autocomplete.js

@@ -1,5 +1,6 @@
-import { getSafeEditorView, getStateWithDefaults } from "./get-safe-editor-view-CqJWgxo1.js";
+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 { createComputed, createContext, createSignal, defineCustomElement, registerCustomElement, useAnimationFrame, useAttribute, useEffect, useEventListener } from "@aria-ui/core";
 import { listboxProps, useListbox, useListboxEmpty, useListboxItem } from "@aria-ui/listbox/elements";
 import { listboxEvents, listboxItemEvents, listboxProps as listboxProps$1 } from "@aria-ui/listbox";

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,34 +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"> {
+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
+   */
+  flip: boolean;
+  /**
+   * @default false
+   * @hidden
+   */
+  shift: boolean;
+  /**
+   * @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;
@@ -109,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,6 +1,7 @@
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
-import { assignStyles } from "./assign-styles-3yY6F1UX.js";
-import { deepCloneElement } from "./clone-element-i6RFnyj4.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 { 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";
@@ -55,6 +56,38 @@ const BlockHandleAddElementBase = defineCustomElement({
 var BlockHandleAddElement = class extends BlockHandleAddElementBase {};
 registerCustomElement("prosekit-block-handle-add", BlockHandleAddElement);
 
+//#endregion
+//#region src/utils/get-client-rect.ts
+/**
+* Similar to `element.getBoundingClientRect`, but handles `display: contents` elements.
+*/
+function getClientRect(element) {
+	const rect = element.getBoundingClientRect();
+	if (rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0) {
+		if (element.getClientRects().length === 0) {
+			const children = Array.from(element.children);
+			const rects = children.map((child) => getClientRect(child));
+			if (rects.length === 0) return rect;
+			if (rects.length === 1) return rects[0];
+			let { top, bottom, left, right } = rects[0];
+			for (let i = 1; i < rects.length; i++) {
+				const r = rects[i];
+				if (r.top < top) top = r.top;
+				if (r.bottom > bottom) bottom = r.bottom;
+				if (r.left < left) left = r.left;
+				if (r.right > right) right = r.right;
+			}
+			return {
+				top,
+				bottom,
+				left,
+				right
+			};
+		}
+	}
+	return rect;
+}
+
 //#endregion
 //#region src/utils/max-z-index.ts
 const maxZIndex = "2147483647";
@@ -73,8 +106,11 @@ const maxZIndex = "2147483647";
 * - Removes the container from the document body after the next frame.
 */
 function setDragPreview(event, element) {
-	const rect = element.getBoundingClientRect();
-	const { width, height, x: elementX, y: elementY } = rect;
+	const { top, bottom, left, right } = getClientRect(element);
+	const width = right - left;
+	const height = bottom - top;
+	const elementX = left;
+	const elementY = top;
 	const { clientX, clientY } = event;
 	const document = element.ownerDocument;
 	const container = document.createElement("div");
@@ -93,13 +129,14 @@ function setDragPreview(event, element) {
 		width: `${width + borderX}px`,
 		height: `${height + borderY}px`
 	});
-	const clonedElement = deepCloneElement(element);
+	const [clonedElement, styleText] = deepCloneElement(element);
 	assignStyles(clonedElement, {
-		outline: "none",
-		opacity: "0.5"
+		opacity: "0.5",
+		margin: "0"
 	});
 	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();
@@ -113,12 +150,27 @@ function setDragPreview(event, element) {
 */
 function useBlockHandleDraggable(host, { state }) {
 	const context = blockPopoverContext.consume(host);
+	const dragging = draggingContext.consume(host);
 	useEffect(host, () => {
 		host.draggable = true;
 	});
 	usePointerDownHandler(host, context, state.editor);
-	useDraggingPreview(host, context, state.editor);
-	useDataDraggingAttribute(host);
+	useEventListener(host, "dragstart", (event) => {
+		dragging.set(true);
+		const view = getSafeEditorView(state.editor.get());
+		const hoverState = context.get();
+		if (view && hoverState) {
+			view.dom.classList.add("prosekit-dragging");
+			createDraggingPreview(view, hoverState, event);
+			setViewDragging(view, hoverState);
+		}
+	});
+	useEventListener(host, "dragend", () => {
+		dragging.set(false);
+		const view = getSafeEditorView(state.editor.get());
+		if (view) view.dom.classList.remove("prosekit-dragging");
+	});
+	useAttribute(host, "data-dragging", () => dragging.get() ? "" : void 0);
 }
 function usePointerDownHandler(host, context, editor) {
 	useEventListener(host, "pointerdown", () => {
@@ -131,39 +183,24 @@ function usePointerDownHandler(host, context, editor) {
 		});
 	});
 }
-function useDraggingPreview(host, context, editor) {
-	useEventListener(host, "dragstart", (event) => {
-		const hoverState = context.get();
-		const { view } = editor.get() ?? {};
-		if (!hoverState || !view || !event.dataTransfer) return;
-		const { node, pos } = hoverState;
-		const element = view.nodeDOM(pos);
-		if (!element || !isHTMLElement(element)) return;
-		event.dataTransfer.clearData();
-		event.dataTransfer.setData("text/html", element.outerHTML);
-		event.dataTransfer.effectAllowed = "copyMove";
-		setDragPreview(event, element);
-		const dragging = {
-			slice: new Slice(Fragment.from(node), 0, 0),
-			move: true,
-			node: NodeSelection.create(view.state.doc, pos)
-		};
-		view.dragging = dragging;
-	});
-}
-function useDataDraggingAttribute(host) {
-	const dragging = useDragging(host);
-	useAttribute(host, "data-dragging", () => dragging.get() ? "" : void 0);
+function createDraggingPreview(view, hoverState, event) {
+	if (!event.dataTransfer) return;
+	const { pos } = hoverState;
+	const element = view.nodeDOM(pos);
+	if (!element || !isHTMLElement(element)) return;
+	event.dataTransfer.clearData();
+	event.dataTransfer.setData("text/html", element.outerHTML);
+	event.dataTransfer.effectAllowed = "copyMove";
+	setDragPreview(event, element);
 }
-function useDragging(host) {
-	const dragging = draggingContext.consume(host);
-	useEventListener(host, "dragstart", () => {
-		dragging.set(true);
-	});
-	useEventListener(host, "dragend", () => {
-		dragging.set(false);
-	});
-	return dragging;
+function setViewDragging(view, hoverState) {
+	const { node, pos } = hoverState;
+	const dragging = {
+		slice: new Slice(Fragment.from(node), 0, 0),
+		move: true,
+		node: NodeSelection.create(view.state.doc, pos)
+	};
+	view.dragging = dragging;
 }
 
 //#endregion
@@ -183,30 +220,6 @@ const BlockHandleDraggableElementBase = defineCustomElement({
 var BlockHandleDraggableElement = class extends BlockHandleDraggableElementBase {};
 registerCustomElement("prosekit-block-handle-draggable", BlockHandleDraggableElement);
 
-//#endregion
-//#region src/utils/get-client-rect.ts
-/**
-* Similar to `element.getBoundingClientRect`, but handles `display: contents` elements.
-*/
-function getClientRect(element) {
-	const rect = element.getBoundingClientRect();
-	if (rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0) {
-		if (element.getClientRects().length === 0) {
-			const children = Array.from(element.children);
-			const rects = children.map((child) => getClientRect(child));
-			if (rects.length === 0) return rect;
-			if (rects.length === 1) return rects[0];
-			return {
-				top: Math.min(...rects.map((rect$1) => rect$1.top)),
-				right: Math.max(...rects.map((rect$1) => rect$1.right)),
-				bottom: Math.max(...rects.map((rect$1) => rect$1.bottom)),
-				left: Math.min(...rects.map((rect$1) => rect$1.left))
-			};
-		}
-	}
-	return rect;
-}
-
 //#endregion
 //#region src/utils/throttle.ts
 /**
@@ -409,7 +422,10 @@ function useBlockHandlePopover(host, { state, emit }) {
 	blockPopoverContext.provide(host, context);
 	const dragging = createSignal(false);
 	draggingContext.provide(host, dragging);
-	const open = createComputed(() => !!context.get());
+	const scrolling = useScrolling(host);
+	const open = createComputed(() => {
+		return !!context.get() && !scrolling.get();
+	});
 	useHoverExtension(host, editor, (referenceValue, hoverState) => {
 		reference.set(referenceValue);
 		context.set(hoverState);
@@ -444,7 +460,10 @@ const blockHandlePopoverProps = {
 	...overlayPositionerProps,
 	editor: { default: null },
 	placement: { default: "left" },
-	hoist: { default: false }
+	hoist: { default: false },
+	flip: { default: false },
+	shift: { default: false },
+	hide: { default: true }
 };
 /** @internal */
 const blockHandlePopoverEvents = {