From 6984ea11d79c059c55f045038e7758a34872a3f2 Mon Sep 17 00:00:00 2001
From: Kento Moriwaki <kentomoriwaki@gmail.com>
Date: Fri, 7 Jul 2023 22:17:32 +0900
Subject: [PATCH] Destroy editor in safe (#4000)

* Destroy editor in safe

* Use class component

* Use createElement
---
 packages/react/src/EditorContent.tsx | 12 +++++++++++-
 packages/react/src/useEditor.ts      |  7 ++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/EditorContent.tsx b/packages/react/src/EditorContent.tsx
index f65276f4d07..df40df31974 100644
--- a/packages/react/src/EditorContent.tsx
+++ b/packages/react/src/EditorContent.tsx
@@ -147,4 +147,14 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
   }
 }
 
-export const EditorContent = React.memo(PureEditorContent)
+// EditorContent should be re-created whenever the Editor instance changes
+const EditorContentWithKey = (props: EditorContentProps) => {
+  const key = React.useMemo(() => {
+    return Math.floor(Math.random() * 0xFFFFFFFF).toString()
+  }, [props.editor])
+
+  // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement
+  return React.createElement(PureEditorContent, { key, ...props })
+}
+
+export const EditorContent = React.memo(EditorContentWithKey)
diff --git a/packages/react/src/useEditor.ts b/packages/react/src/useEditor.ts
index fdede2825ea..2805eedec64 100644
--- a/packages/react/src/useEditor.ts
+++ b/packages/react/src/useEditor.ts
@@ -113,10 +113,15 @@ export const useEditor = (options: Partial<EditorOptions> = {}, deps: Dependency
     })
 
     return () => {
-      instance.destroy()
       isMounted = false
     }
   }, deps)
 
+  useEffect(() => {
+    return () => {
+      editor?.destroy()
+    }
+  }, [editor])
+
   return editor
 }