@prosekit/web 0.8.0-beta.0 → 0.8.0-beta.1

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

@@ -1,22 +0,0 @@
-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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useAutocompletePopover } from "./setup.ts"
-import { autocompletePopoverEvents, autocompletePopoverProps, type AutocompletePopoverEvents, type AutocompletePopoverProps } from "./types.ts"
-
-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/setup.ts

@@ -1,169 +0,0 @@
-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, withPriority, type Editor, type Priority } from '@prosekit/core'
-import { AutocompleteRule, defineAutocomplete, type MatchHandler } from '@prosekit/extensions/autocomplete'
-
-import { useEditorExtension } from '../../../hooks/use-editor-extension.ts'
-import { useFirstRendering } from '../../../hooks/use-first-rendering.ts'
-import { getSafeEditorView } from '../../../utils/get-safe-editor-view.ts'
-import { onSubmitContext, openContext, queryContext } from '../context.ts'
-
-import { defaultQueryBuilder } from './helpers.ts'
-import type { AutocompletePopoverEvents, AutocompletePopoverProps } from './types.ts'
-
-/**
- * @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('.prosekit-autocomplete-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), 4 satisfies typeof Priority.highest)
-  useEditorExtension(host, editor, extension)
-}

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

@@ -1,100 +0,0 @@
-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/index.gen.ts

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

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useBlockHandleAdd } from "./setup.ts"
-import { blockHandleAddEvents, blockHandleAddProps, type BlockHandleAddEvents, type BlockHandleAddProps } from "./types.ts"
-
-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

@@ -1,33 +0,0 @@
-import { useEventListener, type ConnectableElement, type SignalState } from '@aria-ui/core'
-import { insertDefaultBlock } from '@prosekit/core'
-
-import { blockPopoverContext } from '../context.ts'
-
-import type { BlockHandleAddProps } from './types.ts'
-
-/**
- * @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

@@ -1,23 +0,0 @@
-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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useBlockHandleDraggable } from "./setup.ts"
-import { blockHandleDraggableEvents, blockHandleDraggableProps, type BlockHandleDraggableEvents, type BlockHandleDraggableProps } from "./types.ts"
-
-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/setup.ts

@@ -1,113 +0,0 @@
-import { useAttribute, useEffect, useEventListener, type ConnectableElement, type ReadonlySignal, type SignalState } from '@aria-ui/core'
-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 { blockPopoverContext, draggingContext, type BlockPopoverContext, type HoverState } from '../context.ts'
-
-import { setDragPreview } from './set-drag-preview.ts'
-import type { BlockHandleDraggableProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useBlockHandleDraggable(
-  host: ConnectableElement,
-  { state }: { state: SignalState<BlockHandleDraggableProps> },
-): void {
-  const context = blockPopoverContext.consume(host)
-  const dragging = draggingContext.consume(host)
-
-  useEffect(host, () => {
-    host.draggable = true
-  })
-
-  usePointerDownHandler(host, context, state.editor)
-
-  useEventListener(host, 'dragstart', (event) => {
-    dragging.set(true)
-
-    const view = getSafeEditorView(state.editor.get())
-    const hoverState = context.get()
-
-    if (view && hoverState) {
-      view.dom.classList.add(DRAGGING_CLASS_NAME)
-      createDraggingPreview(view, hoverState, event)
-      setViewDragging(view, hoverState)
-    }
-  })
-
-  useEventListener(host, 'dragend', () => {
-    dragging.set(false)
-
-    const view = getSafeEditorView(state.editor.get())
-    if (view) {
-      view.dom.classList.remove(DRAGGING_CLASS_NAME)
-    }
-  })
-
-  useAttribute(host, 'data-dragging', () => (dragging.get() ? '' : undefined))
-}
-
-function usePointerDownHandler(
-  host: ConnectableElement,
-  context: ReadonlySignal<BlockPopoverContext>,
-  editor: ReadonlySignal<Editor | null>,
-) {
-  useEventListener(host, 'pointerdown', () => {
-    const { pos } = context.get() ?? {}
-    const { view } = editor.get() ?? {}
-
-    if (pos == null || view == null) {
-      return
-    }
-
-    view.dispatch(
-      view.state.tr.setSelection(NodeSelection.create(view.state.doc, 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
-}

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

@@ -1,23 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import type { Editor } from '@prosekit/core'
-
-export interface BlockHandleDraggableProps {
-  /**
-   * The ProseKit editor instance.
-   *
-   * @default null
-   * @hidden
-   */
-  editor: Editor | null
-}
-
-/** @internal */
-export const blockHandleDraggableProps: PropDeclarations<BlockHandleDraggableProps> = {
-  editor: { default: null },
-}
-
-/** @internal */
-export interface BlockHandleDraggableEvents {}
-
-/** @internal */
-export const blockHandleDraggableEvents: EventDeclarations<BlockHandleDraggableEvents> = {}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useBlockHandlePopover } from "./setup.ts"
-import { blockHandlePopoverEvents, blockHandlePopoverProps, type BlockHandlePopoverEvents, type BlockHandlePopoverProps } from "./types.ts"
-
-const BlockHandlePopoverElementBase: BaseElementConstructor<BlockHandlePopoverProps> = defineCustomElement<
-  BlockHandlePopoverProps,
-  BlockHandlePopoverEvents
->({
-  props: blockHandlePopoverProps,
-  events: blockHandlePopoverEvents,
-  setup: useBlockHandlePopover,
-})
-class BlockHandlePopoverElement extends BlockHandlePopoverElementBase {}
-
-registerCustomElement('prosekit-block-handle-popover', BlockHandlePopoverElement)
-  
-export { BlockHandlePopoverElement }

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

