@prosekit/web 0.7.13 → 0.8.0-beta.1

package/src/components/table-handle/table-handle-row-menu-trigger.ts

@@ -0,0 +1,107 @@
+import {
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  onMount,
+  registerCustomElement,
+  useEventListener,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupMenuTrigger, type MenuTriggerProps } from '@aria-ui/elements/menu'
+import type { Editor } from '@prosekit/core'
+import { selectTableRow, type defineTableCommands } from '@prosekit/extensions/table'
+
+import { tableHandleStoreContext } from './store.ts'
+import { useEmptyImage } from './use-empty-image.ts'
+
+type TableCommandsExtension = ReturnType<typeof defineTableCommands>
+
+export interface TableHandleRowMenuTriggerProps {
+  /**
+   * @default null
+   * @hidden
+   */
+  editor: Editor<TableCommandsExtension> | null
+}
+
+/** @internal */
+export const TableHandleRowMenuTriggerPropsDeclaration: PropsDeclaration<TableHandleRowMenuTriggerProps> = defineProps<
+  TableHandleRowMenuTriggerProps
+>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/** @internal */
+export function setupTableHandleRowMenuTrigger(
+  host: HostElement,
+  props: State<TableHandleRowMenuTriggerProps>,
+): void {
+  const getEditor = props.editor.get
+  const getStore = tableHandleStoreContext.consume(host)
+
+  const triggerProps: State<MenuTriggerProps> = {
+    disabled: createSignal(false),
+  }
+  setupMenuTrigger(host, triggerProps)
+
+  useEventListener(host, 'pointerdown', () => {
+    const editor = getEditor()
+    const cellPos = getStore()?.getReferenceCell()?.cellPos
+    if (!editor || !cellPos) return
+    editor.exec(selectTableRow({ head: cellPos }))
+  })
+
+  onMount(host, () => {
+    host.draggable = true
+  })
+
+  const getEmptyImage = useEmptyImage(host)
+
+  useEventListener(host, 'dragstart', (event: DragEvent) => {
+    const dataTransfer = event.dataTransfer
+    if (dataTransfer) {
+      dataTransfer.effectAllowed = 'move'
+      const emptyImage = getEmptyImage()
+      if (emptyImage) {
+        dataTransfer.setDragImage(emptyImage, 0, 0)
+      }
+    }
+    const store = getStore()
+    if (!store) return
+    const index = store.getReferenceCell()?.rowIndex
+
+    if (index == null || index < 0) {
+      console.warn('[prosekit] Invalid row index for drag operation:', index)
+      event.preventDefault()
+      return
+    }
+
+    const dndStore = store.dndStore
+
+    dndStore.direction.set('row')
+    dndStore.dragging.set(true)
+    dndStore.draggingIndex.set(index)
+    dndStore.startX.set(event.clientX)
+    dndStore.startY.set(event.clientY)
+  })
+}
+
+const TableHandleRowMenuTriggerElementBase: HostElementConstructor<TableHandleRowMenuTriggerProps> = defineCustomElement(
+  setupTableHandleRowMenuTrigger,
+  TableHandleRowMenuTriggerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleRowMenuTriggerElement extends TableHandleRowMenuTriggerElementBase {}
+
+/**
+ * @internal
+ */
+export function registerTableHandleRowMenuTriggerElement(): void {
+  registerCustomElement('prosekit-table-handle-row-menu-trigger', TableHandleRowMenuTriggerElement)
+}

package/src/components/table-handle/table-handle-row-popup.ts

@@ -0,0 +1,42 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupOverlayPopup } from '@aria-ui/elements/overlay'
+
+import { tableHandleStoreContext } from './store.ts'
+
+export interface TableHandleRowPopupProps {}
+
+/** @internal */
+export const TableHandleRowPopupPropsDeclaration: PropsDeclaration<TableHandleRowPopupProps> = defineProps<TableHandleRowPopupProps>({})
+
+/** @internal */
+export function setupTableHandleRowPopup(
+  host: HostElement,
+  _props: State<TableHandleRowPopupProps>,
+): void {
+  const getStore = tableHandleStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.rowOverlayStore
+  setupOverlayPopup(host, getOverlayStore)
+}
+
+const TableHandleRowPopupElementBase: HostElementConstructor<TableHandleRowPopupProps> = defineCustomElement(
+  setupTableHandleRowPopup,
+  TableHandleRowPopupPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleRowPopupElement extends TableHandleRowPopupElementBase {}
+
+/** @internal */
+export function registerTableHandleRowPopupElement(): void {
+  registerCustomElement('prosekit-table-handle-row-popup', TableHandleRowPopupElement)
+}

package/src/components/table-handle/table-handle-row-positioner.ts

@@ -0,0 +1,67 @@
+import {
+  computed,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { setupOverlayPositioner } from '@aria-ui/elements/overlay'
+import type { Placement } from '@floating-ui/dom'
+
+import { useHTMLElementAt } from '../../utils/use-html-element-at.ts'
+
+import { SharedTableHandlePositionerPropsDeclaration, type SharedTableHandlePositionerProps } from './shared.ts'
+import { tableHandleStoreContext } from './store.ts'
+
+export interface TableHandleRowPositionerProps extends Omit<SharedTableHandlePositionerProps, 'placement'> {
+  /**
+   * The placement of the popover, relative to the hovered table cell.
+   *
+   * @default "left"
+   */
+  placement: Placement
+}
+
+/** @internal */
+export const TableHandleRowPositionerPropsDeclaration: PropsDeclaration<TableHandleRowPositionerProps> = defineProps<
+  TableHandleRowPositionerProps
+>({
+  ...SharedTableHandlePositionerPropsDeclaration,
+  placement: { default: 'left', attribute: 'placement', type: 'string' },
+})
+
+/** @internal */
+export function setupTableHandleRowPositioner(
+  host: HostElement,
+  props: State<TableHandleRowPositionerProps>,
+): void {
+  const getStore = tableHandleStoreContext.consume(host)
+  const getOverlayStore = () => getStore()?.rowOverlayStore
+  setupOverlayPositioner(host, props, getOverlayStore)
+
+  const getEditor = props.editor.get
+  const getRowFirstCellPos = computed(() => getStore()?.getReferenceCell()?.rowFirstCellPos)
+  const getReferenceCell = useHTMLElementAt(getEditor, getRowFirstCellPos)
+  useEffect(host, () => {
+    getOverlayStore()?.setAnchorElement(getReferenceCell())
+  })
+}
+
+const TableHandleRowPositionerElementBase: HostElementConstructor<TableHandleRowPositionerProps> = defineCustomElement(
+  setupTableHandleRowPositioner,
+  TableHandleRowPositionerPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleRowPositionerElement extends TableHandleRowPositionerElementBase {}
+
+/** @internal */
+export function registerTableHandleRowPositionerElement(): void {
+  registerCustomElement('prosekit-table-handle-row-positioner', TableHandleRowPositionerElement)
+}

package/src/components/table-handle/use-drop.ts

@@ -0,0 +1,74 @@
+import { computed, useEffect, type HostElement } from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+import { moveTableColumn, moveTableRow } from '@prosekit/extensions/table'
+
+import { getSafeEditorView } from '../../utils/get-safe-editor-view.ts'
+
+import type { TableHandleStore } from './store.ts'
+
+export function useDrop(
+  host: HostElement,
+  getEditor: () => Editor | null,
+  store: TableHandleStore,
+): void {
+  const getDndStore = () => store.dndStore
+  const getDragging = computed(() => getDndStore().dragging.get())
+
+  useEffect(host, () => {
+    const view = getSafeEditorView(getEditor())
+    if (!view || !view.editable) return
+
+    const ownerDocument = view.dom?.ownerDocument
+    if (!ownerDocument) return
+
+    const handleDrop = () => {
+      if (!getDragging()) return
+      const editor = getEditor()
+      if (!editor) return
+
+      const dndStore = getDndStore()
+
+      const droppingIndex = dndStore.droppingIndex.get()
+      const draggingIndex = dndStore.draggingIndex.get()
+      const direction = dndStore.direction.get()
+
+      if (draggingIndex < 0 || droppingIndex < 0) {
+        console.warn('[prosekit] Invalid drag indices:', { draggingIndex, droppingIndex })
+        return
+      }
+
+      if (direction === 'row') {
+        editor.exec(moveTableRow({ from: draggingIndex, to: droppingIndex }))
+        return
+      }
+      if (direction === 'col') {
+        editor.exec(moveTableColumn({ from: draggingIndex, to: droppingIndex }))
+        return
+      }
+    }
+
+    const handleDragOver = (event: DragEvent) => {
+      if (!getDragging()) return
+      event.preventDefault()
+      const dndStore = getDndStore()
+      dndStore.dragging.set(true)
+      dndStore.x.set(event.clientX)
+      dndStore.y.set(event.clientY)
+    }
+
+    const handleDragEnd = () => {
+      if (!getDragging()) return
+      const dndStore = getDndStore()
+      dndStore.dragging.set(false)
+    }
+
+    ownerDocument.addEventListener('dragover', handleDragOver)
+    ownerDocument.addEventListener('drop', handleDrop)
+    ownerDocument.addEventListener('dragend', handleDragEnd)
+    return () => {
+      ownerDocument.removeEventListener('dragover', handleDragOver)
+      ownerDocument.removeEventListener('drop', handleDrop)
+      ownerDocument.removeEventListener('dragend', handleDragEnd)
+    }
+  })
+}

package/src/components/table-handle/{hooks/use-empty-image.ts → use-empty-image.ts}

@@ -1,5 +1,4 @@
-import type { ConnectableElement } from '@aria-ui/core'
-import { useEffect } from '@aria-ui/core'
+import { useEffect, type HostElement } from '@aria-ui/core'
 
 /**
  * Returns a function that returns a 1x1 transparent image. This is used to
@@ -12,7 +11,7 @@ import { useEffect } from '@aria-ui/core'
  * @internal
  */
 export function useEmptyImage(
-  host: ConnectableElement,
+  host: HostElement,
 ): () => HTMLImageElement | undefined {
   let image: HTMLImageElement | undefined
 

package/src/components/table-handle/utils.ts

@@ -9,17 +9,6 @@ export interface HoveringCellInfo {
   colFirstCellPos: number
 }
 
-export interface DndInfo {
-  dragging: boolean
-  direction: 'row' | 'col'
-  draggingIndex: number
-  droppingIndex: number
-  x: number
-  y: number
-  startX: number
-  startY: number
-}
-
 export function isHoveringCellInfoEqual(
   a?: HoveringCellInfo | null,
   b?: HoveringCellInfo | null,

package/src/components/tooltip/index.ts

@@ -0,0 +1,52 @@
+/**
+
+@module
+
+## Anatomy
+
+```html
+<prosekit-tooltip-root>
+  <prosekit-tooltip-trigger>...</prosekit-tooltip-trigger>
+  <prosekit-tooltip-positioner>
+    <prosekit-tooltip-popup>...</prosekit-tooltip-popup>
+  </prosekit-tooltip-positioner>
+</prosekit-tooltip-root>
+```
+*/
+
+import { registerCustomElement } from '@aria-ui/core'
+import { TooltipPopupElement, TooltipPositionerElement, TooltipRootElement, TooltipTriggerElement } from '@aria-ui/elements/tooltip'
+
+export {
+  OpenChangeEvent,
+  setupTooltipPopup,
+  setupTooltipPositioner,
+  setupTooltipRoot,
+  setupTooltipTrigger,
+  TooltipPopupElement,
+  TooltipPopupPropsDeclaration,
+  TooltipPositionerElement,
+  TooltipPositionerPropsDeclaration,
+  TooltipRootElement,
+  TooltipRootPropsDeclaration,
+  TooltipTriggerElement,
+  TooltipTriggerPropsDeclaration,
+  type TooltipPopupProps,
+  type TooltipPositionerProps,
+  type TooltipRootEvents,
+  type TooltipRootProps,
+  type TooltipTriggerProps,
+} from '@aria-ui/elements/tooltip'
+
+export function registerTooltipRootElement(): void {
+  registerCustomElement('prosekit-tooltip-root', TooltipRootElement)
+}
+export function registerTooltipTriggerElement(): void {
+  registerCustomElement('prosekit-tooltip-trigger', TooltipTriggerElement)
+}
+export function registerTooltipPopupElement(): void {
+  registerCustomElement('prosekit-tooltip-popup', TooltipPopupElement)
+}
+export function registerTooltipPositionerElement(): void {
+  registerCustomElement('prosekit-tooltip-positioner', TooltipPositionerElement)
+}

package/src/hooks/use-editor-extension.ts

@@ -1,12 +1,12 @@
-import { useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'
+import { useEffect, type HostElement } from '@aria-ui/core'
 import type { Editor, Extension } from '@prosekit/core'
 
 export function useEditorExtension(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
+  host: HostElement,
+  getEditor: () => Editor | null,
   extension: Extension,
 ): void {
   useEffect(host, () => {
-    return editor.get()?.use(extension)
+    return getEditor()?.use(extension)
   })
 }

package/src/hooks/use-editor-focus-event.ts

@@ -1,4 +1,4 @@
-import type { ConnectableElement, ReadonlySignal } from '@aria-ui/core'
+import type { HostElement } from '@aria-ui/core'
 import { defineFocusChangeHandler, type Editor, type FocusChangeHandler } from '@prosekit/core'
 
 import { useEditorExtension } from './use-editor-extension.ts'
@@ -7,10 +7,10 @@ import { useEditorExtension } from './use-editor-extension.ts'
  * @internal
  */
 export function useEditorFocusChangeEvent(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
+  host: HostElement,
+  getEditor: () => Editor | null,
   handler: FocusChangeHandler,
 ): void {
   const extension = defineFocusChangeHandler(handler)
-  useEditorExtension(host, editor, extension)
+  useEditorExtension(host, getEditor, extension)
 }

package/src/hooks/use-editor-typing.ts

@@ -1,28 +1,24 @@
-import { createSignal, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'
+import { createSignal, type HostElement } from '@aria-ui/core'
 import { defineDOMEventHandler, union, type Editor } from '@prosekit/core'
 
 import { useEditorExtension } from './use-editor-extension.ts'
 
 export function useEditorTyping(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-): ReadonlySignal<boolean> {
+  host: HostElement,
+  getEditor: () => Editor | null,
+): () => boolean {
   const typing = createSignal(false)
 
-  const handleKeypress = () => {
-    typing.set(true)
-  }
-
-  const handlePointerMove = () => {
-    typing.set(false)
-  }
-
   const extension = union(
-    defineDOMEventHandler('keypress', handleKeypress),
-    defineDOMEventHandler('pointermove', handlePointerMove),
+    defineDOMEventHandler('keypress', () => {
+      typing.set(true)
+    }),
+    defineDOMEventHandler('pointermove', () => {
+      typing.set(false)
+    }),
   )
 
-  useEditorExtension(host, editor, extension)
+  useEditorExtension(host, getEditor, extension)
 
-  return typing
+  return typing.get
 }

package/src/hooks/use-editor-update-event.ts

@@ -1,4 +1,4 @@
-import type { ConnectableElement, ReadonlySignal } from '@aria-ui/core'
+import type { HostElement } from '@aria-ui/core'
 import { defineUpdateHandler, type Editor, type UpdateHandler } from '@prosekit/core'
 
 import { useEditorExtension } from './use-editor-extension.ts'
@@ -7,10 +7,10 @@ import { useEditorExtension } from './use-editor-extension.ts'
  * @internal
  */
 export function useEditorUpdateEvent(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
+  host: HostElement,
+  getEditor: () => Editor | null,
   handler: UpdateHandler,
 ): void {
   const extension = defineUpdateHandler(handler)
-  useEditorExtension(host, editor, extension)
+  useEditorExtension(host, getEditor, extension)
 }

package/src/hooks/use-keymap.ts

@@ -1,13 +1,13 @@
-import type { ConnectableElement, ReadonlySignal } from '@aria-ui/core'
+import type { HostElement } from '@aria-ui/core'
 import { defineKeymap, type Editor, type Keymap } from '@prosekit/core'
 
 import { useEditorExtension } from './use-editor-extension.ts'
 
 export function useKeymap(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
+  host: HostElement,
+  getEditor: () => Editor | null,
   keymap: Keymap,
 ): void {
   const extension = defineKeymap(keymap)
-  useEditorExtension(host, editor, extension)
+  useEditorExtension(host, getEditor, extension)
 }

package/src/hooks/use-scrolling.ts

@@ -1,7 +1,7 @@
-import { createSignal, useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'
-import { getNearestOverflowAncestor } from '@zag-js/dom-query'
+import { createSignal, useEffect, type HostElement } from '@aria-ui/core'
+import { getNearestOverflowAncestor } from '@aria-ui/utils'
 
-export function useScrolling(host: ConnectableElement): ReadonlySignal<boolean> {
+export function useScrolling(host: HostElement): () => boolean {
   const scrolling = createSignal(false)
 
   useEffect(host, () => {
@@ -15,16 +15,17 @@ export function useScrolling(host: ConnectableElement): ReadonlySignal<boolean>
       scrolling.set(false)
     }
 
-    scrollableParent.addEventListener('scroll', handleScroll, { passive: true })
-    window.addEventListener('mousemove', handleMouseMove, { passive: true })
-    window.addEventListener('pointermove', handleMouseMove, { passive: true })
+    const abortController = new AbortController()
+    const abortSignal = abortController.signal
+
+    scrollableParent.addEventListener('scroll', handleScroll, { passive: true, signal: abortSignal })
+    window.addEventListener('mousemove', handleMouseMove, { passive: true, signal: abortSignal })
+    window.addEventListener('pointermove', handleMouseMove, { passive: true, signal: abortSignal })
 
     return () => {
-      scrollableParent.removeEventListener('scroll', handleScroll)
-      window.removeEventListener('mousemove', handleMouseMove)
-      window.removeEventListener('pointermove', handleMouseMove)
+      abortController.abort()
     }
   })
 
-  return scrolling
+  return scrolling.get
 }

package/src/hooks/use-selecting.ts

@@ -1,5 +1,4 @@
-import type { ReadonlySignal } from '@aria-ui/core'
-import { createSignal, useEffect, type ConnectableElement } from '@aria-ui/core'
+import { createSignal, useEffect, type HostElement } from '@aria-ui/core'
 import type { Editor } from '@prosekit/core'
 
 import { getSafeEditorView } from '../utils/get-safe-editor-view.ts'
@@ -9,25 +8,22 @@ import { getSafeEditorView } from '../utils/get-safe-editor-view.ts'
  * components should be disabled or hidden.
  */
 export function useSelecting(
-  host: ConnectableElement,
-  editor: ReadonlySignal<Editor | null>,
-  enabled: ReadonlySignal<boolean>,
-): ReadonlySignal<boolean> {
+  host: HostElement,
+  getEditor: () => Editor | null,
+  getEnabled: () => boolean,
+): () => boolean {
   const selecting = createSignal(false)
   const isPointerDown = createSignal(false)
 
   useEffect(host, () => {
-    if (!enabled.get()) {
-      return
-    }
+    if (!getEnabled()) return
 
-    const view = getSafeEditorView(editor.peek())
+    const view = getSafeEditorView(getEditor())
     if (!view) return
 
     const { dom, root } = view
     if (!root) return
 
-    // When the user starts selecting text, we set the selecting signal to true.
     const handlePointerDown = () => {
       selecting.set(true)
       isPointerDown.set(true)
@@ -35,15 +31,12 @@ export function useSelecting(
     const handlePointerUp = () => {
       isPointerDown.set(false)
     }
-    // When the user moves the pointer and the pointer is not down, we set the
-    // selecting signal to false again.
     const handleMouseMove = () => {
       if (!isPointerDown.get()) {
         selecting.set(false)
       }
     }
 
-    // Only listen to pointer down events on the editor
     dom.addEventListener('pointerdown', handlePointerDown)
     root.addEventListener('pointerup', handlePointerUp)
     root.addEventListener('pointermove', handleMouseMove)
@@ -55,5 +48,5 @@ export function useSelecting(
     }
   })
 
-  return selecting
+  return selecting.get
 }

package/src/utils/event.ts

@@ -0,0 +1,28 @@
+function cloneKeyboardEvent(source: KeyboardEvent): KeyboardEvent {
+  return new KeyboardEvent(source.type, {
+    code: source.code,
+    key: source.key,
+    location: source.location,
+    repeat: source.repeat,
+    altKey: source.altKey,
+    ctrlKey: source.ctrlKey,
+    metaKey: source.metaKey,
+    shiftKey: source.shiftKey,
+
+    view: source.view,
+    // internal bridge target; events don't need to bubble"
+    bubbles: false,
+    cancelable: true,
+  })
+}
+
+export class KeyboardEventTarget extends EventTarget {
+  override dispatchEvent(event: KeyboardEvent): boolean {
+    const newEvent = cloneKeyboardEvent(event)
+    const result: boolean = super.dispatchEvent(newEvent)
+    if (newEvent.defaultPrevented) {
+      event.preventDefault()
+    }
+    return result
+  }
+}