@prosekit/web 0.8.0-beta.0 → 0.8.0-beta.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 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"}
+{"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 } from '@aria-ui/utils'\n\nexport function useScrolling(host: HostElement): () => 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    const abortController = new AbortController()\n    const abortSignal = abortController.signal\n\n    scrollableParent.addEventListener('scroll', handleScroll, { passive: true, signal: abortSignal })\n    window.addEventListener('mousemove', handleMouseMove, { passive: true, signal: abortSignal })\n    window.addEventListener('pointermove', handleMouseMove, { passive: true, signal: abortSignal })\n\n    return () => {\n      abortController.abort()\n    }\n  })\n\n  return scrolling.get\n}\n"],"mappings":";;;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;;;ACTtC,SAAgB,aAAa,MAAkC;CAC7D,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;;EAGtB,MAAM,kBAAkB,IAAI,iBAAiB;EAC7C,MAAM,cAAc,gBAAgB;AAEpC,mBAAiB,iBAAiB,UAAU,cAAc;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AACjG,SAAO,iBAAiB,aAAa,iBAAiB;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AAC7F,SAAO,iBAAiB,eAAe,iBAAiB;GAAE,SAAS;GAAM,QAAQ;GAAa,CAAC;AAE/F,eAAa;AACX,mBAAgB,OAAO;;GAEzB;AAEF,QAAO,UAAU"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.8.0-beta.0",
+  "version": "0.8.0-beta.1",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -46,6 +46,10 @@
       "types": "./dist/prosekit-web-inline-popover.d.ts",
       "default": "./dist/prosekit-web-inline-popover.js"
     },
