You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

draft-js-simpledecorator

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

draft-js-simpledecorator

Create a Draft.Decorator as simply as with Draft.CompositeDecorator, with the flexibility of passing custom props.


Version published
Weekly downloads
878
decreased by-11.13%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

draft-js-simpledecorator

NPM version

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.

Keywords

FAQs

Package last updated on 13 Feb 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc