Draft-js：自动换行

Question

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

我不希望使用css打破这些行，我希望它们在达到这个50个字符的限制时真正分成不同的块。

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

当然，我需要选择留在新线的末尾。

我不知道从哪里开始。有任何想法吗？

• 我已经创建了一个draft-js codepen，其中包含当前editorState的预览，以便于启动，只是不确定从哪里开始：https://codepen.io/adamtal/pen/pbqVrL?editors=0010

更新：作为对Jiang YD答案的回应，我认为从块的末尾获取文本并使用它创建一个新块并不是一个好主意。不确定格式化状态将保持多久。我认为解决方案应该使用Modifier.splitBlock进行一些选择操作。

Answer 1

这是方法

1. 捕获handleBeforeInput中的文本输入
2. 得到当前选择的块
3. 获取当前块的文本
4. 你的断线
5. 将带有剪切文本的新块插入ContentState
6. 为组件设置新状态

Answer 2

我在同一个问题上进行了战斗，我分裂了一个块并且必须给新的分割块一些元数据。

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

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)
);