reactjs - 草稿 js 错误，在内容 block 末尾选择 if 装饰器

Question

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

这一切都运行良好，只是如果您在内容 block 的末尾添加注释，则不可能将光标放在脚注标记后面之后继续写。

注释由位于脚注标记位置的长度为 1 的实体组成，它是一个字符“N”，我们在其上叠加一个 Chip，它是一个 CompositeDecorator。

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

任何帮助将不胜感激!!

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

提前谢谢您。

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