@allbluecn/web-app 0.6.2 → 0.7.0

package/src/components/tiptap/node/table-node/extensions/table-handle/table-handle-plugin.ts

@@ -0,0 +1,863 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { Editor } from "@tiptap/core"
+import type { Node as TiptapNode } from "@tiptap/pm/model"
+import type { PluginView, Transaction } from "@tiptap/pm/state"
+import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state"
+import { Decoration, DecorationSet, type EditorView } from "@tiptap/pm/view"
+import {
+  CellSelection,
+  moveTableColumn,
+  moveTableRow,
+  TableMap,
+} from "@tiptap/pm/tables"
+import {
+  clamp,
+  domCellAround,
+  getCellIndicesFromDOM,
+  getColumnCells,
+  getIndexCoordinates,
+  getRowCells,
+  getTableFromDOM,
+  isHTMLElement,
+  isTableNode,
+  safeClosest,
+  selectCellsByCoords,
+} from "../../lib/tiptap-table-utils.ts"
+import { isValidPosition } from "../../../../lib/utils.ts"
+import { createTableDragImage } from "./helpers/create-image.ts"
+
+export type TableHandlesState = {
+  show: boolean
+  showAddOrRemoveRowsButton: boolean
+  showAddOrRemoveColumnsButton: boolean
+  referencePosCell?: DOMRect
+  referencePosTable: DOMRect
+  block: TiptapNode
+  blockPos: number
+  colIndex: number | undefined
+  rowIndex: number | undefined
+  draggingState?:
+    | {
+        draggedCellOrientation: "row" | "col"
+        originalIndex: number
+        mousePos: number
+        initialOffset: number
+      }
+    | undefined
+  widgetContainer: HTMLElement | undefined
+}
+
+function hideElements(selector: string, rootEl: Document | ShadowRoot) {
+  rootEl.querySelectorAll<HTMLElement>(selector).forEach((el) => {
+    el.style.visibility = "hidden"
+  })
+}
+
+export const tableHandlePluginKey = new PluginKey("tableHandlePlugin")
+
+class TableHandleView implements PluginView {
+  public editor: Editor
+  public editorView: EditorView
+
+  public state: TableHandlesState | undefined = undefined
+  public menuFrozen = false
+  public mouseState: "up" | "down" | "selecting" = "up"
+  public tableId: string | undefined
+  public tablePos: number | undefined
+  public tableElement: HTMLElement | undefined
+
+  public emitUpdate: () => void
+
+  constructor(
+    editor: Editor,
+    editorView: EditorView,
+    emitUpdate: (state: TableHandlesState) => void
+  ) {
+    this.editor = editor
+    this.editorView = editorView
+    this.emitUpdate = () => this.state && emitUpdate(this.state)
+
+    this.editorView.dom.addEventListener("mousemove", this.mouseMoveHandler)
+    this.editorView.dom.addEventListener("mousedown", this.viewMousedownHandler)
+    window.addEventListener("mouseup", this.mouseUpHandler)
+
+    this.editorView.root.addEventListener(
+      "dragover",
+      this.dragOverHandler as EventListener
+    )
+    this.editorView.root.addEventListener(
+      "drop",
+      this.dropHandler as unknown as EventListener
+    )
+  }
+
+  private viewMousedownHandler = (event: MouseEvent) => {
+    this.mouseState = "down"
+
+    const { state, view } = this.editor
+    if (!(state.selection instanceof CellSelection) || this.editor.isFocused)
+      return
+
+    const posInfo = view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    })
+    if (!posInfo) return
+
+    const $pos = state.doc.resolve(posInfo.pos)
+    const { nodes } = state.schema
+    let paraDepth = -1
+    let inTableCell = false
+
+    for (let d = $pos.depth; d >= 0; d--) {
+      const node = $pos.node(d)
+      if (
+        !inTableCell &&
+        (node.type === nodes.tableCell || node.type === nodes.tableHeader)
+      ) {
+        inTableCell = true
+      }
+      if (paraDepth === -1 && node.type === nodes.paragraph) {
+        paraDepth = d
+      }
+      if (inTableCell && paraDepth !== -1) break
+    }
+
+    if (!inTableCell || paraDepth === -1) return
+
+    const from = $pos.start(paraDepth)
+    const to = $pos.end(paraDepth)
+    const nextSel = TextSelection.create(state.doc, from, to)
+    if (state.selection.eq(nextSel)) return
+
+    view.dispatch(state.tr.setSelection(nextSel))
+    view.focus()
+  }
+
+  private mouseUpHandler = (event: MouseEvent) => {
+    this.mouseState = "up"
+    this.mouseMoveHandler(event)
+  }
+
+  private mouseMoveHandler = (event: MouseEvent) => {
+    if (this.menuFrozen || this.mouseState === "selecting") return
+
+    const target = event.target
+    if (!isHTMLElement(target) || !this.editorView.dom.contains(target)) return
+
+    this._handleMouseMoveNow(event)
+  }
+
+  private hideHandles() {
+    if (!this.state?.show) return
+
+    this.state = {
+      ...this.state,
+      show: false,
+      showAddOrRemoveRowsButton: false,
+      showAddOrRemoveColumnsButton: false,
+      colIndex: undefined,
+      rowIndex: undefined,
+      referencePosCell: undefined,
+    }
+    this.emitUpdate()
+  }
+
+  private _handleMouseMoveNow(event: MouseEvent) {
+    const around = domCellAround(event.target as Element)
+
+    // Hide handles while selecting inside a cell
+    if (
+      around?.type === "cell" &&
+      this.mouseState === "down" &&
+      !this.state?.draggingState
+    ) {
+      this.mouseState = "selecting"
+      this.hideHandles()
+      return
+    }
+
+    if (!around || !this.editor.isEditable) {
+      this.hideHandles()
+      return
+    }
+
+    const tbody = around.tbodyNode
+    if (!tbody) return
+
+    const tableRect = tbody.getBoundingClientRect()
+    const coords = this.editor.view.posAtCoords({
+      left: event.clientX,
+      top: event.clientY,
+    })
+    if (!coords) return
+
+    // Find the table node at this position
+    const $pos = this.editor.view.state.doc.resolve(coords.pos)
+    let blockInfo: { node: TiptapNode; pos: number } | undefined
+    for (let d = $pos.depth; d >= 0; d--) {
+      const node = $pos.node(d)
+      if (isTableNode(node)) {
+        blockInfo = { node, pos: d === 0 ? 0 : $pos.before(d) }
+        break
+      }
+    }
+    if (!blockInfo || blockInfo.node.type.name !== "table") return
+
+    this.tableElement = this.editor.view.nodeDOM(blockInfo.pos) as
+      | HTMLElement
+      | undefined
+    this.tablePos = blockInfo.pos
+    this.tableId = blockInfo.node.attrs.id
+
+    const wrapper = safeClosest<HTMLElement>(around.domNode, ".tableWrapper")
+    const widgetContainer = wrapper?.querySelector(".table-controls") as
+      | HTMLElement
+      | undefined
+
+    // Hovering around the table (outside cells)
+    if (around.type === "wrapper") {
+      const below =
+        event.clientY >= tableRect.bottom - 1 &&
+        event.clientY < tableRect.bottom + 20
+      const right =
+        event.clientX >= tableRect.right - 1 &&
+        event.clientX < tableRect.right + 20
+      const cursorBeyondRightOrBottom =
+        event.clientX > tableRect.right || event.clientY > tableRect.bottom
+
+      this.state = {
+        ...this.state,
+        show: true,
+        showAddOrRemoveRowsButton: below,
+        showAddOrRemoveColumnsButton: right,
+        referencePosTable: tableRect,
+        block: blockInfo.node,
+        blockPos: blockInfo.pos,
+        widgetContainer,
+        colIndex: cursorBeyondRightOrBottom ? undefined : this.state?.colIndex,
+        rowIndex: cursorBeyondRightOrBottom ? undefined : this.state?.rowIndex,
+        referencePosCell: cursorBeyondRightOrBottom
+          ? undefined
+          : this.state?.referencePosCell,
+      }
+    } else {
+      // Hovering over a cell
+      const cellPosition = getCellIndicesFromDOM(
+        around.domNode as HTMLTableCellElement,
+        blockInfo.node,
+        this.editor
+      )
+      if (!cellPosition) return
+
+      const { rowIndex, colIndex } = cellPosition
+      const cellRect = (around.domNode as HTMLElement).getBoundingClientRect()
+      const lastRowIndex = blockInfo.node.content.childCount - 1
+      const lastColIndex =
+        (blockInfo.node.content.firstChild?.content.childCount ?? 0) - 1
+
+      // Skip update if same cell
+      if (
+        this.state?.show &&
+        this.tableId === blockInfo.node.attrs.id &&
+        this.state.rowIndex === rowIndex &&
+        this.state.colIndex === colIndex
+      ) {
+        return
+      }
+
+      this.state = {
+        show: true,
+        showAddOrRemoveColumnsButton: colIndex === lastColIndex,
+        showAddOrRemoveRowsButton: rowIndex === lastRowIndex,
+        referencePosTable: tableRect,
+        block: blockInfo.node,
+        blockPos: blockInfo.pos,
+        draggingState: undefined,
+        referencePosCell: cellRect,
+        colIndex,
+        rowIndex,
+        widgetContainer,
+      }
+    }
+
+    this.emitUpdate()
+    return false
+  }
+
+  dragOverHandler = (event: DragEvent) => {
+    if (this.state?.draggingState === undefined) {
+      return
+    }
+
+    event.preventDefault()
+    event.dataTransfer!.dropEffect = "move"
+
+    hideElements(
+      ".prosemirror-dropcursor-block, .prosemirror-dropcursor-inline",
+      this.editorView.root
+    )
+
+    // The mouse cursor coordinates, bounded to the table's bounding box.
+    const {
+      left: tableLeft,
+      right: tableRight,
+      top: tableTop,
+      bottom: tableBottom,
+    } = this.state.referencePosTable
+
+    const boundedMouseCoords = {
+      left: clamp(event.clientX, tableLeft + 1, tableRight - 1),
+      top: clamp(event.clientY, tableTop + 1, tableBottom - 1),
+    }
+
+    // Gets the table cell element
+    const tableCellElements = this.editorView.root
+      .elementsFromPoint(boundedMouseCoords.left, boundedMouseCoords.top)
+      .filter((element) => element.tagName === "TD" || element.tagName === "TH")
+    if (tableCellElements.length === 0) {
+      return
+    }
+    const tableCellElement = tableCellElements[0]
+    if (!isHTMLElement(tableCellElement)) {
+      return
+    }
+
+    const cellPosition = getCellIndicesFromDOM(
+      tableCellElement as HTMLTableCellElement,
+      this.state.block,
+      this.editor
+    )
+    if (!cellPosition) return
+
+    const { rowIndex, colIndex } = cellPosition
+
+    // Check what changed
+    const oldIndex =
+      this.state.draggingState.draggedCellOrientation === "row"
+        ? this.state.rowIndex
+        : this.state.colIndex
+    const newIndex =
+      this.state.draggingState.draggedCellOrientation === "row"
+        ? rowIndex
+        : colIndex
+    const dispatchDecorationsTransaction = newIndex !== oldIndex
+
+    const mousePos =
+      this.state.draggingState.draggedCellOrientation === "row"
+        ? boundedMouseCoords.top
+        : boundedMouseCoords.left
+
+    // Check if anything needs updating
+    const cellChanged =
+      this.state.rowIndex !== rowIndex || this.state.colIndex !== colIndex
+    const mousePosChanged = this.state.draggingState.mousePos !== mousePos
+
+    if (cellChanged || mousePosChanged) {
+      this.state = {
+        ...this.state,
+        rowIndex: rowIndex,
+        colIndex: colIndex,
+        referencePosCell: tableCellElement.getBoundingClientRect(),
+        draggingState: {
+          ...this.state.draggingState,
+          mousePos: mousePos,
+        },
+      }
+
+      this.emitUpdate()
+    }
+
+    // Dispatch decorations transaction if needed
+    if (dispatchDecorationsTransaction) {
+      this.editor.view.dispatch(
+        this.editor.state.tr.setMeta(tableHandlePluginKey, true)
+      )
+    }
+  }
+
+  dropHandler = () => {
+    this.mouseState = "up"
+
+    const st = this.state
+    if (!st?.draggingState) return false
+
+    const { draggingState, rowIndex, colIndex, blockPos } = st
+    if (!isValidPosition(blockPos)) return false
+
+    if (
+      (draggingState.draggedCellOrientation === "row" &&
+        rowIndex === undefined) ||
+      (draggingState.draggedCellOrientation === "col" && colIndex === undefined)
+    ) {
+      throw new Error(
+        "Attempted to drop table row or column, but no table block was hovered prior."
+      )
+    }
+
+    const isRow = draggingState.draggedCellOrientation === "row"
+    const orientation = isRow ? "row" : "column"
+    const destIndex = isRow ? rowIndex! : colIndex!
+
+    const cellCoords = getIndexCoordinates({
+      editor: this.editor,
+      index: draggingState.originalIndex,
+      orientation,
+      tablePos: blockPos,
+    })
+    if (!cellCoords) return false
+
+    const stateWithCellSel = selectCellsByCoords(
+      this.editor,
+      blockPos,
+      cellCoords,
+      { mode: "state" }
+    )
+    if (!stateWithCellSel) return false
+
+    const dispatch = (tr: Transaction) => this.editor.view.dispatch(tr)
+
+    if (isRow) {
+      moveTableRow({
+        from: draggingState.originalIndex,
+        to: destIndex,
+        select: true,
+        pos: blockPos + 1,
+      })(stateWithCellSel, dispatch)
+    } else {
+      moveTableColumn({
+        from: draggingState.originalIndex,
+        to: destIndex,
+        select: true,
+        pos: blockPos + 1,
+      })(stateWithCellSel, dispatch)
+    }
+
+    this.state = { ...st, draggingState: undefined }
+    this.emitUpdate()
+
+    this.editor.view.dispatch(
+      this.editor.state.tr.setMeta(tableHandlePluginKey, null)
+    )
+
+    return true
+  }
+
+  update(view: EditorView): void {
+    const pluginState = tableHandlePluginKey.getState(view.state)
+    if (pluginState !== undefined && pluginState !== this.menuFrozen) {
+      this.menuFrozen = pluginState
+    }
+
+    if (!this.state?.show) return
+
+    if (!this.tableElement?.isConnected) {
+      this.hideHandles()
+      return
+    }
+
+    const tableInfo = getTableFromDOM(this.tableElement, this.editor)
+    if (!tableInfo) {
+      this.hideHandles()
+      return
+    }
+
+    // Check if table changed
+    const blockChanged =
+      this.state.block !== tableInfo.node ||
+      this.state.blockPos !== tableInfo.pos
+
+    if (
+      !tableInfo.node ||
+      tableInfo.node.type.name !== "table" ||
+      !this.tableElement?.isConnected
+    ) {
+      this.hideHandles()
+      return
+    }
+
+    const { height: rowCount, width: colCount } = TableMap.get(tableInfo.node)
+
+    // Calculate new indices
+    let newRowIndex = this.state.rowIndex
+    let newColIndex = this.state.colIndex
+
+    // Clamp indices if rows/columns were deleted
+    if (newRowIndex !== undefined && newRowIndex >= rowCount) {
+      newRowIndex = rowCount ? rowCount - 1 : undefined
+    }
+    if (newColIndex !== undefined && newColIndex >= colCount) {
+      newColIndex = colCount ? colCount - 1 : undefined
+    }
+
+    const tableBody = this.tableElement.querySelector("tbody")
+    if (!tableBody) {
+      throw new Error(
+        "Table block does not contain a 'tbody' HTML element. This should never happen."
+      )
+    }
+
+    // Calculate new reference positions
+    let newReferencePosCell = this.state.referencePosCell
+    if (newRowIndex !== undefined && newColIndex !== undefined) {
+      const rowEl = tableBody.children[newRowIndex]
+      const cellEl = rowEl?.children[newColIndex]
+
+      if (cellEl) {
+        newReferencePosCell = cellEl.getBoundingClientRect()
+      } else {
+        newRowIndex = undefined
+        newColIndex = undefined
+        newReferencePosCell = undefined
+      }
+    }
+
+    const newReferencePosTable = tableBody.getBoundingClientRect()
+
+    // Check if anything changed
+    const indicesChanged =
+      newRowIndex !== this.state.rowIndex || newColIndex !== this.state.colIndex
+    const refPosChanged =
+      newReferencePosCell !== this.state.referencePosCell ||
+      newReferencePosTable !== this.state.referencePosTable
+
+    if (blockChanged || indicesChanged || refPosChanged) {
+      this.state = {
+        ...this.state,
+        block: tableInfo.node,
+        blockPos: tableInfo.pos,
+        rowIndex: newRowIndex,
+        colIndex: newColIndex,
+        referencePosCell: newReferencePosCell,
+        referencePosTable: newReferencePosTable,
+      }
+      this.emitUpdate()
+    }
+  }
+
+  destroy(): void {
+    this.editorView.dom.removeEventListener(
+      "mousemove",
+      this.mouseMoveHandler as EventListener
+    )
+    window.removeEventListener("mouseup", this.mouseUpHandler as EventListener)
+    this.editorView.dom.removeEventListener(
+      "mousedown",
+      this.viewMousedownHandler as EventListener
+    )
+    this.editorView.root.removeEventListener(
+      "dragover",
+      this.dragOverHandler as EventListener
+    )
+    this.editorView.root.removeEventListener(
+      "drop",
+      this.dropHandler as unknown as EventListener
+    )
+  }
+}
+
+let tableHandleView: TableHandleView | null = null
+
+export function TableHandlePlugin(
+  editor: Editor,
+  emitUpdate: (state: TableHandlesState) => void
+): Plugin {
+  return new Plugin({
+    key: tableHandlePluginKey,
+
+    state: {
+      init: () => false,
+      apply: (tr, frozen) => {
+        const meta = tr.getMeta(tableHandlePluginKey)
+        return meta !== undefined ? meta : frozen
+      },
+    },
+
+    view: (editorView) => {
+      tableHandleView = new TableHandleView(editor, editorView, emitUpdate)
+
+      return tableHandleView
+    },
+
+    props: {
+      decorations: (state) => {
+        if (!tableHandleView) return null
+
+        if (
+          tableHandleView === undefined ||
+          tableHandleView.state === undefined ||
+          tableHandleView.state.draggingState === undefined ||
+          tableHandleView.tablePos === undefined
+        ) {
+          return
+        }
+
+        const newIndex =
+          tableHandleView.state.draggingState.draggedCellOrientation === "row"
+            ? tableHandleView.state.rowIndex
+            : tableHandleView.state.colIndex
+
+        if (newIndex === undefined) {
+          return
+        }
+
+        const decorations: Decoration[] = []
+        const { draggingState } = tableHandleView.state
+        const { originalIndex } = draggingState
+
+        if (
+          tableHandleView.state.draggingState.draggedCellOrientation === "row"
+        ) {
+          const originalCells = getRowCells(
+            editor,
+            originalIndex,
+            tableHandleView.state.blockPos
+          )
+          originalCells.cells.forEach((cell) => {
+            if (cell.node) {
+              decorations.push(
+                Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+                  class: "table-cell-dragging-source",
+                })
+              )
+            }
+          })
+        } else {
+          const originalCells = getColumnCells(
+            editor,
+            originalIndex,
+            tableHandleView.state.blockPos
+          )
+          originalCells.cells.forEach((cell) => {
+            if (cell.node) {
+              decorations.push(
+                Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
+                  class: "table-cell-dragging-source",
+                })
+              )
+            }
+          })
+        }
+
+        // Return empty decorations if:
+        // - original index is same as new index (no change)
+        // - editor is not defined for some reason
+        if (newIndex === originalIndex || !editor) {
+          return DecorationSet.create(state.doc, decorations)
+        }
+
+        if (
+          tableHandleView.state.draggingState.draggedCellOrientation === "row"
+        ) {
+          const cellsInRow = getRowCells(
+            editor,
+            newIndex,
+            tableHandleView.state.blockPos
+          )
+
+          cellsInRow.cells.forEach((cell) => {
+            const cellNode = cell.node
+            if (!cellNode) {
+              return
+            }
+
+            // Creates a decoration at the start or end of each cell,
+            // depending on whether the new index is before or after the
+            // original index.
+            const decorationPos =
+              cell.pos + (newIndex > originalIndex ? cellNode.nodeSize - 2 : 2)
+            decorations.push(
+              Decoration.widget(decorationPos, () => {
+                const widget = document.createElement("div")
+                widget.className = "tiptap-table-dropcursor"
+                widget.style.left = "0"
+                widget.style.right = "0"
+                // This is only necessary because the drop indicator's height
+                // is an even number of pixels, whereas the border between
+                // table cells is an odd number of pixels. So this makes the
+                // positioning slightly more consistent regardless of where
+                // the row is being dropped.
+                if (newIndex > originalIndex) {
+                  widget.style.bottom = "-1px"
+                } else {
+                  widget.style.top = "-1px"
+                }
+                widget.style.height = "3px"
+
+                return widget
+              })
+            )
+          })
+        } else {
+          const cellsInColumn = getColumnCells(
+            editor,
+            newIndex,
+            tableHandleView.state.blockPos
+          )
+          cellsInColumn.cells.forEach((cell) => {
+            const cellNode = cell.node
+            if (!cellNode) {
+              return
+            }
+            // Creates a decoration at the start or end of each cell,
+            // depending on whether the new index is before or after the
+            // original index.
+            const decorationPos =
+              cell.pos + (newIndex > originalIndex ? cellNode.nodeSize - 2 : 2)
+            decorations.push(
+              Decoration.widget(decorationPos, () => {
+                const widget = document.createElement("div")
+                widget.className = "tiptap-table-dropcursor"
+                widget.style.top = "0"
+                widget.style.bottom = "0"
+                // This is only necessary because the drop indicator's width
+                // is an even number of pixels, whereas the border between
+                // table cells is an odd number of pixels. So this makes the
+                // positioning slightly more consistent regardless of where
+                // the column is being dropped.
+                if (newIndex > originalIndex) {
+                  widget.style.right = "-1px"
+                } else {
+                  widget.style.left = "-1px"
+                }
+                widget.style.width = "3px"
+                return widget
+              })
+            )
+          })
+        }
+
+        return DecorationSet.create(state.doc, decorations)
+      },
+    },
+  })
+}
+
+/**
+ * Shared drag start handler for table rows and columns
+ */
+const tableDragStart = (
+  orientation: "col" | "row",
+  event: {
+    dataTransfer: DataTransfer | null
+    currentTarget: EventTarget & Element
+    clientX: number
+    clientY: number
+  }
+) => {
+  if (!tableHandleView?.state) {
+    throw new Error(
+      `Attempted to drag table ${orientation}, but no table block was hovered prior.`
+    )
+  }
+
+  const { state, editor } = tableHandleView
+  const index = orientation === "col" ? state.colIndex : state.rowIndex
+
+  if (index === undefined) {
+    throw new Error(
+      `Attempted to drag table ${orientation}, but no table block was hovered prior.`
+    )
+  }
+
+  const { blockPos, referencePosCell } = state
+  const mousePos = orientation === "col" ? event.clientX : event.clientY
+
+  // Clear cell selection to prevent table reference collapse
+  if (editor.state.selection instanceof CellSelection) {
+    const safeSel = TextSelection.near(editor.state.doc.resolve(blockPos), 1)
+    editor.view.dispatch(editor.state.tr.setSelection(safeSel))
+  }
+
+  const dragImage = createTableDragImage(editor, orientation, index, blockPos)
+
+  // Configure drag image
+  if (event.dataTransfer) {
+    const handleRect = (
+      event.currentTarget as HTMLElement
+    ).getBoundingClientRect()
+    const offset =
+      orientation === "col"
+        ? { x: handleRect.width / 2, y: 0 }
+        : { x: 0, y: handleRect.height / 2 }
+
+    event.dataTransfer.effectAllowed =
+      orientation === "col" ? "move" : "copyMove"
+    event.dataTransfer.setDragImage(dragImage, offset.x, offset.y)
+  }
+
+  // Cleanup drag image
+  const cleanup = () => dragImage.parentNode?.removeChild(dragImage)
+  document.addEventListener("drop", cleanup, { once: true })
+  document.addEventListener("dragend", cleanup, { once: true })
+
+  const initialOffset = referencePosCell
+    ? (orientation === "col" ? referencePosCell.left : referencePosCell.top) -
+      mousePos
+    : 0
+
+  // Update dragging state
+  tableHandleView.state = {
+    ...state,
+    draggingState: {
+      draggedCellOrientation: orientation,
+      originalIndex: index,
+      mousePos,
+      initialOffset,
+    },
+  }
+  tableHandleView.emitUpdate()
+  editor.view.dispatch(editor.state.tr.setMeta(tableHandlePluginKey, true))
+}
+
+/**
+ * Callback for column drag handle
+ */
+export const colDragStart = (event: {
+  dataTransfer: DataTransfer | null
+  currentTarget: EventTarget & Element
+  clientX: number
+}) => tableDragStart("col", { ...event, clientY: 0 })
+
+/**
+ * Callback for row drag handle
+ */
+export const rowDragStart = (event: {
+  dataTransfer: DataTransfer | null
+  currentTarget: EventTarget & Element
+  clientY: number
+}) => tableDragStart("row", { ...event, clientX: 0 })
+
+/**
+ * Drag end cleanup
+ */
+export const dragEnd = () => {
+  if (!tableHandleView || tableHandleView.state === undefined) {
+    return
+  }
+
+  tableHandleView.state = {
+    ...tableHandleView.state,
+    draggingState: undefined,
+  }
+  tableHandleView.emitUpdate()
+
+  const editor = tableHandleView.editor
+  editor.view.dispatch(editor.state.tr.setMeta(tableHandlePluginKey, null))
+}