Repository files navigation

⚠️ This repository is archived and has moved toGitBook's fork ofianstormtaylor/slate.Previous versions are stillavailable on NPMAll the versions using GitBook's fork of slate are now published under the@gitbook NPM scope.To learn more about why we forked Slate, readour manifest

A Slate plugin to handle table edition.

Demo:gitbookio.github.io/slate-edit-table/

npm install slate-edit-table

• PressingUp/Down moves the cursor to the row above/below
• PressingEnter inserts a new row
• PressingCmd+Enter (Ctrl+Enter on Windows/Linux) exits the table, into a new default block
• PressingTab moves the cursor to next cell
• PressingShift+Tab moves the cursor to previous cell

All these default features are configurable.

Here are how different cases of copy-paste are handled by the plugin:

1. Copying the content of a single cell into another cell → The content of the first cell is pasted inside the second cell
2. Copying the content of a single cell outside the table → Just the content of the cell is pasted (not the table)
3. Copying some content into a cell → The content is inserted inside the cell
4. Copying multiple cells somewhere else inside the table → The copied fragment of table is patched at the given position, overwritting cells and adding rows and columns if necessary.
5. Copying multiple cells outside the table → A new table is pasted, containing the copied cells.

importEditTablefrom'slate-edit-table';consttablePlugin=EditTable(/* options */);constplugins=[tablePlugin];

Here is what your Slate document containing tables should look like:

<value><document><paragraph>Some text</paragraph><table><table_row><table_cell><paragraph>Any block can goes into cells</paragraph></table_cell><table_cell><imageisVoidsrc="image.png"/></table_cell></table_row><table_row><table_cell><paragraph>Second row</paragraph></table_cell><table_cell><paragraph>Second row</paragraph></table_cell></table_row></table></document></value>

Option object you can pass to the plugin.

• [typeTable: string] — type for table
• [typeRow: string] — type for the rows.
• [typeCell: string] — type for the cells.
• [typeContent: string] — default type for blocks in cells. Also used as default type for blocks created when exiting the table with Mod+Enter.

Constructs an instance of the table plugin, for the given options. You can then add this instance to the list of plugins passed to Slate.

Once you have constructed an instance of the plugin, you get access to utilities and changes throughpluginInstance.utils andpluginInstance.changes.

isSelectionInTable(value: Slate.Value) => boolean

Return true if selection is inside a table cell.

isSelectionOutOfTable(value: Slate.Value) => boolean

Return true if selection starts and ends both outside any table. (Notice: it is NOT the opposite value ofisSelectionInTable)

getPosition(value: Slate.Value) => TablePosition

Returns the position of the cursor in a table (and all related infos).

getPositionByKey(tableAncestor: Node, key: string) => TablePosition

Returns the position of a particular node in a table (and all related infos).

createTable(columns:number,rows:number,getCellContent?:(row:number,column:number)=>Node[]):Block

Returns a table. The content can be filled with the givengetCellContent generator.

createRow(columns:number,getCellContent?:(column:number)=>Node[]):Block

Returns a row. The content can be filled with the givengetCellContent generator.

createCell(opts:Options,nodes?:Node[]):Block

Returns a cell. The content defaults to an emptytypeContent block.

insertTable(change: Change, columns: ?number, rows: ?number) => Change

Insert a new empty table.

insertRow(opts:Options,change:Change,at?:number,// row indexgetRow?:(columns:number)=>Block// Generate the row yourself):Change

Insert a new row after the current one or at the specific index (at).

insertColumn(opts:Options,change:Change,at?:number,// Column indexgetCell?:(column:number,row:number)=>Block// Generate cells):Change

Insert a new column after the current one or at the specific index (at).

removeTable(change: Change) => Change

Remove current table.

removeTableByKey(change: Change, key: string) => Change

Remove the table containing the given key.

removeRow(change: Change, at: ?number) => Change

Remove current row or the one at a specific index (at).

removeRowByKey(change: Change, key: string) => Change

Remove the row containing the given key.

removeColumn(change: Change, at: ?number) => Change

Remove current column or the one at a specific index (at).

removeColumnByKey(change: Change, key: string) => Change

Remove the column containing the given key.

moveSelection(change: Change, column: number, row: number) => Change

Move the selection to a specific position in the table.

moveSelectionBy(change: Change, column: number, row: number) => Change

Move the selection by the given amount of columns and rows.

An instance ofTablePosition represents a position within a table (row and column).You can get your current position in a table by usingplugin.utils.getPosition(value).

Returns the number of columns in the current table.

Returns the number of rows in the current table.

Returns the index of the current row in the table.

Return the index of the current column in the table.

True if on first row and first column of the table

True if on last row and last column of the table

True if on first row

True if on last row

True if on first column

True if on last column