Merge remote-tracking branch 'upstream/master'

packages/tiptap/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tiptap",
-  "version": "1.26.1",
+  "version": "1.26.4",
   "description": "A rich-text editor for Vue.js",
   "homepage": "https://tiptap.scrumpy.io",
   "license": "MIT",
@@ -21,15 +21,15 @@
   },
   "dependencies": {
     "prosemirror-commands": "^1.0.8",
-    "prosemirror-dropcursor": "^1.1.2",
+    "prosemirror-dropcursor": "^1.2.0",
     "prosemirror-gapcursor": "^1.0.4",
     "prosemirror-inputrules": "^1.0.4",
-    "prosemirror-keymap": "^1.0.1",
-    "prosemirror-model": "^1.7.2",
+    "prosemirror-keymap": "^1.0.2",
+    "prosemirror-model": "^1.7.4",
     "prosemirror-state": "^1.2.4",
-    "prosemirror-view": "^1.11.4",
-    "tiptap-commands": "^1.12.0",
-    "tiptap-utils": "^1.8.0"
+    "prosemirror-view": "^1.11.7",
+    "tiptap-commands": "^1.12.3",
+    "tiptap-utils": "^1.8.2"
   },
   "peerDependencies": {
     "vue": "^2.5.17",

packages/tiptap/src/Components/EditorFloatingMenu.js

@@ -29,6 +29,12 @@ export default {
               editor,
               element: this.$el,
               onUpdate: menu => {
+                // the second check ensures event is fired only once
+                if (menu.isActive && this.menu.isActive === false) {
+                  this.$emit('show', menu)
+                } else if (!menu.isActive && this.menu.isActive === true) {
+                  this.$emit('hide', menu)
+                }
                 this.menu = menu
               },
             }))

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) {
@@ -158,7 +165,7 @@ class Menu {
   }
 
   destroy() {
-    this.options.element.removeEventListener('mousedown', this.handleClick)
+    this.options.element.removeEventListener('mousedown', this.mousedownHandler)
   }
 
 }