@prosekit/extensions 0.11.3 → 0.11.5

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

@@ -0,0 +1,45 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../../testing'
+import { inputText } from '../../testing/keyboard'
+
+describe('exitTable', () => {
+  it('can exist a table', async () => {
+    const { editor, n: { doc, table, tr, td, p } } = setupTest()
+    const doc1 = doc(
+      table(
+        //
+        tr(td('<a>'), td()),
+        tr(td(), td()),
+      ),
+    )
+    editor.set(doc1)
+
+    await inputText('foo')
+    const doc2 = doc(
+      table(
+        //
+        tr(td('foo'), td()),
+        tr(td(), td()),
+      ),
+    )
+    expect(editor.state.doc.toJSON()).toEqual(doc2.toJSON())
+
+    editor.commands.exitTable()
+    await inputText('bar')
+
+    const doc3 = doc(
+      table(
+        //
+        tr(td('foo'), td()),
+        tr(td(), td()),
+      ),
+      p('bar'),
+    )
+    expect(editor.state.doc.toJSON()).toEqual(doc3.toJSON())
+  })
+})

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

@@ -0,0 +1,49 @@
+import { defaultBlockAt } from '@prosekit/core'
+import { TextSelection } from '@prosekit/pm/state'
+import type { Command } from '@prosekit/pm/state'
+import type { TableRole } from 'prosemirror-tables'
+
+/**
+ * When the selection is in a table node, create a default block after the table
+ * table, and move the cursor there.
+ *
+ * @public
+ */
+export const exitTable: Command = (state, dispatch) => {
+  const { $head, $anchor } = state.selection
+
+  if (!$head.sameParent($anchor)) {
+    return false
+  }
+
+  let tableStart = -1
+  let tableDepth = -1
+  for (let depth = $head.depth; depth >= 0; depth--) {
+    const node = $head.node(depth)
+    if ((node.type.spec.tableRole as TableRole) === 'table') {
+      tableStart = $head.before(depth)
+      tableDepth = depth
+    }
+  }
+
+  if (tableStart < 0 || tableDepth <= 0) {
+    return false
+  }
+
+  const above = $head.node(tableDepth - 1)
+  const after = $head.indexAfter(tableDepth - 1)
+  const type = defaultBlockAt(above.contentMatchAt(after))
+  const node = type?.createAndFill()
+
+  if (!type || !node || !above.canReplaceWith(after, after, type)) {
+    return false
+  }
+
+  if (dispatch) {
+    const pos = $head.after(tableDepth)
+    const tr = state.tr.replaceWith(pos, pos, node)
+    tr.setSelection(TextSelection.near(tr.doc.resolve(pos), 1))
+    dispatch(tr.scrollIntoView())
+  }
+  return true
+}

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

@@ -0,0 +1,39 @@
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { setupTest } from '../../testing'
+
+describe('insertTable', () => {
+  it('can insert a table', () => {
+    const { editor, n: { doc, table, tr, td, p } } = setupTest()
+    editor.commands.insertTable({ row: 3, col: 2, header: false })
+    const expected = doc(
+      table(
+        //
+        tr(td(), td()),
+        tr(td(), td()),
+        tr(td(), td()),
+      ),
+      p(),
+    )
+    expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+  })
+
+  it('can insert a table with header', () => {
+    const { editor, n: { doc, table, tr, td, th, p } } = setupTest()
+    editor.commands.insertTable({ row: 3, col: 2, header: true })
+    const expected = doc(
+      table(
+        //
+        tr(th(), th()),
+        tr(td(), td()),
+        tr(td(), td()),
+      ),
+      p(),
+    )
+    expect(editor.state.doc.toJSON()).toEqual(expected.toJSON())
+  })
+})

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

@@ -0,0 +1,80 @@
+import {
+  getNodeType,
+  insertNode,
+} from '@prosekit/core'
+import type { Schema } from '@prosekit/pm/model'
+import type { Command } from '@prosekit/pm/state'
+
+function createEmptyTable(
+  schema: Schema,
+  row: number,
+  col: number,
+  header: boolean,
+) {
+  const tableType = getNodeType(schema, 'table')
+  const tableRowType = getNodeType(schema, 'tableRow')
+  const tableCellType = getNodeType(schema, 'tableCell')
+  const tableHeaderCellType = getNodeType(schema, 'tableHeaderCell')
+
+  if (header) {
+    const headerCell = tableHeaderCellType.createAndFill()!
+    const headerCells = repeat(headerCell, col)
+    const headerRow = tableRowType.createAndFill(null, headerCells)!
+
+    const bodyCell = tableCellType.createAndFill()!
+    const bodyCells = repeat(bodyCell, col)
+    const bodyRow = tableRowType.createAndFill(null, bodyCells)!
+    const bodyRows = repeat(bodyRow, row - 1)
+
+    return tableType.createAndFill(null, [headerRow, ...bodyRows])!
+  } else {
+    const bodyCell = tableCellType.createAndFill()!
+    const bodyCells = repeat(bodyCell, col)
+    const bodyRow = tableRowType.createAndFill(null, bodyCells)!
+    const bodyRows = repeat(bodyRow, row)
+
+    return tableType.createAndFill(null, bodyRows)!
+  }
+}
+
+function repeat<T>(node: T, length: number): T[] {
+  return Array<T>(length).fill(node)
+}
+
+/**
+ * @public
+ */
+export interface InsertTableOptions {
+  /**
+   * The number of rows in the table.
+   */
+  row: number
+
+  /**
+   * The number of columns in the table.
+   */
+  col: number
+
+  /**
+   * Whether the table has a header row.
+   *
+   * @default false
+   */
+  header?: boolean
+}
+
+/**
+ * Insert a table node with the given number of rows and columns, and optionally
+ * a header row.
+ *
+ * @param options
+ *
+ * @public
+ */
+export function insertTable(options: InsertTableOptions): Command {
+  return (state, dispatch, view) => {
+    const { row, col, header = false } = options
+    const table = createEmptyTable(state.schema, row, col, header)
+    return insertNode({ node: table })(state, dispatch, view)
+  }
+}