Reactjs - Редактировать и сохранять выходной текст по клику

Question

Я работаю с reactjs. Я показываю стенограмму, поступающую динамически из API.

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

Требуется аналогичное поведение: https://www.temi.com/editor/t/T_ZcR9ijSyKGj5UHt60vNUi7dUpMjqw_X9FZlosLaTacAhy1pdimDHqpTUw84VCdr-BlPJ5I4LdjU-_DoXgox1hxhG8?loadFrom=Dashboard&openShareModal=False

мой JS код:

 render () {
    const { speakers, sentences , transcript } = this.props
    const { playedSeconds, isMultiSelect, timestamp, nuggets } = this.state
    console.log("transcipt return => ",transcript);
    return (<Fragment>
      <div className='panel-body chat-window-body' onMouseUp={this.handleMultiSelection} onDoubleClick={this.handleMultiSelection}>
        {transcript ? <p style={{ 
        marginTop:"20px",
        lineHeight: 2
      }}>{transcript}</p> : sentences.map((sentence, sIndex) => {
          let speakerName = ''
          if (sentence.speaker === 1) {
            speakerName = speakers ? speakers[0] : `Speaker ${sentence.speaker}`
          } else {
            speakerName = speakers ? speakers[1] : `Speaker ${sentence.speaker}`
          }
          const ref1 = React.createRef()
          return (<div key={sIndex} className='chat-item border-bottom'>
            <div className='media'>
              <div className='user-name d-inline-block m-r-30 align-middle'>
                <div className='speaker-time' onClick={this.setSeekTime(sentence.startSecsTimestamp, sentence.endSecsTimestamp, false, 'sp_' + sentence.speaker + '_w_0_' + sIndex, false)} data-start-speaker-time={sentence.startSecsTimestamp}>
                  {sentence.startSecs}
                </div>
                <div id={'sp_' + sentence.speaker + sIndex} ref={ref1} onClick={this.showPopupSpeaker(speakerName, sentence.speaker, ref1)} className='speaker-name'>{speakerName}</div>
              </div>
              <div className='media-body my-auto'>
                <div className='text-muted'>
                  {sentence.words.map((word, wIndex) => {
                    let classSecondsWord = ''
                    const isTagged = false
                    const roundPlayedSeconds = parseFloat(playedSeconds.toFixed(2))
                    const roundStartSeconds = word.startSeconds
                    const roundEndSeconds = word.endSeconds
                    // console.log('diffSecs: ', diffSecs)
                    if (roundPlayedSeconds >= roundStartSeconds && roundPlayedSeconds < roundEndSeconds) {
                      // console.log('roundStartSeconds: ', roundStartSeconds)
                      // console.log('roundEndSeconds: ', roundEndSeconds)
                      // console.log('roundPlayedSeconds: ', roundPlayedSeconds)
                      classSecondsWord += ' active'
                    }

                    /* if (!isTagged) {
                      const WSS = word.startSeconds * 100
                      const WES = word.endSeconds * 100
                      const TS = parseFloat(timestamp[0], 2) * 100
                      const TE = parseFloat(timestamp[1], 2) * 100
                      if (WSS >= TS && WES <= TE) {
                        isTagged = true
                        classSecondsWord += ' tagged'
                      }
                    } */

                    if (nuggets) {
                      if (nuggets.length > 0) {
                        for (let i = 0; i < nuggets.length; i++) {
                          const tag = nuggets[i]
                          const WSS = word.startSeconds * 100
                          const WES = word.endSeconds * 100
                          const TS = parseFloat(tag.timestamp[0], 2) * 100
                          const TE = parseFloat(tag.timestamp[1], 2) * 100
                          if (WSS >= TS && WES <= TE) {
                            classSecondsWord += ' tagged'
                            break
                          }
                        }
                      }
                    }

                    const key = 'sp_' + sentence.speaker + '_w_' + wIndex + '_' + sIndex
                    const ref = React.createRef()
                    if (wIndex % 10 === 0) {
                      return (<Fragment key={key}>
                        <div id={key} ref={ref} data-start-seconds-key={word.startSeconds} data-end-seconds-key={word.endSeconds} className={classSecondsWord} onClick={this.setSeekTime(word.startSeconds, word.endSeconds, false, key, ref)}>
                          {word.word}
                        </div>
                        <div className='space-delimeter'>&nbsp;</div>
                      </Fragment>)
                    } else {
//this code is executed and returns the following output://
                          return (<div id={key} key={key} ref={ref} data-start-seconds-key={word.startSeconds} data-end-seconds-key={word.endSeconds} className={classSecondsWord} onClick={this.setSeekTime(word.startSeconds, word.endSeconds, false, key, ref)}>
                            {word.word}
                          </div>)
                        }
                      })}
                    </div>
                  </div>
                </div>
              </div>)
            })}
          </div>
          {this.state.popupOpen && this.renderPopup()}
          {this.state.popupSpeakerOpen && this.renderPopupSpeaker()}
          {this.state.showCreateNuggetModal && <CreateNugget
            show
            timestamp={timestamp}
            researchId={this.props.match.params.id}
            nuggetId={this.state.nuggetId}
            nuggets={this.state.nuggets}
            handleCreateNuggetModal={this.handleCreateNuggetModal}
            handleCloseNuggetModal={this.handleCloseNuggetModal}
          />}
        </Fragment>
        )
      }
    }

Кодовый вывод