@prosekit/extensions 0.11.4 → 0.11.6

package/src/table/table-commands.ts

@@ -0,0 +1,110 @@
+import {
+  defineCommands,
+  type Extension,
+} from '@prosekit/core'
+import {
+  addColumnAfter,
+  addColumnBefore,
+  addRowAfter,
+  addRowBefore,
+  deleteColumn,
+  deleteRow,
+  deleteTable,
+  mergeCells,
+  splitCell,
+} from 'prosemirror-tables'
+
+import { deleteCellSelection } from './table-commands/delete-cell-selection'
+import { exitTable } from './table-commands/exit-table'
+import {
+  insertTable,
+  type InsertTableOptions,
+} from './table-commands/insert-table'
+import {
+  moveTableColumn,
+  type MoveTableColumnOptions,
+} from './table-commands/move-table-column'
+import {
+  moveTableRow,
+  type MoveTableRowOptions,
+} from './table-commands/move-table-row'
+import {
+  selectTable,
+  type SelectTableOptions,
+} from './table-commands/select-table'
+import {
+  selectTableCell,
+  type SelectTableCellOptions,
+} from './table-commands/select-table-cell'
+import {
+  selectTableColumn,
+  type SelectTableColumnOptions,
+} from './table-commands/select-table-column'
+import {
+  selectTableRow,
+  type SelectTableRowOptions,
+} from './table-commands/select-table-row'
+
+/**
+ * @internal
+ */
+export type TableCommandsExtension = Extension<{
+  Commands: {
+    insertTable: [options: InsertTableOptions]
+    exitTable: []
+
+    selectTable: [options?: SelectTableOptions]
+    selectTableCell: [options?: SelectTableCellOptions]
+    selectTableColumn: [options?: SelectTableColumnOptions]
+    selectTableRow: [options?: SelectTableRowOptions]
+
+    addTableColumnBefore: []
+    addTableColumnAfter: []
+    addTableRowAbove: []
+    addTableRowBelow: []
+
+    deleteTable: []
+    deleteTableColumn: []
+    deleteTableRow: []
+    deleteCellSelection: []
+
+    mergeTableCells: []
+    splitTableCell: []
+
+    moveTableRow: [options: MoveTableRowOptions]
+    moveTableColumn: [options: MoveTableColumnOptions]
+  }
+}>
+
+/**
+ * Adds commands for working with `table` nodes.
+ *
+ * @public
+ */
+export function defineTableCommands(): TableCommandsExtension {
+  return defineCommands({
+    insertTable,
+    exitTable: () => exitTable,
+
+    selectTable,
+    selectTableCell,
+    selectTableColumn,
+    selectTableRow,
+
+    addTableColumnBefore: () => addColumnBefore,
+    addTableColumnAfter: () => addColumnAfter,
+    addTableRowAbove: () => addRowBefore,
+    addTableRowBelow: () => addRowAfter,
+
+    deleteTable: () => deleteTable,
+    deleteTableColumn: () => deleteColumn,
+    deleteTableRow: () => deleteRow,
+    deleteCellSelection: () => deleteCellSelection,
+
+    mergeTableCells: () => mergeCells,
+    splitTableCell: () => splitCell,
+
+    moveTableRow,
+    moveTableColumn,
+  })
+}

package/src/table/table-drop-indicator.ts

