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

Question

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

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

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

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

任何帮助将不胜感激 ！！

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

先感谢您。

Answer 1

不要问我为什么，但是当你不在装饰器组件中渲染子元素时，就会发生奇怪的事情

这个小小的改变可以解决你的问题

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