@prosekit/web 0.7.11 → 0.7.13

package/src/hooks/use-selecting.ts

@@ -2,7 +2,7 @@ import type { ReadonlySignal } from '@aria-ui/core'
 import { createSignal, useEffect, type ConnectableElement } from '@aria-ui/core'
 import type { Editor } from '@prosekit/core'
 
-import { getSafeEditorView } from '../utils/get-safe-editor-view'
+import { getSafeEditorView } from '../utils/get-safe-editor-view.ts'
 
 /**
  * Detect if the user is selecting text inside the editor, in which case some

package/src/index.ts

@@ -1 +1 @@
-export { queueExtension } from './queue-extension'
+export { queueExtension } from './queue-extension.ts'

package/src/utils/fade-color.ts

@@ -1,4 +1,4 @@
-import { isColorMixSupported } from './css-feature-detection'
+import { isColorMixSupported } from './css-feature-detection.ts'
 
 /**
  * Convert a color to a color with opacity

package/src/utils/get-client-rect.ts

@@ -1,19 +1,29 @@
-/**
- * Similar to `element.getBoundingClientRect`, but handles `display: contents` elements.
- */
-export function getClientRect(element: Element): {
+interface Rect {
   top: number
-  right: number
   bottom: number
+  right: number
   left: number
-} {
+}
+
+interface IncludeExtraOptions {
+  top?: boolean
+  bottom?: boolean
+  right?: boolean
+  left?: boolean
+}
+
+/**
+ * Similar to `element.getBoundingClientRect`, but handles `display: contents` CSS
+ * property and optionally includes margins and outlines.
+ */
+export function getClientRect(element: Element, includeExtra?: IncludeExtraOptions | false): Rect {
   const rect = element.getBoundingClientRect()
   if (rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0) {
     // Suspiciously rect, probably an element with `display: contents`, in
     // which case `element.getClientRects()` will return an empty array.
     if (element.getClientRects().length === 0) {
-      const children = Array.from(element.children)
-      const rects = children.map(child => getClientRect(child))
+      const children = [...element.children]
+      const rects = children.map(child => getClientRect(child, includeExtra))
       if (rects.length === 0) {
         return rect
       }
@@ -31,5 +41,33 @@ export function getClientRect(element: Element): {
       return { top, bottom, left, right }
     }
   }
-  return rect
+  return includeExtra ? addExtra(element, rect, includeExtra) : rect
+}
+
+function addExtra(element: Element, rect: Rect, options: IncludeExtraOptions): Rect {
+  const view = element.ownerDocument?.defaultView
+  if (!view) {
+    return rect
+  }
+
+  const style = view.getComputedStyle(element)
+  const marginTop = options.top ? Number.parseFloat(style.marginTop) || 0 : 0
+  const marginBottom = options.bottom ? Number.parseFloat(style.marginBottom) || 0 : 0
+  const marginRight = options.right ? Number.parseFloat(style.marginRight) || 0 : 0
+  const marginLeft = options.left ? Number.parseFloat(style.marginLeft) || 0 : 0
+
+  const outlineWidth = Number.parseFloat(style.outlineWidth) || 0
+  const outlineOffset = Number.parseFloat(style.outlineOffset) || 0
+  const outline = Math.max(outlineWidth + outlineOffset, 0)
+  const outlineTop = options.top ? outline : 0
+  const outlineBottom = options.bottom ? outline : 0
+  const outlineRight = options.right ? outline : 0
+  const outlineLeft = options.left ? outline : 0
+
+  return {
+    top: rect.top - Math.max(marginTop, outlineTop),
+    bottom: rect.bottom + Math.max(marginBottom, outlineBottom),
+    right: rect.right + Math.max(marginRight, outlineRight),
+    left: rect.left - Math.max(marginLeft, outlineLeft),
+  }
 }

package/src/utils/get-default-state.spec.ts

@@ -1,7 +1,7 @@
 import { createSignal, type PropDeclarations, type SignalState } from '@aria-ui/core'
 import { describe, expect, it } from 'vitest'
 
-import { getStateWithDefaults } from './get-default-state'
+import { getStateWithDefaults } from './get-default-state.ts'
 
 type TestProps = {
   bool: boolean

package/dist/get-default-state-BzBimBWi.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-default-state-BzBimBWi.js","names":[],"sources":["../src/utils/get-default-state.ts"],"sourcesContent":["import { createSignal, type PropDeclarations, type SignalState } from '@aria-ui/core'\n\nexport function getStateWithDefaults<\n  Props extends Record<string, any> = Record<string, any>,\n>(\n  state: Partial<SignalState<Props>>,\n  props: PropDeclarations<Props>,\n): SignalState<Props> {\n  const merged = { ...state } as SignalState<Props>\n\n  for (const key of Object.keys(props) as (keyof Props)[]) {\n    if (!merged[key]) {\n      merged[key] = createSignal(props[key].default)\n    }\n  }\n\n  return merged\n}\n"],"mappings":";;;AAEA,SAAgB,qBAGd,OACA,OACoB;CACpB,MAAM,SAAS,EAAE,GAAG,OAAO;AAE3B,MAAK,MAAM,OAAO,OAAO,KAAK,MAAM,CAClC,KAAI,CAAC,OAAO,KACV,QAAO,OAAO,aAAa,MAAM,KAAK,QAAQ;AAIlD,QAAO"}

package/dist/get-safe-editor-view-Dt9Amrcn.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"get-safe-editor-view-Dt9Amrcn.js","names":[],"sources":["../src/utils/get-safe-editor-view.ts"],"sourcesContent":["import type { Editor } from '@prosekit/core'\nimport type { EditorView } from '@prosekit/pm/view'\n\n/**\n * @internal\n */\nexport function getSafeEditorView(editor?: Editor | null): EditorView | undefined {\n  if (!editor || !editor.mounted) return\n  return editor.view\n}\n"],"mappings":";;;;AAMA,SAAgB,kBAAkB,QAAgD;AAChF,KAAI,CAAC,UAAU,CAAC,OAAO,QAAS;AAChC,QAAO,OAAO"}

package/dist/inject-style-BaFaVQvj.js

@@ -1,76 +0,0 @@
-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);
-	return [clonedElement, deepCopyStyles(element, clonedElement, important)];
-}
-/**
-* 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();
-	return [clonedElement, copyStyles(element, clonedElement, important)];
-}
-function deepCopyStyles(source, target, important) {
-	const sources = [source];
-	const targets = [target];
-	const styles = [];
-	while (sources.length > 0 && sources.length === targets.length) {
-		const source = sources.pop();
-		const target = targets.pop();
-		if (!source || !target) break;
-		const style = copyStyles(source, target, important);
-		if (style) styles.push(style);
-		sources.push(...source.children);
-		targets.push(...target.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");
-		if (!(content && content !== "none" && content !== "normal")) 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 style = getDocument(container).createElement("style");
-	style.textContent = styleText;
-	container.appendChild(style);
-}
-
-//#endregion
-export { cloneElement as n, deepCloneElement as r, injectStyle as t };
-//# sourceMappingURL=inject-style-BaFaVQvj.js.map

package/dist/inject-style-BaFaVQvj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"inject-style-BaFaVQvj.js","names":[],"sources":["../src/utils/clone-element.ts","../src/utils/inject-style.ts"],"sourcesContent":["import { getId } from '@ocavue/utils'\n\n/**\n * Creates a deep clone of an Element, including all computed styles so that\n * it looks almost exactly the same as the original element.\n */\nexport function deepCloneElement<T extends Element>(element: T, important = false): [T, string] {\n  const clonedElement = element.cloneNode(true) as T\n  const style = deepCopyStyles(element, clonedElement, important)\n  return [clonedElement, style]\n}\n\n/**\n * Creates a clone of an Element, including all computed styles so that\n * it looks similar enough to the original element.\n */\nexport function cloneElement<T extends Element>(element: T, important = false): [T, string] {\n  const clonedElement = element.cloneNode() as T\n  const style = copyStyles(element, clonedElement, important)\n  return [clonedElement, style]\n}\n\nfunction deepCopyStyles(source: Element, target: Element, important: boolean): string {\n  const sources = [source]\n  const targets = [target]\n  const styles: string[] = []\n\n  while (sources.length > 0 && sources.length === targets.length) {\n    const source = sources.pop()\n    const target = targets.pop()\n\n    if (!source || !target) {\n      break\n    }\n\n    const style = copyStyles(source, target, important)\n    if (style) {\n      styles.push(style)\n    }\n\n    sources.push(...source.children)\n    targets.push(...target.children)\n  }\n\n  return styles.join('\\n')\n}\n\nfunction copyStyles(source: Element, target: Element, important: boolean): string {\n  if (!source || !target) {\n    return ''\n  }\n\n  const view = source.ownerDocument?.defaultView\n  if (!view) {\n    return ''\n  }\n\n  // Known issue: pseudo styles are not copied.\n  const sourceStyle = view.getComputedStyle(source)\n  const targetStyle = (target as HTMLElement | SVGElement | MathMLElement).style\n\n  if (!sourceStyle || !targetStyle) {\n    return ''\n  }\n\n  for (const key of sourceStyle) {\n    targetStyle.setProperty(\n      key,\n      sourceStyle.getPropertyValue(key),\n      // Enforce important to avoid the style being overridden when the element\n      // is connected to the page.\n      // See https://github.com/prosekit/prosekit/issues/1185 for more details.\n      important ? 'important' : (sourceStyle.getPropertyPriority(key) || ''),\n    )\n  }\n\n  const styles: string[] = []\n  for (const pseudoSelector of [':before', ':after']) {\n    const sourcePseudoStyle = view.getComputedStyle(source, pseudoSelector)\n    const targetPseudoStyle = view.getComputedStyle(target, pseudoSelector)\n\n    if (!sourcePseudoStyle) {\n      continue\n    }\n\n    const content = sourcePseudoStyle.getPropertyValue('content')\n    const hasPseudoElement = content && content !== 'none' && content !== 'normal'\n\n    if (!hasPseudoElement) {\n      continue\n    }\n\n    const cssProps: string[] = []\n    for (const property of sourcePseudoStyle) {\n      const sourceValue = sourcePseudoStyle.getPropertyValue(property)\n      const sourcePriority = sourcePseudoStyle.getPropertyPriority(property)\n      const targetValue = targetPseudoStyle.getPropertyValue(property)\n      const targetPriority = targetPseudoStyle.getPropertyPriority(property)\n      if (sourceValue !== targetValue || sourcePriority !== targetPriority) {\n        cssProps.push(`${property}: ${sourceValue}${sourcePriority ? ' !important' : ''};`)\n      }\n    }\n\n    const uniqueClassName = `clone-pseudo-element-${getId()}`\n    target.classList.add(uniqueClassName)\n    styles.push(`.${uniqueClassName}${pseudoSelector} { ${cssProps.join(' ')} }`)\n  }\n\n  return styles.join('\\n')\n}\n","import { getDocument } from '@ocavue/utils'\n\nexport function injectStyle(container: HTMLElement, styleText: string): void {\n  if (!styleText) {\n    return\n  }\n  const document = getDocument(container)\n  const style = document.createElement('style')\n  style.textContent = styleText\n  container.appendChild(style)\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,iBAAoC,SAAY,YAAY,OAAoB;CAC9F,MAAM,gBAAgB,QAAQ,UAAU,KAAK;AAE7C,QAAO,CAAC,eADM,eAAe,SAAS,eAAe,UAAU,CAClC;;;;;;AAO/B,SAAgB,aAAgC,SAAY,YAAY,OAAoB;CAC1F,MAAM,gBAAgB,QAAQ,WAAW;AAEzC,QAAO,CAAC,eADM,WAAW,SAAS,eAAe,UAAU,CAC9B;;AAG/B,SAAS,eAAe,QAAiB,QAAiB,WAA4B;CACpF,MAAM,UAAU,CAAC,OAAO;CACxB,MAAM,UAAU,CAAC,OAAO;CACxB,MAAM,SAAmB,EAAE;AAE3B,QAAO,QAAQ,SAAS,KAAK,QAAQ,WAAW,QAAQ,QAAQ;EAC9D,MAAM,SAAS,QAAQ,KAAK;EAC5B,MAAM,SAAS,QAAQ,KAAK;AAE5B,MAAI,CAAC,UAAU,CAAC,OACd;EAGF,MAAM,QAAQ,WAAW,QAAQ,QAAQ,UAAU;AACnD,MAAI,MACF,QAAO,KAAK,MAAM;AAGpB,UAAQ,KAAK,GAAG,OAAO,SAAS;AAChC,UAAQ,KAAK,GAAG,OAAO,SAAS;;AAGlC,QAAO,OAAO,KAAK,KAAK;;AAG1B,SAAS,WAAW,QAAiB,QAAiB,WAA4B;AAChF,KAAI,CAAC,UAAU,CAAC,OACd,QAAO;CAGT,MAAM,OAAO,OAAO,eAAe;AACnC,KAAI,CAAC,KACH,QAAO;CAIT,MAAM,cAAc,KAAK,iBAAiB,OAAO;CACjD,MAAM,cAAe,OAAoD;AAEzE,KAAI,CAAC,eAAe,CAAC,YACnB,QAAO;AAGT,MAAK,MAAM,OAAO,YAChB,aAAY,YACV,KACA,YAAY,iBAAiB,IAAI,EAIjC,YAAY,cAAe,YAAY,oBAAoB,IAAI,IAAI,GACpE;CAGH,MAAM,SAAmB,EAAE;AAC3B,MAAK,MAAM,kBAAkB,CAAC,WAAW,SAAS,EAAE;EAClD,MAAM,oBAAoB,KAAK,iBAAiB,QAAQ,eAAe;EACvE,MAAM,oBAAoB,KAAK,iBAAiB,QAAQ,eAAe;AAEvE,MAAI,CAAC,kBACH;EAGF,MAAM,UAAU,kBAAkB,iBAAiB,UAAU;AAG7D,MAAI,EAFqB,WAAW,YAAY,UAAU,YAAY,UAGpE;EAGF,MAAM,WAAqB,EAAE;AAC7B,OAAK,MAAM,YAAY,mBAAmB;GACxC,MAAM,cAAc,kBAAkB,iBAAiB,SAAS;GAChE,MAAM,iBAAiB,kBAAkB,oBAAoB,SAAS;GACtE,MAAM,cAAc,kBAAkB,iBAAiB,SAAS;GAChE,MAAM,iBAAiB,kBAAkB,oBAAoB,SAAS;AACtE,OAAI,gBAAgB,eAAe,mBAAmB,eACpD,UAAS,KAAK,GAAG,SAAS,IAAI,cAAc,iBAAiB,gBAAgB,GAAG,GAAG;;EAIvF,MAAM,kBAAkB,wBAAwB,OAAO;AACvD,SAAO,UAAU,IAAI,gBAAgB;AACrC,SAAO,KAAK,IAAI,kBAAkB,eAAe,KAAK,SAAS,KAAK,IAAI,CAAC,IAAI;;AAG/E,QAAO,OAAO,KAAK,KAAK;;;;;AC1G1B,SAAgB,YAAY,WAAwB,WAAyB;AAC3E,KAAI,CAAC,UACH;CAGF,MAAM,QADW,YAAY,UAAU,CAChB,cAAc,QAAQ;AAC7C,OAAM,cAAc;AACpB,WAAU,YAAY,MAAM"}

package/dist/use-editor-extension-B2WuUfnd.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-editor-extension-B2WuUfnd.js","names":[],"sources":["../src/hooks/use-editor-extension.ts"],"sourcesContent":["import { useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'\nimport type { Editor, Extension } from '@prosekit/core'\n\nexport function useEditorExtension(\n  host: ConnectableElement,\n  editor: ReadonlySignal<Editor | null>,\n  extension: Extension,\n): void {\n  useEffect(host, () => {\n    return editor.get()?.use(extension)\n  })\n}\n"],"mappings":";;;AAGA,SAAgB,mBACd,MACA,QACA,WACM;AACN,WAAU,YAAY;AACpB,SAAO,OAAO,KAAK,EAAE,IAAI,UAAU;GACnC"}

package/dist/use-scrolling-BjVzAkiZ.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-scrolling-BjVzAkiZ.js","names":[],"sources":["../src/utils/assign-styles.ts","../src/hooks/use-scrolling.ts"],"sourcesContent":["import type { ConditionalPick } from 'type-fest'\n\n// Only include CSS properties whose value type is `string`\ntype StringStyleDeclaration = Partial<ConditionalPick<CSSStyleDeclaration, string>>\n\n/**\n * A type-safe version of `Object.assign` for `element.style`.\n */\nexport function assignStyles(\n  element: HTMLElement | SVGElement | MathMLElement,\n  styles: StringStyleDeclaration,\n): void {\n  Object.assign(element.style, styles)\n}\n","import { createSignal, useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'\nimport { getNearestOverflowAncestor } from '@zag-js/dom-query'\n\nexport function useScrolling(host: ConnectableElement): ReadonlySignal<boolean> {\n  const scrolling = createSignal(false)\n\n  useEffect(host, () => {\n    const scrollableParent = getNearestOverflowAncestor(host)\n\n    const handleScroll = () => {\n      scrolling.set(true)\n    }\n\n    const handleMouseMove = () => {\n      scrolling.set(false)\n    }\n\n    scrollableParent.addEventListener('scroll', handleScroll, { passive: true })\n    window.addEventListener('mousemove', handleMouseMove, { passive: true })\n    window.addEventListener('pointermove', handleMouseMove, { passive: true })\n\n    return () => {\n      scrollableParent.removeEventListener('scroll', handleScroll)\n      window.removeEventListener('mousemove', handleMouseMove)\n      window.removeEventListener('pointermove', handleMouseMove)\n    }\n  })\n\n  return scrolling\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;;;;ACTtC,SAAgB,aAAa,MAAmD;CAC9E,MAAM,YAAY,aAAa,MAAM;AAErC,WAAU,YAAY;EACpB,MAAM,mBAAmB,2BAA2B,KAAK;EAEzD,MAAM,qBAAqB;AACzB,aAAU,IAAI,KAAK;;EAGrB,MAAM,wBAAwB;AAC5B,aAAU,IAAI,MAAM;;AAGtB,mBAAiB,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM,CAAC;AAC5E,SAAO,iBAAiB,aAAa,iBAAiB,EAAE,SAAS,MAAM,CAAC;AACxE,SAAO,iBAAiB,eAAe,iBAAiB,EAAE,SAAS,MAAM,CAAC;AAE1E,eAAa;AACX,oBAAiB,oBAAoB,UAAU,aAAa;AAC5D,UAAO,oBAAoB,aAAa,gBAAgB;AACxD,UAAO,oBAAoB,eAAe,gBAAgB;;GAE5D;AAEF,QAAO"}

package/src/utils/get-box-element.ts

@@ -1,20 +0,0 @@
-/**
- * Returns the element that has a box.
- */
-export function getBoxElement(element: Element): Element | null | undefined {
-  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
-}

package/src/utils/throttle.ts

@@ -1,17 +0,0 @@
-/**
- * @internal
- */
-export function throttle<Args extends any[]>(
-  callback: (...args: Args) => void,
-  wait: number,
-): (...args: Args) => void {
-  let lastTime = 0
-
-  return (...args: Args) => {
-    const now = Date.now()
-    if (now - lastTime >= wait) {
-      callback(...args)
-      lastTime = now
-    }
-  }
-}