@@ -0,0 +1,40 @@
+import type { PlainExtension } from '@prosekit/core'
+
+import type { DragEventHandler } from '../drop-indicator'
+import { defineDropIndicator } from '../drop-indicator'
+
+/**
+ * Hides the drop indicator when dragging a table column or row by using the
+ * table handle.
+ *
+ * @internal
+ */
+export function defineTableDropIndicator(): PlainExtension {
+  return defineDropIndicator({
+    onDrag,
+  })
+}
+
+const matchMap = new WeakMap<DataTransfer, boolean>()
+
+const onDrag: DragEventHandler = ({ event }): boolean => {
+  const dataTransfer = event.dataTransfer
+  if (!dataTransfer) return true
+
+  let match: boolean
+
+  if (matchMap.has(dataTransfer)) {
+    match = matchMap.get(dataTransfer)!
+  } else {
+    // On Safari, accessing `dataTransfer.types` is more than 10x slower than in
+    // Chrome. This becomes a bottleneck when `onDrag` is called frequently, so
+    // we cache the result in a WeakMap.
+    const types = dataTransfer.types
+    match = types.includes('application/x-prosekit-table-handle-drag')
+    matchMap.set(dataTransfer, match)
+  }
+
+  // Don't show the drop indicator when the drag event has
+  // "application/x-prosekit-table-handle-drag" type.
+  return !match
+}

package/src/table/table-plugins.ts

@@ -0,0 +1,15 @@
+import {
+  definePlugin,
+  type PlainExtension,
+} from '@prosekit/core'
+import {
+  columnResizing,
+  tableEditing,
+} from 'prosemirror-tables'
+
+/**
+ * @public
+ */
+export function defineTablePlugins(): PlainExtension {
+  return definePlugin([tableEditing(), columnResizing()])
+}

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

@@ -0,0 +1,113 @@
+import { union } from '@prosekit/core'
+import pick from 'just-pick'
+import {
+  describe,
+  expect,
+  it,
+} from 'vitest'
+
+import { defineDoc } from '../doc'
+import { defineParagraph } from '../paragraph'
+import { defineText } from '../text'
+
+import {
+  defineTableCellSpec,
+  defineTableHeaderCellSpec,
+  defineTableRowSpec,
+  defineTableSpec,
+} from './table-spec'
+
+describe('table spec', () => {
+  it('should be defined', () => {
+    const extension = union(
+      defineDoc(),
+      defineParagraph(),
+      defineText(),
+      defineTableSpec(),
+      defineTableRowSpec(),
+      defineTableCellSpec(),
+      defineTableHeaderCellSpec(),
+    )
+
+    const nodes = extension.schema?.spec.nodes.toObject() || {}
+    const pickedNodes = pick(nodes, [
+      'table',
+      'tableCell',
+      'tableHeaderCell',
+      'tableRow',
+    ])
+
+    expect(pickedNodes).toMatchInlineSnapshot(`
+      {
+        "table": {
+          "content": "tableRow+",
+          "group": "block",
+          "isolating": true,
+          "parseDOM": [
+            {
+              "tag": "table",
+            },
+          ],
+          "tableRole": "table",
+          "toDOM": [Function],
+        },
+        "tableCell": {
+          "attrs": {
+            "colspan": {
+              "default": 1,
+            },
+            "colwidth": {
+              "default": null,
+            },
+            "rowspan": {
+              "default": 1,
+            },
+          },
+          "content": "block+",
+          "isolating": true,
+          "parseDOM": [
+            {
+              "getAttrs": [Function],
+              "tag": "td",
+            },
+          ],
+          "tableRole": "cell",
+          "toDOM": [Function],
+        },
+        "tableHeaderCell": {
+          "attrs": {
+            "colspan": {
+              "default": 1,
+            },
+            "colwidth": {
+              "default": null,
+            },
+            "rowspan": {
+              "default": 1,
+            },
+          },
+          "content": "block+",
+          "isolating": true,
+          "parseDOM": [
+            {
+              "getAttrs": [Function],
+              "tag": "th",
+            },
+          ],
+          "tableRole": "header_cell",
+          "toDOM": [Function],
+        },
+        "tableRow": {
+          "content": "(tableCell | tableHeaderCell)*",
+          "parseDOM": [
+            {
+              "tag": "tr",
+            },
+          ],
+          "tableRole": "row",
+          "toDOM": [Function],
+        },
+      }
+    `)
+  })
+})

package/src/table/table-spec.ts

