draft-js-simpledecorator
Description
Create some Draft.Decorators
as simply as with Draft.CompositeDecorator
, but with the possibility to pass custom props
to your decorating component.
Why ?
When making Decorators
, you normally either implement the DecoratorType
interface yourself (tedious), or use the convenient Draft.CompositeDecorator
. Draft.CompositeDecorator
asks to define a strategy
and to provide a rendering component
. The strategy
function simply tells what part of the document should be decorated by the component
. But you have no way to pass custom props
to the component
.
SimpleDecorator
implements the DecoratorType
interface for you, and still offers the flexibility of passing custom props
in your strategy
.
Installation
$ npm install draft-js-simpledecorator
Usage
This module uses the same convention than Draft.CompositeDecorator
, and ask to provide a strategy
and a component
.
var Draft = ;var SimpleDecorator = ; var decorator = { // Decorate any span of text in the content block, // providing custom props! var customProps = {}; ; } { // return some React.Component }; var editorState = DraftEditorState
Example: Coloring hexadecimal color codes
Below is an example decorator that finds any hexadecimal color code (ex: #ffca40
), and color them accordingly:
const hexColorDecorator = { const text = contentBlock // Match text like #ac00ff and #EEE let HEX_COLOR = /#/g // For all Hex color matches let match while match = HEX_COLOR !== null // Decorate the color code let colorText = match0 let start = matchindex let end = start + colorTextlength let props = color: colorText } /** * @prop */ { // Colorize the text with the given color return <span => propschildren </span> }
To do that in Draft, you would not be able to use Draft.CompositeDecorator
. Instead, you would have to re-implement the DecoratorType
interface yourself.
See also
Draft.CompositeDecorator
permits to define multiple decorators. To do so with SimpleDecorator
, you can use MultiDecorators, which allows to easily compose any decorator.