JavaScript“范围”选择-有没有办法；“未绑定”&引用；一元论；使用Javascript的范围和选择的contenteditable？

嘿，伙计们我正在启动我的第一个ReactJs项目，我正在尝试创建一个

contenteditable

组件，在进行选择和按下按钮时处理“粗体”和“斜体”，下面是我的代码：

bold = ( e ) => {
  e.preventDefault();
  const selection = window.getSelection();
  if( !selection.isCollapsed ){
    const range = selection.getRangeAt(0);
    const b = document.createElement('b');
    b.appendChild(range.extractContents());
    range.insertNode(b);
    this.setState({html: this.contentEditable.current.innerHTML})
  }
}

italic = ( e ) => {
  e.preventDefault();
  const selection = window.getSelection();
  if (!selection.isCollapsed){
    const range = selection.getRangeAt(0);
    const i = document.createElement('i');
    i.appendChild(range.extractContents());
    range.insertNode(i);
    this.setState({html: this.contentEditable.current.innerHTML})
  }
}

render () {
  return (
    <div>
      <ContentEditable html={this.state.html} />
      <button onClick={this.bold}>bold</button>
      <button onClick={this.italic}>italic</button>
    </div>
  )
}

bold=（e）=>{
e、 预防默认值（）；
const selection=window.getSelection（）；
如果（！selection.isCollapsed）{
const range=selection.getRangeAt（0）；
const b=document.createElement（'b'）；
b、 appendChild（range.extractContents（））；
range.insertNode（b）；
this.setState（{html:this.contentEditable.current.innerHTML}）
}
}
斜体=（e）=>{
e、 预防默认值（）；
const selection=window.getSelection（）；
如果（！selection.isCollapsed）{
const range=selection.getRangeAt（0）；
const i=document.createElement（'i'）；
i、 appendChild（range.extractContents（））；
range.insertNode（i）；
this.setState（{html:this.contentEditable.current.innerHTML}）
}
}
渲染（）{
返回(
大胆的
斜体
)
}

即使我从

标记的一半中进行选择并将其设置为粗体，也可以正常工作，因为我正在提取范围内容并将其附加到新节点

现在的问题是：有没有一种方法可以像下面的例子那样“取消绑定”或“统一”一段文本

之前：

我正在选择一些文本来更改标记位置

之后：

我正在选择一些文本来更改标记位置

在这种情况下，我真的需要别人的帮助