Реагировать - добавить редактируемую подсказку к выделенному тексту в div - PullRequest
Новая
       21

Реагировать - добавить редактируемую подсказку к выделенному тексту в div

0 голосов
/ 17 июня 2019

Внутри компонента React 16.8 у меня есть div, содержащий текст.Я хочу, чтобы пользователь мог выделить часть текста, выделить выделение, сделать всплывающую подсказку над выделением, позволить пользователю редактировать всплывающую подсказку и сохранить выделение / всплывающие подсказки.

Я получилвыделение для работы через модуль rangy, но не знаю, как вставить HTML в текстовый div в React -way.

Спасибо за помощь / руководство. 

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>
  );

}
...