From 68793ea38588f5441f5ebd9453cfb31611cd0f62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 29 Oct 2018 23:31:13 +0100
Subject: [PATCH] fix some examples

---
 examples/Components/Routes/Basic/index.vue    |  2 +-
 examples/Components/Routes/Export/index.vue   | 22 +++++++--------
 .../Components/Routes/FloatingMenu/index.vue  | 16 +++++------
 .../Components/Routes/HidingMenuBar/index.vue | 28 +++++++++----------
 .../Components/Routes/MenuBubble/index.vue    |  8 +++---
 .../Components/Routes/TextAlign/index.vue     |  8 +++---
 examples/Components/Routes/TodoList/index.vue | 10 +++----
 .../tiptap/src/Components/EditorContent.js    |  4 +--
 .../tiptap/src/Components/FloatingMenu.js     |  3 +-
 packages/tiptap/src/Components/MenuBar.js     |  2 --
 packages/tiptap/src/Components/MenuBubble.js  |  3 +-
 11 files changed, 51 insertions(+), 55 deletions(-)

diff --git a/examples/Components/Routes/Basic/index.vue b/examples/Components/Routes/Basic/index.vue
index 2f185ec1..2fd5c8b1 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="{ nodes, marks, commands, isActive }">
+			<template slot-scope="{ commands, isActive }">
 
 				<button
 					class="menubar__button"
diff --git a/examples/Components/Routes/Export/index.vue b/examples/Components/Routes/Export/index.vue
index dc796d43..6fecd1d7 100644
--- a/examples/Components/Routes/Export/index.vue
+++ b/examples/Components/Routes/Export/index.vue
@@ -2,11 +2,11 @@
 	<div>
 		<div class="editor">
 			<menu-bar class="menubar" :editor="editor">
-				<template slot-scope="{ nodes, marks, commands }">
+				<template slot-scope="{ commands, isActive }">
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.bold.active() }"
+						:class="{ 'is-active': isActive('bold') }"
 						@click="commands.bold"
 					>
 						<icon name="bold" />
@@ -14,7 +14,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.italic.active() }"
+						:class="{ 'is-active': isActive('italic') }"
 						@click="commands.italic"
 					>
 						<icon name="italic" />
@@ -22,7 +22,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.code.active() }"
+						:class="{ 'is-active': isActive('code') }"
 						@click="commands.code"
 					>
 						<icon name="code" />
@@ -30,7 +30,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.paragraph.active() }"
+						:class="{ 'is-active': isActive('paragraph') }"
 						@click="commands.paragraph"
 					>
 						<icon name="paragraph" />
@@ -38,7 +38,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+						:class="{ 'is-active': isActive('heading', { level: 1 }) }"
 						@click="commands.heading({ level: 1 })"
 					>
 						H1
@@ -46,7 +46,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+						:class="{ 'is-active': isActive('heading', { level: 2 }) }"
 						@click="commands.heading({ level: 2 })"
 					>
 						H2
@@ -54,7 +54,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+						:class="{ 'is-active': isActive('heading', { level: 3 }) }"
 						@click="commands.heading({ level: 3 })"
 					>
 						H3
@@ -62,7 +62,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.bullet_list.active() }"
+						:class="{ 'is-active': isActive('bullet_list') }"
 						@click="commands.bullet_list"
 					>
 						<icon name="ul" />
@@ -70,7 +70,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.ordered_list.active() }"
+						:class="{ 'is-active': isActive('ordered_list') }"
 						@click="commands.ordered_list"
 					>
 						<icon name="ol" />
@@ -78,7 +78,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.code_block.active() }"
+						:class="{ 'is-active': isActive('code_block') }"
 						@click="commands.code_block"
 					>
 						<icon name="code" />
diff --git a/examples/Components/Routes/FloatingMenu/index.vue b/examples/Components/Routes/FloatingMenu/index.vue
index e3daed4d..bea15d7e 100644
--- a/examples/Components/Routes/FloatingMenu/index.vue
+++ b/examples/Components/Routes/FloatingMenu/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="editor">
 		<floating-menu class="editor__floating-menu" :editor="editor">
-			<template slot-scope="{ nodes, marks, commands }">
+			<template slot-scope="{ commands, isActive }">
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+					:class="{ 'is-active': isActive('heading', { level: 1 }) }"
 					@click="commands.heading({ level: 1 })"
 				>
 					H1
@@ -13,7 +13,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+					:class="{ 'is-active': isActive('heading', { level: 2 }) }"
 					@click="commands.heading({ level: 2 })"
 				>
 					H2
