Need help with draftjs-utils?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

jpuri
260 Stars 38 Forks MIT License 91 Commits 29 Opened issues

Description

An collection of useful utility functions for DraftJS.

Services available

!
?

Need anything else?

Contributors list

# 10,686
draft-j...
reactjs
nextjs
Markdow...
59 commits
# 23,124
Django
django-...
codeign...
draft-j...
2 commits
# 270,585
JavaScr...
React
emotico...
CSS
1 commit
# 26,764
Python
CSS
reactjs
tiling-...
1 commit
# 139,485
JavaScr...
photosh...
inline-...
React
1 commit
# 257,505
HTML
TypeScr...
gatsbyj...
swagger
1 commit
# 373,667
Elixir
React
TypeScr...
HTML
1 commit

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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.