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.