Draft-js: 自动换行

Question

我正在尝试使用 Facebook 的 Draft-JS 框架实现一个编辑器，该编辑器的每行限制为 50 个字符。

我不想使用 CSS 断开行，而是希望当达到 50 个字符时，它们会真正地断开成单独的块。

换行应该发生在超过第 50 个字符的单词前的最后一个空格处（类似于 CSS 中的 word-wrap: break-word）。

当然，我需要保持选择在新行的结尾。

我不确定从哪里开始。有什么想法吗？

我已经创建了一个 Draft-JS 的 CodePen，包含当前编辑器状态的预览，以便轻松入手，只是不确定从哪里开始：https://codepen.io/adamtal/pen/pbqVrL?editors=0010 更新： 作为对 Jiang YD 回答的回应，我认为从块的末尾获取文本并创建一个新块并不是一个好主意。我不确定格式状态是否能够被保留。我认为解决方案应该使用 Modifier.splitBlock 并进行一些选择操作。

- Adam Tal

Answer 1

我曾经遇到过同样的问题，需要将一个块分割并为新的分割块添加一些元数据。

获取分割后创建的下一个块的键是棘手的部分。以下是我完成它的方法。

const selection = editorState.getSelection();
let contentState = editorState.getCurrentContent();

contentState = Modifier.splitBlock(contentState, selection);

const currentBlock = contentState.getBlockForKey(selection.getEndKey());
const nextBlock = contentState
  .getBlockMap()
  .toSeq()
  .skipUntil(function(v) {
    return v === currentBlock;
  })
  .rest()
  .first();

const nextBlockKey = nextBlock.getKey();

const nextBlockEmptySelection = new SelectionState({
  anchorKey: nextBlockKey,
  anchorOffset: 0,
  focusKey: nextBlockKey,
  focusOffset: 0
});

contentState = Modifier.setBlockData(
  contentState,
  nextBlockEmptySelection,
  Map()
    .set("data1", "Hello this is block data")
    .set("data2", 3)
);

- punitjajodia