node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org ¬Ľ

draft-js-create-inline-style-plugin

draft-js-create-inline-style-plugin

Creates a new plugin for using inline styles as decorators.

Demo

WAT

  • It all began with this tweet.
  • And then there was this issue.

Currently, There is no way of using nested decorators, but using decorators is so fun. So the proposed solution is to handle Draft.js' inline styles as if they were controlled by decorators.

Installation ūüćĒ

npm install --save draft-js-create-inline-style-plugin

Usage:

import React from 'react';
import Editor from 'draft-js-plugins-editor';
import findWithRegex from 'find-with-regex';
import createInlineStylePlugin from 'draft-js-create-inline-style-plugin';
 
const STAR_REGEX = /\*.+\*/g;
const TILDE_REGEX = /~.+~/g;
 
const kindOfMarkdownPlugin = createInlineStylePlugin([{
    strategy: (contentBlock, callback) => findWithRegex(STAR_REGEX, contentBlock, callback),
    styles: ['BOLD']
}, {
    strategy: (contentBlock, callback) => findWithRegex(TILDE_REGEX, contentBlock, callback),
    styles: ['UNDERLINE']
}]);
 
const MyEditor = ({ editorState, onChange }) => (
  <div>
    <Editor
      editorState={ editorState }
      onChange={ onChange }
      plugins={ [kindOfMarkdownPlugin] }
    />
  </div>
);
 
export default MyEditor;