almost fix floating menu example

examples/Components/Routes/FloatingMenu/index.vue

@@ -1,9 +1,7 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor class="editor" :extensions="extensions">
+		<floating-menu class="editor__floating-menu" :editor="editor">
-
+			<template slot-scope="{ nodes, marks }">
-			<div class="editor__floating-menu" slot="floatingMenu" slot-scope="{ nodes }">
-				<template v-if="nodes">
 
 				<button
 					class="menubar__button"
@@ -62,24 +60,15 @@
 				</button>
 
 			</template>
-			</div>
+		</floating-menu>
 
-			<div class="editor__content" slot="content" slot-scope="props">
+		<editor-content class="editor__content" :editor="editor" />
-				<h2>
-					Floating Menu
-				</h2>
-				<p>
-					This is an example of a medium-like editor. Enter a new line and some buttons will appear.
-				</p>
-			</div>
-
-		</editor>
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent, FloatingMenu } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -99,11 +88,13 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		FloatingMenu,
 		Icon,
 	},
 	data() {
 		return {
+			editor: new Editor({
 				extensions: [
 					new BlockquoteNode(),
 					new BulletListNode(),
@@ -120,6 +111,15 @@ export default {
 					new LinkMark(),
 					new HistoryExtension(),
 				],
+				content: `
+					<h2>
+						Floating Menu
+					</h2>
+					<p>
+						This is an example of a medium-like editor. Enter a new line and some buttons will appear.
+					</p>
+				`,
+			}),
 		}
 	},
 }

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