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

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

@@ -1,64 +0,0 @@
-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.ts'
-import { useEmptyImage } from '../hooks/use-empty-image.ts'
-
-import type { TableHandleColumnTriggerEvents, TableHandleColumnTriggerProps } from './types.ts'
-
-/**
- * @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

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandleDragPreview } from "./setup.ts"
-import { tableHandleDragPreviewEvents, tableHandleDragPreviewProps, type TableHandleDragPreviewEvents, type TableHandleDragPreviewProps } from "./types.ts"
-
-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 }

package/src/components/table-handle/table-handle-drag-preview/setup.ts

@@ -1,57 +0,0 @@
-import { useEffect, type ConnectableElement, type SignalState } from '@aria-ui/core'
-
-import { assignStyles } from '../../../utils/assign-styles.ts'
-import { useInitDndPosition, type OnInitParams } from '../dnd.ts'
-
-import { clearPreviewDOM, createPreviewDOM } from './render-preview.ts'
-import type { TableHandleDragPreviewProps } from './types.ts'
-import { useUpdatePreviewPosition } from './updater.ts'
-
-/**
- * @internal
- */
-export function useTableHandleDragPreview(host: ConnectableElement, { state }: { state: SignalState<TableHandleDragPreviewProps> }): void {
-  const { editor } = state
-
-  useEffect(host, () => {
-    assignStyles(host, {
-      position: 'absolute',
-      // Make sure drop on preview will trigger drop event on the host
-      pointerEvents: 'none',
-    })
-  })
-
-  useInitDndPosition(host, editor, onInitPreviewPosition)
-
-  useUpdatePreviewPosition(host, editor)
-}
-
-function onInitPreviewPosition({ host, direction, dragging, table, cell, draggingIndex }: OnInitParams): void {
-  assignStyles(host, {
-    display: dragging ? 'block' : 'none',
-  })
-
-  if (!dragging) {
-    clearPreviewDOM(host)
-    return
-  }
-
-  createPreviewDOM(table, host, draggingIndex, direction)
-
-  const tableRect = table.getBoundingClientRect()
-  const cellRect = cell.getBoundingClientRect()
-
-  if (direction === 'col') {
-    assignStyles(host, {
-      width: `${cellRect.width}px`,
-      height: `${tableRect.height}px`,
-    })
-  }
-
-  if (direction === 'row') {
-    assignStyles(host, {
-      width: `${tableRect.width}px`,
-      height: `${cellRect.height}px`,
-    })
-  }
-}

package/src/components/table-handle/table-handle-drag-preview/types.ts

@@ -1,14 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import type { Editor } from '@prosekit/core'
-
-export interface TableHandleDragPreviewProps {
-  editor: Editor | null
-}
-
-export const tableHandleDragPreviewProps: PropDeclarations<TableHandleDragPreviewProps> = {
-  editor: { default: null },
-}
-
-export interface TableHandleDragPreviewEvents {}
-
-export const tableHandleDragPreviewEvents: EventDeclarations<TableHandleDragPreviewEvents> = {}

package/src/components/table-handle/table-handle-drag-preview/updater.ts

@@ -1,90 +0,0 @@
-import { createComputed, useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'
-import { computePosition, type ReferenceElement } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-
-import { assignStyles } from '../../../utils/assign-styles.ts'
-import { getSafeEditorView } from '../../../utils/get-safe-editor-view.ts'
-import { tableHandleDndContext, tableHandleRootContext } from '../context.ts'
-import { getDndRelatedDOMs } from '../dnd.ts'
-
-export function useUpdatePreviewPosition(host: ConnectableElement, editor: ReadonlySignal<Editor | null>): void {
-  const dndContext = tableHandleDndContext.consume(host)
-  const rootContext = tableHandleRootContext.consume(host)
-
-  const draggingSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.dragging
-  })
-
-  const clientXSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.x
-  })
-
-  const clientYSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.y
-  })
-
-  useEffect(host, () => {
-    const view = getSafeEditorView(editor.get())
-    if (!view) return
-
-    if (!draggingSignal.get()) return
-
-    const { draggingIndex, direction } = dndContext.peek()
-    const x = clientXSignal.get()
-    const y = clientYSignal.get()
-
-    const relatedDOMs = getDndRelatedDOMs(view, rootContext.peek()?.cellPos, draggingIndex, direction)
-    if (!relatedDOMs) return
-    const { cell } = relatedDOMs
-
-    let cancelled = false
-
-    void computePosition(
-      getVirtualElement(cell, x, y),
-      host,
-      { placement: direction === 'row' ? 'right' : 'bottom' },
-    ).then(({ x, y }) => {
-      if (cancelled) return
-
-      if (direction === 'row') {
-        assignStyles(host, {
-          top: `${y}px`,
-        })
-        return
-      }
-
-      if (direction === 'col') {
-        assignStyles(host, {
-          left: `${x}px`,
-        })
-        return
-      }
-    })
-
-    return () => {
-      cancelled = true
-    }
-  })
-}
-
-function getVirtualElement(cell: HTMLTableCellElement, x: number, y: number): ReferenceElement {
-  return {
-    contextElement: cell,
-    getBoundingClientRect: () => {
-      const rect = cell.getBoundingClientRect()
-      return {
-        width: rect.width,
-        height: rect.height,
-        right: x + rect.width / 2,
-        bottom: y + rect.height / 2,
-        top: y - rect.height / 2,
-        left: x - rect.width / 2,
-        x: x - rect.width / 2,
-        y: y - rect.height / 2,
-      }
-    },
-  }
-}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandleDropIndicator } from "./setup.ts"
-import { tableHandleDropIndicatorEvents, tableHandleDropIndicatorProps, type TableHandleDropIndicatorEvents, type TableHandleDropIndicatorProps } from "./types.ts"
-
-const TableHandleDropIndicatorElementBase: BaseElementConstructor<TableHandleDropIndicatorProps> = defineCustomElement<
-  TableHandleDropIndicatorProps,
-  TableHandleDropIndicatorEvents
->({
-  props: tableHandleDropIndicatorProps,
-  events: tableHandleDropIndicatorEvents,
-  setup: useTableHandleDropIndicator,
-})
-class TableHandleDropIndicatorElement extends TableHandleDropIndicatorElementBase {}
-
-registerCustomElement('prosekit-table-handle-drop-indicator', TableHandleDropIndicatorElement)
-  
-export { TableHandleDropIndicatorElement }

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

