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.