如何在Draft-JS中添加链接(无插件)

import { EditorState, RichUtils, Modifier } from 'draft-js';
import { Editor, getDefaultKeyBinding, KeyBindingUtil } from 'draft-js';

const createLinkEntity = (editorState, url) => {
  const contentState = editorState.getCurrentContent();
  const contentStateWithEntity = contentState.createEntity(
    'LINK',
    'MUTABLE',
    { url: url }
  );
  const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
  const newEditorState = EditorState.set(editorState, {
    currentContent: contentStateWithEntity
  });
  return { entityKey, newEditorState };
};

const handleKeyCommand = (command, editorState) => {
  const newState = RichUtils.handleKeyCommand(editorState, command);
  if (newState) {
    setEditorState(newState);
    return 'handled';
  }
  return 'not-handled';
};

const handleStyleChange = (style) => {
  setEditorState(RichUtils.toggleInlineStyle(editorState, style));
};

const handleAddLink = (url) => {
  const { entityKey, newEditorState } = createLinkEntity(editorState, url);
  const contentState = newEditorState.getCurrentContent();
  const selectionState = newEditorState.getSelection();
  const contentStateWithLink = Modifier.applyEntity(
    contentState,
    selectionState,
    entityKey
  );
  const newContentState = EditorState.push(
    newEditorState,
    contentStateWithLink,
    'apply-entity'
  );
  setEditorState(EditorState.forceSelection(newContentState, selectionState));
};

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

  const handleURLInput = (e) => {
    setURL(e.target.value);
  };

  const handleAddLinkButton = () => {
    handleAddLink(url);
  };

  return (
    <div>
      <div>
        <input type="text" onChange={handleURLInput} />
        <button onClick={handleAddLinkButton}>添加链接</button>
      </div>
      <Editor
        editorState={editorState}
        handleKeyCommand={handleKeyCommand}
        onChange={setEditorState}
      />
    </div>
  );
};