@@ -1,68 +0,0 @@
-import { createComputed, createSignal, useAttribute, type ConnectableElement, type ReadonlySignal, type SetupOptions } from '@aria-ui/core'
-import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
-import { usePresence } from '@aria-ui/presence'
-import type { VirtualElement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-
-import { useEditorExtension } from '../../../hooks/use-editor-extension.ts'
-import { useScrolling } from '../../../hooks/use-scrolling.ts'
-import { blockPopoverContext, draggingContext, type BlockPopoverContext, type HoverState } from '../context.ts'
-
-import { defineElementHoverHandler, type ElementHoverHandler } from './pointer-move.ts'
-import type { BlockHandlePopoverEvents, BlockHandlePopoverProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useBlockHandlePopover(
-  host: ConnectableElement,
-  { state, emit }: SetupOptions<BlockHandlePopoverProps, BlockHandlePopoverEvents>,
-): void {
-  const { editor, ...overlayState } = state
-  const reference = createSignal<VirtualElement | null>(null)
-  useOverlayPositionerState(host, overlayState, { reference })
-
-  const context = createSignal<BlockPopoverContext>(null)
-  blockPopoverContext.provide(host, context)
-
-  const dragging = createSignal(false)
-  draggingContext.provide(host, dragging)
-
-  const scrolling = useScrolling(host)
-  const open = createComputed(() => {
-    return !!context.get() && !scrolling.get()
-  })
-
-  useHoverExtension(host, editor, (referenceValue, hoverState) => {
-    reference.set(referenceValue)
-    context.set(hoverState)
-    const stateChangeDetails = hoverState ? { node: hoverState.node, pos: hoverState.pos } : null
-    emit('stateChange', stateChangeDetails)
-  })
-
-  useAttribute(host, 'data-state', () => (open.get() ? 'open' : 'closed'))
-  usePresence(host, open)
-}
-
-function useHoverExtension(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-  handler: ElementHoverHandler,
-) {
-  let prevHoverState: HoverState | null = null
-
-  const extension = defineElementHoverHandler((reference, hoverState) => {
-    if (isHoverStateEqual(prevHoverState, hoverState)) {
-      return
-    }
-
-    prevHoverState = hoverState
-    handler(reference, hoverState)
-  })
-
-  useEditorExtension(host, editor, extension)
-}
-
-function isHoverStateEqual(a: HoverState | null, b: HoverState | null) {
-  return (!a && !b) || (a && b && a.pos === b.pos && a.node.eq(b.node))
-}