@prosekit/web 0.7.13 → 0.8.0-beta.1

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)
+}

package/src/components/autocomplete/context.ts

@@ -1,16 +1,18 @@
-import { createContext, type Context } from '@aria-ui/core'
+import { createContext, type Context, type Signal } from '@aria-ui/core'
+import type { ItemFilter } from '@aria-ui/elements/listbox'
+import type { OverlayStore } from '@aria-ui/elements/overlay'
 
-export const queryContext: Context<string> = createContext(
-  'prosekit/autocomplete-popover/query',
-  '',
-)
+/**
+ * @internal
+ */
+export interface AutocompleteStore {
+  overlayStore: OverlayStore
+  query: Signal<string>
+  eventTarget: Signal<EventTarget | null>
+  filter: Signal<ItemFilter | null>
+}
 
-export const onSubmitContext: Context<VoidFunction | null> = createContext(
-  'prosekit/autocomplete-popover/onSubmit',
-  null,
-)
-
-export const openContext: Context<boolean> = createContext(
-  'prosekit/autocomplete-popover/open',
-  false,
-)
+/**
+ * @internal
+ */
+export const autocompleteStoreContext: Context<AutocompleteStore> = createContext<AutocompleteStore>('prosekit-autocomplete-store')

package/src/components/autocomplete/index.ts

