Search code examples
reactjsdraftjsdraft-js-plugins

Highlight words in draft-js NPM


I have a draft-js rich editor. All I need is to highlight some words which I can supply to it in array. Just like I can supply some words in array to my editor and based on some class, it can highlight those.

Any info about any external library doing the same with draft-js would be helpful

 import Editor from 'draft-js-plugins-editor';
 import { EditorState } from 'draft-js';

    class Child extends React.Component {
    constructor(props){
      super(props);
      this.state={
        editorState:EditorState.createEmpty()
      }
    }

    updateEditorState(editorState){
      this.setState(
        {editorState}
      );
    }

        render() {      
          return (<div className="editor-container"> 
          <Editor placeholder="Explore your way in..."
          editorState={this.state.editorState}
          onChange={this.updateEditorState.bind(this)}

          />

           </div>);

        }
      }

Solution

  • Try to use Composite Decorators https://draftjs.org/docs/advanced-topics-decorators#compositedecorator

    Example on Codesandbox: https://codesandbox.io/s/jovial-bhaskara-ozxi6