React-将可编辑的工具提示添加到div中突出显示的文本

Question

在React 16.8组件中，我有一个包含文本的div。我想允许用户选择一些文本，突出显示所选内容，使工具提示出现在突出显示上方，允许用户编辑工具提示，并保留突出显示/工具提示。

我已经通过rangy模块突出显示了要工作的内容，但不知道如何以React方式将HTML插入包含文本的div中。

感谢所有帮助/指导。

const Text = (props) => {
  const [highlighter, setHighlighter] = useState(undefined);

  useEffect(()=>{
    rangy.init();
    let h = rangy.createHighlighter();
    h.addClassApplier(rangy.createClassApplier(classes.highlighter));
    setHighlighter(h);
  }, []);

  const select = () => {
    highlighter.highlightSelection(classes.highlighter);
    rangy.getSelection().removeAllRanges();
  }

  return (
    <div className={classes.Text}>
      <h2>{props.text.title}</h2>
      <div className={classes.TextInner}>
        <div onMouseDown={select} onMouseUp={select}>
          {props.text.content}
        </div>
      </div>
    </div>
  );

}