prosemirror-tables

Use the columnResizing function to create a ProseMirror plugin that enables users to resize table columns by dragging handles. You can configure the handle width, minimum cell widths, and whether the last column is resizable.

import { columnResizing } from 'prosemirror-tables';

const plugin = columnResizing({
  handleWidth: 5,
  cellMinWidth: 25,
  defaultCellMinWidth: 100,
  lastColumnResizable: true
});

The tableEditing plugin enables essential table functionality, including:

• Cell-based selection
• Cell-based copy/paste
• Automatic enforcement of table invariants (e.g., ensuring rows have consistent widths and cells do not overlap)

Note on Plugin Ordering: It is recommended to place tableEditing() near the end of your plugin array. Because it handles mouse and arrow key events broadly, other specialized plugins (like gapcursor or column-width dragging plugins) should be placed before it to ensure they can intercept specific interactions first.

import { tableEditing } from "prosemirror-tables";

const plugins = [
  // ... other plugins (e.g., gapcursor)
  tableEditing()
];

The columnResizing function accepts an optional ColumnResizingOptions object to customize the resizing behavior:

The setCellAttr(name, value) command returns a command that sets a specific attribute on the selected cell(s).

• If a CellSelection is active, it applies the attribute to all cells in the selection.
• If a single cell is selected, it applies it to that cell.
• The command returns false if the attribute is already set to the provided value.

// Example: Set a custom attribute 'data-id' to '123' on selected cells
dispatch(setCellAttr('data-id', '123')(state));

You can access the current state of the resizing plugin (such as which handle is active or if a drag is in progress) using the columnResizingPluginKey.

import { columnResizingPluginKey } from 'prosemirror-tables';

// Inside a plugin or editor event
const state = columnResizingPluginKey.getState(editorState);
if (state) {
  console.log(state.activeHandle); // The position of the active handle
  console.log(state.dragging);    // The Dragging object or false
}

The goToNextCell(direction) command allows you to move the selection to the next or previous cell in the table.

• direction: 1 for next cell, -1 for previous cell.

// Example: Move to the next cell
dispatch(goToNextCell(1)(state));

Use handleTripleClick to quickly select an entire cell when a user triple-clicks a position in the editor.

Returns true if the position was inside a table cell and a CellSelection was dispatched, otherwise returns false.

import { handleTripleClick } from 'prosemirror-tables';

// In your view's click handler:
const handled = handleTripleClick(view, pos);

The deleteCellSelection(state, dispatch) command clears the content of the selected cells without deleting the cells themselves. It replaces the content with empty cells (matching the base cell content).

// Example: Clear content in selected cells
dispatch(deleteCellSelection(state));

Use the tableNodes function to create a set of ProseMirror NodeSpec objects for table, table_row, table_cell, and table_header. These specs can be merged into your existing schema's node set.

To use this, provide a TableNodesOptions object specifying the cellContent (the content allowed inside cells) and any custom cellAttributes you want to support.

import { tableNodes } from 'prosemirror-tables';

const myTableNodes = tableNodes({
  tableGroup: 'block',
  cellContent: 'inline*',
  cellAttributes: {
    // Example of adding a custom attribute to cells
    className: {
      default: '',
      getFromDOM: (dom) => dom.getAttribute('class'),
      setDOMAttr: (value, attrs) => { attrs.class = value as string; }
    }
  }
});

// Then add myTableNodes to your schema definition