@prosekit/web 0.7.0 → 0.7.2

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

@@ -1,12 +1,13 @@
-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, injectStyle } from "./inject-style-RwRNoINh.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";
@@ -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;
@@ -282,6 +286,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) {
@@ -289,35 +332,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",
@@ -706,6 +754,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 +901,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 +928,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 +986,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.2",
   "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"
@@ -76,18 +76,19 @@
     "@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/pm": "^0.1.11",
-    "@prosekit/extensions": "^0.11.0"
+    "@prosekit/extensions": "^0.11.2",
+    "@prosekit/pm": "^0.1.11"
   },
   "devDependencies": {
-    "tsdown": "^0.13.1",
+    "tsdown": "^0.13.2",
     "typescript": "~5.8.3",
     "vitest": "^3.2.4",
-    "@prosekit/config-tsdown": "0.0.0",
-    "@prosekit/config-vitest": "0.0.0"
+    "@prosekit/config-vitest": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0"
   },
   "publishConfig": {
     "dev": {}
@@ -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 };

package/dist/clone-element-i6RFnyj4.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 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 };