Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/cimpress-mcp/draft-js-handlebars-plugin

This plugin allows replaces the handlebars syntax with visual placeholders.
https://github.com/cimpress-mcp/draft-js-handlebars-plugin

draft-js draft-js-plugins handlebars

Last synced: about 5 hours ago
JSON representation

This plugin allows replaces the handlebars syntax with visual placeholders.

Awesome Lists containing this project

README

        

# draft-js-handlebars-plugin

## Installation

`npm install draft-js-handlebars-plugin --save`

add the css dependencies

```html

```

## Import

`import createPlaceholderVisualizationPlugin, { insertPlaceholderEntity, placeholderVisualizationDecorator, selectionUtils } from 'draft-js-handlebars-plugin'`

## Usage

### createPlaceholderVisualizationPlugin()

Function that creates the plugin that has to be added to draft-js plugins

### insertPlaceholderEntity(currentContent, placeholderText, selection, inlineStyle, link)

Returns a new ContentState with the placeholder entity created on the selection specified if provided, if not is added at the end of the editor.

```
/**
*
* @param {ContentState} currentContent
* @param {String} placeholderText
* @param {SelectionState} selection
* @param {DraftInlineStyle} inlineStyle
* @param {String} link
*/
```
### placeholderVisualizationDecorator

Decorator included in the plugin

### selectionUtils

Useful functions for handling selections on draft js

- moveBehindEntity(entityKey, editorState)
//Move selector behind the entity with the entity key provided.

- selectWholeEntities(getEditorState, setEditorState, traversingLeft = true)