@prosekit/web 0.7.2 → 0.7.4

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-scrolling-BNfsQs3S.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 {\n  createSignal,\n  useEffect,\n  type ConnectableElement,\n  type ReadonlySignal,\n} 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\n    return () => {\n      scrollableParent.removeEventListener('scroll', handleScroll)\n      window.removeEventListener('mousemove', handleMouseMove)\n    }\n  })\n\n  return scrolling\n}\n"],"mappings":";;;;;;;AAQA,SAAgB,aACd,SACA,QACM;AACN,QAAO,OAAO,QAAQ,OAAO,OAAO;;;;;ACJtC,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;AAExE,eAAa;AACX,oBAAiB,oBAAoB,UAAU,aAAa;AAC5D,UAAO,oBAAoB,aAAa,gBAAgB;;GAE1D;AAEF,QAAO"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@prosekit/web",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "private": false,
   "description": "A collection of web components for ProseKit",
   "author": {
@@ -64,31 +64,32 @@
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "dependencies": {
-    "@aria-ui/collection": "^0.0.5",
-    "@aria-ui/core": "^0.0.21",
-    "@aria-ui/listbox": "^0.0.24",
-    "@aria-ui/menu": "^0.0.20",
-    "@aria-ui/overlay": "^0.0.24",
-    "@aria-ui/popover": "^0.0.27",
-    "@aria-ui/presence": "^0.0.19",
-    "@aria-ui/tooltip": "^0.0.29",
-    "@floating-ui/dom": "^1.7.3",
+    "@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",
+    "@floating-ui/dom": "^1.7.4",
     "@ocavue/utils": "^0.7.1",
-    "@zag-js/dom-query": "^1.21.1",
-    "prosemirror-tables": "^1.7.1",
-    "@prosekit/core": "^0.8.3",
-    "@prosekit/extensions": "^0.11.2",
-    "@prosekit/pm": "^0.1.11"
+    "@zag-js/dom-query": "^1.22.1",
+    "prosemirror-tables": "^1.8.1",
+    "@prosekit/core": "^0.8.4",
+    "@prosekit/extensions": "^0.11.5",
+    "@prosekit/pm": "^0.1.12"
   },
   "devDependencies": {
-    "tsdown": "^0.13.2",
-    "typescript": "~5.8.3",
+    "tsdown": "^0.14.2",
+    "type-fest": "^4.41.0",
+    "typescript": "~5.9.2",
     "vitest": "^3.2.4",
-    "@prosekit/config-vitest": "0.0.0",
-    "@prosekit/config-tsdown": "0.0.0"
+    "@prosekit/config-tsdown": "0.0.0",
+    "@prosekit/config-vitest": "0.0.0"
   },
   "publishConfig": {
     "dev": {}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useAutocompleteEmpty } from "./setup"
+import { autocompleteEmptyEvents, autocompleteEmptyProps, type AutocompleteEmptyEvents, type AutocompleteEmptyProps } from "./types"
+
+const AutocompleteEmptyElementBase: BaseElementConstructor<AutocompleteEmptyProps> = defineCustomElement<
+  AutocompleteEmptyProps,
+  AutocompleteEmptyEvents
+>({
+  props: autocompleteEmptyProps,
+  events: autocompleteEmptyEvents,
+  setup: useAutocompleteEmpty,
+})
+class AutocompleteEmptyElement extends AutocompleteEmptyElementBase {}
+
+registerCustomElement('prosekit-autocomplete-empty', AutocompleteEmptyElement)
+  
+export { AutocompleteEmptyElement }

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

@@ -0,0 +1,6 @@
+import { useListboxEmpty } from '@aria-ui/listbox/elements'
+
+/**
+ * @internal
+ */
+export const useAutocompleteEmpty: typeof useListboxEmpty = useListboxEmpty

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

@@ -0,0 +1,16 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+
+/** @internal */
+export interface AutocompleteEmptyProps {}
+
+/** @internal */
+export const autocompleteEmptyProps: PropDeclarations<AutocompleteEmptyProps> = {}
+
+/** @internal */
+export interface AutocompleteEmptyEvents {}
+
+/** @internal */
+export const autocompleteEmptyEvents: EventDeclarations<AutocompleteEmptyEvents> = {}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useAutocompleteItem } from "./setup"
+import { autocompleteItemEvents, autocompleteItemProps, type AutocompleteItemEvents, type AutocompleteItemProps } from "./types"
+
+const AutocompleteItemElementBase: BaseElementConstructor<AutocompleteItemProps> = defineCustomElement<
+  AutocompleteItemProps,
+  AutocompleteItemEvents
+>({
+  props: autocompleteItemProps,
+  events: autocompleteItemEvents,
+  setup: useAutocompleteItem,
+})
+class AutocompleteItemElement extends AutocompleteItemElementBase {}
+
+registerCustomElement('prosekit-autocomplete-item', AutocompleteItemElement)
+  
+export { AutocompleteItemElement }

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

