使用Draft.js在插入实体后重置样式

import React, { useState } from 'react';
import { Editor, EditorState, ContentState, Modifier } from 'draft-js';

const MyEditor = () => {
  const [editorState, setEditorState] = useState(
    EditorState.createEmpty()
  );

  const handleInsertEntity = () => {
    // 在光标位置插入实体
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
      'ENTITY_TYPE',
      'IMMUTABLE',
      { data: '实体数据' }
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newContentState = Modifier.insertText(
      contentStateWithEntity,
      editorState.getSelection(),
      '实体文本',
      null,
      entityKey
    );
    const newEditorState = EditorState.push(
      editorState,
      newContentState,
      'insert-characters'
    );
    setEditorState(newEditorState);
  };

  const handleResetStyle = () => {
    // 重置样式
    const selectionState = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const newContentState = Modifier.removeInlineStyle(
      contentState,
      selectionState,
      'BOLD' // 重置为粗体样式，可以根据实际情况修改
    );
    const newEditorState = EditorState.push(
      editorState,
      newContentState,
      'change-inline-style'
    );
    setEditorState(newEditorState);
  };

  return (
    <div>
      <button onClick={handleInsertEntity}>插入实体</button>
      <button onClick={handleResetStyle}>重置样式</button>
      <Editor editorState={editorState} onChange={setEditorState} />
    </div>
  );
};

export default MyEditor;