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

---
 examples/Components/Routes/Basic/index.vue    |   6 +-
 examples/Components/Routes/Export/index.vue   |   6 +-
 .../Components/Routes/HidingMenuBar/index.vue | 192 +++++++++---------
 examples/Components/Routes/Images/index.vue   |   6 +-
 .../Components/Routes/TextAlign/index.vue     |   6 +-
 examples/Components/Routes/TodoList/index.vue |   6 +-
 packages/tiptap/src/Components/MenuBar.js     |   6 +-
 7 files changed, 115 insertions(+), 113 deletions(-)

diff --git a/examples/Components/Routes/Basic/index.vue b/examples/Components/Routes/Basic/index.vue
index 2fe87d61..4e9b6899 100644
--- a/examples/Components/Routes/Basic/index.vue
+++ b/examples/Components/Routes/Basic/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="editor">
-		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ commands, isActive }">
+		<menu-bar :editor="editor">
+			<div class="menubar" slot-scope="{ commands, isActive }">
 
 				<button
 					class="menubar__button"
@@ -121,7 +121,7 @@
 					<icon name="redo" />
 				</button>
 
-			</template>
+			</div>
 		</menu-bar>
 
 		<editor-content class="editor__content" :editor="editor" />
diff --git a/examples/Components/Routes/Export/index.vue b/examples/Components/Routes/Export/index.vue
index 6fecd1d7..132b1aef 100644
--- a/examples/Components/Routes/Export/index.vue
+++ b/examples/Components/Routes/Export/index.vue
@@ -1,8 +1,8 @@
 <template>
 	<div>
 		<div class="editor">
-			<menu-bar class="menubar" :editor="editor">
-				<template slot-scope="{ commands, isActive }">
+			<menu-bar :editor="editor">
+				<div class="menubar" slot-scope="{ commands, isActive }">
 
 					<button
 						class="menubar__button"
@@ -84,7 +84,7 @@
 						<icon name="code" />
 					</button>
 
-				</template>
+				</div>
 			</menu-bar>
 
 			<editor-content class="editor__content" :editor="editor" />
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
index 1d039732..3e3d259d 100644
--- a/examples/Components/Routes/HidingMenuBar/index.vue
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -1,115 +1,117 @@
 <template>
 	<div class="editor">
 		<menu-bar :editor="editor">
-			<template slot-scope="{ commands, isActive, focused }">
-				<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
+			<div
+				class="menubar is-hidden"
+				:class="{ 'is-focused': focused }"
+				slot-scope="{ commands, isActive, focused }"
+			>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('bold') }"
-						@click="commands.bold"
-					>
-						<icon name="bold" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('bold') }"
+					@click="commands.bold"
+				>
+					<icon name="bold" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('italic') }"
-						@click="commands.italic"
-					>
-						<icon name="italic" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('italic') }"
+					@click="commands.italic"
+				>
+					<icon name="italic" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('strike') }"
-						@click="commands.strike"
-					>
-						<icon name="strike" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('strike') }"
+					@click="commands.strike"
+				>
+					<icon name="strike" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('underline') }"
-						@click="commands.underline"
-					>
-						<icon name="underline" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('underline') }"
+					@click="commands.underline"
+				>
+					<icon name="underline" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('code') }"
-						@click="commands.code"
-					>
-						<icon name="code" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('code') }"
+					@click="commands.code"
+				>
+					<icon name="code" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('paragraph') }"
-						@click="commands.paragraph"
-					>
-						<icon name="paragraph" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('paragraph') }"
+					@click="commands.paragraph"
+				>
+					<icon name="paragraph" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('heading', { level: 1 }) }"
-						@click="commands.heading({ level: 1 })"
-					>
-						H1
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('heading', { level: 1 }) }"
+					@click="commands.heading({ level: 1 })"
+				>
+					H1
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('heading', { level: 2 }) }"
-						@click="commands.heading({ level: 2 })"
-					>
-						H2
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('heading', { level: 2 }) }"
+					@click="commands.heading({ level: 2 })"
+				>
+					H2
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('heading', { level: 3 }) }"
-						@click="commands.heading({ level: 3 })"
-					>
-						H3
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('heading', { level: 3 }) }"
+					@click="commands.heading({ level: 3 })"
+				>
+					H3
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('bullet_list') }"
-						@click="commands.bullet_list"
-					>
-						<icon name="ul" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('bullet_list') }"
+					@click="commands.bullet_list"
+				>
+					<icon name="ul" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('ordered_list') }"
-						@click="commands.ordered_list"
-					>
-						<icon name="ol" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('ordered_list') }"
+					@click="commands.ordered_list"
+				>
+					<icon name="ol" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('blockquote') }"
-						@click="commands.blockquote"
-					>
-						<icon name="quote" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('blockquote') }"
+					@click="commands.blockquote"
+				>
+					<icon name="quote" />
+				</button>
 
