@prosekit/web 0.7.3 → 0.7.5

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

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

@@ -0,0 +1,103 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import {
+  overlayPositionerEvents,
+  overlayPositionerProps,
+  type OverlayPositionerEvents,
+  type OverlayPositionerProps,
+} from '@aria-ui/overlay/elements'
+import type { Editor } from '@prosekit/core'
+
+export interface AutocompletePopoverProps extends OverlayPositionerProps {
+  /**
+   * 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 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']
+}
+
+const body = typeof document !== 'undefined' && document.querySelector('body')
+const defaultBoundary = body || 'clippingAncestors'
+
+/** @internal */
+export const autocompletePopoverProps: PropDeclarations<AutocompletePopoverProps> = {
+  ...overlayPositionerProps,
+  editor: { default: null },
+  regex: { default: null },
+  placement: { default: 'bottom-start' },
+  offset: { default: 4 },
+  inline: { default: true },
+  hoist: { default: true },
+  fitViewport: { default: true },
+  boundary: { default: defaultBoundary },
+  overflowPadding: { default: 8 },
+}
+
+export interface AutocompletePopoverEvents extends OverlayPositionerEvents {
+  /**
+   * Fired when the open state changes.
+   */
+  openChange: CustomEvent<boolean>
+
+  /**
+   * Fired when the query changes.
+   */
+  queryChange: CustomEvent<string>
+}
+
+/** @internal */
+export const autocompletePopoverEvents: EventDeclarations<AutocompletePopoverEvents> = {
+  ...overlayPositionerEvents,
+  openChange: {},
+  queryChange: {},
+}

package/src/components/autocomplete/context.ts

@@ -0,0 +1,19 @@
+import {
+  createContext,
+  type Context,
+} from '@aria-ui/core'
+
+export const queryContext: Context<string> = createContext(
+  'prosekit/autocomplete-popover/query',
+  '',
+)
+
+export const onSubmitContext: Context<VoidFunction | null> = createContext(
+  'prosekit/autocomplete-popover/onSubmit',
+  null,
+)
+
+export const openContext: Context<boolean> = createContext(
+  'prosekit/autocomplete-popover/open',
+  false,
+)

package/src/components/autocomplete/index.gen.ts

@@ -0,0 +1,17 @@
+// This file is generated by packages/dev/src/gen-components.ts
+
+export { AutocompleteEmptyElement } from './autocomplete-empty/element.gen'
+export { autocompleteEmptyEvents, autocompleteEmptyProps, type AutocompleteEmptyEvents, type AutocompleteEmptyProps } from './autocomplete-empty/types'
+export { useAutocompleteEmpty } from './autocomplete-empty/setup'
+
+export { AutocompleteItemElement } from './autocomplete-item/element.gen'
+export { autocompleteItemEvents, autocompleteItemProps, type AutocompleteItemEvents, type AutocompleteItemProps } from './autocomplete-item/types'
+export { useAutocompleteItem } from './autocomplete-item/setup'
+
+export { AutocompleteListElement } from './autocomplete-list/element.gen'
+export { autocompleteListEvents, autocompleteListProps, type AutocompleteListEvents, type AutocompleteListProps } from './autocomplete-list/types'
+export { useAutocompleteList } from './autocomplete-list/setup'
+
+export { AutocompletePopoverElement } from './autocomplete-popover/element.gen'
+export { autocompletePopoverEvents, autocompletePopoverProps, type AutocompletePopoverEvents, type AutocompletePopoverProps } from './autocomplete-popover/types'
+export { useAutocompletePopover } from './autocomplete-popover/setup'

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useBlockHandleAdd } from "./setup"
+import { blockHandleAddEvents, blockHandleAddProps, type BlockHandleAddEvents, type BlockHandleAddProps } from "./types"
+
+const BlockHandleAddElementBase: BaseElementConstructor<BlockHandleAddProps> = defineCustomElement<
+  BlockHandleAddProps,
+  BlockHandleAddEvents
+>({
+  props: blockHandleAddProps,
+  events: blockHandleAddEvents,
+  setup: useBlockHandleAdd,
+})
+class BlockHandleAddElement extends BlockHandleAddElementBase {}
+
+registerCustomElement('prosekit-block-handle-add', BlockHandleAddElement)
+  
+export { BlockHandleAddElement }

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

@@ -0,0 +1,37 @@
+import {
+  useEventListener,
+  type ConnectableElement,
+  type SignalState,
+} from '@aria-ui/core'
+import { insertDefaultBlock } from '@prosekit/core'
+
+import { blockPopoverContext } from '../context'
+
+import type { BlockHandleAddProps } from './types'
+
+/**
+ * @internal
+ */
+export function useBlockHandleAdd(
+  host: ConnectableElement,
+  { state }: { state: SignalState<BlockHandleAddProps> },
+): void {
+  const context = blockPopoverContext.consume(host)
+
+  useEventListener(host, 'pointerdown', (event) => {
+    event.preventDefault()
+
+    const editor = state.editor.get()
+    const hoverState = context.get()
+    if (!editor || !hoverState) {
+      return
+    }
+
+    const { node, pos } = hoverState
+    editor.exec(insertDefaultBlock({ pos: pos + node.nodeSize }))
+    editor.focus()
+
+    // Hide the drag handle
+    context.set(null)
+  })
+}

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

