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

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

@@ -0,0 +1,166 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { computePosition, offset } from '@floating-ui/dom'
+import type { Editor } from '@prosekit/core'
+import type { defineTableCommands } from '@prosekit/extensions/table'
+
+import { assignStyles } from '../../utils/assign-styles.ts'
+import { getSafeEditorView } from '../../utils/get-safe-editor-view.ts'
+
+import { getDragOverColumn, getDragOverRow } from './calc-drag-over.ts'
+import { getDndRelatedDOMs, useInitDndPosition, type OnInitParams } from './dnd.ts'
+import { tableHandleStoreContext } from './store.ts'
+
+type TableCommandsExtension = ReturnType<typeof defineTableCommands>
+
+const HANDLE_WIDTH = 2
+
+export interface TableHandleDropIndicatorProps {
+  /**
+   * @default null
+   * @hidden
+   */
+  editor: Editor<TableCommandsExtension> | null
+}
+
+/** @internal */
+export const TableHandleDropIndicatorPropsDeclaration: PropsDeclaration<TableHandleDropIndicatorProps> = defineProps<
+  TableHandleDropIndicatorProps
+>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/**
+ * @internal
+ */
+export function setupTableHandleDropIndicator(
+  host: HostElement,
+  props: State<TableHandleDropIndicatorProps>,
+): void {
+  const getEditor = props.editor.get
+
+  useEffect(host, () => {
+    assignStyles(host, {
+      pointerEvents: 'none',
+      position: 'absolute',
+    })
+  })
+
+  useInitDndPosition(host, getEditor, onInitIndicatorPosition)
+
+  useUpdateIndicatorPosition(host, getEditor, HANDLE_WIDTH)
+}
+
+function onInitIndicatorPosition({ host, direction, dragging, table }: OnInitParams): void {
+  assignStyles(host, {
+    display: dragging ? 'block' : 'none',
+  })
+
+  const tableRect = table.getBoundingClientRect()
+
+  if (direction === 'col') {
+    assignStyles(host, {
+      width: `${HANDLE_WIDTH}px`,
+      height: `${tableRect.height}px`,
+    })
+  }
+
+  if (direction === 'row') {
+    assignStyles(host, {
+      width: `${tableRect.width}px`,
+      height: `${HANDLE_WIDTH}px`,
+    })
+  }
+}
+
+function useUpdateIndicatorPosition(host: HostElement, getEditor: () => Editor | null, handleWidth: number): void {
+  const getStore = tableHandleStoreContext.consume(host)
+
+  useEffect(host, () => {
+    const view = getSafeEditorView(getEditor())
+    if (!view) return
+
+    const store = getStore()
+    if (!store) return
+
+    const dndStore = store.dndStore
+    if (!dndStore.dragging.get()) return
+
+    const draggingIndex = dndStore.draggingIndex.get()
+    const direction = dndStore.direction.get()
+    const x = dndStore.x.get()
+    const y = dndStore.y.get()
+
+    const relatedDOMs = getDndRelatedDOMs(view, store.getReferenceCell()?.cellPos, draggingIndex, direction)
+    if (!relatedDOMs) return
+    const { table } = relatedDOMs
+
+    let cancelled = false
+    const cleanup = () => {
+      cancelled = true
+    }
+
+    if (direction === 'col') {
+      const dir = dndStore.startX.get() > x ? 'left' : 'right'
+      const dragOverColumn = getDragOverColumn(table, x)
+
+      if (dragOverColumn) {
+        const [col, index] = dragOverColumn
+        dndStore.droppingIndex.set(index)
+        void computePosition(col, host, {
+          placement: dir === 'left' ? 'left' : 'right',
+          middleware: [offset(dir === 'left' ? -1 * handleWidth : 0)],
+        }).then(({ x }) => {
+          if (cancelled) return
+          assignStyles(host, { left: `${x}px` })
+        })
+      }
+
+      return cleanup
+    }
+
+    if (direction === 'row') {
+      const dir = dndStore.startY.get() > y ? 'up' : 'down'
+      const dragOverRow = getDragOverRow(table, y)
+
+      if (dragOverRow) {
+        const [row, index] = dragOverRow
+        dndStore.droppingIndex.set(index)
+        void computePosition(row, host, {
+          placement: dir === 'up' ? 'top' : 'bottom',
+          middleware: [offset(dir === 'up' ? -1 * handleWidth : 0)],
+        }).then(({ y }) => {
+          if (cancelled) return
+          assignStyles(host, { top: `${y}px` })
+        })
+      }
+
+      return cleanup
+    }
+  })
+}
+
+const TableHandleDropIndicatorElementBase: HostElementConstructor<TableHandleDropIndicatorProps> = defineCustomElement(
+  setupTableHandleDropIndicator,
+  TableHandleDropIndicatorPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleDropIndicatorElement extends TableHandleDropIndicatorElementBase {}
+
+/**
+ * @internal
+ */
+export function registerTableHandleDropIndicatorElement(): void {
+  registerCustomElement('prosekit-table-handle-drop-indicator', TableHandleDropIndicatorElement)
+}

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

@@ -0,0 +1,103 @@
+import {
+  computed,
+  createSignal,
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { defineDOMEventHandler, type Editor } from '@prosekit/core'
+import type { EditorView } from '@prosekit/pm/view'
+
+import { useEditorExtension } from '../../hooks/use-editor-extension.ts'
+import { useEditorTyping } from '../../hooks/use-editor-typing.ts'
+import { useScrolling } from '../../hooks/use-scrolling.ts'
+import { useSelecting } from '../../hooks/use-selecting.ts'
+
+import { createTableHandleStore, tableHandleStoreContext } from './store.ts'
+import { useDrop } from './use-drop.ts'
+import { getHoveringCell, isHoveringCellInfoEqual, type HoveringCellInfo } from './utils.ts'
+
+export interface TableHandleRootProps {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+}
+
+/** @internal */
+export const TableHandleRootPropsDeclaration: PropsDeclaration<TableHandleRootProps> = defineProps<TableHandleRootProps>({
+  editor: { default: null, attribute: false, type: 'json' },
+})
+
+/**
+ * @internal
+ */
+export function setupTableHandleRoot(
+  host: HostElement,
+  props: State<TableHandleRootProps>,
+): void {
+  const getEditor = props.editor.get
+
+  const getHoveringCellInfo = useHoveringCell(host, getEditor)
+  const getTyping = useEditorTyping(host, getEditor)
+  const getIsInTable = computed(() => !!getHoveringCellInfo())
+  const getSelecting = useSelecting(host, getEditor, getIsInTable)
+  const getScrolling = useScrolling(host)
+  const getCanShow = computed(() => !getTyping() && !getSelecting() && !getScrolling())
+
+  const store = createTableHandleStore(getHoveringCellInfo, getCanShow)
+  tableHandleStoreContext.provide(host, store)
+
+  useDrop(host, getEditor, store)
+}
+
+function useHoveringCell(
+  host: HostElement,
+  getEditor: () => Editor | null,
+): () => HoveringCellInfo | undefined {
+  const hoveringCell = createSignal<HoveringCellInfo | undefined>(undefined)
+
+  const extension = defineCellHoverHandler((curr: HoveringCellInfo | undefined) => {
+    const prev = hoveringCell.get()
+    if (isHoveringCellInfoEqual(prev, curr)) return
+    hoveringCell.set(curr)
+  })
+
+  useEditorExtension(host, getEditor, extension)
+
+  return hoveringCell.get
+}
+
+function defineCellHoverHandler(
+  handler: (hoveringCell: HoveringCellInfo | undefined) => void,
+) {
+  const pointerHandler = (view: EditorView, event: PointerEvent) => {
+    const hoveringCell = getHoveringCell(view, event)
+    return handler(hoveringCell)
+  }
+  return defineDOMEventHandler('pointerover', pointerHandler)
+}
+
+const TableHandleRootElementBase: HostElementConstructor<TableHandleRootProps> = defineCustomElement(
+  setupTableHandleRoot,
+  TableHandleRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleRootElement extends TableHandleRootElementBase {}
+
+/**
+ * @internal
+ */
+export function registerTableHandleRootElement(): void {
+  registerCustomElement('prosekit-table-handle-root', TableHandleRootElement)
+}

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

@@ -0,0 +1,51 @@
+import {
+  defineCustomElement,
+  defineProps,
+  registerCustomElement,
+  useEffect,
+  type HostElement,
+  type HostElementConstructor,
+  type PropsDeclaration,
+  type State,
+} from '@aria-ui/core'
+import { MenuRootPropsDeclaration, setupMenuRoot, type MenuRootProps } from '@aria-ui/elements/menu'
+
+import { tableHandleStoreContext } from './store.ts'
+
+export interface TableHandleRowMenuRootProps extends MenuRootProps {}
+
+/** @internal */
+export const TableHandleRowMenuRootPropsDeclaration: PropsDeclaration<TableHandleRowMenuRootProps> = defineProps<
+  TableHandleRowMenuRootProps
+>(MenuRootPropsDeclaration)
+
+/** @internal */
+export function setupTableHandleRowMenuRoot(
+  host: HostElement,
+  props: State<TableHandleRowMenuRootProps>,
+): void {
+  setupMenuRoot(host, props)
+  const getStore = tableHandleStoreContext.consume(host)
+
+  useEffect(host, () => {
+    const open = props.open.get() || false
+    const store = getStore?.()
+    if (!store) return
+    store.setIsRowMenuOpen(open)
+  })
+}
+
+const TableHandleRowMenuRootElementBase: HostElementConstructor<TableHandleRowMenuRootProps> = defineCustomElement(
+  setupTableHandleRowMenuRoot,
+  TableHandleRowMenuRootPropsDeclaration,
+)
+
+/**
+ * @public
+ */
+export class TableHandleRowMenuRootElement extends TableHandleRowMenuRootElementBase {}
+
+/** @internal */
+export function registerTableHandleRowMenuRootElement(): void {
+  registerCustomElement('prosekit-table-handle-row-menu-root', TableHandleRowMenuRootElement)
+}

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