@@ -0,0 +1,109 @@
+import {
+  defineNodeSpec,
+  type Extension,
+} from '@prosekit/core'
+import type {
+  AttributeSpec,
+  Attrs,
+} from '@prosekit/pm/model'
+import { tableNodes } from 'prosemirror-tables'
+
+const cellContent = 'block+'
+
+/**
+ * @public
+ */
+export interface CellAttrs {
+  colspan?: number
+  rowspan?: number
+  colwidth?: number[] | null
+}
+
+const cellAttrs = {
+  colspan: { default: 1 },
+  rowspan: { default: 1 },
+  colwidth: { default: null },
+} satisfies Record<string, AttributeSpec>
+
+/**
+ * @internal
+ */
+export type TableSpecExtension = Extension<{
+  Nodes: {
+    table: Attrs
+  }
+}>
+
+const specs = tableNodes({
+  tableGroup: 'block',
+  cellContent,
+  cellAttributes: {},
+})
+
+/**
+ * @internal
+ */
+export function defineTableSpec(): TableSpecExtension {
+  return defineNodeSpec({
+    ...specs['table'],
+    content: 'tableRow+',
+    name: 'table',
+  })
+}
+
+/**
+ * @internal
+ */
+export type TableRowSpecExtension = Extension<{
+  Nodes: {
+    tableRow: Attrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineTableRowSpec(): TableRowSpecExtension {
+  return defineNodeSpec({
+    ...specs['table_row'],
+    content: '(tableCell | tableHeaderCell)*',
+    name: 'tableRow',
+  })
+}
+
+/**
+ * @internal
+ */
+export type TableCellSpecExtension = Extension<{
+  Nodes: {
+    tableCell: CellAttrs
+  }
+}>
+
+/**
+ * @internal
+ */
+export function defineTableCellSpec(): TableCellSpecExtension {
+  return defineNodeSpec({
+    ...specs['table_cell'],
+    name: 'tableCell',
+    attrs: cellAttrs,
+  })
+}
+
+/**
+ * @internal
+ */
+export type TableHeaderCellSpecExtension = Extension<{
+  Nodes: {
+    tableHeaderCell: CellAttrs
+  }
+}>
+
+export function defineTableHeaderCellSpec(): TableHeaderCellSpecExtension {
+  return defineNodeSpec({
+    ...specs['table_header'],
+    name: 'tableHeaderCell',
+    attrs: cellAttrs,
+  })
+}

package/src/table/table-utils.ts

@@ -0,0 +1,16 @@
+import { CellSelection } from 'prosemirror-tables'
+
+export {
+  findCellPos,
+  findCellRange,
+  findTable,
+} from 'prosemirror-tables'
+
+/**
+ * Checks if the given object is a `CellSelection` instance.
+ *
+ * @public
+ */
+export function isCellSelection(value: unknown): value is CellSelection {
+  return value instanceof CellSelection
+}

package/src/table/table.ts

@@ -0,0 +1,49 @@
+import {
+  union,
+  type Union,
+} from '@prosekit/core'
+
+import {
+  defineTableCommands,
+  type TableCommandsExtension,
+} from './table-commands'
+import { defineTableDropIndicator } from './table-drop-indicator'
+import { defineTablePlugins } from './table-plugins'
+import {
+  defineTableCellSpec,
+  defineTableHeaderCellSpec,
+  defineTableRowSpec,
+  defineTableSpec,
+  type TableCellSpecExtension,
+  type TableHeaderCellSpecExtension,
+  type TableRowSpecExtension,
+  type TableSpecExtension,
+} from './table-spec'
+
+/**
+ * @internal
+ */
+export type TableExtension = Union<
+  [
+    TableSpecExtension,
+    TableRowSpecExtension,
+    TableCellSpecExtension,
+    TableHeaderCellSpecExtension,
+    TableCommandsExtension,
+  ]
+>
+
+/**
+ * @public
+ */
+export function defineTable(): TableExtension {
+  return union(
+    defineTableSpec(),
+    defineTableRowSpec(),
+    defineTableCellSpec(),
+    defineTableHeaderCellSpec(),
+    defineTablePlugins(),
+    defineTableCommands(),
+    defineTableDropIndicator(),
+  )
+}

package/src/table/test-utils.ts

@@ -0,0 +1,28 @@
+import type {
+  Command,
+  Selection,
+} from '@prosekit/pm/state'
+import { CellSelection } from 'prosemirror-tables'
+
+import { isCellSelection } from './table-utils'
+
+// Helper to create a cell selection between two positions
+export function setCellSelection(from: number, to: number): Command {
+  const command: Command = (state, dispatch) => {
+    const selection = CellSelection.create(state.doc, from, to)
+    dispatch?.(state.tr.setSelection(selection))
+    return true
+  }
+  return command
+}
+
+export function inspectSelectedCells(selection: Selection): string[] {
+  if (isCellSelection(selection)) {
+    const cells: string[] = []
+    selection.forEachCell((node) => {
+      cells.push(node.textContent)
+    })
+    return cells
+  }
+  return []
+}

package/src/testing/clipboard.ts

@@ -0,0 +1,58 @@
+import type { EditorView } from '@prosekit/pm/view'
+
+import { formatHTML } from './format-html'
+
+async function readBlobFromClipboard(mimeType: string): Promise<Blob | undefined> {
+  const clipboardItems = await navigator.clipboard.read()
+  const clipboardItem = clipboardItems[0]
+  if (!clipboardItem) {
+    return undefined
+  }
+  if (!clipboardItem.types.includes(mimeType)) {
+    return undefined
+  }
+  return await clipboardItem.getType(mimeType)
+}
+
+async function readTextFromClipboard(mimeType: string): Promise<string | undefined> {
+  const blob = await readBlobFromClipboard(mimeType)
+  if (!blob) {
+    return undefined
+  }
+  return await blob.text()
+}
+
+export async function readPlainTextFromClipboard(): Promise<string> {
+  return await readTextFromClipboard('text/plain') || ''
+}
+
+export async function readHtmlTextFromClipboard(format = true): Promise<string> {
+  let html = await readTextFromClipboard('text/html') || ''
+  if (format) {
+    html = formatHTML(html)
+  }
+  return html
+}
+
+export function pasteFiles(view: EditorView, files: File[]) {
+  const clipboardData = new DataTransfer()
+  for (const file of files) {
+    clipboardData.items.add(file)
+  }
+  const event = new ClipboardEvent('paste', { clipboardData })
+  view.pasteHTML('<div></div>', event)
+}
+
+export function pasteText(view: EditorView, text: string) {
+  const clipboardData = new DataTransfer()
+  clipboardData.setData('text/plain', text)
+  const event = new ClipboardEvent('paste', { clipboardData })
+  view.pasteText(text, event)
+}
+
+export function pasteHTML(view: EditorView, html: string) {
+  const clipboardData = new DataTransfer()
+  clipboardData.setData('text/html', html)
+  const event = new ClipboardEvent('paste', { clipboardData })
+  view.pasteHTML(html, event)
+}

package/src/testing/format-html.ts

@@ -0,0 +1,5 @@
+import diffableHtml from 'diffable-html'
+
+export function formatHTML(html: string): string {
+  return diffableHtml(html)
+}

package/src/testing/index.ts

@@ -0,0 +1,161 @@
+import '@prosekit/pm/view/style/prosemirror.css'
+
+import {
+  defineBaseCommands,
+  defineBaseKeymap,
+  defineHistory,
+  union,
+  type Extension,
+  type ExtractMarkActions,
+  type ExtractNodeActions,
+  type NodeChild,
+} from '@prosekit/core'
+import {
+  createTestEditor,
+  type TestEditor,
+} from '@prosekit/core/test'
+
+import { defineBlockquote } from '../blockquote'
+import { defineBold } from '../bold'
+import { defineCode } from '../code'
+import { defineCodeBlock } from '../code-block'
+import { defineDoc } from '../doc'
+import { defineHardBreak } from '../hard-break'
+import { defineHeading } from '../heading'
+import { defineHorizontalRule } from '../horizontal-rule'
+import { defineImage } from '../image'
+import { defineItalic } from '../italic'
+import { defineLink } from '../link'
+import {
+  defineList,
+  type ListAttrs,
+} from '../list'
+import { defineParagraph } from '../paragraph'
+import { defineStrike } from '../strike'
+import { defineTable } from '../table'
+import type { CellAttrs } from '../table/table-spec'
+import { defineText } from '../text'
+import { defineUnderline } from '../underline'
+
+import {
+  readHtmlTextFromClipboard,
+  readPlainTextFromClipboard,
+} from './clipboard'
+import { pressKey } from './keyboard'
+
+/**
+ * @internal
+ */
+export function defineTestExtension() {
+  return union(
+    defineDoc(),
+    defineText(),
+    defineHeading(),
+    defineHistory(),
+    defineList(),
+    defineBlockquote(),
+    defineBaseKeymap(),
+    defineBaseCommands(),
+    defineItalic(),
+    defineBold(),
+    defineUnderline(),
+    defineStrike(),
+    defineCode(),
+    defineLink(),
+    defineImage(),
+    defineParagraph(),
+    defineTable(),
+    defineHorizontalRule(),
+    defineHardBreak(),
+    defineCodeBlock(),
+  )
+}
+
+/**
+ * @internal
+ */
+export function setupTestFromExtension<E extends Extension>(
+  extension: E,
+): {
+  editor: TestEditor<E>
+  n: ExtractNodeActions<E>
+  m: ExtractMarkActions<E>
+} {
+  const editor = createTestEditor({ extension })
+
+  const div = document.body.appendChild(document.createElement('div'))
+  div.style.minWidth = '200px'
+  div.style.minHeight = '200px'
+  editor.mount(div)
+  editor.view.dom.focus()
+
+  const n = editor.nodes
+  const m = editor.marks
+  return { editor, n, m }
+}
+
+/**
+ * @internal
+ */
+export function setupTest() {
+  const { editor, m, n } = setupTestFromExtension(defineTestExtension())
+
+  const listWithAttrs = (attrs: ListAttrs) => {
+    return (...children: NodeChild[]) => {
+      return n.list(attrs, ...children)
+    }
+  }
+
+  const headingWithAttrs = (attrs: { level: number }) => {
+    return (...children: NodeChild[]) => {
+      return n.heading(attrs, ...children)
+    }
+  }
+
+  const p = n.paragraph
+
+  const td = (text?: string, attrs?: CellAttrs) => {
+    return n.tableCell({ ...attrs }, text ? p(text) : p())
+  }
+
+  const th = (text?: string, attrs?: CellAttrs) => {
+    return n.tableHeaderCell({ ...attrs }, text ? p(text) : p())
+  }
+
+  const copy = async () => {
+    editor.view.dom.focus()
+    await pressKey('mod-C')
+    const html = await readHtmlTextFromClipboard()
+    const plain = await readPlainTextFromClipboard()
+    return { html, plain }
+  }
+
+  return {
+    editor,
+    m,
+    n: {
+      ...n,
+
+      p,
+
+      td,
+      th,
+      tr: n.tableRow,
+
+      h1: headingWithAttrs({ level: 1 }),
+      h2: headingWithAttrs({ level: 2 }),
+      h3: headingWithAttrs({ level: 3 }),
+      h4: headingWithAttrs({ level: 4 }),
+      h5: headingWithAttrs({ level: 5 }),
+      h6: headingWithAttrs({ level: 6 }),
+
+      bullet: listWithAttrs({ kind: 'bullet' }),
+      ordered: listWithAttrs({ kind: 'ordered' }),
+      checked: listWithAttrs({ kind: 'task', checked: true }),
+      unchecked: listWithAttrs({ kind: 'task', checked: false }),
+      collapsed: listWithAttrs({ kind: 'toggle', collapsed: true }),
+      expanded: listWithAttrs({ kind: 'toggle', collapsed: false }),
+    },
+    copy,
+  }
+}