@@ -21,7 +21,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+					:class="{ 'is-active': isActive('heading', { level: 3 }) }"
 					@click="commands.heading({ level: 3 })"
 				>
 					H3
@@ -29,7 +29,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.bullet_list.active() }"
+					:class="{ 'is-active': isActive('bullet_list') }"
 					@click="commands.bullet_list"
 				>
 					<icon name="ul" />
@@ -37,7 +37,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.ordered_list.active() }"
+					:class="{ 'is-active': isActive('ordered_list') }"
 					@click="commands.ordered_list"
 				>
 					<icon name="ol" />
@@ -45,7 +45,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.blockquote.active() }"
+					:class="{ 'is-active': isActive('blockquote') }"
 					@click="commands.blockquote"
 				>
 					<icon name="quote" />
@@ -53,7 +53,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.code_block.active() }"
+					:class="{ 'is-active': isActive('code_block') }"
 					@click="commands.code_block"
 				>
 					<icon name="code" />
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
index b20512ae..1d039732 100644
--- a/examples/Components/Routes/HidingMenuBar/index.vue
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="editor">
 		<menu-bar :editor="editor">
-			<template slot-scope="{ nodes, marks, commands, focused }">
+			<template slot-scope="{ commands, isActive, focused }">
 				<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.bold.active() }"
+						:class="{ 'is-active': isActive('bold') }"
 						@click="commands.bold"
 					>
 						<icon name="bold" />
@@ -14,7 +14,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.italic.active() }"
+						:class="{ 'is-active': isActive('italic') }"
 						@click="commands.italic"
 					>
 						<icon name="italic" />
@@ -22,7 +22,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.strike.active() }"
+						:class="{ 'is-active': isActive('strike') }"
 						@click="commands.strike"
 					>
 						<icon name="strike" />
@@ -30,7 +30,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.underline.active() }"
+						:class="{ 'is-active': isActive('underline') }"
 						@click="commands.underline"
 					>
 						<icon name="underline" />
@@ -38,7 +38,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': marks.code.active() }"
+						:class="{ 'is-active': isActive('code') }"
 						@click="commands.code"
 					>
 						<icon name="code" />
@@ -46,7 +46,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.paragraph.active() }"
+						:class="{ 'is-active': isActive('paragraph') }"
 						@click="commands.paragraph"
 					>
 						<icon name="paragraph" />
@@ -54,7 +54,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
+						:class="{ 'is-active': isActive('heading', { level: 1 }) }"
 						@click="commands.heading({ level: 1 })"
 					>
 						H1
@@ -62,7 +62,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
+						:class="{ 'is-active': isActive('heading', { level: 2 }) }"
 						@click="commands.heading({ level: 2 })"
 					>
 						H2
@@ -70,7 +70,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
+						:class="{ 'is-active': isActive('heading', { level: 3 }) }"
 						@click="commands.heading({ level: 3 })"
 					>
 						H3
@@ -78,7 +78,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.bullet_list.active() }"
+						:class="{ 'is-active': isActive('bullet_list') }"
 						@click="commands.bullet_list"
 					>
 						<icon name="ul" />
@@ -86,7 +86,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.ordered_list.active() }"
+						:class="{ 'is-active': isActive('ordered_list') }"
 						@click="commands.ordered_list"
 					>
 						<icon name="ol" />
@@ -94,7 +94,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.blockquote.active() }"
+						:class="{ 'is-active': isActive('blockquote') }"
 						@click="commands.blockquote"
 					>
 						<icon name="quote" />
@@ -102,7 +102,7 @@
 
 					<button
 						class="menubar__button"
-						:class="{ 'is-active': nodes.code_block.active() }"
+						:class="{ 'is-active': isActive('code_block') }"
 						@click="commands.code_block"
 					>
 						<icon name="code" />
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index 859e22cb..b452a136 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="editor">
 		<menu-bubble class="menububble" :editor="editor">
-			<template slot-scope="{ nodes, marks, commands }">
+			<template slot-scope="{ commands, isActive }">
 
 				<button
 					class="menububble__button"
-					:class="{ 'is-active': marks.bold.active() }"
+					:class="{ 'is-active': isActive('bold') }"
 					@click="commands.bold"
 				>
 					<icon name="bold" />
@@ -13,7 +13,7 @@
 
 				<button
 					class="menububble__button"
