reactjs - Draft.js 编辑器 onTab 未触发嵌套列表

Question

我试图通过单击选项卡来触发嵌套列表，但它实际上不起作用。

我添加了一个 onTab 功能，但它似乎根本不会影响样式。我单击选项卡，没有任何反应。块切换实际上有效，但只能通过单击按钮。

我也尝试使用 draft-js-list-depth-plugin 包来处理这个问题，但它也没有工作。

import React, {useState} from 'react';
import {Editor, EditorState, RichUtils} from 'draft-js';
import { Modal, Button, Card, Box, Typography, Divider, Grid } from '@material-ui/core';
import 'draft-js/dist/Draft.css'


const TextEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    initialState ? EditorState.createWithContent(initialState) : EditorState.createEmpty()
  );

  const toggleBlockTypes = (styleString) => {
    setEditorState(RichUtils.toggleBlockType(editorState, styleString));
  };

  const _onBulletListClick = () => {
    toggleBlockTypes('unordered-list-item');
  };
  const _onNumberListClick = () => {
    toggleBlockTypes('ordered-list-item');
  };
  
  const _onTab = (event) => {
    // prevent cursor from selecting the next interactive element
    event.preventDefault();
    const newState = RichUtils.onTab(event, editorState, 6);
    if (newState) {
      setEditorState(newState);
      return HANDLE_KEY_COMMAND_HANDLED;
    }
    return HANDLE_KEY_COMMAND_NOT_HANDLED;
  };

  const handleKeyCommand = (command) => {
    const newState = RichUtils.handleKeyCommand(editorState, command);
    if (newState) {
      setEditorState(newState);
      return HANDLE_KEY_COMMAND_HANDLED;
    }
    return HANDLE_KEY_COMMAND_NOT_HANDLED;
  };
  

 return (
      <Card variant='outlined'>
        <Grid container direction='row' padding='5px'>
          <OrderedListButton onClick={_onNumberListClick} />
          <UnorderedListButton onClick={_onBulletListClick} />
        </Grid>
        <Divider />
        <Editor
          id='editor'
          textAlignment='left'
          placeholder='Write something'
          editorState={editorState}
          onChange={setEditorState}
          handleKeyCommand={handleKeyCommand}
          onTab={_onTab}
        />
      </Card>
  );
}

export default TextEditor;

标签： reactjsnested-listsrich-text-editordraftjs