DraftJS Utils
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.
Installing
npm install draftjs-utils
Methods
| 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. |
| 3 | getBlockBeforeSelectedBlock | EditorState | ContentBlock | The function will return block just before the selected block(s). The data type of returned object is ContentBlock. |
| 5 | getAllBlocks | EditorState | List | The function will return all the Blocks of the editor. The data type of returned objects is ContentBlock. |
| 6 | 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. |
| 7 | removeSelectedBlocksStyle | EditorState | EditorState | The function will reset the type of selected Blocks to unstyled. |
| 8 | getSelectionText | EditorState | string | The function will return plain text of current selection. |
| 9 | addLineBreakRemovingSelection | EditorState | EditorState | The function will replace currently selected text with a \n. |
| 10 | insertNewUnstyledBlock | EditorState | EditorState | The function will add a new unstyled Block and copy current selection to it. |
| 11 | clearEditorContent | EditorState | EditorState | The function will clear all content from the Editor. |
| 12 | 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. |
| 13 | setBlockData | EditorState, object | EditorState | The function will add block level meta-data. |
| 14 | getSelectedBlocksMetadata | EditorState | Map | The function will return map of block data of current block. |
| 15 | blockRenderMap | Map | The function will return map of block types Block Type -> HTML Tag. | |
| 16 | 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. |
| 17 | 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. |
| 18 | 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. |
| 19 | isListBlock | ContentBlock | boolean | The function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'. |
| 20 | changeDepth | EditorState , adjustment, maxDepth | EditorState | Change the depth of selected Blocks by adjustment if its less than maxdepth. |
| 21 | getSelectionCustomInlineStyle | EditorState , Array (of styles) | object | Function will return Map of custom inline styles applicable to current selection. |
| 22 | toggleCustomInlineStyle | EditorState , string (styleType), string(styleValue) | EditorState | Toggle application of custom inline style to current selection. |
| 23 | removeAllInlineStyles | EditorState | EditorState | The function will remove all inline styles of current selection. |
Demo
For a complete example, check out https://github.com/jpuri/react-draft-wysiwyg repo.
License
MIT.