问React Quill不可编辑嵌入

EN

import ReactQuill from 'react-quill';
import './App.scss';
import 'react-quill/dist/quill.snow.css';

import { useState, useRef } from 'react';

const Quill = ReactQuill.Quill;
const BlockEmbed = Quill.import('blots/embed');


class Mention extends BlockEmbed {
  static create(value) {
    let node = super.create(value);
    node.innerText = value;
    // node.contenteditable = false;
    node.setAttribute("contenteditable", false);
    return node;
  }
  static value(node) {
    return node.childNodes[0].textContent;
  }
}

Mention.blotName = 'label';
Mention.tagName = 'SPAN';
Mention.className = 'ql-label';
Quill.register(Mention);



function App() {
  const [value, setValue] = useState('');
  const thisEditor = useRef(null);

  const inserMention = (thisEditor) => {
    const editor = thisEditor.getEditor();
    let range = editor.getSelection();
    let position = range ? range.index : 0;
    editor.insertEmbed(position, 'label');
  }
  return (
    <div className="container bg-crow-green bg-gradient px-0">

      <div className='mt-4 border rounded'>
        <ReactQuill ref={thisEditor} theme='snow' value={value} onChange={setValue} />
        <button type="button" className="btn mt-4 btn-danger w-25" onClick={() => inserMention(thisEditor.current)}>Insert</button>
      </div>
    </div >
  );
}

export default App;