@@ -1,52 +0,0 @@
-import { useEffect, type ConnectableElement, type SignalState } from '@aria-ui/core'
-
-import { assignStyles } from '../../../utils/assign-styles.ts'
-import { useInitDndPosition, type OnInitParams } from '../dnd.ts'
-
-import type { TableHandleDropIndicatorProps } from './types.ts'
-import { useUpdateIndicatorPosition } from './updater.ts'
-
-const HANDLE_WIDTH = 2
-
-/**
- * @internal
- */
-export function useTableHandleDropIndicator(
-  host: ConnectableElement,
-  { state }: { state: SignalState<TableHandleDropIndicatorProps> },
-): void {
-  const { editor } = state
-
-  useEffect(host, () => {
-    assignStyles(host, {
-      pointerEvents: 'none',
-      position: 'absolute',
-    })
-  })
-
-  useInitDndPosition(host, editor, onInitIndicatorPosition)
-
-  useUpdateIndicatorPosition(host, editor, 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`,
-    })
-  }
-}

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

@@ -1,15 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import type { Editor } from '@prosekit/core'
-import type { TableCommandsExtension } from '@prosekit/extensions/table'
-
-export interface TableHandleDropIndicatorProps {
-  editor: Editor<TableCommandsExtension> | null
-}
-
-export const tableHandleDropIndicatorProps: PropDeclarations<TableHandleDropIndicatorProps> = {
-  editor: { default: null },
-}
-
-export interface TableHandleDropIndicatorEvents {}
-
-export const tableHandleDropIndicatorEvents: EventDeclarations<TableHandleDropIndicatorEvents> = {}

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

@@ -1,96 +0,0 @@
-import { createComputed, useEffect, type ConnectableElement, type ReadonlySignal } from '@aria-ui/core'
-import { computePosition, offset } from '@floating-ui/dom'
-import type { Editor } from '@prosekit/core'
-
-import { assignStyles } from '../../../utils/assign-styles.ts'
-import { getSafeEditorView } from '../../../utils/get-safe-editor-view.ts'
-import { tableHandleDndContext, tableHandleRootContext } from '../context.ts'
-import { getDndRelatedDOMs } from '../dnd.ts'
-
-import { getDragOverColumn, getDragOverRow } from './calc-drag-over.ts'
-
-export function useUpdateIndicatorPosition(host: ConnectableElement, editor: ReadonlySignal<Editor | null>, handleWidth: number): void {
-  const dndContext = tableHandleDndContext.consume(host)
-  const rootContext = tableHandleRootContext.consume(host)
-
-  const draggingSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.dragging
-  })
-
-  const clientXSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.x
-  })
-
-  const clientYSignal = createComputed(() => {
-    const context = dndContext.get()
-    return context.y
-  })
-
-  const startXSignal = createComputed(() => {
-    return dndContext.get().startX
-  })
-
-  const startYSignal = createComputed(() => {
-    return dndContext.get().startY
-  })
-
-  useEffect(host, () => {
-    const view = getSafeEditorView(editor.get())
-    if (!view) return
-
-    if (!draggingSignal.get()) return
-
-    const { draggingIndex, direction } = dndContext.peek()
-    const x = clientXSignal.get()
-    const y = clientYSignal.get()
-
-    const relatedDOMs = getDndRelatedDOMs(view, rootContext.peek()?.cellPos, draggingIndex, direction)
-    if (!relatedDOMs) return
-    const { table } = relatedDOMs
-
-    let cancelled = false
-    const cleanup = () => {
-      cancelled = true
-    }
-
-    if (direction === 'col') {
-      const direction = startXSignal.get() > x ? 'left' : 'right'
-      const dragOverColumn = getDragOverColumn(table, x)
-
-      if (dragOverColumn) {
-        const [col, index] = dragOverColumn
-        dndContext.set({ ...dndContext.peek(), droppingIndex: index })
-        void computePosition(col, host, {
-          placement: direction === 'left' ? 'left' : 'right',
-          middleware: [offset(direction === 'left' ? -1 * handleWidth : 0)],
-        }).then(({ x }) => {
-          if (cancelled) return
-          assignStyles(host, { left: `${x}px` })
-        })
-      }
-
-      return cleanup
-    }
-
-    if (direction === 'row') {
-      const direction = startYSignal.get() > y ? 'up' : 'down'
-      const dragOverRow = getDragOverRow(table, y)
-
-      if (dragOverRow) {
-        const [row, index] = dragOverRow
-        dndContext.set({ ...dndContext.peek(), droppingIndex: index })
-        void computePosition(row, host, {
-          placement: direction === 'up' ? 'top' : 'bottom',
-          middleware: [offset(direction === 'up' ? -1 * handleWidth : 0)],
-        }).then(({ y }) => {
-          if (cancelled) return
-          assignStyles(host, { top: `${y}px` })
-        })
-      }
-
-      return cleanup
-    }
-  })
-}

package/src/components/table-handle/table-handle-popover-content/element.gen.ts

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandlePopoverContent } from "./setup.ts"
-import { tableHandlePopoverContentEvents, tableHandlePopoverContentProps, type TableHandlePopoverContentEvents, type TableHandlePopoverContentProps } from "./types.ts"
-
-const TableHandlePopoverContentElementBase: BaseElementConstructor<TableHandlePopoverContentProps> = defineCustomElement<
-  TableHandlePopoverContentProps,
-  TableHandlePopoverContentEvents
->({
-  props: tableHandlePopoverContentProps,
-  events: tableHandlePopoverContentEvents,
-  setup: useTableHandlePopoverContent,
-})
-class TableHandlePopoverContentElement extends TableHandlePopoverContentElementBase {}
-
-registerCustomElement('prosekit-table-handle-popover-content', TableHandlePopoverContentElement)
-  
-export { TableHandlePopoverContentElement }

package/src/components/table-handle/table-handle-popover-content/setup.ts

@@ -1,83 +0,0 @@
-import {
-  createComputed,
-  createSignal,
-  useEffect,
-  type ConnectableElement,
-  type ReadonlySignal,
-  type SetupOptions,
-  type SignalState,
-  type TypedEventTarget,
-} from '@aria-ui/core'
-import { menuContentProps, useMenuContent, type MenuContentProps } from '@aria-ui/menu/elements'
-
-import { getStateWithDefaults } from '../../../utils/get-default-state.ts'
-import { tableHandleRootContext } from '../context.ts'
-
-import type { TableHandlePopoverContentEvents, TableHandlePopoverContentProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useTableHandlePopoverContent(
-  host: ConnectableElement,
-  {
-    state,
-    emit,
-  }: SetupOptions<
-    TableHandlePopoverContentProps,
-    TableHandlePopoverContentEvents
-  >,
-): void {
-  const rootContext = tableHandleRootContext.consume(host)
-  const open = createComputed(() => !!rootContext.get())
-  const keyDownTarget = useKeyDownTarget(host, open)
-
-  const menuContentState: SignalState<MenuContentProps> = getStateWithDefaults(
-    {
-      placement: state.placement,
-      offset: state.offset,
-      eventTarget: createSignal(keyDownTarget),
-    },
-    menuContentProps,
-  )
-
-  useMenuContent(host, { state: menuContentState, emit })
-}
-
-function useKeyDownTarget(
-  element: ConnectableElement,
-  open: ReadonlySignal<boolean>,
-): TypedEventTarget<'keydown'> {
-  const keydownHandlers: Array<(event: KeyboardEvent) => void> = []
-
-  useEffect(element, () => {
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (event.isComposing || event.defaultPrevented || !open.get()) {
-        return false
-      }
-      keydownHandlers.forEach((handler) => handler(event))
-    }
-
-    document.addEventListener('keydown', handleKeydown)
-
-    return () => {
-      document.removeEventListener('keydown', handleKeydown)
-    }
-  })
-
-  return {
-    addEventListener: (type, listener) => {
-      if (type === 'keydown') {
-        keydownHandlers.push(listener)
-      }
-    },
-    removeEventListener: (type, listener) => {
-      if (type === 'keydown') {
-        const index = keydownHandlers.indexOf(listener)
-        if (index !== -1) {
-          keydownHandlers.splice(index, 1)
-        }
-      }
-    },
-  }
-}

package/src/components/table-handle/table-handle-popover-content/types.ts

@@ -1,32 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import { menuContentEvents, menuContentProps, type MenuContentEvents, type MenuContentProps } from '@aria-ui/menu/elements'
-import type { Editor } from '@prosekit/core'
-
-export interface TableHandlePopoverContentProps extends Omit<MenuContentProps, 'placement' | 'offset'> {
-  /**
-   * @default 'bottom-start'
-   */
-  placement: MenuContentProps['placement']
-
-  /**
-   * @default {mainAxis: -4, crossAxis: 4}
-   */
-  offset: MenuContentProps['offset']
-
-  editor: Editor | null
-}
-
-/** @internal */
-export const tableHandlePopoverContentProps: PropDeclarations<TableHandlePopoverContentProps> = Object.freeze({
-  ...menuContentProps,
-  placement: { default: 'right-start' },
-  offset: { default: { mainAxis: -4, crossAxis: 4 } },
-  editor: { default: null },
-})
-
-export interface TableHandlePopoverContentEvents extends MenuContentEvents {}
-
-/** @internal */
-export const tableHandlePopoverContentEvents: EventDeclarations<TableHandlePopoverContentEvents> = Object.freeze({
-  ...menuContentEvents,
-})

package/src/components/table-handle/table-handle-popover-item/element.gen.ts

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandlePopoverItem } from "./setup.ts"
-import { tableHandlePopoverItemEvents, tableHandlePopoverItemProps, type TableHandlePopoverItemEvents, type TableHandlePopoverItemProps } from "./types.ts"
-
-const TableHandlePopoverItemElementBase: BaseElementConstructor<TableHandlePopoverItemProps> = defineCustomElement<
-  TableHandlePopoverItemProps,
-  TableHandlePopoverItemEvents
->({
-  props: tableHandlePopoverItemProps,
-  events: tableHandlePopoverItemEvents,
-  setup: useTableHandlePopoverItem,
-})
-class TableHandlePopoverItemElement extends TableHandlePopoverItemElementBase {}
-
-registerCustomElement('prosekit-table-handle-popover-item', TableHandlePopoverItemElement)
-  
-export { TableHandlePopoverItemElement }

package/src/components/table-handle/table-handle-popover-item/setup.ts

@@ -1,17 +0,0 @@
-import type { ConnectableElement, SetupOptions } from '@aria-ui/core'
-import { useMenuItem } from '@aria-ui/menu/elements'
-
-import type { TableHandlePopoverItemEvents, TableHandlePopoverItemProps } from './types.ts'
-
-/**
- * @internal
- */
-export function useTableHandlePopoverItem(
-  element: ConnectableElement,
-  {
-    state,
-    emit,
-  }: SetupOptions<TableHandlePopoverItemProps, TableHandlePopoverItemEvents>,
-): void {
-  useMenuItem(element, { state, emit })
-}

package/src/components/table-handle/table-handle-popover-item/types.ts

@@ -1,16 +0,0 @@
-import type { EventDeclarations, PropDeclarations } from '@aria-ui/core'
-import { menuItemEvents, menuItemProps, type MenuItemEvents, type MenuItemProps } from '@aria-ui/menu'
-
-export interface TableHandlePopoverItemProps extends MenuItemProps {}
-
-/** @internal */
-export const tableHandlePopoverItemProps: PropDeclarations<TableHandlePopoverItemProps> = {
-  ...menuItemProps,
-}
-
-export interface TableHandlePopoverItemEvents extends MenuItemEvents {}
-
-/** @internal */
-export const tableHandlePopoverItemEvents: EventDeclarations<TableHandlePopoverItemEvents> = {
-  ...menuItemEvents,
-}

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandleRoot } from "./setup.ts"
-import { tableHandleRootEvents, tableHandleRootProps, type TableHandleRootEvents, type TableHandleRootProps } from "./types.ts"
-
-const TableHandleRootElementBase: BaseElementConstructor<TableHandleRootProps> = defineCustomElement<
-  TableHandleRootProps,
-  TableHandleRootEvents
->({
-  props: tableHandleRootProps,
-  events: tableHandleRootEvents,
-  setup: useTableHandleRoot,
-})
-class TableHandleRootElement extends TableHandleRootElementBase {}
-
-registerCustomElement('prosekit-table-handle-root', TableHandleRootElement)
-  
-export { TableHandleRootElement }