almost fix floating menu example

examples/Components/Routes/FloatingMenu/index.vue

@@ -1,85 +1,74 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
+	<div class="editor">
+		<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"
+					:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+					@click="nodes.heading.command({ level: 1 })"
+				>
+					H1
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
-						@click="nodes.heading.command({ level: 1 })"
-					>
-						H1
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+					@click="nodes.heading.command({ level: 2 })"
+				>
+					H2
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
-						@click="nodes.heading.command({ level: 2 })"
-					>
-						H2
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+					@click="nodes.heading.command({ level: 3 })"
+				>
+					H3
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
-						@click="nodes.heading.command({ level: 3 })"
-					>
-						H3
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.bullet_list.active() }"
+					@click="nodes.bullet_list.command"
+				>
+					<icon name="ul" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.bullet_list.active() }"
-						@click="nodes.bullet_list.command"
-					>
-						<icon name="ul" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.ordered_list.active() }"
+					@click="nodes.ordered_list.command"
+				>
+					<icon name="ol" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.ordered_list.active() }"
-						@click="nodes.ordered_list.command"
-					>
-						<icon name="ol" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.blockquote.active() }"
+					@click="nodes.blockquote.command"
+				>
+					<icon name="quote" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.blockquote.active() }"
-						@click="nodes.blockquote.command"
-					>
-						<icon name="quote" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': nodes.code_block.active() }"
+					@click="nodes.code_block.command"
+				>
+					<icon name="code" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': nodes.code_block.active() }"
-						@click="nodes.code_block.command"
-					>
-						<icon name="code" />
-					</button>
+			</template>
+		</floating-menu>
 
-				</template>
-			</div>
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<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>
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent, FloatingMenu } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -99,27 +88,38 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		FloatingMenu,
 		Icon,
 	},
 	data() {
 		return {
-			extensions: [
-				new BlockquoteNode(),
-				new BulletListNode(),
-				new CodeBlockNode(),
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new ListItemNode(),
-				new OrderedListNode(),
-				new TodoItemNode(),
-				new TodoListNode(),
-				new BoldMark(),
-				new CodeMark(),
-				new ItalicMark(),
-				new LinkMark(),
-				new HistoryExtension(),
-			],
+			editor: new Editor({
+				extensions: [
+					new BlockquoteNode(),
+					new BulletListNode(),
+					new CodeBlockNode(),
+					new HardBreakNode(),
+					new HeadingNode({ maxLevel: 3 }),
+					new ListItemNode(),
+					new OrderedListNode(),
+					new TodoItemNode(),
+					new TodoListNode(),
+					new BoldMark(),
+					new CodeMark(),
+					new ItalicMark(),
+					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 menuBubble } from './menuBubble'
+export { default as FloatingMenu } from './FloatingMenu'
+export { default as MenuBubble } from './MenuBubble'
 export { default as ExtensionManager } from './ExtensionManager'