From 3656c16b61ea9b2e81327a85dab671cc24c018f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Fri, 4 Oct 2019 13:23:02 +0200
Subject: [PATCH] do not prevent clicks in menus, fix #454, fix #470

---
 .../tiptap/src/Components/EditorMenuBar.js    | 18 +++++++++++++++++-
 packages/tiptap/src/Plugins/FloatingMenu.js   | 15 +++++++++++----
 packages/tiptap/src/Plugins/MenuBar.js        | 19 +++++++++++++++----
 packages/tiptap/src/Plugins/MenuBubble.js     | 16 ++++++++++++----
 4 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/packages/tiptap/src/Components/EditorMenuBar.js b/packages/tiptap/src/Components/EditorMenuBar.js
index c5c4b9cc7..31deaac85 100644
--- a/packages/tiptap/src/Components/EditorMenuBar.js
+++ b/packages/tiptap/src/Components/EditorMenuBar.js
@@ -9,6 +9,12 @@ export default {
     },
   },
 
+  data() {
+    return {
+      focused: false,
+    }
+  },
+
   watch: {
     editor: {
       immediate: true,
@@ -19,6 +25,16 @@ export default {
               editor,
               element: this.$el,
             }))
+
+            this.focused = editor.focused
+
+            editor.on('focus', () => {
+              this.focused = true
+            })
+
+            editor.on('menubar:focusUpdate', focused => {
+              this.focused = focused
+            })
           })
         }
       },
@@ -31,7 +47,7 @@ export default {
     }
 
     return this.$scopedSlots.default({
-      focused: this.editor.view.focused,
+      focused: this.focused,
       focus: this.editor.focus,
       commands: this.editor.commands,
       isActive: this.editor.isActive,
diff --git a/packages/tiptap/src/Plugins/FloatingMenu.js b/packages/tiptap/src/Plugins/FloatingMenu.js
index 0775b9211..49345e801 100644
--- a/packages/tiptap/src/Plugins/FloatingMenu.js
+++ b/packages/tiptap/src/Plugins/FloatingMenu.js
@@ -11,18 +11,25 @@ class Menu {
       },
       ...options,
     }
+    this.preventHide = false
     this.editorView = editorView
     this.isActive = false
     this.top = 0
 
     // the mousedown event is fired before blur so we can prevent it
-    this.options.element.addEventListener('mousedown', this.handleClick)
+    this.mousedownHandler = this.handleClick.bind(this)
+    this.options.element.addEventListener('mousedown', this.mousedownHandler)
 
     this.options.editor.on('focus', ({ view }) => {
       this.update(view)
     })
 
     this.options.editor.on('blur', ({ event }) => {
+      if (this.preventHide) {
+        this.preventHide = false
+        return
+      }
+
       this.hide(event)
     })
 
@@ -38,8 +45,8 @@ class Menu {
     }
   }
 
-  handleClick(event) {
-    event.preventDefault()
+  handleClick() {
+    this.preventHide = true
   }
 
   update(view, lastState) {
@@ -103,7 +110,7 @@ class Menu {
   }
 
   destroy() {
-    this.options.element.removeEventListener('mousedown', this.handleClick)
+    this.options.element.removeEventListener('mousedown', this.mousedownHandler)
 
     if (this.resizeObserver) {
       this.resizeObserver.unobserve(this.editorView.dom)
diff --git a/packages/tiptap/src/Plugins/MenuBar.js b/packages/tiptap/src/Plugins/MenuBar.js
index 52fc9b7a0..fb8e1e7e3 100644
--- a/packages/tiptap/src/Plugins/MenuBar.js
+++ b/packages/tiptap/src/Plugins/MenuBar.js
@@ -4,17 +4,28 @@ class Menu {
 
   constructor({ options }) {
     this.options = options
+    this.preventHide = false
 
     // the mousedown event is fired before blur so we can prevent it
-    this.options.element.addEventListener('mousedown', this.handleClick)
+    this.mousedownHandler = this.handleClick.bind(this)
+    this.options.element.addEventListener('mousedown', this.mousedownHandler)
+
+    this.options.editor.on('blur', () => {
+      if (this.preventHide) {
+        this.preventHide = false
+        return
+      }
+
+      this.options.editor.emit('menubar:focusUpdate', false)
+    })
   }
 
-  handleClick(event) {
-    event.preventDefault()
+  handleClick() {
+    this.preventHide = true
   }
 
   destroy() {
-    this.options.element.removeEventListener('mousedown', this.handleClick)
+    this.options.element.removeEventListener('mousedown', this.mousedownHandler)
   }
 
 }
diff --git a/packages/tiptap/src/Plugins/MenuBubble.js b/packages/tiptap/src/Plugins/MenuBubble.js
index 21f510f10..bb3179fb1 100644
--- a/packages/tiptap/src/Plugins/MenuBubble.js
+++ b/packages/tiptap/src/Plugins/MenuBubble.js
@@ -67,21 +67,28 @@ class Menu {
     this.left = 0
     this.bottom = 0
     this.top = 0
+    this.preventHide = false
 
     // the mousedown event is fired before blur so we can prevent it
-    this.options.element.addEventListener('mousedown', this.handleClick)
+    this.mousedownHandler = this.handleClick.bind(this)
+    this.options.element.addEventListener('mousedown', this.mousedownHandler)
 
     this.options.editor.on('focus', ({ view }) => {
       this.update(view)
     })
 
     this.options.editor.on('blur', ({ event }) => {
+      if (this.preventHide) {
+        this.preventHide = false
+        return
+      }
+
       this.hide(event)
     })
   }
 
-  handleClick(event) {
-    event.preventDefault()
+  handleClick() {
+    this.preventHide = true
   }
 
   update(view, lastState) {
@@ -146,6 +153,7 @@ class Menu {
   }
 
   hide(event) {
+    console.log('hide', { event })
     if (event
       && event.relatedTarget
       && this.options.element.parentNode.contains(event.relatedTarget)
@@ -158,7 +166,7 @@ class Menu {
   }
 
   destroy() {
-    this.options.element.removeEventListener('mousedown', this.handleClick)
+    this.options.element.removeEventListener('mousedown', this.mousedownHandler)
   }
 
 }