An collection of useful utility functions for DraftJS.
I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.
npm install draftjs-utils
Method Name | Parameters | Return Type | Description | |
---|---|---|---|---|
1 | getSelectedBlocksMap | EditorState | OrderedMap | The function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock. |
2 | getSelectedBlocksList | EditorState | List | The function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock. |
3 | getSelectedBlock | EditorState | ContentBlock | The function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock. |
4 | getAllBlocks | EditorState | List | The function will return all the Blocks of the editor. The data type of returned objects is ContentBlock. |
5 | getSelectedBlocksType | EditorState | string | The function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type. |
6 | removeSelectedBlocksStyle | EditorState | EditorState | The function will reset the type of selected Blocks to unstyled . |
7 | getSelectionText | EditorState | string | The function will return plain text of current selection. |
8 | addLineBreakRemovingSelection | EditorState | EditorState | The function will replace currently selected text with a \n . |
9 | insertNewUnstyledBlock | EditorState | EditorState | The function will add a new unstyled Block and copy current selection to it. |
10 | clearEditorContent | EditorState | EditorState | The function will clear all content from the Editor. |
11 | getSelectionInlineStyle | EditorState | object | The function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection. |
12 | getSelectionEntity | EditorState | Entity | The function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block. |
13 | getEntityRange | EditorState, entityKey | object | The function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block. |
14 | handleNewLine | EditorState | EditorState, Event | The function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any. |
15 | isListBlock | ContentBlock | boolean | The function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'. |
16 | changeDepth | EditorState , adjustment, maxDepth | EditorState | Change the depth of selected Blocks by adjustment if its less than maxdepth. |
MIT.