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

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

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

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandleColumnRoot } from "./setup.ts"
-import { tableHandleColumnRootEvents, tableHandleColumnRootProps, type TableHandleColumnRootEvents, type TableHandleColumnRootProps } from "./types.ts"
-
-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

@@ -1,60 +0,0 @@
-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.ts'
-import { getSafeEditorView } from '../../../utils/get-safe-editor-view.ts'
-import { tableHandleRootContext } from '../context.ts'
-
-import type { TableHandleColumnRootProps } from './types.ts'
-
-/**
- * @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

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

@@ -1,18 +0,0 @@
-import { defineCustomElement, registerCustomElement, type BaseElementConstructor } from "@aria-ui/core"
-
-import { useTableHandleColumnTrigger } from "./setup.ts"
-import { tableHandleColumnTriggerEvents, tableHandleColumnTriggerProps, type TableHandleColumnTriggerEvents, type TableHandleColumnTriggerProps } from "./types.ts"
-
-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

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