@prosekit/web 0.7.2 → 0.7.4

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

@@ -0,0 +1,49 @@
+import {
+  createContext,
+  type Context,
+} from '@aria-ui/core'
+
+import type {
+  DndInfo,
+  HoveringCellInfo,
+} from './utils'
+
+/**
+ * @internal
+ */
+export type TableHandleRootContext = HoveringCellInfo | null
+
+/**
+ * @internal
+ */
+export const tableHandleRootContext: Context<TableHandleRootContext> = createContext(
+  'prosekit-table-handle-root-context',
+  null,
+)
+
+/**
+ * @internal
+ */
+export type TableHandleDndContext = DndInfo
+
+/**
+ * @internal
+ */
+export const defaultTableHandleDndContext: TableHandleDndContext = {
+  dragging: false,
+  direction: 'row',
+  draggingIndex: -1,
+  droppingIndex: -1,
+  x: -1,
+  y: -1,
+  startX: -1,
+  startY: -1,
+}
+
+/**
+ * @internal
+ */
+export const tableHandleDndContext: Context<TableHandleDndContext> = createContext(
+  'prosekit-table-handle-dnd-context',
+  defaultTableHandleDndContext,
+)

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

@@ -0,0 +1,135 @@
+import {
+  createComputed,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+} from '@aria-ui/core'
+import {
+  computePosition,
+  offset,
+} from '@floating-ui/dom'
+import { isHTMLElement } from '@ocavue/utils'
+import type { Editor } from '@prosekit/core'
+import type { EditorView } from '@prosekit/pm/view'
+
+import { assignStyles } from '../../utils/assign-styles'
+import { getSafeEditorView } from '../../utils/get-safe-editor-view'
+
+import {
+  tableHandleDndContext,
+  tableHandleRootContext,
+} from './context'
+
+export type OnInitParams = {
+  host: ConnectableElement
+  direction: 'row' | 'col'
+  dragging: boolean
+  draggingIndex: number
+  table: HTMLTableElement
+  cell: HTMLTableCellElement
+}
+
+export function useInitDndPosition(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  onInit: (params: OnInitParams) => void,
+): void {
+  const dndContext = tableHandleDndContext.consume(host)
+  const rootContext = tableHandleRootContext.consume(host)
+
+  const draggingSignal = createComputed(() => {
+    const context = dndContext.get()
+    return context.dragging
+  })
+
+  const directionSignal = createComputed(() => {
+    const context = dndContext.get()
+    return context.direction
+  })
+
+  const draggingIndexSignal = createComputed(() => {
+    const context = dndContext.get()
+    return context.draggingIndex
+  })
+
+  useEffect(host, () => {
+    const view = getSafeEditorView(editor.get())
+    if (!view) return
+
+    const dragging = draggingSignal.get()
+    const direction = directionSignal.get()
+
+    host.dataset.direction = direction
+    host.dataset.dragging = dragging.toString()
+
+    const draggingIndex = draggingIndexSignal.get()
+
+    const relatedDOMs = getDndRelatedDOMs(view, rootContext.peek()?.cellPos, draggingIndex, direction)
+    if (!relatedDOMs) return
+    const { table, cell } = relatedDOMs
+
+    onInit({
+      host,
+      direction,
+      dragging,
+      draggingIndex,
+      table,
+      cell,
+    })
+
+    if (!dragging) return
+
+    let cancelled = false
+
+    void computePosition(cell, host, {
+      placement: direction === 'row' ? 'right' : 'bottom',
+      middleware: [
+        offset(({ rects }) => {
+          if (direction === 'col') {
+            return -rects.reference.height
+          }
+          return -rects.reference.width
+        }),
+      ],
+    }).then(({ x, y }) => {
+      if (cancelled) return
+      assignStyles(host, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+    })
+
+    return () => {
+      cancelled = true
+    }
+  })
+}
+
+function getTableDOMByPos(view: EditorView, pos: number): HTMLTableElement | undefined {
+  const dom = view.domAtPos(pos).node
+  if (!dom) return
+  const element = isHTMLElement(dom) ? dom : dom.parentElement
+  const table = element?.closest('table')
+  return table ?? undefined
+}
+
+function getTargetFirstCellDOM(table: HTMLTableElement, index: number, direction: 'row' | 'col'): HTMLTableCellElement | undefined {
+  if (direction === 'row') {
+    const row = table.querySelectorAll('tr')[index]
+    const cell = row?.querySelector('td')
+    return cell ?? undefined
+  } else {
+    const row = table.querySelector('tr')
+    const cell = row?.querySelectorAll('td')[index]
+    return cell ?? undefined
+  }
+}
+
+export function getDndRelatedDOMs(view: EditorView, cellPos: number | undefined, draggingIndex: number, direction: 'row' | 'col'): { table: HTMLTableElement; cell: HTMLTableCellElement } | undefined {
+  if (cellPos == null) return
+  const table = getTableDOMByPos(view, cellPos)
+  if (!table) return
+  const cell = getTargetFirstCellDOM(table, draggingIndex, direction)
+  if (!cell) return
+  return { table, cell }
+}

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

@@ -0,0 +1,94 @@
+import {
+  createComputed,
+  useEffect,
+  type ConnectableElement,
+  type ReadonlySignal,
+  type Signal,
+} 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'
+import type { TableHandleDndContext } from '../context'
+
+export function useDrop(
+  host: ConnectableElement,
+  editor: ReadonlySignal<Editor | null>,
+  dndContext: Signal<TableHandleDndContext>,
+): void {
+  const dragging = createComputed(() => dndContext.get().dragging)
+
+  useEffect(host, () => {
+    const view = getSafeEditorView(editor.get())
+    if (!view || !view.editable) return
+
+    const ownerDocument = view.dom?.ownerDocument
+    if (!ownerDocument) return
+
+    const handleDrop = () => {
+      if (!dragging.peek()) return
+      const editorValue = editor.peek()
+      if (!editorValue) return
+      const { droppingIndex, draggingIndex, direction } = dndContext.peek()
+
+      // Validate indices
+      if (draggingIndex < 0 || droppingIndex < 0) {
+        console.warn('[prosekit] Invalid drag indices:', { draggingIndex, droppingIndex })
+        return
+      }
+
+      if (direction === 'row') {
+        editorValue.exec(moveTableRow({
+          from: draggingIndex,
+          to: droppingIndex,
+        }))
+        return
+      }
+      if (direction === 'col') {
+        editorValue.exec(moveTableColumn({
+          from: draggingIndex,
+          to: droppingIndex,
+        }))
+        return
+      }
+    }
+
+    // To make `drop` event work, we need to prevent the default behavior of the
+    // `dragover` event for drop zone. Here we set the whole document as the
+    // drop zone so that even the mouse moves outside the editor, the `drop`
+    // event will still be triggered.
+    const handleDragOver = (event: DragEvent) => {
+      if (!dragging.peek()) return
+      event.preventDefault()
+      const prev = dndContext.peek()
+
+      dndContext.set({
+        ...prev,
+        dragging: true,
+        x: event.clientX,
+        y: event.clientY,
+      })
+    }
+
+    const handleDragEnd = () => {
+      if (!dragging.peek()) return
+      const prev = dndContext.peek()
+      dndContext.set({
+        ...prev,
+        dragging: 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

@@ -0,0 +1,30 @@
+import type { ConnectableElement } from '@aria-ui/core'
+import { useEffect } from '@aria-ui/core'
+
+/**
+ * Returns a function that returns a 1x1 transparent image. This is used to
+ * prevent the browser from showing the default drag image. An earth icon in
+ * chrome is used as the default drag image. This image must be loaded before
+ * the dragStart event triggers.
+ *
+ * See https://stackoverflow.com/a/40923520
+ *
+ * @internal
+ */
+export function useEmptyImage(
+  host: ConnectableElement,
+): () => HTMLImageElement | undefined {
+  let image: HTMLImageElement | undefined
+
+  useEffect(host, () => {
+    image = new Image(1, 1)
+    image.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
+
+    return () => {
+      image?.remove()
+      image = undefined
+    }
+  })
+
+  return () => image
+}

package/src/components/table-handle/index.gen.ts

@@ -0,0 +1,37 @@
+// This file is generated by packages/dev/src/gen-components.ts
+
+export { TableHandleColumnRootElement } from './table-handle-column-root/element.gen'
+export { tableHandleColumnRootEvents, tableHandleColumnRootProps, type TableHandleColumnRootEvents, type TableHandleColumnRootProps } from './table-handle-column-root/types'
+export { useTableHandleColumnRoot } from './table-handle-column-root/setup'
+
+export { TableHandleColumnTriggerElement } from './table-handle-column-trigger/element.gen'
+export { tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, type TableHandleColumnTriggerEvents, type TableHandleColumnTriggerProps } from './table-handle-column-trigger/types'
+export { useTableHandleColumnTrigger } from './table-handle-column-trigger/setup'
+
+export { TableHandleDragPreviewElement } from './table-handle-drag-preview/element.gen'
+export { tableHandleDragPreviewEvents, tableHandleDragPreviewProps, type TableHandleDragPreviewEvents, type TableHandleDragPreviewProps } from './table-handle-drag-preview/types'
+export { useTableHandleDragPreview } from './table-handle-drag-preview/setup'
+
+export { TableHandleDropIndicatorElement } from './table-handle-drop-indicator/element.gen'
+export { tableHandleDropIndicatorEvents, tableHandleDropIndicatorProps, type TableHandleDropIndicatorEvents, type TableHandleDropIndicatorProps } from './table-handle-drop-indicator/types'
+export { useTableHandleDropIndicator } from './table-handle-drop-indicator/setup'
+
+export { TableHandlePopoverContentElement } from './table-handle-popover-content/element.gen'
+export { tableHandlePopoverContentEvents, tableHandlePopoverContentProps, type TableHandlePopoverContentEvents, type TableHandlePopoverContentProps } from './table-handle-popover-content/types'
+export { useTableHandlePopoverContent } from './table-handle-popover-content/setup'
+
+export { TableHandlePopoverItemElement } from './table-handle-popover-item/element.gen'
+export { tableHandlePopoverItemEvents, tableHandlePopoverItemProps, type TableHandlePopoverItemEvents, type TableHandlePopoverItemProps } from './table-handle-popover-item/types'
+export { useTableHandlePopoverItem } from './table-handle-popover-item/setup'
+
+export { TableHandleRootElement } from './table-handle-root/element.gen'
+export { tableHandleRootEvents, tableHandleRootProps, type TableHandleRootEvents, type TableHandleRootProps } from './table-handle-root/types'
+export { useTableHandleRoot } from './table-handle-root/setup'
+
+export { TableHandleRowRootElement } from './table-handle-row-root/element.gen'
+export { tableHandleRowRootEvents, tableHandleRowRootProps, type TableHandleRowRootEvents, type TableHandleRowRootProps } from './table-handle-row-root/types'
+export { useTableHandleRowRoot } from './table-handle-row-root/setup'
+
+export { TableHandleRowTriggerElement } from './table-handle-row-trigger/element.gen'
+export { tableHandleRowTriggerEvents, tableHandleRowTriggerProps, type TableHandleRowTriggerEvents, type TableHandleRowTriggerProps } from './table-handle-row-trigger/types'
+export { useTableHandleRowTrigger } from './table-handle-row-trigger/setup'

package/src/components/table-handle/table-handle-column-root/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandleColumnRoot } from "./setup"
+import { tableHandleColumnRootEvents, tableHandleColumnRootProps, type TableHandleColumnRootEvents, type TableHandleColumnRootProps } from "./types"
+
+const TableHandleColumnRootElementBase: BaseElementConstructor<TableHandleColumnRootProps> = defineCustomElement<
+  TableHandleColumnRootProps,
+  TableHandleColumnRootEvents
+>({
+  props: tableHandleColumnRootProps,
+  events: tableHandleColumnRootEvents,
+  setup: useTableHandleColumnRoot,
+})
+class TableHandleColumnRootElement extends TableHandleColumnRootElementBase {}
+
+registerCustomElement('prosekit-table-handle-column-root', TableHandleColumnRootElement)
+  
+export { TableHandleColumnRootElement }

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

@@ -0,0 +1,71 @@
+import {
+  createComputed,
+  createSignal,
+  useAttribute,
+  useEffect,
+  type ConnectableElement,
+  type SignalState,
+} from '@aria-ui/core'
+import {
+  menuRootProps,
+  useMenuRoot,
+  type MenuRootProps,
+} from '@aria-ui/menu/elements'
+import { useOverlayPositionerState } from '@aria-ui/overlay/elements'
+import { usePresence } from '@aria-ui/presence'
+
+import { getStateWithDefaults } from '../../../utils/get-default-state'
+import { getSafeEditorView } from '../../../utils/get-safe-editor-view'
+import { tableHandleRootContext } from '../context'
+
+import type { TableHandleColumnRootProps } from './types'
+
+/**
+ * @internal
+ */
+export function useTableHandleColumnRoot(
+  host: ConnectableElement,
+  { state }: { state: SignalState<TableHandleColumnRootProps> },
+): void {
+  const { editor, ...overlayState } = state
+
+  const rootContext = tableHandleRootContext.consume(host)
+
+  const colFirstCellPos = createComputed<number | undefined>(() => {
+    return rootContext.get()?.colFirstCellPos
+  })
+
+  const referenceCell = createComputed<HTMLElement | null>(() => {
+    const pos = colFirstCellPos.get()
+    const view = getSafeEditorView(editor.get())
+    if (!pos || !view) return null
+    return view.nodeDOM(pos) as HTMLElement | null
+  })
+
+  const contentOpen = createSignal(false)
+
+  // Close the menu when the hovering element is changed
+  // TODO: add a delay
+  useEffect(host, () => {
+    colFirstCellPos.get()
+    contentOpen.set(false)
+  })
+
+  useOverlayPositionerState(host, overlayState, {
+    reference: referenceCell,
+  })
+
+  const presence = createComputed(() => !!referenceCell.get())
+  useAttribute(host, 'data-state', () => (presence.get() ? 'open' : 'closed'))
+  usePresence(host, presence)
+
+  const menuRootState: SignalState<MenuRootProps> = getStateWithDefaults(
+    { open: contentOpen },
+    menuRootProps,
+  )
+
+  useMenuRoot(host, {
+    state: menuRootState,
+    emit: () => void 0,
+  })
+}

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

@@ -0,0 +1,76 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import {
+  overlayPositionerEvents,
+  overlayPositionerProps,
+  type OverlayPositionerEvents,
+  type OverlayPositionerProps,
+} from '@aria-ui/overlay'
+import type { Placement } from '@floating-ui/dom'
+import type { Editor } from '@prosekit/core'
+
+export interface TableHandleColumnRootProps extends Omit<OverlayPositionerProps, 'placement' | 'hoist' | 'flip' | 'shift' | 'hide'> {
+  /**
+   * The ProseKit editor instance.
+   *
+   * @default null
+   * @hidden
+   */
+  editor: Editor | null
+
+  /**
+   * The placement of the popover, relative to the hovered table cell.
+   *
+   * @default "top"
+   */
+  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 tableHandleColumnRootProps: PropDeclarations<TableHandleColumnRootProps> = Object.freeze({
+  ...overlayPositionerProps,
+  editor: { default: null },
+  placement: { default: 'top' },
+
+  // Enabling `hoist` will cause the popover to have a small delay when
+  // scrolling the page.
+  hoist: { default: false },
+
+  flip: { default: false },
+  shift: { default: false },
+  hide: { default: true },
+})
+
+/** @internal */
+export interface TableHandleColumnRootEvents extends OverlayPositionerEvents {}
+
+/** @internal */
+export const tableHandleColumnRootEvents: EventDeclarations<TableHandleColumnRootEvents> = overlayPositionerEvents

package/src/components/table-handle/table-handle-column-trigger/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandleColumnTrigger } from "./setup"
+import { tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, type TableHandleColumnTriggerEvents, type TableHandleColumnTriggerProps } from "./types"
+
+const TableHandleColumnTriggerElementBase: BaseElementConstructor<TableHandleColumnTriggerProps> = defineCustomElement<
+  TableHandleColumnTriggerProps,
+  TableHandleColumnTriggerEvents
+>({
+  props: tableHandleColumnTriggerProps,
+  events: tableHandleColumnTriggerEvents,
+  setup: useTableHandleColumnTrigger,
+})
+class TableHandleColumnTriggerElement extends TableHandleColumnTriggerElementBase {}
+
+registerCustomElement('prosekit-table-handle-column-trigger', TableHandleColumnTriggerElement)
+  
+export { TableHandleColumnTriggerElement }

package/src/components/table-handle/table-handle-column-trigger/setup.ts

@@ -0,0 +1,75 @@
+import {
+  useEffect,
+  useEventListener,
+  type ConnectableElement,
+  type SetupOptions,
+} from '@aria-ui/core'
+import { useMenuTrigger } from '@aria-ui/menu/elements'
+import { selectTableColumn } from '@prosekit/extensions/table'
+
+import {
+  tableHandleDndContext,
+  tableHandleRootContext,
+} from '../context'
+import { useEmptyImage } from '../hooks/use-empty-image'
+
+import type {
+  TableHandleColumnTriggerEvents,
+  TableHandleColumnTriggerProps,
+} from './types'
+
+/**
+ * @internal
+ */
+export function useTableHandleColumnTrigger(
+  host: ConnectableElement,
+  { state }: SetupOptions<TableHandleColumnTriggerProps, TableHandleColumnTriggerEvents>,
+): void {
+  useMenuTrigger(host)
+
+  const context = tableHandleRootContext.consume(host)
+
+  const dndContext = tableHandleDndContext.consume(host)
+
+  useEventListener(host, 'pointerdown', () => {
+    const editor = state.editor.peek()
+    const cellPos = context.peek()?.cellPos
+    if (!editor || !cellPos) return
+    editor.exec(selectTableColumn({ head: cellPos }))
+  })
+
+  useEffect(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)
+      }
+      dataTransfer.setData('application/x-prosekit-table-handle-drag', '')
+    }
+    const prev = dndContext.peek()
+    const index = context.peek()?.colIndex
+
+    if (index == null || index < 0) {
+      console.warn('[prosekit] Invalid column index for drag operation:', index)
+      event.preventDefault()
+      return
+    }
+
+    dndContext.set({
+      ...prev,
+      direction: 'col',
+      dragging: true,
+      draggingIndex: index,
+      startX: event.clientX,
+      startY: event.clientY,
+    })
+  })
+}

package/src/components/table-handle/table-handle-column-trigger/types.ts

@@ -0,0 +1,23 @@
+import type {
+  EventDeclarations,
+  PropDeclarations,
+} from '@aria-ui/core'
+import type { Editor } from '@prosekit/core'
+import type { defineTableCommands } from '@prosekit/extensions/table'
+
+type TableCommandsExtension = ReturnType<typeof defineTableCommands>
+
+export interface TableHandleColumnTriggerProps {
+  editor: Editor<TableCommandsExtension> | null
+}
+
+/** @internal */
+export const tableHandleColumnTriggerProps: PropDeclarations<TableHandleColumnTriggerProps> = {
+  editor: { default: null },
+}
+
+/** @internal */
+export interface TableHandleColumnTriggerEvents {}
+
+/** @internal */
+export const tableHandleColumnTriggerEvents: EventDeclarations<TableHandleColumnTriggerEvents> = {}

package/src/components/table-handle/table-handle-drag-preview/element.gen.ts

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandleDragPreview } from "./setup"
+import { tableHandleDragPreviewEvents, tableHandleDragPreviewProps, type TableHandleDragPreviewEvents, type TableHandleDragPreviewProps } from "./types"
+
+const TableHandleDragPreviewElementBase: BaseElementConstructor<TableHandleDragPreviewProps> = defineCustomElement<
+  TableHandleDragPreviewProps,
+  TableHandleDragPreviewEvents
+>({
+  props: tableHandleDragPreviewProps,
+  events: tableHandleDragPreviewEvents,
+  setup: useTableHandleDragPreview,
+})
+class TableHandleDragPreviewElement extends TableHandleDragPreviewElementBase {}
+
+registerCustomElement('prosekit-table-handle-drag-preview', TableHandleDragPreviewElement)
+  
+export { TableHandleDragPreviewElement }