@prosekit/web 0.8.0 → 0.8.1

package/dist/use-scrolling.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-scrolling.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 HostElement } from '@aria-ui/core'\nimport { getNearestOverflowAncestor, useGlobalEventListener } from '@aria-ui/utils'\n\nexport function useScrolling(host: HostElement): () => boolean {\n  const { get: getScrolling, set: setScrolling } = createSignal(false)\n  const handleMouseMove = () => {\n    setScrolling(false)\n  }\n  const handleScroll = () => {\n    setScrolling(true)\n  }\n\n  useGlobalEventListener(host, 'mousemove', handleMouseMove)\n  useGlobalEventListener(host, 'pointermove', handleMouseMove)\n\n  useEffect(host, () => {\n    const scrollableParent = getNearestOverflowAncestor(host)\n\n    const abortController = new AbortController()\n    const abortSignal = abortController.signal\n\n    scrollableParent.addEventListener('scroll', handleScroll, {\n      passive: true,\n      signal: abortSignal,\n    })\n\n    return () => {\n      abortController.abort()\n    }\n  })\n\n  return getScrolling\n}\n"],"mappings":";;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;ACTtC,SAAgB,aAAa,MAAkC;CAC7D,MAAM,EAAE,KAAK,cAAc,KAAK,iBAAiB,aAAa,MAAM;CACpE,MAAM,wBAAwB;AAC5B,eAAa,MAAM;;CAErB,MAAM,qBAAqB;AACzB,eAAa,KAAK;;AAGpB,wBAAuB,MAAM,aAAa,gBAAgB;AAC1D,wBAAuB,MAAM,eAAe,gBAAgB;AAE5D,WAAU,YAAY;EACpB,MAAM,mBAAmB,2BAA2B,KAAK;EAEzD,MAAM,kBAAkB,IAAI,iBAAiB;EAC7C,MAAM,cAAc,gBAAgB;AAEpC,mBAAiB,iBAAiB,UAAU,cAAc;GACxD,SAAS;GACT,QAAQ;GACT,CAAC;AAEF,eAAa;AACX,mBAAgB,OAAO;;GAEzB;AAEF,QAAO"}
+{"version":3,"file":"use-scrolling.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 HostElement } from '@aria-ui/core'\nimport { getNearestOverflowAncestor, useGlobalEventListener } from '@aria-ui/utils'\n\nexport function useScrolling(host: HostElement): () => boolean {\n  const { get: getScrolling, set: setScrolling } = createSignal(false)\n  const handleMouseMove = () => {\n    setScrolling(false)\n  }\n  const handleScroll = () => {\n    setScrolling(true)\n  }\n\n  useGlobalEventListener(host, 'mousemove', handleMouseMove)\n  useGlobalEventListener(host, 'pointermove', handleMouseMove)\n\n  useEffect(host, () => {\n    const scrollableParent = getNearestOverflowAncestor(host)\n\n    const abortController = new AbortController()\n    const abortSignal = abortController.signal\n\n    scrollableParent.addEventListener('scroll', handleScroll, {\n      passive: true,\n      signal: abortSignal,\n    })\n\n    return () => {\n      abortController.abort()\n    }\n  })\n\n  return getScrolling\n}\n"],"mappings":";;;;;AAQA,SAAgB,aACd,SACA,QACM;CACN,OAAO,OAAO,QAAQ,OAAO,OAAO;;ACTtC,SAAgB,aAAa,MAAkC;CAC7D,MAAM,EAAE,KAAK,cAAc,KAAK,iBAAiB,aAAa,MAAM;CACpE,MAAM,wBAAwB;EAC5B,aAAa,MAAM;;CAErB,MAAM,qBAAqB;EACzB,aAAa,KAAK;;CAGpB,uBAAuB,MAAM,aAAa,gBAAgB;CAC1D,uBAAuB,MAAM,eAAe,gBAAgB;CAE5D,UAAU,YAAY;EACpB,MAAM,mBAAmB,2BAA2B,KAAK;EAEzD,MAAM,kBAAkB,IAAI,iBAAiB;EAC7C,MAAM,cAAc,gBAAgB;EAEpC,iBAAiB,iBAAiB,UAAU,cAAc;GACxD,SAAS;GACT,QAAQ;GACT,CAAC;EAEF,aAAa;GACX,gBAAgB,OAAO;;GAEzB;CAEF,OAAO"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -83,14 +83,14 @@
     "@prosekit/pm": "^0.1.16"
   },
   "devDependencies": {
-    "@aria-ui/cli": "^0.1.8",
-    "tsdown": "^0.21.10",
+    "@aria-ui/cli": "^0.1.9",
+    "tsdown": "^0.22.0",
     "type-fest": "^5.6.0",
-    "typescript": "~5.9.3",
+    "typescript": "~6.0.3",
     "vitest": "^4.1.5",
-    "@prosekit/config-ts": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-tsdown": "0.0.0"
+    "@prosekit/config-ts": "0.0.0"
   },
   "scripts": {
     "build:tsc": "tsc -b tsconfig.json",

package/src/components/autocomplete/autocomplete-positioner.ts

@@ -88,7 +88,7 @@ export function setupAutocompletePositioner(
 ): void {
   const getStore = autocompleteStoreContext.consume(host)
   const getOverlayStore = () => getStore()?.overlayStore
-  setupOverlayPositioner(host, props as unknown as State<OverlayPositionerProps>, getOverlayStore)
+  setupOverlayPositioner(host, props satisfies State<OverlayPositionerProps>, getOverlayStore)
 }
 
 const AutocompletePositionerElementBase: HostElementConstructor<AutocompletePositionerProps> = defineCustomElement(

package/src/components/autocomplete/autocomplete-root.ts

@@ -13,6 +13,7 @@ import {
 import { defaultItemFilter, type ItemFilter, type ListboxRootEvents } from '@aria-ui/elements/listbox'
 import { createOverlayStore, OpenChangeEvent, type OverlayStore } from '@aria-ui/elements/overlay'
 import { useEventListener } from '@aria-ui/utils'
+import type { ReferenceElement, VirtualElement } from '@floating-ui/dom'
 import { defineDOMEventHandler, defineKeymap, withPriority, type Editor, type Extension, type Priority } from '@prosekit/core'
 import { AutocompleteRule, defineAutocomplete, type MatchHandler } from '@prosekit/extensions/autocomplete'
 
@@ -48,6 +49,16 @@ export interface AutocompleteRootProps {
    * @default defaultItemFilter
    */
   filter: ItemFilter | null
+
+  /**
+   * The reference to position the popup against. This can be a DOM element, a
+   * Floating UI virtual element, or a function that returns either of them.
+   * By default, the popup will be positioned against the text content that
+   * triggers the autocomplete.
+   *
+   * @default null
+   */
+  anchor: Element | VirtualElement | (() => Element | VirtualElement | null) | null
 }
 
 /** @internal */
@@ -57,6 +68,7 @@ export const AutocompleteRootPropsDeclaration: PropsDeclaration<AutocompleteRoot
   editor: { default: null, attribute: false },
   regex: { default: null, attribute: false },
   filter: { default: defaultItemFilter, attribute: false },
+  anchor: { default: null, attribute: false },
 })
 
 /**
@@ -95,7 +107,7 @@ interface RuleHandlers {
 }
 
 interface AutocompleteRuleDeps {
-  reference: Signal<Element | undefined>
+  reference: Signal<ReferenceElement | undefined>
   handlers: RuleHandlers
   setQuery: (next: string) => void
   requestOpenChange: (open: boolean) => void
@@ -110,7 +122,7 @@ export function setupAutocompleteRoot(
 ): void {
   const getEditor = props.editor.get
 
-  const reference = createSignal<Element | undefined>(undefined)
+  const reference = createSignal<ReferenceElement | undefined>(undefined)
   const open = createSignal(false)
   const query = createSignal('')
   const keyboardTarget = new KeyboardEventTarget()
@@ -159,7 +171,20 @@ export function setupAutocompleteRoot(
     host.dispatchEvent(new QueryChangeEvent(next))
   }
 
-  useAutocompleteExtension(host, getEditor, props.regex.get, {
+  const getAnchor = (): ReferenceElement | null => {
+    const customAnchor = props.anchor.get()
+    if (customAnchor) {
+      if (typeof customAnchor === 'function') {
+        return customAnchor() || null
+      } else {
+        return customAnchor
+      }
+    }
+    const view = getSafeEditorView(getEditor())
+    return view?.dom.querySelector('.prosekit-autocomplete-match') || null
+  }
+
+  useAutocompleteExtension(host, getEditor, props.regex.get, getAnchor, {
     reference,
     handlers,
     setQuery,
@@ -202,6 +227,7 @@ function useAutocompleteExtension(
   host: HostElement,
   getEditor: () => Editor | null,
   getRegex: () => RegExp | null,
+  getAnchor: () => ReferenceElement | null,
   deps: AutocompleteRuleDeps,
 ) {
   useEffect(host, () => {
@@ -212,7 +238,7 @@ function useAutocompleteExtension(
       return
     }
 
-    const rule = createAutocompleteRule(editor, regex, deps)
+    const rule = createAutocompleteRule(editor, regex, getAnchor, deps)
     const extension = defineAutocomplete(rule)
     return editor.use(extension)
   })
@@ -221,17 +247,14 @@ function useAutocompleteExtension(
 function createAutocompleteRule(
   editor: Editor,
   regex: RegExp,
+  getAnchor: () => ReferenceElement | null,
   deps: AutocompleteRuleDeps,
 ) {
   const { reference, handlers, setQuery, requestOpenChange } = deps
 
   const handleEnter: MatchHandler = (options) => {
-    const view = getSafeEditorView(editor)
-    const span = view?.dom.querySelector('.prosekit-autocomplete-match')
-
-    if (span) {
-      reference.set(span)
-    }
+    const anchor = getAnchor()
+    reference.set(anchor || undefined)
 
     handlers.submit = options.deleteMatch
     handlers.dismiss = options.ignoreMatch