-					<button
-						class="menubar__button"
-						:class="{ 'is-active': isActive('code_block') }"
-						@click="commands.code_block"
-					>
-						<icon name="code" />
-					</button>
+				<button
+					class="menubar__button"
+					:class="{ 'is-active': isActive('code_block') }"
+					@click="commands.code_block"
+				>
+					<icon name="code" />
+				</button>
 
-				</div>
-			</template>
+			</div>
 		</menu-bar>
 
 		<editor-content class="editor__content" :editor="editor" />
diff --git a/examples/Components/Routes/Images/index.vue b/examples/Components/Routes/Images/index.vue
index a11fcf6b..79356dfa 100644
--- a/examples/Components/Routes/Images/index.vue
+++ b/examples/Components/Routes/Images/index.vue
@@ -1,14 +1,14 @@
 <template>
 	<div class="editor">
-		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ commands }">
+		<menu-bar :editor="editor">
+			<div class="menubar" slot-scope="{ commands }">
 				<button
 					class="menubar__button"
 					@click="showImagePrompt(commands.image)"
 				>
 					<icon name="image" />
 				</button>
-			</template>
+			</div>
 		</menu-bar>
 		
 		<editor-content class="editor__content" :editor="editor" />
diff --git a/examples/Components/Routes/TextAlign/index.vue b/examples/Components/Routes/TextAlign/index.vue
index 744a69fb..f9f64d49 100644
--- a/examples/Components/Routes/TextAlign/index.vue
+++ b/examples/Components/Routes/TextAlign/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="editor">
-		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ commands, isActive }">
+		<menu-bar :editor="editor">
+			<div class="menubar" slot-scope="{ commands, isActive }">
 
 				<button
 					class="menubar__button"
@@ -27,7 +27,7 @@
 					<icon name="align-right" />
 				</button>
 			
-			</template>
+			</div>
 		</menu-bar>
 
 		<editor-content class="editor__content" :editor="editor" />
diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue
index 39f62f6d..297c18e1 100644
--- a/examples/Components/Routes/TodoList/index.vue
+++ b/examples/Components/Routes/TodoList/index.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="editor">
-		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ commands, isActive }">
+		<menu-bar :editor="editor">
+			<div class="menubar" slot-scope="{ commands, isActive }">
 
 				<button
 					class="menubar__button"
@@ -35,7 +35,7 @@
 					<icon name="checklist" />
 				</button>
 
-			</template>
+			</div>
 		</menu-bar>
 
 		<editor-content class="editor__content" :editor="editor" />
diff --git a/packages/tiptap/src/Components/MenuBar.js b/packages/tiptap/src/Components/MenuBar.js
index 27ccc848..09022321 100644
--- a/packages/tiptap/src/Components/MenuBar.js
+++ b/packages/tiptap/src/Components/MenuBar.js
@@ -5,17 +5,17 @@ export default {
 			type: Object,
 		},
 	},
-	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),
-		}))
+		})
 	},
 }