+    "./menu": {
+      "types": "./dist/prosekit-web-menu.d.ts",
+      "default": "./dist/prosekit-web-menu.js"
+    },
     "./popover": {
       "types": "./dist/prosekit-web-popover.d.ts",
       "default": "./dist/prosekit-web-popover.js"
@@ -68,28 +72,24 @@
     "src"
   ],
   "dependencies": {
-    "@aria-ui/core": "^0.0.22",
-    "@aria-ui/listbox": "^0.0.25",
-    "@aria-ui/menu": "^0.0.21",
-    "@aria-ui/overlay": "^0.0.25",
-    "@aria-ui/popover": "^0.0.28",
-    "@aria-ui/presence": "^0.0.20",
-    "@aria-ui/tooltip": "^0.0.30",
+    "@aria-ui/core": "^0.1.0",
+    "@aria-ui/elements": "^0.1.1",
+    "@aria-ui/utils": "^0.1.0",
     "@floating-ui/dom": "^1.7.6",
     "@ocavue/utils": "^1.6.0",
-    "@zag-js/dom-query": "^1.37.0",
     "prosemirror-tables": "^1.8.5",
-    "@prosekit/extensions": "^0.16.0-beta.0",
     "@prosekit/core": "^0.12.0-beta.0",
-    "@prosekit/pm": "^0.1.15"
+    "@prosekit/pm": "^0.1.15",
+    "@prosekit/extensions": "^0.16.0-beta.0"
   },
   "devDependencies": {
-    "tsdown": "^0.21.4",
+    "@aria-ui/cli": "^0.1.0",
+    "tsdown": "^0.21.7",
     "type-fest": "^5.5.0",
     "typescript": "~5.9.3",
-    "vitest": "^4.1.1",
-    "@prosekit/config-tsdown": "0.0.0",
+    "vitest": "^4.1.4",
     "@prosekit/config-ts": "0.0.0",
+    "@prosekit/config-tsdown": "0.0.0",
     "@prosekit/config-vitest": "0.0.0"
   },
   "publishConfig": {
@@ -98,19 +98,21 @@
   "dev": {
     "entry": {
       "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-autocomplete": "./src/components/autocomplete/index.ts",
+      "prosekit-web-block-handle": "./src/components/block-handle/index.ts",
+      "prosekit-web-drop-indicator": "./src/components/drop-indicator/index.ts",
+      "prosekit-web-inline-popover": "./src/components/inline-popover/index.ts",
+      "prosekit-web-menu": "./src/components/menu/index.ts",
+      "prosekit-web-popover": "./src/components/popover/index.ts",
+      "prosekit-web-resizable": "./src/components/resizable/index.ts",
+      "prosekit-web-table-handle": "./src/components/table-handle/index.ts",
+      "prosekit-web-tooltip": "./src/components/tooltip/index.ts"
     }
   },
   "scripts": {
     "build:tsc": "tsc -b tsconfig.json",
-    "build:tsdown": "tsdown"
+    "build:tsdown": "tsdown",
+    "build:aria-ui": "node build.mjs"
   },
   "types": "./dist/prosekit-web.d.ts",
   "typesVersions": {
@@ -130,6 +132,9 @@
       "inline-popover": [
         "./dist/prosekit-web-inline-popover.d.ts"
       ],
+      "menu": [
+        "./dist/prosekit-web-menu.d.ts"
+      ],
       "popover": [
         "./dist/prosekit-web-popover.d.ts"
       ],

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

@@ -0,0 +1,45 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupListboxEmpty, type ListboxEmptyProps } from '@aria-ui/elements/listbox'
+
+/**
+ * @internal
+ */
+export interface AutocompleteEmptyProps extends ListboxEmptyProps {}
+
+/** @internal */
+export const AutocompleteEmptyPropsDeclaration: PropsDeclaration<AutocompleteEmptyProps> = /* @__PURE__ */ defineProps<
+  AutocompleteEmptyProps
+>({})
+
+/**
+ * @internal
+ */
+export function setupAutocompleteEmpty(
+  host: HostElement,
+  props: State<AutocompleteEmptyProps>,
+): void {
+  setupListboxEmpty(host, props)
+}
+
+const AutocompleteEmptyElementBase: HostElementConstructor<AutocompleteEmptyProps> = defineCustomElement(
+  setupAutocompleteEmpty,
+  AutocompleteEmptyPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompleteEmptyElement extends AutocompleteEmptyElementBase {}
+
+/** @internal */
+export function registerAutocompleteEmptyElement(): void {
+  registerCustomElement('prosekit-autocomplete-empty', AutocompleteEmptyElement)
+}

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

@@ -0,0 +1,65 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEventListener,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { SelectEvent, setupListboxItem, type ListboxItemEvents, type ListboxItemProps } from '@aria-ui/elements/listbox'
+
+import { preventDefault } from '../../utils/prevent-default.ts'
+
+export { SelectEvent }
+
+export interface AutocompleteItemProps extends ListboxItemProps {
+  /**
+   * 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 */
+export const AutocompleteItemPropsDeclaration: PropsDeclaration<AutocompleteItemProps> = /* @__PURE__ */ defineProps<AutocompleteItemProps>(
+  {
+    value: { default: '', attribute: 'value', type: 'string' },
+    disabled: { default: false, attribute: 'disabled', type: 'boolean' },
+  },
+)
+
+export interface AutocompleteItemEvents extends ListboxItemEvents {}
+
+/**
+ * @internal
+ */
+export function setupAutocompleteItem(
+  host: HostElement,
+  props: State<AutocompleteItemProps>,
+): void {
+  setupListboxItem(host, props)
+
+  // Prevent the editor from losing focus
+  useEventListener(host, 'pointerdown', preventDefault)
+  useEventListener(host, 'mousedown', preventDefault)
+}
+
+const AutocompleteItemElementBase: HostElementConstructor<AutocompleteItemProps> = defineCustomElement(
+  setupAutocompleteItem,
+  AutocompleteItemPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompleteItemElement extends AutocompleteItemElementBase {}
+
+/** @internal */
+export function registerAutocompleteItemElement(): void {
+  registerCustomElement('prosekit-autocomplete-item', AutocompleteItemElement)
+}

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

@@ -0,0 +1,95 @@
+import {
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type Signal,
+  type State,
+} from '@aria-ui/core'
+import {
+  defaultItemFilter,
+  setupListboxRoot,
+  type ItemFilter,
+  type ListboxRootEvents,
+  type ListboxRootProps,
+} from '@aria-ui/elements/listbox'
+import { OverlayPopupPropsDeclaration, setupOverlayPopup, type OverlayPopupProps } from '@aria-ui/elements/overlay'
+
+import { createLazySignal } from '../../utils/lazy-signal.ts'
+import { useNoFocus } from '../../utils/use-no-focus.ts'
+
+import { autocompleteStoreContext } from './context.ts'
+
+/**
+ * @public
+ */
+export interface AutocompletePopupProps extends OverlayPopupProps {}
+
+/**
+ * @public
+ */
+export interface AutocompletePopupEvents extends ListboxRootEvents {}
+
+/** @internal */
+export const AutocompletePopupPropsDeclaration: PropsDeclaration<AutocompletePopupProps> = /* @__PURE__ */ defineProps<
+  AutocompletePopupProps
+>(OverlayPopupPropsDeclaration)
+
+/** @internal */
+export function setupAutocompletePopup(
+  host: HostElement,
+  _props: State<AutocompletePopupProps>,
+): void {
+  const getStore = autocompleteStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.overlayStore
+
+  setupOverlayPopup(host, getOverlayStore)
+
+  const query = createLazySignal<string>(() => getStore()?.query, ' ')
+  const eventTarget = createLazySignal<EventTarget | null>(() => getStore()?.eventTarget, null)
+  const filter = createLazySignal<ItemFilter | null>(() => getStore()?.filter, defaultItemFilter)
+  const getDisabled = () => (!(getOverlayStore()?.getIsOpen?.()))
+  const disabled: Signal<boolean> = { get: getDisabled, set: () => {} }
+  const listboxProps = createPopupListboxProps(filter, query, eventTarget, disabled)
+
+  setupListboxRoot(host, listboxProps)
+  useNoFocus(host)
+}
+
+function createPopupListboxProps(
+  filter: Signal<ItemFilter | null>,
+  query: Signal<string>,
+  eventTarget: Signal<EventTarget | null>,
+  disabled: Signal<boolean>,
+): State<ListboxRootProps> {
+  return {
+    value: createSignal(''),
+    values: createSignal<string[]>([]),
+    multiple: createSignal(false),
+    disabled,
+    orientation: createSignal<'vertical' | 'horizontal'>('vertical'),
+    loop: createSignal(false),
+    autoHighlight: createSignal(true),
+    query,
+    eventTarget,
+    filter,
+  }
+}
+
+const AutocompletePopupElementBase: HostElementConstructor<AutocompletePopupProps> = defineCustomElement(
+  setupAutocompletePopup,
+  AutocompletePopupPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompletePopupElement extends AutocompletePopupElementBase {}
+
+/** @internal */
+export function registerAutocompletePopupElement(): void {
+  registerCustomElement('prosekit-autocomplete-popup', AutocompletePopupElement)
+}

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

@@ -0,0 +1,98 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { OverlayPositionerPropsDeclaration, setupOverlayPositioner, type OverlayPositionerProps } from '@aria-ui/elements/overlay'
+
+import { autocompleteStoreContext } from './context.ts'
+
+const body = typeof document !== 'undefined' && document.querySelector('body')
+const defaultBoundary = body || 'clippingAncestors'
+
+/**
+ * @public
+ */
+export interface AutocompletePositionerProps extends OverlayPositionerProps {
+  /**
+   * 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']
+
+  /**
+   * @default true
+   */
+  inline: OverlayPositionerProps['inline']
+
+  /**
+   * @default true
+   */
+  hoist: OverlayPositionerProps['hoist']
+
+  /**
+   * @default true
+   */
+  fitViewport: OverlayPositionerProps['fitViewport']
+
+  /**
+   * @default "The body element"
+   */
+  boundary: OverlayPositionerProps['boundary']
+
+  /**
+   * @default 8
+   */
+  overflowPadding: OverlayPositionerProps['overflowPadding']
+}
+
+/** @internal */
+export const AutocompletePositionerPropsDeclaration: PropsDeclaration<AutocompletePositionerProps> = /* @__PURE__ */ defineProps<
+  AutocompletePositionerProps
+>({
+  ...OverlayPositionerPropsDeclaration,
+  placement: { default: 'bottom-start', attribute: 'placement', type: 'string' },
+  offset: { default: 4, attribute: false, type: 'json' },
+  inline: { default: true, attribute: 'inline', type: 'boolean' },
+  hoist: { default: true, attribute: 'hoist', type: 'boolean' },
+  fitViewport: { default: true, attribute: 'fit-viewport', type: 'boolean' },
+  boundary: { default: defaultBoundary, attribute: false, type: 'json' },
+  overflowPadding: { default: 8, attribute: 'overflow-padding', type: 'number' },
+})
+
+/** @internal */
+export function setupAutocompletePositioner(
+  host: HostElement,
+  props: State<AutocompletePositionerProps>,
+): void {
+  const getStore = autocompleteStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.overlayStore
+  setupOverlayPositioner(host, props as unknown as State<OverlayPositionerProps>, getOverlayStore)
+}
+
+const AutocompletePositionerElementBase: HostElementConstructor<AutocompletePositionerProps> = defineCustomElement(
+  setupAutocompletePositioner,
+  AutocompletePositionerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompletePositionerElement extends AutocompletePositionerElementBase {}
+
+/** @internal */
+export function registerAutocompletePositionerElement(): void {
+  registerCustomElement('prosekit-autocomplete-positioner', AutocompletePositionerElement)
+}

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

@@ -0,0 +1,280 @@
+import {
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  useEventListener,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type Signal,
+  type State,
+} from '@aria-ui/core'
+import { defaultItemFilter, type ItemFilter, type ListboxRootEvents } from '@aria-ui/elements/listbox'
+import { createOverlayStore, OpenChangeEvent, type OverlayStore } from '@aria-ui/elements/overlay'
+import { defineDOMEventHandler, defineKeymap, withPriority, type Editor, type Extension, type Priority } from '@prosekit/core'
+import { AutocompleteRule, defineAutocomplete, type MatchHandler } from '@prosekit/extensions/autocomplete'
+
+import { useEditorExtension } from '../../hooks/use-editor-extension.ts'
+import { KeyboardEventTarget } from '../../utils/event.ts'
+import { getSafeEditorView } from '../../utils/get-safe-editor-view.ts'
+
+import { autocompleteStoreContext, type AutocompleteStore } from './context.ts'
+import { defaultQueryBuilder } from './helpers.ts'
+
+export { OpenChangeEvent }
+
+export interface AutocompleteRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+
+  /**
+   * The regular expression to match the query text to autocomplete.
+   *
+   * @default null
+   */
+  regex: RegExp | null
+
+  /**
+   * The filter function to determine if an item should be shown in the
+   * listbox.
+   *
+   * @default defaultItemFilter
+   */
+  filter: ItemFilter | null
+}
+
+/** @internal */
+export const AutocompleteRootPropsDeclaration: PropsDeclaration<AutocompleteRootProps> = /* @__PURE__ */ defineProps<
+  AutocompleteRootProps
+>({
+  editor: { default: null, attribute: false, type: 'json' },
+  regex: { default: null, attribute: false, type: 'json' },
+  filter: { default: defaultItemFilter, attribute: false, type: 'json' },
+})
+
+/**
+ * @public
+ */
+export class QueryChangeEvent extends Event {
+  /**
+   * The current query string.
+   */
+  readonly detail: string
+
+  constructor(query: string) {
+    super('queryChange', { bubbles: true })
+    this.detail = query
+  }
+}
+
+/**
+ * @public
+ */
+export interface AutocompleteRootEvents extends ListboxRootEvents {
+  /**
+   * Fired when the open state changes.
+   */
+  openChange: OpenChangeEvent
+
+  /**
+   * Fired when the query changes.
+   */
+  queryChange: QueryChangeEvent
+}
+
+interface RuleHandlers {
+  submit?: VoidFunction
+  dismiss?: VoidFunction
+}
+
+interface AutocompleteRuleDeps {
+  reference: Signal<Element | undefined>
+  handlers: RuleHandlers
+  setQuery: (next: string) => void
+  requestOpenChange: (open: boolean) => void
+}
+
+/**
+ * @internal
+ */
+export function setupAutocompleteRoot(
+  host: HostElement,
+  props: State<AutocompleteRootProps>,
+): void {
+  const getEditor = props.editor.get
+
+  const reference = createSignal<Element | undefined>(undefined)
+  const open = createSignal(false)
+  const query = createSignal('')
+  const keyboardTarget = new KeyboardEventTarget()
+  const eventTarget = createSignal<EventTarget | null>(keyboardTarget)
+  const handlers: RuleHandlers = {}
+
+  // Create overlay store for positioning. The open state is managed by the
+  // overlay store via requestOpenChange(), which dispatches OpenChangeEvent and
+  // updates the open signal.
+  const overlayStore: OverlayStore = createOverlayStore(
+    open.get,
+    open.set,
+    () => false,
+    () => false,
+    (event) => host.dispatchEvent(event),
+  )
+
+  useEffect(host, () => {
+    overlayStore.setAnchorElement(reference.get())
+  })
+
+  const autocompleteStore: AutocompleteStore = {
+    overlayStore,
+    query,
+    eventTarget,
+    filter: props.filter,
+  }
+
+  autocompleteStoreContext.provide(host, autocompleteStore)
+
+  useEventListener(host, 'valueChange', () => {
+    handlers.submit?.()
+  })
+
+  useKeyboardBridge(host, getEditor, open.get, keyboardTarget)
+
+  useEscapeKeydown(host, getEditor, () => {
+    if (!open.get() || !handlers.dismiss) return false
+    handlers.dismiss()
+    return true
+  })
+
+  const setQuery = (next: string): void => {
+    if (query.get() === next) return
+    query.set(next)
+    host.dispatchEvent(new QueryChangeEvent(next))
+  }
+
+  useAutocompleteExtension(host, getEditor, props.regex.get, {
+    reference,
+    handlers,
+    setQuery,
+    requestOpenChange: (open) => overlayStore.requestOpenChange(open),
+  })
+}
+
+const EVENT_KEYS = [
+  'ArrowDown',
+  'ArrowRight',
+  'ArrowUp',
+  'ArrowLeft',
+  'Home',
+  'End',
+  'Enter',
+] as const
+
+function useKeyboardBridge(
+  host: HostElement,
+  getEditor: () => Editor | null,
+  getOpen: () => boolean,
+  target: EventTarget,
+): void {
+  const extension: Extension = defineDOMEventHandler('keydown', (view, event): boolean => {
+    if (
+      view.composing
+      || event.defaultPrevented
+      || !getOpen()
+      || !EVENT_KEYS.includes(event.key as (typeof EVENT_KEYS)[number])
+    ) {
+      return false
+    }
+    target.dispatchEvent(event)
+    return event.defaultPrevented
+  })
+  useEditorExtension(host, getEditor, withPriority(extension, 4 satisfies typeof Priority.highest))
+}
+
+function useAutocompleteExtension(
+  host: HostElement,
+  getEditor: () => Editor | null,
+  getRegex: () => RegExp | null,
+  deps: AutocompleteRuleDeps,
+) {
+  useEffect(host, () => {
+    const editor = getEditor()
+    const regex = getRegex()
+
+    if (!editor || !regex) {
+      return
+    }
+
+    const rule = createAutocompleteRule(editor, regex, deps)
+    const extension = defineAutocomplete(rule)
+    return editor.use(extension)
+  })
+}
+
+function createAutocompleteRule(
+  editor: Editor,
+  regex: RegExp,
+  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)
+    }
+
+    handlers.submit = options.deleteMatch
+    handlers.dismiss = options.ignoreMatch
+    setQuery(defaultQueryBuilder(options.match))
+    requestOpenChange(true)
+  }
+
+  const handleLeave = () => {
+    reference.set(undefined)
+    setQuery('')
+    handlers.submit = undefined
+    handlers.dismiss = undefined
+    requestOpenChange(false)
+  }
+
+  return new AutocompleteRule({
+    regex,
+    onEnter: handleEnter,
+    onLeave: handleLeave,
+  })
+}
+
+function useEscapeKeydown(
+  host: HostElement,
+  getEditor: () => Editor | null,
+  handler: () => boolean,
+): void {
+  const keymap = { Escape: handler }
+  const extension = withPriority(defineKeymap(keymap), 4 satisfies typeof Priority.highest)
+  useEditorExtension(host, getEditor, extension)
+}
+
+const AutocompleteRootElementBase: HostElementConstructor<AutocompleteRootProps> = defineCustomElement(
+  setupAutocompleteRoot,
+  AutocompleteRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class AutocompleteRootElement extends AutocompleteRootElementBase {}
+
+/** @internal */
+export function registerAutocompleteRootElement(): void {
+  registerCustomElement('prosekit-autocomplete-root', AutocompleteRootElement)
+}