add floating menu

examples/Components/Routes/FloatingMenu/index.vue

@@ -0,0 +1,125 @@
+<template>
+	<div>
+		<editor class="editor" :extensions="extensions">
+
+			<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: 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.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>
+
+				</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>
+	</div>
+</template>
+
+<script>
+import Icon from 'Components/Icon'
+import { Editor } from 'tiptap'
+import {
+	BlockquoteNode,
+	BulletListNode,
+	CodeBlockNode,
+	HardBreakNode,
+	HeadingNode,
+	ListItemNode,
+	OrderedListNode,
+	TodoItemNode,
+	TodoListNode,
+	BoldMark,
+	CodeMark,
+	ItalicMark,
+	LinkMark,
+	HistoryExtension,
+} from 'tiptap-extensions'
+
+export default {
+	components: {
+		Editor,
+		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(),
+			],
+		}
+	},
+}
+</script>
+
+<style lang="scss">
+@import "~variables";
+
+.editor {
+
+	position: relative;
+
+	&__floating-menu {
+		position: absolute;
+		margin-top: -0.25rem;
+	}
+
+}
+</style>

examples/Components/Subnavigation/index.vue

@@ -6,6 +6,9 @@
 		<router-link class="subnavigation__link" to="/menu-bubble">
 			Menu Bubble
 		</router-link>
+		<router-link class="subnavigation__link" to="/floating-menu">
+			Floating Menu
+		</router-link>
 		<router-link class="subnavigation__link" to="/links">
 			Links
 		</router-link>

examples/main.js

@@ -26,6 +26,13 @@ const routes = [
       githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/MenuBubble',
     },
   },
+  {
+    path: '/floating-menu',
+    component: () => import('Components/Routes/FloatingMenu'),
+    meta: {
+      githubUrl: 'https://github.com/heyscrumpy/tiptap/tree/master/examples/Components/Routes/FloatingMenu',
+    },
+  },
   {
     path: '/links',
     component: () => import('Components/Routes/Links'),

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'