Edit

Decorators

Those extensions require a good understanding of the Draft.js API.

Custom decorators follow the Draft.js CompositeDecorator API. They can be specified as an array via the decorators prop of the editor, with strategy and component attributes.

A very basic example would be a hashtag decorator:

decorators={[
  {
    strategy: (block, callback) => {
      const text = block.getText();
      let matches;
      while ((matches = /#[\w]+/g.exec(text)) !== null) {
        callback(matches.index, matches.index + matches[0].length);
      }
    },
    component: ({ children }) => (
      <span style={{ color: "#007d7e" }}>{children}</span>
    ),
  },
]}

Other more advanced examples could share state between the strategy and its rendering. For example, to build syntax highlighting for code blocks in rich text.

Examples