0.3.0 • Published 8 years ago
draft-js-table v0.3.0
draft-js-table
draft-js-table
is a collection of utilities to edit tables in DraftJS. This module requires the use of facebook/draft-js#388.
A working demo is available at samypesse.github.io/draft-js-table/.
Installation
$ npm install draft-js-table
API
TableUtils.insertTable(editorState, nRows, nColumns)
Insert a new table to replace current block.
TableUtils.insertRow(editorState)
Insert a new row after the current one.
TableUtils.insertColumn(editorState)
Insert a new column after the current one.
TableUtils.getAlignForCell(contentState, cellKey)
Return the text alignment in a cell (left
, right
or center
).
TableUtils.setAlignForCell(contentState, cellKey, align)
Update the text alignment in a cell (left
, right
or center
).
Handle key events inside a table
draft-js-table
provides a set of functions to help handle key events/commands from DraftJS. This function can be composed with other command handlers.
const blockRenderMap = NestedUtils.DefaultBlockRenderMap
.merge(TableUtils.DefaultBlockRenderMap);
var MyEditor = React.createComponent({
getInitialState: function() {
return {
editorState: Draft.EditorState.createEmpty()
};
},
onChange: function(editorState) {
this.setState({
editorState: editorState
});
},
handleKeyCommand: function(command) {
var newState = (TableUtils.hanldeKeyCommand(editorState, command)
|| Draft.RichUtils.handleKeyCommand(editorState, command));
if (newState) {
this.onChange(newState);
return true;
}
return false;
},
render: function() {
retur <Draft.Editor
editorState={this.state.editorState}
handleKeyCommand={this.handleKeyCommand}
blockRenderMap={blockRenderMap}
onChange={this.onChange}
/>;
}
});