almost fix floating menu example

packages/tiptap/src/Components/FloatingMenu.js

@@ -0,0 +1,32 @@
+import FloatingMenu from '../Utils/FloatingMenu'
+
+export default {
+	props: {
+		editor: {
+			default: null,
+			type: Object,
+		},
+	},
+	watch: {
+		editor: {
+			immediate: true,
+			handler(editor) {
+				if (editor) {
+					this.$nextTick(() => {
+						editor.registerPlugin(FloatingMenu(this.$el))
+					})
+				}
+			},
+		}
+	},
+	render(createElement) {
+		if (this.editor) {
+			return createElement('div', this.$scopedSlots.default({
+				nodes: this.editor.menuActions.nodes,
+				marks: this.editor.menuActions.marks,
+				focused: this.editor.view.focused,
+				focus: this.editor.focus,
+			}))
+		}
+	},
+}

packages/tiptap/src/index.js

@@ -2,6 +2,7 @@ export { default as Editor } from './Utils/Editor'
 export { default as EditorContent } from './Components/EditorContent'
 export { default as MenuBar } from './Components/MenuBar'
 export { default as MenuBubble } from './Components/MenuBubble'
+export { default as FloatingMenu } from './Components/FloatingMenu'
 
 export { default as Extension } from './Utils/Extension'
 export { default as Node } from './Utils/Node'

packages/tiptap/src/utils/FloatingMenu.js

@@ -0,0 +1,72 @@
+import { Plugin } from 'prosemirror-state'
+
+class Toolbar {
+
+	constructor({ element, editorView }) {
+		this.editorView = editorView
+		this.element = element
+		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 (element) {
+	return new Plugin({
+		view(editorView) {
+			return new Toolbar({ editorView, element })
+		},
+	})
+}

packages/tiptap/src/utils/index.js

@@ -2,6 +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 FloatingMenu } from './FloatingMenu'
+export { default as MenuBubble } from './MenuBubble'
 export { default as ExtensionManager } from './ExtensionManager'