draft-js-handlebars-plugin
Installation
npm install draft-js-handlebars-plugin --save
add the css dependencies
<link rel="stylesheet" href="https://static.ux.cimpress.io/mcp-ux-css/1.4/development/1.4.8/css/mcp-ux-css.min.css" charset="utf-8" integrity="sha256-N7q2V/oEomo+XXIEsLN2JsmpMoGvO8EgGC9eWPjx8Ec=" crossorigin="anonymous">
<link rel="stylesheet" href="//cloud.typography.com/7971714/6011752/css/fonts.css"/>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)