From 57915d8638d4835b3260dc7c4a9e1b5d911bd2da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 15 Mar 2021 14:53:23 +0100
Subject: [PATCH] fix toggle editor

---
 docs/src/demos/ReactPlayground/index.jsx | 10 +++++--
 packages/react/src/EditorContent.tsx     | 38 ++++++++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/docs/src/demos/ReactPlayground/index.jsx b/docs/src/demos/ReactPlayground/index.jsx
index 085713b2..76e4de44 100644
--- a/docs/src/demos/ReactPlayground/index.jsx
+++ b/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>
   )
 }
diff --git a/packages/react/src/EditorContent.tsx b/packages/react/src/EditorContent.tsx
index 0e96b494..182234cc 100644
--- a/packages/react/src/EditorContent.tsx
+++ b/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 (
       <>