slate-tables
A Slate plugin to handle table edition.
Demo: https://whatever-company.github.io/slate-tables/
Install
$ npm login --registry=https://npm.pkg.github.com --scope=@whatever-company
> Username: USERNAME
> Password: TOKEN (from your github settings)
> Email: PUBLIC-EMAIL-ADDRESS
$ npm install @whatever-company/slate-tables
Features
- Pressing Up/Down moves the cursor to the row above/below
- Pressing Left/Right moves the cursor to the cell before/after
- Pressing Enter inserts a new row (if enabled)
- Pressing Tab moves the cursor to the next cell and creats a new row
- Pressing Shift+Tab moves the cursor to the previous cell
Nested tables
The plugin supports nested tables natively.
colspan & rowspan
Colspan and Rowspan are supported. All operations create a matrix containing all cells' positions.
Copy/Paste behavior
Nothing is done to support copy/paste in this plugin. You have to implement it in you codebase.
Simple Usage
import TablePlugin from '@eliumhq/slate-tables'
const tablePlugin = TablePlugin({
saveColumns: false,
enterCreatesRow: true,
blocks: {
table: 'table',
row: 'table-row',
cell: 'table-cell',
content: 'paragraph'
}
})
const plugins = [tablePlugin]
Data structure
Here is what your Slate document containing tables should look like:
<value>
<document>
<paragraph>Some text</paragraph>
<table>
<table-row>
<table-cell colspan="2">
<paragraph>Any block can goes into cells</paragraph>
</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>
Options
Option object you can pass to the plugin.
prop | type | default | desc |
---|---|---|---|
saveColumns | boolean | false | when enabled, it will save the columns in an array of object in the table node's data (useful to render a <colgroup/> tag) |
enterCreatesRow | boolean | false | Add the support of the creation of a new row when user press enter |
blocks -> table | string | table | Node name for the <table /> |
blocks -> row | string | table-row | Node name for the <tr /> |
blocks -> cell | string | table-cell | Node name for the <td /> |
blocks -> content | string | paragraph | Node name for the default child of a cell |
TablePlugin
TablePlugin(options: Options) => Instance
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.
Commands
editor.insertTable()
Creates a table at current selection.
editor.insertTableAtRange(range: Range)
Creates a table at the given range.
editor.insertRow()
Creates a row at the current start block.
editor.insertRowAtKey(key: string, atIndex: number)
Creates a row after the focused one inside the table at key
. If atIndex
is given, it will insert the new row at this index.
editor.insertRowAtEnd()
Creates a row at the end of the focused table (start of the selection must be in a table)
editor.insertColumn()
Creates a column after the focused one. This will alter all row nodes to add a cell.
editor.insertColumnAtKey(key: string)
Creates a column after the row found at key
. This will alter all row nodes to add a cell.
editor.deleteColumn()
Delete the focused column. This will alter all row nodes to remove a cell.
editor.deleteColumnAtKey(key: string)
Delete the column at key
. This will alter all row nodes to remove a cell.
editor.deleteTable()
Deletes the focused table.
editor.deleteTableAtKey(key: string)
Deletes the focused at key
.
editor.deleteRow()
Deletes focused row.
editor.deleteRowAtKey(key: string)
Deletes the row at key
.
editor.deleteCellsContentAtRange(range: Range)
Deletes content in cells found in range
. It's necessary to use this instead of editor.deleteAtRange
to not delete row & cell nodes.
editor.setCellProperties
Merges properties
in focused cell's data.
editor.setCellPropertiesAtKey(key: string, properties: Object)
Merges properties
in cell's data.
editor.setColumnProperties(properties: Object)
It will merges properties
with the current column's data (stored in table.data.columns
)
editor.setColumnPropertiesAtIndex(tableKey: string, index: number, properties: Object)
Merges column's data with properties
at given index
.
editor.setTableProperties(properties: Object)
Merges properties
with table's data at current selection.
editor.setTablePropertiesAtKey(key: string, properties: Object)
Merges properties
with table's data at key
.
editor.increaseRowspanAtKey
Increases the rowspan of the cell at key
.
editor.increaseColspanAtKey
Increases the colspan of the cell at key
.
editor.decreaseRowspanAtKey
Decreases the rowspan of the cel at key
.
editor.decreaseColspanAtKey
Decreases the colspan of the cel at key
.
Queries
editor.isInTable()
Returns true if selection.start
or selection.end
is in a table node.
editor.isRangeInTable(range: Range)
Returns true if range.start
or range.end
is in a table node.
editor.getTableAtKey(key: string)
Returns a Table
object for the table at key
. This object contains helpers to access sibling cells, rows, columns.
editor.getCellAtKey(key: string)
Returns the cell at key
.
editor.getRowAtKey(key: string)
Returns the row at key
.
editor.canIncreaseColspanAtKey(key: string)
Returns true if the cell at key
can have a colspan increased by one.
editor.canIncreaseRowspanAtKey(key: string)
Returns true if the cell at key
can have a rowspan increased by one.
editor.canDecreaseColspanAtKey(key: string)
Returns true if the cell at key
can have a colspan decreased by one.
editor.canDecreaseRowspanAtKey(key: string)
Returns true if the cell at key
can have a rowspan decreased by one.
editor.getColumnPropertiesAtKey(key: string)
Returns properties of the table at key