在 react 的内容可编辑的 div 中插入插入符号的 HTML

Question

我们如何使用 React 将 span 标签添加到光标位于 contentEditable 属性已设置为 true 的 div 的最后位置（package react-contenteditable）？这个 div 只包含纯文本和一个 span 标签。 span 标记应被视为单个字符，不应在其中创建任何其他内容。应该使用一个按钮在光标所在的最后一点插入一个新的跨度。

注意：用户不应该再次在所选文本中添加任何内容。

codesandbox 项目

像这样：