@prosekit/web 0.7.0 → 0.7.1

package/dist/{clone-element-i6RFnyj4.js → clone-element-CwLKm7c_.js}

@@ -1,7 +1,7 @@
 //#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.
+* it looks almost exactly the same as the original element.
 */
 function deepCloneElement(element) {
 	const clonedElement = element.cloneNode(true);

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/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

@@ -67,7 +67,7 @@ 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.
   *
@@ -88,6 +88,21 @@ interface BlockHandlePopoverProps extends Omit<OverlayPositionerProps, "placemen
   * @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>;

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 } from "./clone-element-CwLKm7c_.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");
@@ -95,8 +131,8 @@ function setDragPreview(event, element) {
 	});
 	const clonedElement = deepCloneElement(element);
 	assignStyles(clonedElement, {
-		outline: "none",
-		opacity: "0.5"
+		opacity: "0.5",
+		margin: "0"
 	});
 	document.body.appendChild(container);
 	container.appendChild(clonedElement);
@@ -113,12 +149,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 +182,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 +219,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 +421,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 +459,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 = {

package/dist/prosekit-web-drop-indicator.js

@@ -1,5 +1,5 @@
 import { useEditorExtension } from "./use-editor-extension-Cc7ZG7uj.js";
-import { assignStyles } from "./assign-styles-3yY6F1UX.js";
+import { assignStyles, useScrolling } from "./use-scrolling-BNfsQs3S.js";
 import { createComputed, createSignal, defineCustomElement, registerCustomElement, useEffect } from "@aria-ui/core";
 import { usePresence } from "@aria-ui/presence";
 import { defineDropIndicator } from "@prosekit/extensions/drop-indicator";
@@ -16,7 +16,10 @@ function useDropIndicator(host, { state }) {
 	});
 	useEditorExtension(host, state.editor, extension);
 	const line = createComputed(() => context.get()?.line);
