如何在draft-js上做多行加亮？

在draft-js上实现多行加亮的方法可以通过自定义样式来实现。以下是一个示例代码：

首先，需要创建一个自定义的样式对象，用于定义加亮的样式。可以使用EditorState.createEmpty()方法创建一个空的编辑器状态，并使用EditorState.getCurrentContent()方法获取当前内容。

const contentState = editorState.getCurrentContent();
const selectionState = editorState.getSelection();

// 创建一个样式对象
const style = {
  backgroundColor: 'yellow',
};

// 将样式应用到选中的文本块
const newContentState = Modifier.applyInlineStyle(
  contentState,
  selectionState,
  'HIGHLIGHT',
);

// 更新编辑器状态
const newEditorState = EditorState.push(
  editorState,
  newContentState,
  'change-inline-style',
);

// 设置新的选中状态
const newSelectionState = newContentState.getSelectionAfter();
const newEditorStateWithSelection = EditorState.forceSelection(
  newEditorState,
  newSelectionState,
);

// 更新编辑器状态
setEditorState(newEditorStateWithSelection);

接下来，需要在编辑器中监听键盘事件，并在按下特定的键时触发加亮操作。可以使用Editor组件的onKeyDown属性来监听键盘事件。

const handleKeyDown = (e) => {
  // 按下Shift+Enter键时触发加亮操作
  if (e.shiftKey && e.key === 'Enter') {
    e.preventDefault();
    highlightText();
  }
};

<Editor
  editorState={editorState}
  onChange={setEditorState}
  onKeyDown={handleKeyDown}
/>

最后，定义highlightText函数来执行加亮操作。该函数会获取当前选中的文本块，并将样式应用到选中的文本块。

const highlightText = () => {
  const selectionState = editorState.getSelection();

  // 获取选中的文本块
  const startKey = selectionState.getStartKey();
  const endKey = selectionState.getEndKey();
  const contentState = editorState.getCurrentContent();
  const blockMap = contentState.getBlockMap();
  const selectedBlocks = blockMap
    .skipUntil((_, key) => key === startKey)
    .takeUntil((_, key) => key === endKey)
    .concat(blockMap.get(endKey));

  // 应用样式到选中的文本块
  let newContentState = contentState;
  selectedBlocks.forEach((block) => {
    const blockKey = block.getKey();
    const blockSelectionState = selectionState.merge({
      anchorKey: blockKey,
      focusKey: blockKey,
    });
    newContentState = Modifier.applyInlineStyle(
      newContentState,
      blockSelectionState,
      'HIGHLIGHT',
    );
  });

  // 更新编辑器状态
  const newEditorState = EditorState.push(
    editorState,
    newContentState,
    'change-inline-style',
  );
  setEditorState(newEditorState);
};

通过以上步骤，就可以在draft-js上实现多行加亮的效果。在编辑器中按下Shift+Enter键时，选中的文本块将会被加亮。