问如何在Draft.js中使用修饰符修饰文本

EN

import React, { Component } from 'react';
import { Editor, EditorState, CompositeDecorator } from 'draft-js';

const styles = {
  handle: {
    color: 'black',
    backgroundColor: '#FF7F7F',
    direction: 'ltr',
    unicodeBidi: 'bidi-override',
  },
};

// arr can be accessed from an ajax call
var arr = ["one", "two", "three"]
const HANDLE_REGEX = new RegExp("(?:[\\s]|^)(" + arr.join("|") + ")(?=[\\s]|$)", 'gi')

function handleStrategy(contentBlock, callback, contentState) {
  findWithRegex(HANDLE_REGEX, contentBlock, callback);
}

function findWithRegex(regex, contentBlock, callback) {
  const text = contentBlock.getText();
  let matchArr, start;
  while ((matchArr = regex.exec(text)) !== null) {
    start = matchArr.index;
    callback(start, start + matchArr[0].length);
  }
}
const HandleSpan = (props) => {
  return (
    <span
      style={styles.handle}      
      data-offset-key={props.offsetKey}
    >
      {props.children}
    </span>
  );
};


class App extends Component {
  constructor(props) {
    super(props);
    const compositeDecorator = new CompositeDecorator([
      {
        strategy: handleStrategy,
        component: HandleSpan,
      }
    ]);
    this.state = {
      editorState: EditorState.createEmpty(compositeDecorator),
    };
    this.onChange = (editorState) => this.setState({editorState});
  }
  render() {
    return (
      <div className="container-root">
      <Editor
        editorState={this.state.editorState}
        onChange={this.onChange}
        placeholder="Write..."
        ref="editor"
        spellCheck={true}
      />
      </div>
    );
  }
}

export default App;