@@ -0,0 +1,65 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-autocomplete-root>
+  <prosekit-autocomplete-positioner>
+    <prosekit-autocomplete-popup>
+      <prosekit-autocomplete-item>...</prosekit-autocomplete-item>
+      <prosekit-autocomplete-empty>...</prosekit-autocomplete-empty>
+    </prosekit-autocomplete-popup>
+  </prosekit-autocomplete-positioner>
+</prosekit-autocomplete-root>
+```
+*/
+
+export {
+  AutocompleteEmptyElement,
+  AutocompleteEmptyPropsDeclaration,
+  registerAutocompleteEmptyElement,
+  setupAutocompleteEmpty,
+  type AutocompleteEmptyProps,
+} from './autocomplete-empty.ts'
+
+export {
+  AutocompleteItemElement,
+  AutocompleteItemPropsDeclaration,
+  registerAutocompleteItemElement,
+  SelectEvent,
+  setupAutocompleteItem,
+  type AutocompleteItemEvents,
+  type AutocompleteItemProps,
+} from './autocomplete-item.ts'
+
+export {
+  AutocompletePopupElement,
+  AutocompletePopupPropsDeclaration,
+  registerAutocompletePopupElement,
+  setupAutocompletePopup,
+  type AutocompletePopupEvents,
+  type AutocompletePopupProps,
+} from './autocomplete-popup.ts'
+
+export {
+  AutocompletePositionerElement,
+  AutocompletePositionerPropsDeclaration,
+  registerAutocompletePositionerElement,
+  setupAutocompletePositioner,
+  type AutocompletePositionerProps,
+} from './autocomplete-positioner.ts'
+
+export {
+  AutocompleteRootElement,
+  AutocompleteRootPropsDeclaration,
+  OpenChangeEvent,
+  QueryChangeEvent,
+  registerAutocompleteRootElement,
+  setupAutocompleteRoot,
+  type AutocompleteRootEvents,
+  type AutocompleteRootProps,
+} from './autocomplete-root.ts'
+
+export { ValueChangeEvent, ValuesChangeEvent } from '@aria-ui/elements/listbox'

package/src/components/block-handle/block-handle-add.ts

@@ -0,0 +1,71 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEventListener,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { insertDefaultBlock, type Editor } from '@prosekit/core'
+
+import { blockHandleStoreContext } from './context.ts'
+
+export interface BlockHandleAddProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+/** @internal */
+export const BlockHandleAddPropsDeclaration: PropsDeclaration<BlockHandleAddProps> = /* @__PURE__ */ defineProps<BlockHandleAddProps>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/**
+ * @internal
+ */
+export function setupBlockHandleAdd(
+  host: HostElement,
+  props: State<BlockHandleAddProps>,
+): void {
+  const getStore = blockHandleStoreContext.consume(host)
+
+  useEventListener(host, 'pointerdown', (event) => {
+    event.preventDefault()
+
+    const store = getStore()
+    const editor = props.editor.get()
+    const hoverState = store?.hoverState.get()
+    if (!editor || !hoverState) {
+      return
+    }
+
+    const { node, pos } = hoverState
+    editor.exec(insertDefaultBlock({ pos: pos + node.nodeSize }))
+    editor.focus()
+
+    // Hide the drag handle
+    store?.hoverState.set(undefined)
+  })
+}
+
+const BlockHandleAddElementBase: HostElementConstructor<BlockHandleAddProps> = defineCustomElement(
+  setupBlockHandleAdd,
+  BlockHandleAddPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class BlockHandleAddElement extends BlockHandleAddElementBase {}
+
+/** @internal */
+export function registerBlockHandleAddElement(): void {
+  registerCustomElement('prosekit-block-handle-add', BlockHandleAddElement)
+}

package/src/components/block-handle/block-handle-draggable.ts

@@ -0,0 +1,158 @@
+import {
+  defineCustomElement,
+  defineProps,
+  onMount,
+  registerCustomElement,
+  useEventListener,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { useAttribute } from '@aria-ui/utils'
+import { isHTMLElement } from '@ocavue/utils'
+import type { Editor } from '@prosekit/core'
+import type { ViewDragging } from '@prosekit/extensions/drop-indicator'
+import { Fragment, Slice } from '@prosekit/pm/model'
+import { NodeSelection } from '@prosekit/pm/state'
+import type { EditorView } from '@prosekit/pm/view'
+
+import { DRAGGING_CLASS_NAME } from '../../constants.ts'
+import { getSafeEditorView } from '../../utils/get-safe-editor-view.ts'
+
+import { blockHandleStoreContext } from './context.ts'
+import type { HoverState } from './hover-state.ts'
+import { setDragPreview } from './set-drag-preview.ts'
+
+export interface BlockHandleDraggableProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+/** @internal */
+export const BlockHandleDraggablePropsDeclaration: PropsDeclaration<BlockHandleDraggableProps> = /* @__PURE__ */ defineProps<
+  BlockHandleDraggableProps
+>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/**
+ * @internal
+ */
+export function setupBlockHandleDraggable(
+  host: HostElement,
+  props: State<BlockHandleDraggableProps>,
+): void {
+  const getStore = blockHandleStoreContext.consume(host)
+
+  onMount(host, () => {
+    host.draggable = true
+  })
+
+  usePointerDownHandler(host, () => getStore()?.hoverState.get() ?? null, props.editor.get)
+
+  useEventListener(host, 'dragstart', (event) => {
+    const store = getStore()
+    store?.dragging.set(true)
+
+    const view = getSafeEditorView(props.editor.get())
+    const hoverState = store?.hoverState.get()
+
+    if (view && hoverState) {
+      view.dom.classList.add(DRAGGING_CLASS_NAME)
+      createDraggingPreview(view, hoverState, event)
+      setViewDragging(view, hoverState)
+    }
+  })
+
+  useEventListener(host, 'dragend', () => {
+    const store = getStore()
+    store?.dragging.set(false)
+
+    const view = getSafeEditorView(props.editor.get())
+    if (view) {
+      view.dom.classList.remove(DRAGGING_CLASS_NAME)
+    }
+  })
+
+  useAttribute(host, 'data-dragging', () => (getStore()?.dragging.get() ? '' : undefined))
+}
+
+function usePointerDownHandler(
+  host: HostElement,
+  getHoverState: () => HoverState | null,
+  getEditor: () => Editor | null,
+) {
+  useEventListener(host, 'pointerdown', () => {
+    const hoverState = getHoverState()
+    const editor = getEditor()
+
+    if (hoverState?.pos == null || !editor?.view) {
+      return
+    }
+
+    const { view } = editor
+    view.dispatch(
+      view.state.tr.setSelection(NodeSelection.create(view.state.doc, hoverState.pos)),
+    )
+
+    // Clicking the handle will blur the editor, so we need to focus it again.
+    // We cannot call `event.preventDefault()` here to prevent the blur
+    // because it will prevent the drag event from firing.
+    requestAnimationFrame(() => {
+      view.focus()
+    })
+  })
+}
+
+function createDraggingPreview(view: EditorView, hoverState: HoverState, event: DragEvent): void {
+  if (!event.dataTransfer) {
+    return
+  }
+
+  const { pos } = hoverState
+
+  const element = view.nodeDOM(pos)
+  if (!element || !isHTMLElement(element)) {
+    return
+  }
+
+  event.dataTransfer.clearData()
+  event.dataTransfer.setData('text/html', element.outerHTML)
+  event.dataTransfer.effectAllowed = 'copyMove'
+  setDragPreview(event, element)
+
+  return
+}
+
+function setViewDragging(view: EditorView, hoverState: HoverState): void {
+  const { node, pos } = hoverState
+
+  const dragging: ViewDragging = {
+    slice: new Slice(Fragment.from(node), 0, 0),
+    move: true,
+    node: NodeSelection.create(view.state.doc, pos),
+  }
+
+  view.dragging = dragging
+}
+
+const BlockHandleDraggableElementBase: HostElementConstructor<BlockHandleDraggableProps> = defineCustomElement(
+  setupBlockHandleDraggable,
+  BlockHandleDraggablePropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class BlockHandleDraggableElement extends BlockHandleDraggableElementBase {}
+
+/** @internal */
+export function registerBlockHandleDraggableElement(): void {
+  registerCustomElement('prosekit-block-handle-draggable', BlockHandleDraggableElement)
+}

package/src/components/block-handle/block-handle-popup.ts

@@ -0,0 +1,43 @@
+import {
+  defineCustomElement,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { OverlayPopupPropsDeclaration, setupOverlayPopup, type OverlayPopupProps } from '@aria-ui/elements/overlay'
+
+import { blockHandleOverlayStoreContext } from './context.ts'
+
+/**
+ * @public
+ */
+export interface BlockHandlePopupProps extends OverlayPopupProps {}
+
+/** @internal */
+export const BlockHandlePopupPropsDeclaration: PropsDeclaration<BlockHandlePopupProps> = OverlayPopupPropsDeclaration
+
+/** @internal */
+export function setupBlockHandlePopup(
+  host: HostElement,
+  _props: State<BlockHandlePopupProps>,
+): void {
+  const getOverlayStore = blockHandleOverlayStoreContext.consume(host)
+  setupOverlayPopup(host, getOverlayStore)
+}
+
+const BlockHandlePopupElementBase: HostElementConstructor<BlockHandlePopupProps> = defineCustomElement(
+  setupBlockHandlePopup,
+  BlockHandlePopupPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class BlockHandlePopupElement extends BlockHandlePopupElementBase {}
+
+/** @internal */
+export function registerBlockHandlePopupElement(): void {
+  registerCustomElement('prosekit-block-handle-popup', BlockHandlePopupElement)
+}