From 91f75e5305f752c102943322d1e3623d6a247d3a Mon Sep 17 00:00:00 2001
From: Daniel <derozier@gmail.com>
Date: Wed, 1 Apr 2020 19:34:27 -0500
Subject: [PATCH] Re: #451, remove menu event handlers on destroy

---
 packages/tiptap/src/Plugins/FloatingMenu.js | 13 +++++++++----
 packages/tiptap/src/Plugins/MenuBar.js      |  6 ++++--
 packages/tiptap/src/Plugins/MenuBubble.js   | 12 ++++++++----
 3 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/tiptap/src/Plugins/FloatingMenu.js b/packages/tiptap/src/Plugins/FloatingMenu.js
index c5c6ea1fd..b7502c87f 100644
--- a/packages/tiptap/src/Plugins/FloatingMenu.js
+++ b/packages/tiptap/src/Plugins/FloatingMenu.js
@@ -20,18 +20,20 @@ class Menu {
     this.mousedownHandler = this.handleClick.bind(this)
     this.options.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
 
-    this.options.editor.on('focus', ({ view }) => {
+    this.focusHandler = ({ view }) => {
       this.update(view)
-    })
+    }
+    this.options.editor.on('focus', this.focusHandler)
 
-    this.options.editor.on('blur', ({ event }) => {
+    this.blurHandler = ({ event }) => {
       if (this.preventHide) {
         this.preventHide = false
         return
       }
 
       this.hide(event)
-    })
+    }
+    this.options.editor.on('blur', this.blurHandler)
 
     // sometimes we have to update the position
     // because of a loaded images for example
@@ -116,6 +118,9 @@ class Menu {
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.editorView.dom)
     }
+
+    this.options.editor.off('focus', this.focusHandler)
+    this.options.editor.off('blur', this.blurHandler)
   }
 
 }
diff --git a/packages/tiptap/src/Plugins/MenuBar.js b/packages/tiptap/src/Plugins/MenuBar.js
index b4e6c0de5..91cb0d423 100644
--- a/packages/tiptap/src/Plugins/MenuBar.js
+++ b/packages/tiptap/src/Plugins/MenuBar.js
@@ -10,14 +10,15 @@ class Menu {
     this.mousedownHandler = this.handleClick.bind(this)
     this.options.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
 
-    this.options.editor.on('blur', () => {
+    this.blurHandler = () => {
       if (this.preventHide) {
         this.preventHide = false
         return
       }
 
       this.options.editor.emit('menubar:focusUpdate', false)
-    })
+    }
+    this.options.editor.on('blur', this.blurHandler)
   }
 
   handleClick() {
@@ -26,6 +27,7 @@ class Menu {
 
   destroy() {
     this.options.element.removeEventListener('mousedown', this.mousedownHandler)
+    this.options.editor.off('blur', this.blurHandler)
   }
 
 }
diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
index d184009b5..777abeee0 100644
--- a/packages/tiptap/src/Plugins/MenuBubble.js
+++ b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -73,18 +73,20 @@ class Menu {
     this.mousedownHandler = this.handleClick.bind(this)
     this.options.element.addEventListener('mousedown', this.mousedownHandler, { capture: true })
 
-    this.options.editor.on('focus', ({ view }) => {
+    this.focusHandler = ({ view }) => {
       this.update(view)
-    })
+    }
+    this.options.editor.on('focus', this.focusHandler)
 
-    this.options.editor.on('blur', ({ event }) => {
+    this.blurHandler = ({ event }) => {
       if (this.preventHide) {
         this.preventHide = false
         return
       }
 
       this.hide(event)
-    })
+    }
+    this.options.editor.on('blur', this.blurHandler)
   }
 
   handleClick() {
@@ -167,6 +169,8 @@ class Menu {
 
   destroy() {
     this.options.element.removeEventListener('mousedown', this.mousedownHandler)
+    this.options.editor.off('focus', this.focusHandler)
+    this.options.editor.off('blur', this.blurHandler)
   }
 
 }