@@ -0,0 +1,38 @@
+import {
+  useEffect,
+  useEventListener,
+  type ConnectableElement,
+  type SetupOptions,
+} from '@aria-ui/core'
+import { useListboxItem } from '@aria-ui/listbox/elements'
+
+import { openContext } from '../context'
+
+import type {
+  AutocompleteItemEvents,
+  AutocompleteItemProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useAutocompleteItem(
+  element: ConnectableElement,
+  { state, emit }: SetupOptions<AutocompleteItemProps, AutocompleteItemEvents>,
+): void {
+  useListboxItem(element, { state, emit })
+
+  const open = openContext.consume(element)
+
+  useEffect(element, () => {
+    // Check the text content again when the open state changes
+    if (!state.value.peek() && open.get()) {
+      state.value.set(element.textContent ?? '')
+    }
+  })
+
+  useEventListener(element, 'pointerdown', (event) => {
+    // Prevent the editor from losing focus
+    event.preventDefault()
+  })
+}

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

@@ -0,0 +1,31 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import {
+  listboxItemEvents,
+  type ListboxItemEvents,
+} from '@aria-ui/listbox'
+
+export interface AutocompleteItemProps {
+  /**
+   * 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 autocompleteItemProps: PropDeclarations<AutocompleteItemProps> = {
+  value: {
+    default: '',
+  },
+}
+
+export interface AutocompleteItemEvents extends ListboxItemEvents {}
+
+/** @internal */
+export const autocompleteItemEvents: EventDeclarations<AutocompleteItemEvents> = listboxItemEvents

package/src/components/autocomplete/autocomplete-list/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useAutocompleteList } from "./setup"
+import { autocompleteListEvents, autocompleteListProps, type AutocompleteListEvents, type AutocompleteListProps } from "./types"
+
+const AutocompleteListElementBase: BaseElementConstructor<AutocompleteListProps> = defineCustomElement<
+  AutocompleteListProps,
+  AutocompleteListEvents
+>({
+  props: autocompleteListProps,
+  events: autocompleteListEvents,
+  setup: useAutocompleteList,
+})
+class AutocompleteListElement extends AutocompleteListElementBase {}
+
+registerCustomElement('prosekit-autocomplete-list', AutocompleteListElement)
+  
+export { AutocompleteListElement }

package/src/components/autocomplete/autocomplete-list/setup.ts

@@ -0,0 +1,140 @@
+import {
+  createSignal,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+  type SetupOptions,
+  type TypedEventTarget,
+} from '@aria-ui/core'
+import {
+  listboxProps,
+  useListbox,
+  type ListboxProps,
+} from '@aria-ui/listbox/elements'
+import {
+  defineDOMEventHandler,
+  Priority,
+  withPriority,
+  type Editor,
+} from '@prosekit/core'
+
+import { getStateWithDefaults } from '../../../utils/get-default-state'
+import {
+  onSubmitContext,
+  openContext,
+  queryContext,
+} from '../context'
+
+import type {
+  AutocompleteListEvents,
+  AutocompleteListProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useAutocompleteList(
+  element: ConnectableElement,
+  { state, emit }: SetupOptions<AutocompleteListProps, AutocompleteListEvents>,
+): void {
+  const open = openContext.consume(element)
+  const query = queryContext.consume(element)
+  const onSubmit = onSubmitContext.consume(element)
+
+  const keydownTarget = useKeyDownTarget(element, open, state.editor)
+
+  const listboxState = getStateWithDefaults<ListboxProps>(
+    { filter: state.filter, eventTarget: createSignal(keydownTarget) },
+    listboxProps,
+  )
+
+  useEffect(element, () => {
+    element.addEventListener('valueChange', () => {
+      if (onSubmit) {
+        onSubmit.get()?.()
+      }
+    })
+  })
+
+  useListbox(element, { state: listboxState, emit })
+
+  useEffect(element, () => {
+    listboxState.query.set(query.get())
+  })
+
+  useEffect(element, () => {
+    if (!open.get()) {
+      listboxState.value.set('')
+      query.set('')
+    }
+  })
+
+  // Reset the focused item when the popover is open
+  useEffect(element, () => {
+    if (!open.get()) {
+      listboxState.autoFocus.set(false)
+    } else {
+      let canceled = false
+
+      requestAnimationFrame(() => {
+        if (canceled) return
+        listboxState.autoFocus.set(true)
+      })
+
+      return () => {
+        canceled = true
+      }
+    }
+  })
+
+  // The autocomplete list should not be focusable because the editor will get
+  // the focus during typing.
+  useEffect(element, () => {
+    element.tabIndex = -1
+  })
+}
+
+function useKeyDownTarget(
+  element: ConnectableElement,
+  open: ReadonlySignal<boolean>,
+  editor: ReadonlySignal<Editor | null>,
+): TypedEventTarget<'keydown'> {
+  const keydownHandlers: ((event: KeyboardEvent) => void)[] = []
+
+  useEffect(element, () => {
+    const editorValue = editor.get()
+
+    if (!editorValue) {
+      return
+    }
+
+    const extension = defineDOMEventHandler(
+      'keydown',
+      (view, event): boolean => {
+        if (view.composing || event.defaultPrevented || !open.get()) {
+          return false
+        }
+        keydownHandlers.forEach((handler) => handler(event))
+        return event.defaultPrevented
+      },
+    )
+
+    return editorValue.use(withPriority(extension, Priority.highest))
+  })
+
+  return {
+    addEventListener: (type, listener) => {
+      if (type === 'keydown') {
+        keydownHandlers.push(listener)
+      }
+    },
+    removeEventListener: (type, listener) => {
+      if (type === 'keydown') {
+        const index = keydownHandlers.indexOf(listener)
+        if (index !== -1) {
+          keydownHandlers.splice(index, 1)
+        }
+      }
+    },
+  }
+}

package/src/components/autocomplete/autocomplete-list/types.ts

@@ -0,0 +1,30 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import {
+  listboxEvents,
+  listboxProps,
+  type ListboxEvents,
+  type ListboxProps,
+} from '@aria-ui/listbox'
+import type { Editor } from '@prosekit/core'
+
+export interface AutocompleteListProps extends Pick<ListboxProps, 'filter'> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+export const autocompleteListProps: PropDeclarations<AutocompleteListProps> = {
+  filter: listboxProps.filter,
+  editor: { default: null },
+}
+
+export interface AutocompleteListEvents extends ListboxEvents {}
+
+export const autocompleteListEvents: EventDeclarations<AutocompleteListEvents> = { ...listboxEvents }

package/src/components/autocomplete/autocomplete-popover/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useAutocompletePopover } from "./setup"
+import { autocompletePopoverEvents, autocompletePopoverProps, type AutocompletePopoverEvents, type AutocompletePopoverProps } from "./types"
+
+const AutocompletePopoverElementBase: BaseElementConstructor<AutocompletePopoverProps> = defineCustomElement<
+  AutocompletePopoverProps,
+  AutocompletePopoverEvents
+>({
+  props: autocompletePopoverProps,
+  events: autocompletePopoverEvents,
+  setup: useAutocompletePopover,
+})
+class AutocompletePopoverElement extends AutocompletePopoverElementBase {}
+
+registerCustomElement('prosekit-autocomplete-popover', AutocompletePopoverElement)
+  
+export { AutocompletePopoverElement }

package/src/components/autocomplete/autocomplete-popover/helpers.spec.ts

@@ -0,0 +1,21 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { defaultQueryBuilder } from './helpers'
+
+describe('defaultQueryBuilder', () => {
+  it('can remove extra spaces', () => {
+    const str = '   a   '
+    const match = /.*/.exec(str)!
+    expect(defaultQueryBuilder(match)).toMatchInlineSnapshot('"a"')
+  })
+
+  it('can remove punctuations', () => {
+    const str = '   a   ~!@#$%^&*()_+`-={}|[]\\:;"\'<>?,./     b  '
+    const match = /.*/.exec(str)!
+    expect(defaultQueryBuilder(match)).toMatchInlineSnapshot('"a b"')
+  })
+})

package/src/components/autocomplete/autocomplete-popover/helpers.ts

@@ -0,0 +1,7 @@
+export function defaultQueryBuilder(match: RegExpExecArray): string {
+  return match[0]
+    .toLowerCase()
+    .replace(/[!"#$%&'()*+,-./:;<=>?@[\\\]^_`{|}~]/g, '')
+    .replace(/\s\s+/g, ' ')
+    .trim()
+}

package/src/components/autocomplete/autocomplete-popover/setup.ts

@@ -0,0 +1,185 @@
+import {
+  createComputed,
+  createSignal,
+  useAnimationFrame,
+  useAttribute,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+  type SetupOptions,
+  type Signal,
+} from '@aria-ui/core'
+import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
+import { usePresence } from '@aria-ui/presence'
+import {
+  defineKeymap,
+  Priority,
+  withPriority,
+  type Editor,
+} from '@prosekit/core'
+import {
+  AutocompleteRule,
+  defineAutocomplete,
+  type MatchHandler,
+} from '@prosekit/extensions/autocomplete'
+
+import { useEditorExtension } from '../../../hooks/use-editor-extension'
+import { useFirstRendering } from '../../../hooks/use-first-rendering'
+import { getSafeEditorView } from '../../../utils/get-safe-editor-view'
+import {
+  onSubmitContext,
+  openContext,
+  queryContext,
+} from '../context'
+
+import { defaultQueryBuilder } from './helpers'
+import type {
+  AutocompletePopoverEvents,
+  AutocompletePopoverProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useAutocompletePopover(
+  host: ConnectableElement,
+  {
+    state,
+    emit,
+  }: SetupOptions<AutocompletePopoverProps, AutocompletePopoverEvents>,
+): void {
+  const { editor, regex, ...overlayState } = state
+
+  const reference = createSignal<Element | null>(null)
+  const query = createSignal<string>('')
+  const onDismiss = createSignal<VoidFunction | null>(null)
+  const onSubmit = createSignal<VoidFunction | null>(null)
+  const presence = createComputed(() => !!reference.get())
+
+  queryContext.provide(host, query)
+  onSubmitContext.provide(host, onSubmit)
+  openContext.provide(host, presence)
+
+  useEscapeKeydown(host, editor, createKeymapHandler(onDismiss, presence))
+
+  useAutocompleteExtension(
+    host,
+    editor,
+    regex,
+    reference,
+    query,
+    onDismiss,
+    onSubmit,
+  )
+
+  useOverlayPositionerState(host, overlayState, { reference })
+
+  useAttribute(host, 'data-state', () => (presence.get() ? 'open' : 'closed'))
+  usePresence(host, presence)
+
+  const firstRendering = useFirstRendering(host)
+
+  useEffect(host, () => {
+    const queryValue = query.get()
+
+    if (!firstRendering.peek()) {
+      emit('queryChange', queryValue)
+    }
+  })
+
+  useAnimationFrame(host, () => {
+    const presenceValue = presence.get()
+    return () => {
+      emit('openChange', presenceValue)
+    }
+  })
+}
+
+function useAutocompleteExtension(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  regex: ReadonlySignal<RegExp | null>,
+  reference: Signal<Element | null>,
+  query: Signal<string>,
+  onDismiss: Signal<VoidFunction | null>,
+  onSubmit: Signal<VoidFunction | null>,
+) {
+  useEffect(host, () => {
+    const editorValue = editor.get()
+    const regexValue = regex.get()
+
+    if (!editorValue || !regexValue) {
+      return
+    }
+
+    const rule = createAutocompleteRule(
+      editorValue,
+      regexValue,
+      reference,
+      query,
+      onDismiss,
+      onSubmit,
+    )
+    const extension = defineAutocomplete(rule)
+    return editorValue.use(extension)
+  })
+}
+
+function createAutocompleteRule(
+  editor: Editor,
+  regex: RegExp,
+  reference: Signal<Element | null>,
+  query: Signal<string>,
+  onDismiss: Signal<VoidFunction | null>,
+  onSubmit: Signal<VoidFunction | null>,
+) {
+  const handleEnter: MatchHandler = (options) => {
+    const view = getSafeEditorView(editor)
+    const span = view?.dom.querySelector('.prosemirror-prediction-match')
+
+    if (span) {
+      reference.set(span)
+    }
+
+    query.set(defaultQueryBuilder(options.match))
+    onDismiss.set(options.ignoreMatch)
+    onSubmit.set(options.deleteMatch)
+  }
+
+  const handleLeave = () => {
+    reference.set(null)
+    query.set('')
+  }
+
+  return new AutocompleteRule({
+    regex,
+    onEnter: handleEnter,
+    onLeave: handleLeave,
+  })
+}
+
+function createKeymapHandler(
+  handler: ReadonlySignal<VoidFunction | null>,
+  enabled: ReadonlySignal<boolean>,
+) {
+  return (): boolean => {
+    if (!enabled.get()) {
+      return false
+    }
+
+    const fn = handler.peek()
+    if (!fn) return false
+    fn()
+    return true
+  }
+}
+
+function useEscapeKeydown(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  handler: () => boolean,
+): void {
+  const keymap = { Escape: handler }
+  const extension = withPriority(defineKeymap(keymap), Priority.highest)
+  useEditorExtension(host, editor, extension)
+}