do not prevent clicks in menus, fix #454, fix #470

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,

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)

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)
   }
 
 }

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)
   }
 
 }