@prosekit/web 0.7.2 → 0.7.4

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

@@ -0,0 +1,80 @@
+import { assignStyles } from '../../../utils/assign-styles'
+import {
+  cloneElement,
+  deepCloneElement,
+} from '../../../utils/clone-element'
+import { fadeColor } from '../../../utils/fade-color'
+import { getEffectiveBackgroundColor } from '../../../utils/get-effective-background-color'
+import { injectStyle } from '../../../utils/inject-style'
+
+export function clearPreviewDOM(previewRoot: HTMLElement): void {
+  while (previewRoot.firstChild) {
+    previewRoot.removeChild(previewRoot.firstChild)
+  }
+}
+
+export function createPreviewDOM(
+  table: HTMLTableElement,
+  previewRoot: HTMLElement,
+  index: number,
+  direction: 'row' | 'col',
+): void {
+  clearPreviewDOM(previewRoot)
+
+  const [previewTable, previewTableStyle] = cloneElement(table)
+  injectStyle(previewRoot, previewTableStyle)
+  unsetSize(previewTable)
+
+  const tableBody = table.querySelector('tbody')
+  const [previewTableBody, previewTableBodyStyle] = tableBody
+    ? cloneElement(tableBody)
+    : [table.ownerDocument.createElement('tbody'), '']
+  injectStyle(previewRoot, previewTableBodyStyle)
+  unsetSize(previewTableBody)
+
+  // Get effective background color and apply it with some opacity
+  const backgroundColor = getEffectiveBackgroundColor(table)
+  if (backgroundColor) {
+    const backgroundColorWithOpacity = fadeColor(backgroundColor, 0.8)
+    if (backgroundColorWithOpacity) {
+      assignStyles(previewTable, { backgroundColor: backgroundColorWithOpacity })
+    }
+  }
+
+  previewTable.appendChild(previewTableBody)
+  previewRoot.appendChild(previewTable)
+
+  const rows = table.querySelectorAll('tr')
+
+  if (direction === 'row') {
+    const row = rows[index]
+    const [previewRow, previewRowStyle] = deepCloneElement(row)
+    injectStyle(previewRoot, previewRowStyle)
+    previewTableBody.appendChild(previewRow)
+  } else {
+    rows.forEach((row) => {
+      const [previewRow, previewRowStyle] = cloneElement(row)
+      injectStyle(previewRoot, previewRowStyle)
+      unsetSize(previewRow)
+      const cells = row.querySelectorAll('td')
+      const cell = cells[index]
+      if (cell) {
+        const [previewCell, previewCellStyle] = deepCloneElement(cell)
+        injectStyle(previewRoot, previewCellStyle)
+        previewRow.appendChild(previewCell)
+        previewTableBody.appendChild(previewRow)
+      }
+    })
+  }
+}
+
+function unsetSize(element: HTMLElement) {
+  assignStyles(element, {
+    width: 'unset',
+    height: 'unset',
+    minWidth: 'unset',
+    minHeight: 'unset',
+    maxWidth: 'unset',
+    maxHeight: 'unset',
+  })
+}

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

@@ -0,0 +1,67 @@
+import {
+  useEffect,
+  type ConnectableElement,
+  type SignalState,
+} from '@aria-ui/core'
+
+import { assignStyles } from '../../../utils/assign-styles'
+import {
+  useInitDndPosition,
+  type OnInitParams,
+} from '../dnd'
+
+import {
+  clearPreviewDOM,
+  createPreviewDOM,
+} from './render-preview'
+import type { TableHandleDragPreviewProps } from './types'
+import { useUpdatePreviewPosition } from './updater'
+
+/**
+ * @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

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

@@ -0,0 +1,101 @@
+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'
+import { getSafeEditorView } from '../../../utils/get-safe-editor-view'
+import {
+  tableHandleDndContext,
+  tableHandleRootContext,
+} from '../context'
+import { getDndRelatedDOMs } from '../dnd'
+
+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/calc-drag-over.ts

@@ -0,0 +1,44 @@
+function findDragOverElement(
+  elements: Element[],
+  pointer: number,
+  axis: 'x' | 'y',
+): [Element, number] | undefined {
+  const startProp = axis === 'x' ? 'left' : 'top'
+  const endProp = axis === 'x' ? 'right' : 'bottom'
+  const lastIndex = elements.length - 1
+
+  const index = elements.findIndex((el, index) => {
+    const rect = el.getBoundingClientRect()
+    const boundaryStart = rect[startProp]
+    const boundaryEnd = rect[endProp]
+
+    // The pointer is within the boundary of the current element.
+    if (boundaryStart <= pointer && pointer <= boundaryEnd) return true
+    // The pointer is beyond the last element.
+    if (index === lastIndex && pointer > boundaryEnd) return true
+    // The pointer is before the first element.
+    if (index === 0 && pointer < boundaryStart) return true
+
+    return false
+  })
+
+  return index >= 0 ? [elements[index], index] : undefined
+}
+
+export function getDragOverColumn(
+  table: HTMLTableElement,
+  pointerX: number,
+): [element: Element, index: number] | undefined {
+  const firstRow = table.querySelector('tr')
+  if (!firstRow) return
+  const cells = Array.from(firstRow.children)
+  return findDragOverElement(cells, pointerX, 'x')
+}
+
+export function getDragOverRow(
+  table: HTMLTableElement,
+  pointerY: number,
+): [element: Element, index: number] | undefined {
+  const rows = Array.from(table.querySelectorAll('tr'))
+  return findDragOverElement(rows, pointerY, 'y')
+}

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandleDropIndicator } from "./setup"
+import { tableHandleDropIndicatorEvents, tableHandleDropIndicatorProps, type TableHandleDropIndicatorEvents, type TableHandleDropIndicatorProps } from "./types"
+
+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

@@ -0,0 +1,56 @@
+import {
+  useEffect,
+  type ConnectableElement,
+  type SignalState,
+} from '@aria-ui/core'
+
+import { assignStyles } from '../../../utils/assign-styles'
+import {
+  useInitDndPosition,
+  type OnInitParams,
+} from '../dnd'
+
+import type { TableHandleDropIndicatorProps } from './types'
+import { useUpdateIndicatorPosition } from './updater'
+
+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

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

@@ -0,0 +1,110 @@
+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'
+import { getSafeEditorView } from '../../../utils/get-safe-editor-view'
+import {
+  tableHandleDndContext,
+  tableHandleRootContext,
+} from '../context'
+import { getDndRelatedDOMs } from '../dnd'
+
+import {
+  getDragOverColumn,
+  getDragOverRow,
+} from './calc-drag-over'
+
+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
+    let 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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandlePopoverContent } from "./setup"
+import { tableHandlePopoverContentEvents, tableHandlePopoverContentProps, type TableHandlePopoverContentEvents, type TableHandlePopoverContentProps } from "./types"
+
+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

@@ -0,0 +1,90 @@
+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'
+import { tableHandleRootContext } from '../context'
+
+import type {
+  TableHandlePopoverContentEvents,
+  TableHandlePopoverContentProps,
+} from './types'
+
+/**
+ * @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

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

@@ -0,0 +1,18 @@
+import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
+
+import { useTableHandlePopoverItem } from "./setup"
+import { tableHandlePopoverItemEvents, tableHandlePopoverItemProps, type TableHandlePopoverItemEvents, type TableHandlePopoverItemProps } from "./types"
+
+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 }