Destroy editor in safe (#4000)

* Destroy editor in safe

* Use class component

* Use createElement

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)

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
 }