-					:class="{ 'is-active': marks.italic.active() }"
+					:class="{ 'is-active': isActive('italic') }"
 					@click="commands.italic"
 				>
 					<icon name="italic" />
@@ -21,7 +21,7 @@
 
 				<button
 					class="menububble__button"
-					:class="{ 'is-active': marks.code.active() }"
+					:class="{ 'is-active': isActive('code') }"
 					@click="commands.code"
 				>
 					<icon name="code" />
diff --git a/examples/Components/Routes/TextAlign/index.vue b/examples/Components/Routes/TextAlign/index.vue
index 02585091..744a69fb 100644
--- a/examples/Components/Routes/TextAlign/index.vue
+++ b/examples/Components/Routes/TextAlign/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="editor">
 		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ nodes, marks, commands }">
+			<template slot-scope="{ commands, isActive }">
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
+					:class="{ 'is-active': isActive('paragraph', { textAlign: 'left' }) }"
 					@click="commands.paragraph({ textAlign: 'left' })"
 				>
 					<icon name="align-left" />
@@ -13,7 +13,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
+					:class="{ 'is-active': isActive('paragraph', { textAlign: 'center' }) }"
 					@click="commands.paragraph({ textAlign: 'center' })"
 				>
 					<icon name="align-center" />
@@ -21,7 +21,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
+					:class="{ 'is-active': isActive('paragraph', { textAlign: 'right' }) }"
 					@click="commands.paragraph({ textAlign: 'right' })"
 				>
 					<icon name="align-right" />
diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue
index 04f8078d..39f62f6d 100644
--- a/examples/Components/Routes/TodoList/index.vue
+++ b/examples/Components/Routes/TodoList/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="editor">
 		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ nodes, marks, commands }">
+			<template slot-scope="{ commands, isActive }">
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.bold.active() }"
+					:class="{ 'is-active': isActive('bold') }"
 					@click="commands.bold"
 				>
 					<icon name="bold" />
@@ -13,7 +13,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.italic.active() }"
+					:class="{ 'is-active': isActive('italic') }"
 					@click="commands.italic"
 				>
 					<icon name="italic" />
@@ -21,7 +21,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': marks.code.active() }"
+					:class="{ 'is-active': isActive('code') }"
 					@click="commands.code"
 				>
 					<icon name="code" />
@@ -29,7 +29,7 @@
 
 				<button
 					class="menubar__button"
-					:class="{ 'is-active': nodes.todo_list.active() }"
+					:class="{ 'is-active': isActive('todo_list') }"
 					@click="commands.todo_list"
 				>
 					<icon name="checklist" />
diff --git a/packages/tiptap/src/Components/EditorContent.js b/packages/tiptap/src/Components/EditorContent.js
index c2bdb193..24276e44 100644
--- a/packages/tiptap/src/Components/EditorContent.js
+++ b/packages/tiptap/src/Components/EditorContent.js
@@ -13,9 +13,9 @@ export default {
 					this.$nextTick(() => this.$el.append(element.firstChild))
 				}
 			},
-		}
+		},
 	},
 	render(createElement) {
 		return createElement('div')
 	},
-}
\ No newline at end of file
+}
diff --git a/packages/tiptap/src/Components/FloatingMenu.js b/packages/tiptap/src/Components/FloatingMenu.js
index 4e03a599..811a0b30 100644
--- a/packages/tiptap/src/Components/FloatingMenu.js
+++ b/packages/tiptap/src/Components/FloatingMenu.js
@@ -22,11 +22,10 @@ export default {
 	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,
 				commands: this.editor.commands,
+				isActive: this.editor.isActive.bind(this.editor),
 			}))
 		}
 	},
diff --git a/packages/tiptap/src/Components/MenuBar.js b/packages/tiptap/src/Components/MenuBar.js
index da82b2d2..a5c1ca63 100644
--- a/packages/tiptap/src/Components/MenuBar.js
+++ b/packages/tiptap/src/Components/MenuBar.js
@@ -8,8 +8,6 @@ export default {
 	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,
 				commands: this.editor.commands,
diff --git a/packages/tiptap/src/Components/MenuBubble.js b/packages/tiptap/src/Components/MenuBubble.js
index 019fd1e5..74390040 100644
--- a/packages/tiptap/src/Components/MenuBubble.js
+++ b/packages/tiptap/src/Components/MenuBubble.js
@@ -22,11 +22,10 @@ export default {
 	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,
 				commands: this.editor.commands,
+				isActive: this.editor.isActive.bind(this.editor),
 			}))
 		}
 	},