Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/jpuri/draftjs-utils

An collection of useful utility functions for DraftJS.
https://github.com/jpuri/draftjs-utils

Last synced: 3 months ago
JSON representation

An collection of useful utility functions for DraftJS.

Host: GitHub
URL: https://github.com/jpuri/draftjs-utils
Owner: jpuri
License: mit
Created: 2016-06-17T05:00:22.000Z (about 8 years ago)
Default Branch: master
Last Pushed: 2023-01-04T21:37:50.000Z (over 1 year ago)
Last Synced: 2024-04-01T18:49:22.806Z (3 months ago)
Language: JavaScript
Size: 8.23 MB
Stars: 284
Watchers: 5
Forks: 47
Open Issues: 39
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE

Lists

awesome-draft-js - DraftJS Utils - Set of utility functions for DraftJS. (Common Utilities)
awesome-draft-js - DraftJS Utils - Set of utility functions for DraftJS. (Common Utilities)

README

        # DraftJS Utils

An collection of useful utility functions for [DraftJS](https://github.com/facebook/draft-js).

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](https://facebook.github.io/immutable-js/).

## Installing

`npm install draftjs-utils`

## Methods

| | Method Name | Parameters | Return Type | Description |

| -------- | -------- | -------- | -------- | -------- |

| 1 | getSelectedBlocksMap | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [OrderedMap](https://facebook.github.io/immutable-js/docs/#/OrderedMap) |The function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is [ContentBlock](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content). |

| 2 | getSelectedBlocksList | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [List](https://facebook.github.io/immutable-js/docs/#/List) | The function will return an Immutable List of currently selected Blocks. The data type of returned objects is [ContentBlock](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content). |

| 3 | getSelectedBlock | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [ContentBlock](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content) | 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](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content). |

| 3 | getBlockBeforeSelectedBlock | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [ContentBlock](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content) | The function will return block just before the selected block(s). The data type of returned object is [ContentBlock](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content). |

| 5 | getAllBlocks | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [List](https://facebook.github.io/immutable-js/docs/#/List) | The function will return all the Blocks of the editor. The data type of returned objects is [ContentBlock](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content). |

| 6 | getSelectedBlocksType | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | 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](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | The function will reset the type of selected Blocks to `unstyled`.|

| 8 | getSelectionText | [EditorState](https://facebook.githubgetSelectionInlineStyle.io/draft-js/docs/api-reference-editor-state.html#content) | string | The function will return plain text of current selection.|

| 9 | addLineBreakRemovingSelection | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | The function will replace currently selected text with a `\n`.|

| 10 | insertNewUnstyledBlock | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) |[EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | The function will add a new unstyled Block and copy current selection to it.|

| 11 | clearEditorContent | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | The function will clear all content from the Editor.|

| 12 | getSelectionInlineStyle | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | 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](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content), object | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | The function will add block level meta-data.|

| 14 | getSelectedBlocksMetadata | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [Map](https://facebook.github.io/immutable-js/docs/#/Map) | The function will return map of block data of current block.|

| 15 | blockRenderMap |  | [Map](https://facebook.github.io/immutable-js/docs/#/Map) | The function will return map of block types Block Type -> HTML Tag.|

| 16 | getSelectionEntity | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [Entity](https://facebook.github.io/draft-js/docs/api-reference-entity.html#content) | 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](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content), 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](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) |[EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content), 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](https://facebook.github.io/draft-js/docs/api-reference-content-block.html#content) |  boolean | The function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.|

| 20 | changeDepth | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) , adjustment, maxDepth | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | Change the depth of selected Blocks by adjustment if its less than maxdepth.|

| 21 | getSelectionCustomInlineStyle | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) , Array (of styles) | object | Function will return Map of custom inline styles applicable to current selection.|

| 22 | toggleCustomInlineStyle | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) , string (styleType), string(styleValue) | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | Toggle application of custom inline style to current selection.|

| 23 | removeAllInlineStyles | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | [EditorState](https://facebook.github.io/draft-js/docs/api-reference-editor-state.html#content) | 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.