@prosekit/extensions 0.11.3 → 0.11.5

package/src/table/table-commands/move-table-row.spec.ts

@@ -0,0 +1,380 @@
+import type { Command } from '@prosekit/pm/state'
+import { CellSelection } from 'prosemirror-tables'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../../testing'
+
+import { moveTableRow } from './move-table-row'
+
+function setup() {
+  const { editor, n } = setupTest()
+
+  const setCellSelection = (from: number, to: number) => {
+    const command: Command = (state, dispatch) => {
+      const selection = CellSelection.create(state.doc, from, to)
+      dispatch?.(state.tr.setSelection(selection))
+      return true
+    }
+    editor.exec(command)
+  }
+
+  return { editor, n, setCellSelection }
+}
+
+describe('moveTableRow', () => {
+  describe('on a simple table', () => {
+    it('should move row bottom-to-top', () => {
+      const { editor, n: { doc, table, tr, td } } = setup()
+      const docNode = doc(
+        table(
+          tr(td('1'), td(), td()),
+          tr(td('2'), td(), td()),
+          tr(td('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 2, to: 0 }))
+
+      const expected = doc(
+        table(
+          tr(td('3'), td(), td()),
+          tr(td('1'), td(), td()),
+          tr(td('2'), td(), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move row top-to-bottom', () => {
+      const { editor, n: { doc, table, tr, td } } = setup()
+      const docNode = doc(
+        table(
+          tr(td('1'), td(), td()),
+          tr(td('2'), td('x'), td()),
+          tr(td('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 1, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(td('1'), td(), td()),
+          tr(td('3'), td(), td()),
+          tr(td('2'), td('x'), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should select row after moving with select option', () => {
+      const { editor, n: { doc, table, tr, td } } = setup()
+      const docNode = doc(
+        table(
+          tr(td('1'), td(), td()),
+          tr(td('2'), td(), td()),
+          tr(td('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 2, to: 0, select: true }))
+
+      // Check that a cell selection was created
+      expect(editor.state.selection).toBeInstanceOf(CellSelection)
+      const selection = editor.state.selection as CellSelection
+      expect(selection.$anchorCell.pos).toBeDefined()
+      expect(selection.$headCell.pos).toBeDefined()
+    })
+  })
+
+  describe('on a table with merged cells', () => {
+    it('should move columns merged at first line', () => {
+      const { editor, n: { doc, table, tr, td } } = setup()
+      const docNode = doc(
+        table(
+          tr(td('1'), td('merged cell', { colspan: 2 })),
+          tr(td('2'), td(), td()),
+          tr(td('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 1, to: 0 }))
+
+      const expected = doc(
+        table(
+          tr(td('2'), td(), td()),
+          tr(td('1'), td('merged cell', { colspan: 2 })),
+          tr(td('3'), td(), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move lines with columns merged at last line', () => {
+      const { editor, n: { doc, table, tr, td } } = setup()
+      const docNode = doc(
+        table(
+          tr(td('1'), td(), td()),
+          tr(td('2'), td(), td()),
+          tr(td('3'), td('merged cell', { colspan: 2 })),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 1, to: 0 }))
+
+      const expected = doc(
+        table(
+          tr(td('2'), td(), td()),
+          tr(td('1'), td(), td()),
+          tr(td('3'), td('merged cell', { colspan: 2 })),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move and keep table headers', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('merged cell', { colspan: 2 }), th()),
+          tr(td(), td(), td()),
+          tr(td(), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 0, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(th(), th(), th()),
+          tr(td(), td(), td()),
+          tr(td('merged cell', { colspan: 2 }), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+  })
+
+  describe('on a table with merged rows', () => {
+    it('should move rows', () => {
+      const { editor, n: { doc, table, tr, td } } = setup()
+      const docNode = doc(
+        table(
+          tr(td('merged-row', { rowspan: 2 }), td('0'), td('1')),
+          tr(td('2'), td('3')),
+          tr(td('4'), td('5'), td('6')),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 1, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(td('4'), td('5'), td('6')),
+          tr(td('merged-row', { rowspan: 2 }), td('0'), td('1')),
+          tr(td('2'), td('3')),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+  })
+
+  describe('on a simple table with header', () => {
+    it('should move row header top-to-bottom', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1'), th(), th()),
+          tr(td('2'), td(), td()),
+          tr(td('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 0, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(th('2'), th(), th()),
+          tr(td('3'), td(), td()),
+          tr(td('1'), td(), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move row header bottom-to-top', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1'), th(), th()),
+          tr(td('2'), td(), td()),
+          tr(td('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 2, to: 0 }))
+
+      const expected = doc(
+        table(
+          tr(th('3'), th(), th()),
+          tr(td('1'), td(), td()),
+          tr(td('2'), td(), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move col header top-to-bottom', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1'), td(), td()),
+          tr(th('2'), td(), td()),
+          tr(th('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 0, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(th('2'), td(), td()),
+          tr(th('3'), td(), td()),
+          tr(th('1'), td(), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move col header bottom-to-top', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1'), td(), td()),
+          tr(th('2'), td(), td()),
+          tr(th('3'), td(), td()),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 2, to: 0 }))
+
+      const expected = doc(
+        table(
+          tr(th('3'), td(), td()),
+          tr(th('1'), td(), td()),
+          tr(th('2'), td(), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move row header correctly within a single column table', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1')),
+          tr(td('2')),
+          tr(td('3')),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 0, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(th('2')),
+          tr(td('3')),
+          tr(td('1')),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move col header correctly within a single column table', () => {
+      const { editor, n: { doc, table, tr, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1')),
+          tr(th('2')),
+          tr(th('3')),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 0, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(th('2')),
+          tr(th('3')),
+          tr(th('1')),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+  })
+
+  describe('table with varying row node sizes', () => {
+    it('should move row from top-to-bottom', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1'), th(), th()),
+          tr(td('2'.repeat(10)), td('2'.repeat(10)), td('2'.repeat(10))),
+          tr(td('3'.repeat(100)), td('3'.repeat(100)), td('3'.repeat(100))),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 0, to: 2 }))
+
+      const expected = doc(
+        table(
+          tr(th('2'.repeat(10)), th('2'.repeat(10)), th('2'.repeat(10))),
+          tr(td('3'.repeat(100)), td('3'.repeat(100)), td('3'.repeat(100))),
+          tr(td('1'), td(), td()),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+
+    it('should move row from bottom-to-top', () => {
+      const { editor, n: { doc, table, tr, td, th } } = setup()
+      const docNode = doc(
+        table(
+          tr(th('1'), th(), th()),
+          tr(td('2'.repeat(10)), td('2'.repeat(10)), td('2'.repeat(10))),
+          tr(td('3'.repeat(100)), td('3'.repeat(100)), td('3'.repeat(100))),
+        ),
+      )
+
+      editor.set(docNode)
+      editor.exec(moveTableRow({ from: 2, to: 0 }))
+
+      const expected = doc(
+        table(
+          tr(th('3'.repeat(100)), th('3'.repeat(100)), th('3'.repeat(100))),
+          tr(td('1'), td(), td()),
+          tr(td('2'.repeat(10)), td('2'.repeat(10)), td('2'.repeat(10))),
+        ),
+      )
+      expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+    })
+  })
+})

package/src/table/table-commands/move-table-row.ts

@@ -0,0 +1,4 @@
+export {
+  moveTableRow,
+  type MoveTableRowOptions,
+} from 'prosemirror-tables'

package/src/table/table-commands/select-table-cell.spec.ts

@@ -0,0 +1,34 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../../testing'
+import { isCellSelection } from '../table-utils'
+import { inspectSelectedCells } from '../test-utils'
+
+describe('selectTableCell', () => {
+  it('can select a table cell', () => {
+    const { editor, n: { doc, table, tr, td } } = setupTest()
+    const doc1 = doc(
+      table(
+        //
+        tr(td('1'), td('2')),
+        tr(td('3'), td('4<a>')),
+        tr(td('5'), td('6')),
+      ),
+    )
+
+    editor.set(doc1)
+    expect(isCellSelection(editor.state.selection)).toBe(false)
+    editor.commands.selectTableCell()
+    expect(isCellSelection(editor.state.selection)).toBe(true)
+    const selection = editor.state.selection
+    expect(inspectSelectedCells(selection)).toMatchInlineSnapshot(`
+      [
+        "4",
+      ]
+    `)
+  })
+})

package/src/table/table-commands/select-table-cell.ts

@@ -0,0 +1,35 @@
+import type { Command } from '@prosekit/pm/state'
+import { CellSelection } from 'prosemirror-tables'
+
+import { findCellPos } from '../table-utils'
+
+/**
+ * @public
+ */
+export interface SelectTableCellOptions {
+  /**
+   * A hit position of the table cell to select from. By default, the selection
+   * anchor will be used.
+   */
+  pos?: number
+}
+
+/**
+ * @public
+ */
+export function selectTableCell(options?: SelectTableCellOptions): Command {
+  return (state, dispatch) => {
+    const $cellPos = findCellPos(
+      state.doc,
+      options?.pos ?? state.selection.anchor,
+    )
+    if (!$cellPos) {
+      return false
+    }
+    if (dispatch) {
+      const selection = new CellSelection($cellPos)
+      dispatch(state.tr.setSelection(selection))
+    }
+    return true
+  }
+}

package/src/table/table-commands/select-table-column.spec.ts

@@ -0,0 +1,33 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../../testing'
+import { inspectSelectedCells } from '../test-utils'
+
+describe('selectTableColumn', () => {
+  it('can select the whole table column', () => {
+    const { editor, n: { doc, table, tr, td } } = setupTest()
+    const doc1 = doc(
+      table(
+        //
+        tr(td('1'), td('2')),
+        tr(td('3'), td('4<a>')),
+        tr(td('5'), td('6')),
+      ),
+    )
+
+    editor.set(doc1)
+    editor.commands.selectTableColumn()
+    const selection = editor.state.selection
+    expect(inspectSelectedCells(selection)).toMatchInlineSnapshot(`
+      [
+        "2",
+        "4",
+        "6",
+      ]
+    `)
+  })
+})

package/src/table/table-commands/select-table-column.ts

@@ -0,0 +1,39 @@
+import type { Command } from '@prosekit/pm/state'
+import { CellSelection } from 'prosemirror-tables'
+
+import { findCellRange } from '../table-utils'
+
+/**
+ * @public
+ */
+export interface SelectTableColumnOptions {
+  /**
+   * A hit position of the table cell to select from. By default, the selection
+   * anchor will be used.
+   */
+  anchor?: number
+
+  /**
+   * A hit position of the table cell to select to. By default, the selection
+   * head will be used.
+   */
+  head?: number
+}
+
+/**
+ * @public
+ */
+export function selectTableColumn(options?: SelectTableColumnOptions): Command {
+  return (state, dispatch) => {
+    const range = findCellRange(state.selection, options?.anchor, options?.head)
+    if (!range) {
+      return false
+    }
+    if (dispatch) {
+      const [$anchorCell, $headCell] = range
+      const selection = CellSelection.colSelection($anchorCell, $headCell)
+      dispatch(state.tr.setSelection(selection))
+    }
+    return true
+  }
+}

package/src/table/table-commands/select-table-row.spec.ts

@@ -0,0 +1,32 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../../testing'
+import { inspectSelectedCells } from '../test-utils'
+
+describe('selectTableRow', () => {
+  it('can select the whole table row', () => {
+    const { editor, n: { doc, table, tr, td } } = setupTest()
+    const doc1 = doc(
+      table(
+        //
+        tr(td('1'), td('2')),
+        tr(td('3'), td('4<a>')),
+        tr(td('5'), td('6')),
+      ),
+    )
+
+    editor.set(doc1)
+    editor.commands.selectTableRow()
+    const selection = editor.state.selection
+    expect(inspectSelectedCells(selection)).toMatchInlineSnapshot(`
+      [
+        "3",
+        "4",
+      ]
+    `)
+  })
+})

package/src/table/table-commands/select-table-row.ts

@@ -0,0 +1,39 @@
+import type { Command } from '@prosekit/pm/state'
+import { CellSelection } from 'prosemirror-tables'
+
+import { findCellRange } from '../table-utils'
+
+/**
+ * @public
+ */
+export interface SelectTableRowOptions {
+  /**
+   * A hit position of the table cell to select from. By default, the selection
+   * anchor will be used.
+   */
+  anchor?: number
+
+  /**
+   * A hit position of the table cell to select to. By default, the selection
+   * head will be used.
+   */
+  head?: number
+}
+
+/**
+ * @public
+ */
+export function selectTableRow(options?: SelectTableRowOptions): Command {
+  return (state, dispatch) => {
+    const range = findCellRange(state.selection, options?.anchor, options?.head)
+    if (!range) {
+      return false
+    }
+    if (dispatch) {
+      const [$anchorCell, $headCell] = range
+      const selection = CellSelection.rowSelection($anchorCell, $headCell)
+      dispatch(state.tr.setSelection(selection))
+    }
+    return true
+  }
+}

package/src/table/table-commands/select-table.spec.ts

@@ -0,0 +1,36 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../../testing'
+import { inspectSelectedCells } from '../test-utils'
+
+describe('selectTable', () => {
+  it('can select the whole table', () => {
+    const { editor, n: { doc, table, tr, td } } = setupTest()
+    const doc1 = doc(
+      table(
+        //
+        tr(td('1'), td('2')),
+        tr(td('3'), td('4<a>')),
+        tr(td('5'), td('6')),
+      ),
+    )
+
+    editor.set(doc1)
+    editor.commands.selectTable()
+    const selection = editor.state.selection
+    expect(inspectSelectedCells(selection)).toMatchInlineSnapshot(`
+      [
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+      ]
+    `)
+  })
+})

package/src/table/table-commands/select-table.ts

@@ -0,0 +1,50 @@
+import type { Command } from '@prosekit/pm/state'
+import {
+  CellSelection,
+  TableMap,
+} from 'prosemirror-tables'
+
+import { findTable } from '../table-utils'
+
+/**
+ * @public
+ */
+export interface SelectTableOptions {
+  /**
+   * A hit position of the table to select from. By default, the selection
+   * anchor will be used.
+   */
+  pos?: number
+}
+
+/**
+ * @public
+ */
+export function selectTable(options?: SelectTableOptions): Command {
+  return (state, dispatch) => {
+    const $pos = options?.pos
+      ? state.doc.resolve(options.pos)
+      : state.selection.$anchor
+    const table = findTable($pos)
+    if (!table) {
+      return false
+    }
+    const map = TableMap.get(table.node)
+    if (map.map.length === 0) {
+      return false
+    }
+    if (dispatch) {
+      let tr = state.tr
+      const firstCellPosInTable = map.map[0]
+      const lastCellPosInTable = map.map[map.map.length - 1]
+      const firstCellPos = table.pos + firstCellPosInTable + 1
+      const lastCellPos = table.pos + lastCellPosInTable + 1
+      const $firstCellPos = tr.doc.resolve(firstCellPos)
+      const $lastCellPos = tr.doc.resolve(lastCellPos)
+      const selection = new CellSelection($firstCellPos, $lastCellPos)
+      tr = tr.setSelection(selection)
+      dispatch?.(tr)
+    }
+    return true
+  }
+}