如果装饰器位于内容块的末尾，则带有选择的 draft-js 错误

Question

我正在构建一个基于 draft-js 的扩展编辑器以添加脚注功能。在主编辑器中编写文本时，用户可以选择单击“添加脚注”，这会在当前选择处添加一个脚注标记（带有注释编号的标记），并打开一个辅助编辑器来编写文本注释。

一切正常，除了如果您在内容块末尾添加注释，不可能将光标放在后面 在其后继续书写的脚注。

一个注释由一个 entity 组成，在脚注位置处长度为 1，这是一个字符“N”，我们在其上叠加一个 Chip，这是一个 CompositeDecorator .

我在一个Code Sandbox中重现了这个问题，只关注标记（注释的文本内容没有问题）。尝试写一些文本并在最后添加一个脚注，将选择放在脚注之后并继续书写是不可能的，如果将脚注放在文本末尾之前，请注意这种情况。

任何帮助将不胜感激!!

我看到 jorgen 发布了一个有一个非常相似的问题，但我在那里找不到相关的答案。

提前致谢。

Answer 1

不要问我为什么，但是当你 don't render the children 在装饰器组件中时，奇怪的事情发生了

这个小小的改变解决了你的问题

const NoteChip = ({ entityKey, contentState, children }) => (
  <Badge
    contentEditable={false}
    badgeContent={"N"}
    color="primary"
    id={"note-chip-" + entityKey}
    style={{ marginRight: 15, marginLeft: 5, cursor: "pointer", top: 5 }}
  >
    <span>{children}</span>
  </Badge>
);

...
  // insert a blank space instead of the N
  contentState = Modifier.insertText(
    contentState,
    newSelection(blockKey, offset),
    " "
  );

https://codesandbox.io/s/test-selection-decorator-draft-js-forked-dzuxl

如果装饰器位于内容块的末尾，则带有选择的 draft-js 错误

draft-js bug with selection if decorator at end of content-block

reactjs

draftjs