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

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

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

@@ -0,0 +1,89 @@
+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 type { Placement } from '@floating-ui/dom'
+
+import { blockHandleOverlayStoreContext } from './context.ts'
+
+/**
+ * @public
+ */
+export interface BlockHandlePositionerProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
+  /**
+   * The placement of the popover, relative to the hovered block.
+   *
+   * @default "left"
+   */
+  placement: Placement
+
+  /**
+   * Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API)
+   * to place the floating element on top of other page content.
+   *
+   * @default false
+   */
+  hoist: boolean
+
+  /**
+   * @default false
+   * @hidden
+   */
+  flip: boolean
+
+  /**
+   * @default false
+   * @hidden
+   */
+  shift: boolean
+
+  /**
+   * @default true
+   * @hidden
+   */
+  hide: boolean
+}
+
+/** @internal */
+export const BlockHandlePositionerPropsDeclaration: PropsDeclaration<BlockHandlePositionerProps> = /* @__PURE__ */ defineProps<
+  BlockHandlePositionerProps
+>({
+  ...OverlayPositionerPropsDeclaration,
+  placement: { default: 'left', attribute: 'placement', type: 'string' },
+  // Enabling `hoist` will cause the popover to have a small delay when
+  // scrolling the page.
+  hoist: { default: false, attribute: 'hoist', type: 'boolean' },
+  flip: { default: false, attribute: false, type: 'json' },
+  shift: { default: false, attribute: 'shift', type: 'boolean' },
+  hide: { default: true, attribute: 'hide', type: 'boolean' },
+})
+
+/** @internal */
+export function setupBlockHandlePositioner(
+  host: HostElement,
+  props: State<BlockHandlePositionerProps>,
+): void {
+  const getOverlayStore = blockHandleOverlayStoreContext.consume(host)
+  setupOverlayPositioner(host, props as unknown as State<OverlayPositionerProps>, getOverlayStore)
+}
+
+const BlockHandlePositionerElementBase: HostElementConstructor<BlockHandlePositionerProps> = defineCustomElement(
+  setupBlockHandlePositioner,
+  BlockHandlePositionerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class BlockHandlePositionerElement extends BlockHandlePositionerElementBase {}
+
+/** @internal */
+export function registerBlockHandlePositionerElement(): void {
+  registerCustomElement('prosekit-block-handle-positioner', BlockHandlePositionerElement)
+}

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

@@ -0,0 +1,116 @@
+import {
+  computed,
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { createOverlayStore } from '@aria-ui/elements/overlay'
+import type { VirtualElement } from '@floating-ui/dom'
+import type { Editor } from '@prosekit/core'
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+import { useScrolling } from '../../hooks/use-scrolling.ts'
+
+import { blockHandleOverlayStoreContext, BlockHandleStore, blockHandleStoreContext } from './context.ts'
+import { useHoverExtension } from './use-hover-extension.ts'
+
+export interface BlockHandleRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+/** @internal */
+export const BlockHandleRootPropsDeclaration: PropsDeclaration<BlockHandleRootProps> = /* @__PURE__ */ defineProps<
+  BlockHandleRootProps
+>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/**
+ * @public
+ */
+export class BlockHandleStateChangeEvent extends Event {
+  /**
+   * The currently hovered block's node and position, or `null` if no block is hovered.
+   */
+  detail: { node: ProseMirrorNode; pos: number } | null
+  constructor(state: { node: ProseMirrorNode; pos: number } | null) {
+    super('stateChange', { bubbles: true })
+    this.detail = state
+  }
+}
+
+/**
+ * @public
+ */
+export interface BlockHandleRootEvents {
+  /**
+   * Fired when the hovered block changes.
+   */
+  stateChange: BlockHandleStateChangeEvent
+}
+
+/**
+ * @internal
+ */
+export function setupBlockHandleRoot(
+  host: HostElement,
+  props: State<BlockHandleRootProps>,
+): void {
+  const getEditor = props.editor.get
+
+  const store = new BlockHandleStore()
+  blockHandleStoreContext.provide(host, store)
+
+  const reference = createSignal<VirtualElement | undefined>(undefined)
+  const getScrolling = useScrolling(host)
+
+  const getOpen = computed(() => !!store.hoverState.get() && !getScrolling())
+
+  const overlayStore = createOverlayStore(
+    getOpen,
+    () => {},
+    () => true,
+    () => false,
+    (event) => host.dispatchEvent(event),
+  )
+
+  useHoverExtension(host, getEditor, (ref, hoverState) => {
+    reference.set(ref ?? undefined)
+    store.hoverState.set(hoverState)
+    const state = hoverState ? { node: hoverState.node, pos: hoverState.pos } : null
+    host.dispatchEvent(new BlockHandleStateChangeEvent(state))
+  })
+
+  useEffect(host, () => {
+    overlayStore.setAnchorElement(reference.get())
+  })
+
+  blockHandleOverlayStoreContext.provide(host, overlayStore)
+}
+
+const BlockHandleRootElementBase: HostElementConstructor<BlockHandleRootProps> = defineCustomElement(
+  setupBlockHandleRoot,
+  BlockHandleRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class BlockHandleRootElement extends BlockHandleRootElementBase {}
+
+/** @internal */
+export function registerBlockHandleRootElement(): void {
+  registerCustomElement('prosekit-block-handle-root', BlockHandleRootElement)
+}

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

@@ -1,31 +1,22 @@
-import { createContext, type Context } from '@aria-ui/core'
-import type { ProseMirrorNode } from '@prosekit/pm/model'
+import { createContext, createSignal, type Context, type Signal } from '@aria-ui/core'
+import type { OverlayStore } from '@aria-ui/elements/overlay'
 
-/**
- * @internal
- */
-export interface HoverState {
-  node: ProseMirrorNode
-  pos: number
-}
+import type { HoverState } from './hover-state.ts'
 
 /**
  * @internal
  */
-export type BlockPopoverContext = HoverState | null
+export class BlockHandleStore {
+  readonly hoverState: Signal<HoverState | undefined> = createSignal<HoverState | undefined>(undefined)
+  readonly dragging: Signal<boolean> = createSignal(false)
+}
 
 /**
  * @internal
  */
-export const blockPopoverContext: Context<BlockPopoverContext> = createContext(
-  'prosekit-block-popover-context',
-  null,
-)
+export const blockHandleStoreContext: Context<BlockHandleStore> = createContext<BlockHandleStore>('prosekit-block-handle-store')
 
 /**
  * @internal
  */
-export const draggingContext: Context<boolean> = createContext(
-  'prosekit-block-handle-dragging-context',
-  false,
-)
+export const blockHandleOverlayStoreContext: Context<OverlayStore> = createContext<OverlayStore>('prosekit-block-handle-overlay-store')

package/src/components/block-handle/hover-state.ts

@@ -0,0 +1,16 @@
+import type { ProseMirrorNode } from '@prosekit/pm/model'
+
+/**
+ * @internal
+ */
+export interface HoverState {
+  node: ProseMirrorNode
+  pos: number
+}
+
+/**
+ * @internal
+ */
+export function isHoverStateEqual(a: HoverState, b: HoverState): boolean {
+  return a.pos === b.pos && a.node.eq(b.node)
+}

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

@@ -0,0 +1,59 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-block-handle-root>
+  <prosekit-block-handle-positioner>
+    <prosekit-block-handle-popup>
+      <prosekit-block-handle-add>...</prosekit-block-handle-add>
+      <prosekit-block-handle-draggable>...</prosekit-block-handle-draggable>
+    </prosekit-block-handle-popup>
+  </prosekit-block-handle-positioner>
+</prosekit-block-handle-root>
+```
+*/
+
+export {
+  BlockHandleAddElement,
+  BlockHandleAddPropsDeclaration,
+  registerBlockHandleAddElement,
+  setupBlockHandleAdd,
+  type BlockHandleAddProps,
+} from './block-handle-add.ts'
+
+export {
+  BlockHandleDraggableElement,
+  BlockHandleDraggablePropsDeclaration,
+  registerBlockHandleDraggableElement,
+  setupBlockHandleDraggable,
+  type BlockHandleDraggableProps,
+} from './block-handle-draggable.ts'
+
+export {
+  BlockHandlePopupElement,
+  BlockHandlePopupPropsDeclaration,
+  registerBlockHandlePopupElement,
+  setupBlockHandlePopup,
+  type BlockHandlePopupProps,
+} from './block-handle-popup.ts'
+
+export {
+  BlockHandlePositionerElement,
+  BlockHandlePositionerPropsDeclaration,
+  registerBlockHandlePositionerElement,
+  setupBlockHandlePositioner,
+  type BlockHandlePositionerProps,
+} from './block-handle-positioner.ts'
+
+export {
+  BlockHandleRootElement,
+  BlockHandleRootPropsDeclaration,
+  BlockHandleStateChangeEvent,
+  registerBlockHandleRootElement,
+  setupBlockHandleRoot,
+  type BlockHandleRootEvents,
+  type BlockHandleRootProps,
+} from './block-handle-root.ts'