如何制作一个用 markdown 解析的 contenteditable 元素？

Question

这是我的网站：https://zarmdev.github.io/To-doz-React/index.html

在我的网站上，我有带有标题和描述的“窗格”。

在每个窗格中，标题和描述都打开了 contenteditable，因为它允许将更改的内容保存到本地存储。

在我的 Pane 类中，我有一个

<p>

是可编辑的，我想让它用 markedjs 或 reactmarkdown 进行解析，我希望它的格式正确并且它仍然保存更改的内容并将其保存到本地存储。我也希望它是安全的（所以使用 reactmarkdown/markedjs）

（如果您有其他解决方案，我也很想听听）

<ReactMarkdown>{description}</ReactMarkdown>

>! This is the description element
<p onBlur={(event) => {this.onEdit(event)}} onInput={(event) => {this.onChange(event)}} contentEditable="true" suppressContentEditableWarning={true} className="description newp"></p>

我试图将 ReactMarkdown 包装在描述元素周围，但我找不到使它成为 contentEditable 的方法。

我也试过使用dangerouslySetInnerHTML解析数据，还是不行