@@ -0,0 +1,26 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+
+export interface BlockHandleAddProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+/** @internal */
+export const blockHandleAddProps: PropDeclarations<BlockHandleAddProps> = {
+  editor: { default: null },
+}
+
+/** @internal */
+export interface BlockHandleAddEvents {}
+
+/** @internal */
+export const blockHandleAddEvents: EventDeclarations<BlockHandleAddEvents> = {}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useBlockHandleDraggable } from "./setup"
+import { blockHandleDraggableEvents, blockHandleDraggableProps, type BlockHandleDraggableEvents, type BlockHandleDraggableProps } from "./types"
+
+const BlockHandleDraggableElementBase: BaseElementConstructor<BlockHandleDraggableProps> = defineCustomElement<
+  BlockHandleDraggableProps,
+  BlockHandleDraggableEvents
+>({
+  props: blockHandleDraggableProps,
+  events: blockHandleDraggableEvents,
+  setup: useBlockHandleDraggable,
+})
+class BlockHandleDraggableElement extends BlockHandleDraggableElementBase {}
+
+registerCustomElement('prosekit-block-handle-draggable', BlockHandleDraggableElement)
+  
+export { BlockHandleDraggableElement }

package/src/components/block-handle/block-handle-draggable/set-drag-preview.ts

@@ -0,0 +1,88 @@
+import { assignStyles } from '../../../utils/assign-styles'
+import { deepCloneElement } from '../../../utils/clone-element'
+import { getClientRect } from '../../../utils/get-client-rect'
+import { injectStyle } from '../../../utils/inject-style'
+import { maxZIndex } from '../../../utils/max-z-index'
+
+/**
+ * Sets a drag preview image for the given element and ensures the preview position
+ * relative to the pointer is correct.
+ *
+ * This function does the following:
+ *
+ * - Creates a temporary container element.
+ * - Puts the container at the end of the document body.
+ * - Sets event's drag image.
+ * - Removes the container from the document body after the next frame.
+ */
+export function setDragPreview(event: DragEvent, element: HTMLElement): void {
+  const { top, bottom, left, right } = getClientRect(element)
+  const width = right - left
+  const height = bottom - top
+  const elementX = left
+  const elementY = top
+
+  const { clientX, clientY } = event
+
+  const document = element.ownerDocument
+
+  const container = document.createElement('div')
+
+  // If outsideX is positive, the point is at the left side of the element.
+  const outsideX = Math.round(elementX - clientX)
+  // If outsideY is positive, the point is above the element.
+  const outsideY = Math.round(elementY - clientY)
+
+  const borderX = Math.max(outsideX, 0)
+  const borderY = Math.max(outsideY, 0)
+  assignStyles(container, {
+    // Ensuring we don't cause reflow when adding the element to the page using
+    // `position:fixed` rather than `position:absolute` so we are positioned on
+    // the current viewport. `position:fixed` also creates a new stacking
+    // context, so we don't need to do that here.
+    // https://github.com/atlassian/pragmatic-drag-and-drop/blob/56276552/packages/core/src/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.ts#L60
+    position: 'fixed',
+
+    // The element is positioned off-screen to avoid capturing the content of
+    // the page on Safari when the dragging element has a transparent background
+    // on Safari. See https://github.com/prosekit/prosekit/issues/1153 for more
+    // details.
+    top: '-1000vh',
+    left: '-1000vw',
+
+    // The element should not be interactive.
+    pointerEvents: 'none',
+
+    zIndex: maxZIndex,
+
+    // Only reliable cross browser technique found to push a drag preview away
+    // from the cursor is to use transparent borders on the container.
+    // https://github.com/atlassian/pragmatic-drag-and-drop/blob/56276552/packages/core/src/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.ts#L13-L18
+    borderLeft: `${borderX}px solid transparent`,
+    borderTop: `${borderY}px solid transparent`,
+
+    boxSizing: 'border-box',
+    width: `${width + borderX}px`,
+    height: `${height + borderY}px`,
+  })
+
+  const [clonedElement, styleText] = deepCloneElement(element, true)
+
+  // A hardcoded opacity.
+  clonedElement.style.setProperty('opacity', '0.5', 'important')
+  // The bounding client rect doesn't include the margin, so we need to remove
+  // the margin too from the cloned element so that it can fit the container.
+  clonedElement.style.setProperty('margin', '0', 'important')
+  // Hide the outline of the cloned element.
+  clonedElement.style.setProperty('outline-color', 'transparent', 'important')
+
+  document.body.appendChild(container)
+  container.appendChild(clonedElement)
+  injectStyle(container, styleText)
+
+  event.dataTransfer?.setDragImage(container, Math.max(-outsideX, 0), Math.max(-outsideY, 0))
+
+  requestAnimationFrame(() => {
+    container.remove()
+  })
+}