prosemirror-tables

What is prosemirror-tables?

The prosemirror-tables package provides a set of tools for working with tables in the ProseMirror editor. It allows you to create, edit, and manipulate tables within your ProseMirror-based text editor.

What are prosemirror-tables's main functionalities?

Creating a Table

This code demonstrates how to create a table using the prosemirror-tables package. It extends the basic ProseMirror schema to include table nodes and then creates a table node.

const { schema } = require('prosemirror-schema-basic');
const { tableNodes, addTableNodes } = require('prosemirror-tables');
const { Schema } = require('prosemirror-model');

const mySchema = new Schema({
  nodes: addTableNodes(schema.spec.nodes, 'table', 'block'),
  marks: schema.spec.marks
});

const table = mySchema.nodes.table.createAndFill();

Adding a Row

This code shows how to add a row to an existing table in the ProseMirror editor. The addRow function is used to insert a new row at the current selection.

const { addRow } = require('prosemirror-tables');

function addRowToTable(state, dispatch) {
  const { tr } = state;
  dispatch(tr.setSelection(state.selection));
  dispatch(addRow(tr, state.selection.$anchorCell.pos));
}

Deleting a Column

This code demonstrates how to delete a column from a table in the ProseMirror editor. The deleteColumn function is used to remove the column at the current selection.

const { deleteColumn } = require('prosemirror-tables');

function deleteColumnFromTable(state, dispatch) {
  const { tr } = state;
  dispatch(tr.setSelection(state.selection));
  dispatch(deleteColumn(tr, state.selection.$anchorCell.pos));
}

Merging Cells

This code shows how to merge selected cells in a table. The mergeCells function is used to combine the selected cells into a single cell.

const { mergeCells } = require('prosemirror-tables');

function mergeSelectedCells(state, dispatch) {
  const { tr } = state;
  dispatch(tr.setSelection(state.selection));
  dispatch(mergeCells(tr));
}

Other packages similar to prosemirror-tables

tiptap

Tiptap is a headless, framework-agnostic text editor built on top of ProseMirror. It provides a rich set of extensions, including table support, which allows for similar table creation and manipulation functionalities as prosemirror-tables. Tiptap is known for its ease of use and flexibility in integrating with various frameworks.

ckeditor5

CKEditor 5 is a modern JavaScript rich text editor with a modular architecture. It includes a table plugin that offers comprehensive table editing capabilities, such as creating, resizing, merging, and splitting cells. CKEditor 5 is highly customizable and provides a user-friendly interface for table manipulation.

quill

Quill is a powerful, free, open-source WYSIWYG editor with a focus on extensibility and customization. It has a table module that allows users to create and edit tables within the editor. While Quill's table functionalities are not as extensive as those in prosemirror-tables, it provides a straightforward way to handle basic table operations.

README

ProseMirror table module

This module defines a schema extension to support tables with rowspan/colspan support, a custom selection class for cell selections in such a table, a plugin to manage such selections and enforce invariants on such tables, and a number of commands to work with tables.

The top-level directory contains a demo.js and index.html, which can be built with npm run build_demo to show a simple demo of how the module can be used.

Documentation

The module's main file exports everything you need to work with it. The first thing you'll probably want to do is create a table-enabled schema. That's what tableNodes is for:

tableNodes(nodes: OrderedMap, options: Object) → OrderedMap

This function creates a set of node specs for table, table_row, and table_cell nodes types as used by this module. The result can then be added to the set of nodes when creating a a schema.

The following options are recognized:

• tableGroup: ?string A group name (something like "block") to add to the table node type.

• cellContent: string The content expression for table cells.

• cellAttributes: Object Additional attributes to add to cells. Maps attribute names to objects with the following properties:

  • default: any The attribute's default value.

  • getFromDOM: ?(dom.Node) → any A function to read the attribute's value from a DOM node.

  • setDOMAttr: ?(value: any, attrs: Object)> A function to add the attribute's value to an attribute object that's used to render the cell's DOM.

tableEditing() → Plugin

Creates a plugin that, when added to an editor, enables cell-selection, handles cell-based copy/paste, and makes sure tables stay well-formed (each row has the same width, and cells don't overlap).

CellSelection class

A Selection subclass that represents a cell selection spanning part of a table. With the plugin enabled, these will be created when the user selects across cells, and will be drawn by giving selected cells a selectedCell CSS class.

A cell selection is identified by its anchor and head cells, and all cells whose start falls within the rectangle spanned by those cells are considered selected.

• $anchorCell: ResolvedPos A resolved position pointing in front of the anchor cell (the one that doesn't move when extending the selection).

• $headCell: ResolvedPos A resolved position pointing in front of the head cell (the one moves when extending the selection).

• constructor($anchorCell: ResolvedPos, $headCell: ResolvedPos) Constructs a cell selection instance between the two given cells.

• isRowSelection() → bool True if this selection goes all the way from the left to the right of the table.

• isColSelection() → bool True if this selection goes all the way from the top to the bottom of the table.

• static rowSelection($anchorCell: ResolvedPos, $headCell: ?ResolvedPos) → CellSelection Returns the smallest row selection that covers the given anchor and head cell.

• static colSelection($anchorCell: ResolvedPos, $headCell: ?ResolvedPos) → CellSelection Returns the smallest column selection that covers the given anchor and head cell.

Commands

The following commands can be used to make table-editing functionality available to users.

addColumnBefore(EditorState, dispatch: ?(tr: Transaction)) → bool Add an empty column before the selected column.

addColumnAfter(EditorState, dispatch: ?(tr: Transaction)) → bool Add an empty column after the selected column.

deleteColumn(EditorState, dispatch: ?(tr: Transaction)) → bool Delete the selected column or columns.

addRowBefore(EditorState, dispatch: ?(tr: Transaction)) → bool Add an empty row before the selected row.

addRowAfter(EditorState, dispatch: ?(tr: Transaction)) → bool Add an empty row after the selected row.

deleteRow(EditorState, dispatch: ?(tr: Transaction)) → bool Delete the selected row or rows.

mergeCells(EditorState, dispatch: ?(tr: Transaction)) → bool Merge the selected cells into a single cell. Only available when the selected cells' outline forms a rectangle.

splitCell(EditorState, dispatch: ?(tr: Transaction)) → bool Split a selected cell, whose rowpan or colspan is greater than one, into smaller cells.

setCellAttr(attr: string, value: any) → (EditorState, dispatch: ?(tr: Transaction)) → bool Returns a command that sets the given attribute to the given value, and is only available when the currently selected cell doesn't already have that attribute set to that value.

toggleHeaderRow(EditorState, dispatch: ?(tr: Transaction)) → bool Toggle the selected row or rows between header cells and normal cells.

toggleHeaderColumn(EditorState, dispatch: ?(tr: Transaction)) → bool Toggle the selected column or columns between header cells and normal cells.

toggleHeaderCell(EditorState, dispatch: ?(tr: Transaction)) → bool Toggle the selected cells between header cells and normal cells.

goToNextCell(direction: number) → (EditorState, dispatch: ?(tr: Transaction)) → bool Returns a command for selecting the next (direction=1) or previous (direction=-1) cell in a table.

deleteTable(EditorState, dispatch: ?(tr: Transaction)) → bool Deletes the table around the selection, if any.