From c2d8e1553052fc2bc3476ddc7bfba23673870c8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 4 Nov 2018 18:00:37 +0100
Subject: [PATCH] add renderless MenuBubble

---
 examples/Components/App/style.scss            |  5 +++
 .../Components/Routes/MenuBubble/index.vue    | 11 +++--
 packages/tiptap/src/Components/MenuBubble.js  | 23 ++++++++--
 packages/tiptap/src/utils/MenuBubble.js       | 45 ++++++++++++-------
 4 files changed, 61 insertions(+), 23 deletions(-)

diff --git a/examples/Components/App/style.scss b/examples/Components/App/style.scss
index 60a7335c..b81dc98a 100644
--- a/examples/Components/App/style.scss
+++ b/examples/Components/App/style.scss
@@ -95,6 +95,11 @@
   opacity: 0;
   transition: opacity 0.2s, visibility 0.2s;
 
+  &.is-active {
+    opacity: 1;
+    visibility: visible;
+  }
+
   &__button {
     display: inline-flex;
     background: transparent;
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index b452a136..e0469ba8 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -1,7 +1,12 @@
 <template>
 	<div class="editor">
-		<menu-bubble class="menububble" :editor="editor">
-			<template slot-scope="{ commands, isActive }">
+		<menu-bubble :editor="editor">
+			<div
+				slot-scope="{ commands, isActive, menu }"
+				class="menububble"
+				:class="{ 'is-active': menu.isActive }"
+				:style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`"
+			>
 
 				<button
 					class="menububble__button"
@@ -27,7 +32,7 @@
 					<icon name="code" />
 				</button>
 
-			</template>
+			</div>
 		</menu-bubble>
 
 		<editor-content class="editor__content" :editor="editor" />
diff --git a/packages/tiptap/src/Components/MenuBubble.js b/packages/tiptap/src/Components/MenuBubble.js
index a5323b8f..9648ff80 100644
--- a/packages/tiptap/src/Components/MenuBubble.js
+++ b/packages/tiptap/src/Components/MenuBubble.js
@@ -7,29 +7,44 @@ export default {
 			type: Object,
 		},
 	},
+	data() {
+		return {
+			menu: {
+				isActive: false,
+				left: 0,
+				bottom: 0,
+			},
+		}
+	},
 	watch: {
 		editor: {
 			immediate: true,
 			handler(editor) {
 				if (editor) {
 					this.$nextTick(() => {
-						editor.registerPlugin(MenuBubble(this.$el))
+						editor.registerPlugin(MenuBubble({
+							element: this.$el,
+							onUpdate: menu => {
+								this.menu = menu
+							},
+						}))
 					})
 				}
 			},
 		},
 	},
-	render(createElement) {
+	render() {
 		if (!this.editor) {
 			return null
 		}
 
-		return createElement('div', this.$scopedSlots.default({
+		return this.$scopedSlots.default({
 			focused: this.editor.view.focused,
 			focus: this.editor.focus,
 			commands: this.editor.commands,
 			isActive: this.editor.isActive.bind(this.editor),
 			markAttrs: this.editor.markAttrs.bind(this.editor),
-		}))
+			menu: this.menu,
+		})
 	},
 }
diff --git a/packages/tiptap/src/utils/MenuBubble.js b/packages/tiptap/src/utils/MenuBubble.js
index 4a158200..2e7ec1a3 100644
--- a/packages/tiptap/src/utils/MenuBubble.js
+++ b/packages/tiptap/src/utils/MenuBubble.js
@@ -1,12 +1,19 @@
 import { Plugin } from 'prosemirror-state'
 
-class Toolbar {
+class Menu {
 
-	constructor({ element, editorView }) {
+	constructor({ options, editorView }) {
+		this.options = {
+			...{
+				element: null,
+				onUpdate: () => false,
+			},
+			...options,
+		}
 		this.editorView = editorView
-		this.element = element
-		this.element.style.visibility = 'hidden'
-		this.element.style.opacity = 0
+		this.isActive = false
+		this.left = 0
+		this.bottom = 0
 
 		this.editorView.dom.addEventListener('blur', this.hide.bind(this))
 	}
@@ -26,7 +33,6 @@ class Toolbar {
 		}
 
 		// Otherwise, reposition it and update its content
-		this.show()
 		const { from, to } = state.selection
 
 		// These are in screen coordinates
@@ -34,18 +40,25 @@ class Toolbar {
 		const end = view.coordsAtPos(to)
 
 		// The box in which the tooltip is positioned, to use as base
-		const box = this.element.offsetParent.getBoundingClientRect()
+		const box = this.options.element.offsetParent.getBoundingClientRect()
 
 		// Find a center-ish x position from the selection endpoints (when
 		// crossing lines, end may be more to the left)
 		const left = Math.max((start.left + end.left) / 2, start.left + 3)
-		this.element.style.left = `${left - box.left}px`
-		this.element.style.bottom = `${box.bottom - start.top}px`
+
+		this.isActive = true
+		this.left = parseInt(left - box.left, 10)
+		this.bottom = parseInt(box.bottom - start.top, 10)
+
+		this.sendUpdate()
 	}
 
-	show() {
-		this.element.style.visibility = 'visible'
-		this.element.style.opacity = 1
+	sendUpdate() {
+		this.options.onUpdate({
+			isActive: this.isActive,
+			left: this.left,
+			bottom: this.bottom,
+		})
 	}
 
 	hide(event) {
@@ -53,8 +66,8 @@ class Toolbar {
 			return
 		}
 
-		this.element.style.visibility = 'hidden'
-		this.element.style.opacity = 0
+		this.isActive = false
+		this.sendUpdate()
 	}
 
 	destroy() {
@@ -63,10 +76,10 @@ class Toolbar {
 
 }
 
-export default function (element) {
+export default function (options) {
 	return new Plugin({
 		view(editorView) {
-			return new Toolbar({ editorView, element })
+			return new Menu({ editorView, options })
 		},
 	})
 }