add floating menu

packages/tiptap/src/components/editor.js

@@ -11,6 +11,7 @@ import {
 	ExtensionManager,
 	initNodeViews,
 	menuBubble,
+	floatingMenu,
 	builtInKeymap,
 } from '../utils'
 import builtInNodes from '../nodes'
@@ -98,6 +99,14 @@ export default {
 						focus: this.focus,
 					})
 					slots.push(this.menububbleNode)
+				} else if (name === 'floatingMenu') {
+					this.floatingMenuNode = slot({
+						nodes: this.menuActions ? this.menuActions.nodes : null,
+						marks: this.menuActions ? this.menuActions.marks : null,
+						focused: this.view ? this.view.focused : false,
+						focus: this.focus,
+					})
+					slots.push(this.floatingMenuNode)
 				}
 			})
 
@@ -196,6 +205,10 @@ export default {
 				plugins.push(menuBubble(this.menububbleNode))
 			}
 
+			if (this.floatingMenuNode) {
+				plugins.push(floatingMenu(this.floatingMenuNode))
+			}
+
 			return plugins
 		},
 

packages/tiptap/src/utils/floatingMenu.js

@@ -0,0 +1,72 @@
+import { Plugin } from 'prosemirror-state'
+
+class Toolbar {
+
+	constructor({ node, editorView }) {
+		this.editorView = editorView
+		this.node = node
+		this.element = this.node.elm
+		this.element.style.visibility = 'hidden'
+		this.element.style.opacity = 0
+
+		this.editorView.dom.addEventListener('blur', this.hide.bind(this))
+	}
+
+	update(view, lastState) {
+		const { state } = view
+
+		// Don't do anything if the document/selection didn't change
+		if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) {
+			return
+		}
+
+		if (!state.selection.empty) {
+			this.hide()
+			return
+		}
+
+		const currentDom = view.domAtPos(state.selection.$anchor.pos)
+		const isActive = currentDom.node.innerHTML === '<br>'
+			&& currentDom.node.tagName === 'P'
+			&& currentDom.node.parentNode === view.dom
+
+		if (!isActive) {
+			this.hide()
+			return
+		}
+
+		const editorBoundings = this.element.offsetParent.getBoundingClientRect()
+		const cursorBoundings = view.coordsAtPos(state.selection.$anchor.pos)
+		const top = cursorBoundings.top - editorBoundings.top
+
+		this.element.style.top = `${top}px`
+		this.show()
+	}
+
+	show() {
+		this.element.style.visibility = 'visible'
+		this.element.style.opacity = 1
+	}
+
+	hide(event) {
+		if (event && event.relatedTarget) {
+			return
+		}
+
+		this.element.style.visibility = 'hidden'
+		this.element.style.opacity = 0
+	}
+
+	destroy() {
+		this.editorView.dom.removeEventListener('blur', this.hide)
+	}
+
+}
+
+export default function (node) {
+	return new Plugin({
+		view(editorView) {
+			return new Toolbar({ editorView, node })
+		},
+	})
+}

packages/tiptap/src/utils/index.js

@@ -2,5 +2,6 @@ export { default as buildMenuActions } from './buildMenuActions'
 export { default as builtInKeymap } from './builtInKeymap'
 export { default as ComponentView } from './ComponentView'
 export { default as initNodeViews } from './initNodeViews'
+export { default as floatingMenu } from './floatingMenu'
 export { default as menuBubble } from './menuBubble'
 export { default as ExtensionManager } from './ExtensionManager'