Javascript 在contentEditable中插入复杂的组件？

我的目标是在“contentEditable”div中插入复杂的反应组件（用于丰富内容的API调用、操作按钮等）。这些组件必须像项目符号一样插入文本中的任何位置。它的工作原理有点像gmail，当你输入一个电子邮件地址，一旦它被验证，它就会变成一个对象，除了在我的例子中，这个对象会有多个字段

因此，我找到的最佳解决方案是为contentEditable提供一个包含文本或组件的列表。例如：

<div contentEditable=true>
<span> Some text... blah blah blah </span>
<ComplexComponent />
  <span> Some more text</span>
<ComplexComponent />
</div>  

一些文字。。。废话废话
更多的文字

因此，渲染非常有趣，组件很好地插入到文本的中间，文本/组件的列表根据用户的动作进行调整。 除此文本/组件列表外，是否还有其他体系结构

我相信您可以想象管理所有用户事件以控制它们是多么麻烦

选集： 一旦通过反应渲染，文本中间的组件就被视为可编辑文本；如果我们不设置算法来保护它们，它们甚至可以以任何方式擦除。 出于同样的原因，如果你在一个包含反应成分的选择上点击CtrlX，铬将无法区分自己，结构将变得难以维护。。。除非有特别规定 您必须保持组件的样式。。。那么，如果用户从文本中选择一个组件并将其以粗体显示，该怎么办？甚至把它列为一个项目清单？DOM节点中断。。。除非你又有特殊规定 一个技巧：我使用文本或组件的键在正确的时间强制它们重新创建（我避免使用经典渲染，以免每次按下键时重置光标…） ……等等

=>如何采用清晰且可维护的代码结构？ 我在处理遇到的问题的过程中创建函数，我将这些函数放在contentEditable的功能组件中，该组件正开始增长。。。。 简言之，所有这些都是一种技巧，尤其是在这个文本/组件列表中。 然而，react并不特别提倡具有继承性等的经典对象体系结构

---

任何人都可以帮我摆脱这个困境吗？

最后，你问的是一个所见即所得编辑器，它使用React组件来表示内部编辑器状态。我先看看基于React的编辑器，看看它们是如何进行渲染的——在最好的情况下，这是一项非常重要的任务；我会尽可能在现有工作的基础上继续努力。我只能同意你的看法，这是非常重要的