fix toggle editor

docs/src/demos/ReactPlayground/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import tippy from 'tippy.js'
 import { useEditor, EditorContent, ReactRenderer, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent } from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
@@ -163,6 +163,8 @@ class MentionList2 extends React.Component {
 }
 
 export default () => {
+  const [isVisible, setVisible] = useState(true)
+
   const editor = useEditor({
     // onTransaction({ editor }) {
     //   console.log('anchor', editor.state.selection.anchor)
@@ -279,12 +281,16 @@ export default () => {
 
   return (
     <div>
+      <div>
+        <button onClick={() => setVisible(true)}>visible</button>
+        <button onClick={() => setVisible(false)}>hidden</button>
+      </div>
       <div>
         <button onClick={() => editor.setEditable(true)}>editable</button>
         <button onClick={() => editor.setEditable(false)}>readonly</button>
       </div>
       <MenuBar editor={editor} />
-      <EditorContent editor={editor} />
+      {isVisible && <EditorContent editor={editor} />}
     </div>
   )
 }

packages/react/src/EditorContent.tsx

@@ -22,7 +22,6 @@ export interface EditorContentProps {
 }
 
 export interface EditorContentState {
-  editor: Editor | null,
   renderers: Map<string, ReactRenderer>
 }
 
@@ -34,12 +33,19 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     this.editorContentRef = React.createRef()
 
     this.state = {
-      editor: this.props.editor,
       renderers: new Map(),
     }
   }
 
+  componentDidMount() {
+    this.init()
+  }
+
   componentDidUpdate() {
+    this.init()
+  }
+
+  init() {
     const { editor } = this.props
 
     if (editor && editor.options.element) {
@@ -68,6 +74,34 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     }
   }
 
+  componentWillUnmount() {
+    const { editor } = this.props
+
+    if (!editor) {
+      return
+    }
+
+    if (!editor.isDestroyed) {
+      editor.view.setProps({
+        nodeViews: {},
+      })
+    }
+
+    editor.contentComponent = null
+
+    if (!editor.options.element.firstChild) {
+      return
+    }
+
+    const newElement = document.createElement('div')
+
+    newElement.appendChild(editor.options.element.firstChild)
+
+    editor.setOptions({
+      element: newElement,
+    })
+  }
+
   render() {
     return (
       <>