Highlight selection with note, shown on hover and editable

Question

I try to use draft.js to implement a text editor with some features to correct a text. The idea is to highlight an error, and write some note to correct it. Hover the highlighted text, the note should be shown and be editable.

I have already written some inline styles to highlight the text but an inline style can only wrap some text with a span (or another) and give it some style (https://facebook.github.io/draft-js/docs/advanced-topics-inline-styles.html#content)

However, I need to handle onmouseover / onmouseleave events to show the note and edit it eventually.

Can I wrap only the selection with a block or something else ? The block would be a span within another block like an inline style ...

Answer 1

A decorator. gives you the chance of using custom React component to render some certain text. So you can register mouse events in you React component.