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

Question

我有一个编辑器，应该有带有道具的实体

name, color, start, end

。在编辑器中，由

start

和

end

表示的位置中的文本将由

name

替换，并且它将由带有

contentEditable=false

的自定义组件呈现。

这对于一般的 Draftjs 来说效果很好，但有几个问题：

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

我可以通过确保最后一个实体后面始终有一个空格来解决这个问题，但这看起来很hacky并且可能有边缘情况。

另一个选择是不使用

contentEditable=false

，但这会给我的实际应用程序带来其他问题，该应用程序具有更复杂的实体组件（包括下拉列表），并且我必须手动确保用户无法更改实体内的文本等等

这里是问题的重现：https://codesandbox.io/s/competent-surf-st77i

有什么想法吗？

Answer 1

不幸的是，我也无法找到没有缺点的替代方案，但是，我可以推荐两种可行的替代方案，而不会导致 Draft-js 编辑错误。

将实体添加到 ContentState 时，不要使用 contentEditable={false}，而是将实体设置为 IMMUTABLE。当用户尝试更改文本时，该组件将消失。 带有代码的演示。请注意，渲染实体时，不应尝试在渲染期间调整文本。

如果您试图避免用户将光标放在实体中间，或者在渲染时显示不同的文本，您可能更喜欢使用块而不是实体。这样做的缺点是在编辑器中占据一整行，但您可以精确控制块的呈现方式并在块中包含 contentEditable={false}。