slate-edit-table-extend

slate-edit-table

A Slate plugin to handle table edition.

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

Install

npm install slate-edit-table

Features

• Pressing Up and Down, move the cursor to next/previous row
• Pressing Enter, insert a new row
• Pressing Cmd+Enter (Ctrl+Enter on Windows/Linux) exits the table, into a new default block.
• Pressing Tab, move the select to next cell
• Pressing Shift+Tab, move the select to previous cell

Simple Usage

import EditTable from 'slate-edit-table'

const plugins = [
  EditTable()
]

Arguments

• [typeTable: String] — type for table
• [typeRow: String] — type for the rows.
• [typeCell: String] — type for the cells.
• [exitBlockType: String] — Mod+Enter will exit the table, into the given block type. Pass null to disable this behavior.

Utilities and Change

slate-edit-table exports utilities and changes:

utils.isSelectionInTable

plugin.utils.isSelectionInTable(value: Slate.Value) => boolean

Return true if selection is inside a table cell.

utils.isSelectionOutOfTable

plugin.utils.isSelectionOutOfTable(value: Slate.Value) => boolean

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

utils.getPosition

plugin.utils.getPosition(value: Slate.Value) => TablePosition

Returns the detailed position in the current table. Throws if not in a table.

changes.insertTable

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

Insert a new empty table.

changes.insertRow

plugin.changes.insertRow(change: Change, at: ?number) => Change

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

changes.insertColumn

plugin.changes.insertColumn(change: Change, at: ?number) => Change

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

changes.removeTable

plugin.changes.removeTable(change: Change) => Change

Remove current table.

changes.removeRow

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

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

changes.removeColumn

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

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

changes.moveSelection

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

Move the selection to a specific position in the table.

changes.moveSelectionBy

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

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

changes.setColumnAlign

plugin.changes.setColumnAlign(change: Change, align: string, at: number) => Change

Sets column alignment for a given column (at), in the current table. align defaults to center, at is optional and defaults to current cursor position.

The align values are stored in the table node's data. table.node.data.get('align') should be an array of aligns string, corresponding to each column.

TablePosition

An instance of TablePosition represents a position within a table (row and column). You can get your current position in a table by using plugin.utils.getPosition(value).

position.getWidth() => number

Returns the number of columns in the current table.

position.getHeight() => number

Returns the number of rows in the current table.

position.getRowIndex() => number

Returns the index of the current row in the table.

position.getColumnIndex() => number

Return the index of the current column in the table.

position.isFirstCell() => boolean

True if on first row and first column of the table

position.isLastCell() => boolean

True if on last row and last column of the table

position.isFirstRow() => boolean

True if on first row

position.isLastRow() => boolean

True if on last row

position.isFirstColumn() => boolean

True if on first column

position.isLastColumn() => boolean

True if on last column