Draft-js：使用不可编辑的实体组件丢失光标

Question

我有一个编辑器，它应该有带有 props 的实体name, color, start, end。在编辑器中，由start和表示的位置中的文本end将由 替代name，并将由带有 的自定义组件呈现contentEditable=false。

这通常适用于 Draftjs，但有几个问题：

• 当用键盘箭头移动光标时，实体被跳过，这很好。但是，当一个实体位于输入的最后并且我尝试向右移动经过它时（仅使用右箭头或使用选项或 cmd + 右），光标消失并且当我再次向左移动时不会回来。
• 如果我向右转到实体的左侧并按 shift + option + 向右箭头，则会按预期选择该实体。但是如果我再按向左箭头，光标也会丢失。

我可以通过确保在最后一个实体之后总是有一个空格来解决这个问题，但这似乎很棘手，并且可能有边缘情况。

另一种选择是不使用contentEditable=false，但这会给我的实际应用程序带来其他问题，它有一个更复杂的实体组件，包括下拉列表，我将不得不手动确保用户无法更改实体内的文本等。

以下是该问题的重现：https : //codesandbox.io/s/competent-surf-st77i

有任何想法吗？