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 = require('draft-js');
var SimpleDecorator = require('draft-js-simpledecorator');

var decorator = new SimpleDecorator(
    function strategy(contentBlock, callback, contentState) {
        // Decorate any span of text in the content block,
        // providing custom props!
        var customProps = {};
        callback(start, end, customProps);
    },

    function component(props) {
        // return some React.Component
    }
);

var editorState = Draft.EditorState.createEmpty(decorator)

Example: Coloring hexadecimal color codes

Below is an example decorator that finds any hexadecimal color code (ex: #ffca40), and color them accordingly:

const hexColorDecorator = new SimpleDecorator(

    function strategy(contentBlock, callback, contentState) {
        const text = contentBlock.getText()

        // Match text like #ac00ff and #EEE
        let HEX_COLOR = /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g

        // For all Hex color matches
        let match
        while ((match = HEX_COLOR.exec(text)) !== null) {
            // Decorate the color code
            let colorText = match[0]
            let start = match.index
            let end = start + colorText.length
            let props = {
                color: colorText
            }
            callback(start, end, props)
        }
    },

    /**
     * @prop {String} color
     */
    function component(props) {
        // Colorize the text with the given color
        return <span style={{ color: props.color }}>{ props.children }</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.