React-Quill: как динамически заменить текст во время набора текста, не теряя фокус и удерживая курсор в нужном месте

Question

Этот вопрос специально посвящен реакции-гусиным перьям. Что я хочу сделать: заменить один текст в компоненте "реактивный перо" другим во время набора текста. Например: #s1 будет заменено чем-то вроде productname(1eq, 100mg, 10ml), Знайте, я не хочу использовать JQuery.

До сих пор я делал это так (код ниже), но после внесения изменений я теряю фокус и не знаю, как его вернуть. Более того, консоль выдает ошибку типа "Указанный диапазон отсутствует в документе". В общем, это работает, но пользователь должен нажать на компонент, чтобы продолжить вводить текст, и если у меня есть более одного компонента реактивного пера на странице, он перейдет к объекту первого реактивного пера (что не удобно при работе с последний).

class Procedure extends Component {

constructor(props){
    super(props);
    this.state={
        content='';
    }
}

replaceTagByText(value){
   return value.replace(/#(\w+)\s/, myNewValue );
}

handleProcedureContentChange = (value) => {
    let newValue = replaceTagByText(value);
    this.setState({content:newValue});

};

render() {
    return (
      <div>
        <div style={styles.title}>My title</div>
        <ReactQuill
            key={"procedure_RTE_" + this.props.experimentId}
            value={this.state.content}
            modules={modules}
            formats={formats}
            onChange={this.handleProcedureContentChange}
        />

      </div>

    );
  }
}

Обратите внимание, что код слишком упрощен, я использую избыточность для обслуживания своих данных, но общая идея здесь.

Вопрос в том, как правильно заменить текст в реагирующем игле при наборе текста, не теряя фокус и удерживая курсор в нужном месте.

Answer 1

Если, наконец, найти решение. Идея состоит в том, чтобы следить за редактором и просто установить правильный setSelection. Обновленный код ниже.

class Procedure extends Component {

constructor(props){
    super(props);
    this.state={
        content='';
    }
}

replaceTagByText(value){
   return value.replace(/#(\w+)\s/, myNewValue );
}
//Modification of the code is there
handleProcedureContentChange = (value) => {
    let newValueObject = replaceTagByText(value);
    this.setState({content:newValueObject.value});
    quillRef = this.refs.myQuillRef.getEditor();
    //I need that settimeout to do it after the update of my redux logic
    setTimeout(() => {
      quillRef.focus();
      quillRef.setSelection(newValueObject.indexAfterInsertion, 0, myQuillRef);
    }, 500);

};

render() {
    let myRef = (el) => this.myQuillRef = el;
    return (
      <div>
        <div style={styles.title}>My title</div>
        <ReactQuill
            key={"procedure_RTE_" + this.props.experimentId}
            ref={myRef}
            value={this.state.content}
            modules={modules}
            formats={formats}
            onChange={()this.handleProcedureContentChange}
        />

      </div>

    );
  }
}