-	const presence = createComputed(() => !!line.get());
+	const scrolling = useScrolling(host);
+	const presence = createComputed(() => {
+		return !!context.get() && !scrolling.get();
+	});
 	usePresence(host, presence);
 	useEffect(host, () => {
 		const lineValue = line.get();

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

@@ -7,7 +7,7 @@ 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"> {
+interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, "placement" | "hoist" | "flip" | "shift" | "hide"> {
   /**
   * The ProseKit editor instance.
   *
@@ -28,6 +28,21 @@ interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, "place
   * @default false
   */
   hoist: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  flip: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  shift: boolean;
+  /**
+  * @default true
+  * @hidden
+  */
+  hide: boolean;
 }
 /** @internal */
 declare const tableHandleColumnRootProps: PropDeclarations<TableHandleColumnRootProps>;
@@ -202,7 +217,7 @@ 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"> {
+interface TableHandleRowRootProps extends Omit<OverlayPositionerProps, "placement" | "hoist" | "flip" | "shift" | "hide"> {
   /**
   * The ProseKit editor instance.
   *
@@ -223,6 +238,21 @@ interface TableHandleRowRootProps extends Omit<OverlayPositionerProps, "placemen
   * @default false
   */
   hoist: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  flip: boolean;
+  /**
+  * @default false
+  * @hidden
+  */
+  shift: boolean;
+  /**
+  * @default true
+  * @hidden
+  */
+  hide: boolean;
 }
 /** @internal */
 declare const tableHandleRowRootProps: PropDeclarations<TableHandleRowRootProps>;

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

@@ -1,7 +1,8 @@
-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 { assignStyles } from "./assign-styles-3yY6F1UX.js";
-import { cloneElement, deepCloneElement } from "./clone-element-i6RFnyj4.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 { 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";
@@ -77,7 +78,10 @@ const tableHandleColumnRootProps = Object.freeze({
 	...overlayPositionerProps$1,
 	editor: { default: null },
 	placement: { default: "top" },
-	hoist: { default: false }
+	hoist: { default: false },
+	flip: { default: false },
+	shift: { default: false },
+	hide: { default: true }
 });
 /** @internal */
 const tableHandleColumnRootEvents = overlayPositionerEvents$1;
@@ -706,6 +710,43 @@ function useEditorTyping(host, editor) {
 	return typing;
 }
 
+//#endregion
+//#region src/hooks/use-selecting.ts
+/**
+* Detect if the user is selecting text inside the editor, in which case some
+* components should be disabled or hidden.
+*/
+function useSelecting(host, editor, enabled) {
+	const selecting = createSignal(false);
+	const isPointerDown = createSignal(false);
+	useEffect(host, () => {
+		if (!enabled.get()) return;
+		const view = getSafeEditorView(editor.peek());
+		if (!view) return;
+		const { dom, root } = view;
+		if (!root) return;
+		const handlePointerDown = () => {
+			selecting.set(true);
+			isPointerDown.set(true);
+		};
+		const handlePointerUp = () => {
+			isPointerDown.set(false);
+		};
+		const handleMouseMove = () => {
+			if (!isPointerDown.get()) selecting.set(false);
+		};
+		dom.addEventListener("pointerdown", handlePointerDown);
+		root.addEventListener("pointerup", handlePointerUp);
+		root.addEventListener("pointermove", handleMouseMove);
+		return () => {
+			dom.removeEventListener("pointerdown", handlePointerDown);
+			root.removeEventListener("pointerup", handlePointerUp);
+			root.removeEventListener("pointermove", handleMouseMove);
+		};
+	});
+	return selecting;
+}
+
 //#endregion
 //#region src/components/table-handle/hooks/use-drop.ts
 function useDrop(host, editor, dndContext) {
@@ -816,11 +857,12 @@ function useTableHandleRoot(host, { state }) {
 	const typing = useEditorTyping(host, editor);
 	const isInTable = createComputed(() => !!hoveringCell.get());
 	const selecting = useSelecting(host, editor, isInTable);
+	const scrolling = useScrolling(host);
+	const canShow = createComputed(() => {
+		return !typing.get() && !selecting.get() && !scrolling.get();
+	});
 	useEffect(host, () => {
-		const typingValue = typing.get();
-		const selectingValue = selecting.get();
-		const hoveringCellValue = hoveringCell.get();
-		context.set(typingValue || selectingValue ? null : hoveringCellValue);
+		context.set(canShow.get() ? hoveringCell.get() : null);
 	});
 	tableHandleRootContext.provide(host, context);
 	tableHandleDndContext.provide(host, dndContext);
@@ -842,33 +884,6 @@ function defineCellHoverHandler(handler) {
 	};
 	return defineDOMEventHandler("pointerover", pointerHandler);
 }
-/**
-* Detect if the user is selecting text by dragging.
-*/
-function useSelecting(host, editor, isInTable) {
-	const selecting = createSignal(false);
-	useEffect(host, () => {
-		if (!isInTable.get()) return;
-		const view = getSafeEditorView(editor.peek());
-		const root = view?.root;
-		if (!root) return;
-		const pointerDownHandler = (event) => {
-			const target = event.target;
-			if (!target || host.contains(event.target)) return;
-			selecting.set(true);
-		};
-		const pointerUpHandler = () => {
-			selecting.set(false);
-		};
-		root.addEventListener("pointerdown", pointerDownHandler);
-		root.addEventListener("pointerup", pointerUpHandler);
-		return () => {
-			root.removeEventListener("pointerdown", pointerDownHandler);
-			root.removeEventListener("pointerup", pointerUpHandler);
-		};
-	});
-	return selecting;
-}
 
 //#endregion
 //#region src/components/table-handle/table-handle-root/types.ts
@@ -927,7 +942,10 @@ const tableHandleRowRootProps = {
 	...overlayPositionerProps$1,
 	editor: { default: null },
 	placement: { default: "left" },
-	hoist: { default: false }
+	hoist: { default: false },
+	flip: { default: false },
+	shift: { default: false },
+	hide: { default: true }
 };
 /** @internal */
 const tableHandleRowRootEvents = {};

package/dist/use-scrolling-BNfsQs3S.js

@@ -0,0 +1,35 @@
+import { createSignal, useEffect } from "@aria-ui/core";
+import { getNearestOverflowAncestor } from "@zag-js/dom-query";
+
+//#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/hooks/use-scrolling.ts
+function useScrolling(host) {
+	const scrolling = createSignal(false);
+	useEffect(host, () => {
+		const scrollableParent = getNearestOverflowAncestor(host);
+		const handleScroll = () => {
+			scrolling.set(true);
+		};
+		const handleMouseMove = () => {
+			scrolling.set(false);
+		};
+		scrollableParent.addEventListener("scroll", handleScroll, { passive: true });
+		window.addEventListener("mousemove", handleMouseMove, { passive: true });
+		return () => {
+			scrollableParent.removeEventListener("scroll", handleScroll);
+			window.removeEventListener("mousemove", handleMouseMove);
+		};
+	});
+	return scrolling;
+}
+
+//#endregion
+export { assignStyles, useScrolling };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -10,14 +10,14 @@
   },
   "license": "MIT",
   "funding": "https://github.com/sponsors/ocavue",
-  "homepage": "https://github.com/ocavue/prosekit#readme",
+  "homepage": "https://github.com/prosekit/prosekit#readme",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ocavue/prosekit.git",
+    "url": "git+https://github.com/prosekit/prosekit.git",
     "directory": "packages/web"
   },
   "bugs": {
-    "url": "https://github.com/ocavue/prosekit/issues"
+    "url": "https://github.com/prosekit/prosekit/issues"
   },
   "keywords": [
     "ProseMirror"
@@ -77,10 +77,11 @@
     "@aria-ui/tooltip": "^0.0.29",
     "@floating-ui/dom": "^1.7.3",
     "@ocavue/utils": "^0.6.0",
+    "@zag-js/dom-query": "^1.21.1",
     "prosemirror-tables": "^1.7.1",
     "@prosekit/core": "^0.8.3",
-    "@prosekit/pm": "^0.1.11",
-    "@prosekit/extensions": "^0.11.0"
+    "@prosekit/extensions": "^0.11.1",
+    "@prosekit/pm": "^0.1.11"
   },
   "devDependencies": {
     "tsdown": "^0.13.1",
@@ -97,12 +98,12 @@
       "prosekit-web": "./src/index.ts",
       "prosekit-web-autocomplete": "./src/components/autocomplete/index.gen.ts",
       "prosekit-web-block-handle": "./src/components/block-handle/index.gen.ts",
+      "prosekit-web-drop-indicator": "./src/components/drop-indicator/index.gen.ts",
       "prosekit-web-inline-popover": "./src/components/inline-popover/index.gen.ts",
       "prosekit-web-popover": "./src/components/popover/index.gen.ts",
       "prosekit-web-resizable": "./src/components/resizable/index.gen.ts",
       "prosekit-web-table-handle": "./src/components/table-handle/index.gen.ts",
-      "prosekit-web-tooltip": "./src/components/tooltip/index.gen.ts",
-      "prosekit-web-drop-indicator": "./src/components/drop-indicator/index.gen.ts"
+      "prosekit-web-tooltip": "./src/components/tooltip/index.gen.ts"
     }
   },
   "scripts": {

package/dist/assign-styles-3yY6F1UX.js

@@ -1,10 +0,0 @@
-//#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
-export { assignStyles };