如何在Draft.js中对齐文本

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

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

  const handleAlignment = (alignment) => {
    const contentState = editorState.getCurrentContent();
    const contentStateWithEntity = contentState.createEntity(
      'ALIGNMENT',
      'IMMUTABLE',
      { alignment }
    );
    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
    const newContentState = Modifier.applyInlineStyle(
      contentStateWithEntity,
      editorState.getSelection(),
      entityKey
    );
    const newEditorState = EditorState.push(
      editorState,
      newContentState,
      'change-inline-style'
    );
    setEditorState(
      EditorState.forceSelection(
        newEditorState,
        newContentState.getSelectionAfter()
      )
    );
  };

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

  return (
    <div>
      <button onClick={() => handleAlignment('left')}>左对齐</button>
      <button onClick={() => handleAlignment('center')}>居中对齐</button>
      <button onClick={() => handleAlignment('right')}>右对齐</button>
      <Editor
        editorState={editorState}
        onChange={setEditorState}
        handleKeyCommand={handleKeyCommand}
      />
    </div>
  );
};

export default AlignmentExample;