React: <div contentEditable="true"> で画像のようなことがやりたい。

Question

Reactを使用して次の画像のようなことがやりたいです。

• テキストを入力する。

• 入力したテキストを「。」で区切りそれぞれの文を<span>タグで囲む。（event発火はonBlur）

• 各文にhoverしたときにメニューを表示する。

• さらに編集もできる。

これらの画像は、HTML/CSSで作ったモックアップです。
これをReactで実現したいのですが、さっぱりわかりません。
現在、自力で取り組んだところまでのコードを添付しておきます。

該当のソースコード

import React, { Component } from 'react'
import './css/TextBox.css';

class Sentence extends Component {
  render() {
    return (
      <span className="sentence">
        {this.props.sentence}
        <ul>
          <li><a href="#">Sub-menu01</a></li>
          <li><a href="#">Sub-menu02</a></li>
          <li><a href="#">Sub-menu03</a></li>
        </ul>
      </span>
    )
  }
}

class TextBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sentences: [],
    };
    this.handlerBlur = this.handlerBlur.bind(this);
  }

  handlerBlur(e) {
    const new_sentences = e.target.innerText.split('。').filter(v => v);
    this.setState({
      sentences: new_sentences,
    });
  }

  render() {
    return (
      <div contentEditable="true" class="text-box" onBlur={this.handlerBlur} suppressContentEditableWarning='false'>
        {
          this.state.sentences.map((sentence, i) => {
            return <Sentence key={i} sentence={sentence} />
          })
        }
      </div>
    )
  }
}

export default TextBox

試したこと

現状は、この写真のように元のテキストも表示されてしまいます。

Answer 1

reactで可能かどうかはわかりません
また改行したりするとdivが別れたりするのでそれをどうするかにもよりますね・・・

Comments

[yambejp]

window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('[contenteditable]').forEach(x=>{
x.addEventListener('blur',e=>{
var v=x.textContent.replace(/。(.)/g,x=>("。</span><span>"+x[1]));
v="<span>"+v+"</span>";
x.innerHTML="";
x.insertAdjacentHTML('afterbegin',v);
});
});
});

Answer 2

現状は、この写真のように元のテキストも表示されてしまいます。

ソース中のe.target.innerTextとthis.state.sentencesの両方が表示されているためです。
onblurでthis.state.sentencesに切り出しを行う際にe.target.innerTextを空にすれば元のテキストは表示されなくなりますが、そうするとやりたい事の中にある「さらに編集もできる」ができなくなります。

せっかくReactで作成しているので<div contentEditable="true">を使うのではなく、<input>のvalueのようにsentencesと同じくstateで管理できる値を使うのはどうでしょうか？