0

I’m struggling at modeling a certain use case of mine with Draft.js. I’m highlighting certain words/phrases in the editor with a composite decorator by using a regex strategy.

What I’m trying to archive is: if a user clicks on a decorated word, I want to toggle it’s state and store it somehow.

How would I do this? Any clues?

At a higher level, it’s basically a way to ignore certain decorated words, even if they match the regex strategy

I thought that maybe entities could help me do the job here, they would allow me to store such meta information (ex: ignore) on the decorated word, right?

roundrobin
  • 674
  • 1
  • 7
  • 23

1 Answers1

1

When I faced the similar issue I used the store of the rendered component for storing a condition. You used a functional component here:

renderAnnotation(type){
    return (props)=> {
        return (<span className={type} onClick={this.ignoreDecoratedWord.bind(this, props)}>{props.children}</span>);
    };
}

You can change it and use standard react component:

renderAnnotation(type){
    return (props)=> {
        return (<HighlightedWord type={type} {...props} />);
    };
}

The HighlightedWord component is:

class HighlightedWord extends React.Component {
    constructor() {
    super();

    this.state = { enable: true }
  }

  toggleStatus = () => {
    this.setState({ enable: !this.state.enable });
  }

  render() {
    return (
      <span className={this.state.enable ? this.props.type : ''} onClick={this.toggleStatus}>{this.props.children}</span>
    )
  }
}

We toggle the highlighting status after the click event.

Check this demo.

Mikhail Shabrikov
  • 8,453
  • 1
  • 28
  • 35
  • Thanks for your contribution. This solution isn't enough, because I need to be able to persist this state fairly easy to a DB. That's why I was thinking entities could do the job. – roundrobin Jan 18 '18 at 16:35