From e66218bd959c9078ab7c8644954aca5026d0521f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 28 Oct 2018 22:57:05 +0100
Subject: [PATCH] add new command syntax to examples

---
 examples/Components/Routes/Basic/index.vue    | 30 ++++++++---------
 examples/Components/Routes/Export/index.vue   | 26 +++++++--------
 .../Components/Routes/FloatingMenu/index.vue  | 16 +++++-----
 .../Components/Routes/HidingMenuBar/index.vue | 32 +++++++++----------
 examples/Components/Routes/Images/index.vue   |  4 +--
 .../Routes/MarkdownShortcuts/index.vue        |  2 +-
 .../Components/Routes/MenuBubble/index.vue    |  8 ++---
 .../Components/Routes/TextAlign/index.vue     |  8 ++---
 examples/Components/Routes/TodoList/index.vue | 10 +++---
 .../tiptap/src/Components/FloatingMenu.js     |  5 +--
 packages/tiptap/src/Components/MenuBubble.js  |  5 +--
 11 files changed, 74 insertions(+), 72 deletions(-)

diff --git a/examples/Components/Routes/Basic/index.vue b/examples/Components/Routes/Basic/index.vue
index 18b07fe1..f974e29c 100644
--- a/examples/Components/Routes/Basic/index.vue
+++ b/examples/Components/Routes/Basic/index.vue
@@ -20,7 +20,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': marks.bold.active() }"
-					@click="marks.bold.command"
+					@click="commands.bold"
 				>
 					<icon name="bold" />
 				</button>
@@ -28,7 +28,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': marks.italic.active() }"
-					@click="marks.italic.command"
+					@click="commands.italic"
 				>
 					<icon name="italic" />
 				</button>
@@ -36,7 +36,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': marks.strike.active() }"
-					@click="marks.strike.command"
+					@click="commands.strike"
 				>
 					<icon name="strike" />
 				</button>
@@ -44,23 +44,23 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': marks.underline.active() }"
-					@click="marks.underline.command"
+					@click="commands.underline"
 				>
 					<icon name="underline" />
 				</button>
 
 				<button
 					class="menubar__button"
-					@click="marks.code.command"
-					:class="{ 'is-active': marks.code.active() }
-				">
+					:class="{ 'is-active': marks.code.active() }"
+					@click="commands.code"
+				>
 					<icon name="code" />
 				</button>
 
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.paragraph.active() }"
-					@click="nodes.paragraph.command"
+					@click="commands.paragraph"
 				>
 					<icon name="paragraph" />
 				</button>
@@ -68,7 +68,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
-					@click="nodes.heading.command({ level: 1 })"
+					@click="commands.heading({ level: 1 })"
 				>
 					H1
 				</button>
@@ -76,7 +76,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
-					@click="nodes.heading.command({ level: 2 })"
+					@click="commands.heading({ level: 2 })"
 				>
 					H2
 				</button>
@@ -84,7 +84,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
-					@click="nodes.heading.command({ level: 3 })"
+					@click="commands.heading({ level: 3 })"
 				>
 					H3
 				</button>
@@ -92,7 +92,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.bullet_list.active() }"
-					@click="nodes.bullet_list.command"
+					@click="commands.bullet_list"
 				>
 					<icon name="ul" />
 				</button>
@@ -100,7 +100,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.ordered_list.active() }"
-					@click="nodes.ordered_list.command"
+					@click="commands.ordered_list"
 				>
 					<icon name="ol" />
 				</button>
@@ -108,7 +108,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.blockquote.active() }"
-					@click="nodes.blockquote.command"
+					@click="commands.blockquote"
 				>
 					<icon name="quote" />
 				</button>
@@ -116,7 +116,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.code_block.active() }"
-					@click="nodes.code_block.command"
+					@click="commands.code_block"
 				>
 					<icon name="code" />
 				</button>
diff --git a/examples/Components/Routes/Export/index.vue b/examples/Components/Routes/Export/index.vue
index be80df92..dc796d43 100644
--- a/examples/Components/Routes/Export/index.vue
+++ b/examples/Components/Routes/Export/index.vue
@@ -2,12 +2,12 @@
 	<div>
 		<div class="editor">
 			<menu-bar class="menubar" :editor="editor">
-				<template slot-scope="{ nodes, marks }">
+				<template slot-scope="{ nodes, marks, commands }">
 
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': marks.bold.active() }"
-						@click="marks.bold.command"
+						@click="commands.bold"
 					>
 						<icon name="bold" />
 					</button>
@@ -15,23 +15,23 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': marks.italic.active() }"
-						@click="marks.italic.command"
+						@click="commands.italic"
 					>
 						<icon name="italic" />
 					</button>
 
 					<button
 						class="menubar__button"
-						@click="marks.code.command"
-						:class="{ 'is-active': marks.code.active() }
-					">
+						:class="{ 'is-active': marks.code.active() }"
+						@click="commands.code"
+					>
 						<icon name="code" />
 					</button>
 
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.paragraph.active() }"
-						@click="nodes.paragraph.command"
+						@click="commands.paragraph"
 					>
 						<icon name="paragraph" />
 					</button>
@@ -39,7 +39,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
-						@click="nodes.heading.command({ level: 1 })"
+						@click="commands.heading({ level: 1 })"
 					>
 						H1
 					</button>
@@ -47,7 +47,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
-						@click="nodes.heading.command({ level: 2 })"
+						@click="commands.heading({ level: 2 })"
 					>
 						H2
 					</button>
@@ -55,7 +55,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
-						@click="nodes.heading.command({ level: 3 })"
+						@click="commands.heading({ level: 3 })"
 					>
 						H3
 					</button>
@@ -63,7 +63,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.bullet_list.active() }"
-						@click="nodes.bullet_list.command"
+						@click="commands.bullet_list"
 					>
 						<icon name="ul" />
 					</button>
@@ -71,7 +71,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.ordered_list.active() }"
-						@click="nodes.ordered_list.command"
+						@click="commands.ordered_list"
 					>
 						<icon name="ol" />
 					</button>
@@ -79,7 +79,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.code_block.active() }"
-						@click="nodes.code_block.command"
+						@click="commands.code_block"
 					>
 						<icon name="code" />
 					</button>
diff --git a/examples/Components/Routes/FloatingMenu/index.vue b/examples/Components/Routes/FloatingMenu/index.vue
index 589e6aa2..e3daed4d 100644
--- a/examples/Components/Routes/FloatingMenu/index.vue
+++ b/examples/Components/Routes/FloatingMenu/index.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="editor">
 		<floating-menu class="editor__floating-menu" :editor="editor">
-			<template slot-scope="{ nodes, marks }">
+			<template slot-scope="{ nodes, marks, commands }">
 
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
-					@click="nodes.heading.command({ level: 1 })"
+					@click="commands.heading({ level: 1 })"
 				>
 					H1
 				</button>
@@ -14,7 +14,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
-					@click="nodes.heading.command({ level: 2 })"
+					@click="commands.heading({ level: 2 })"
 				>
 					H2
 				</button>
@@ -22,7 +22,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
-					@click="nodes.heading.command({ level: 3 })"
+					@click="commands.heading({ level: 3 })"
 				>
 					H3
 				</button>
@@ -30,7 +30,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.bullet_list.active() }"
-					@click="nodes.bullet_list.command"
+					@click="commands.bullet_list"
 				>
 					<icon name="ul" />
 				</button>
@@ -38,7 +38,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.ordered_list.active() }"
-					@click="nodes.ordered_list.command"
+					@click="commands.ordered_list"
 				>
 					<icon name="ol" />
 				</button>
@@ -46,7 +46,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.blockquote.active() }"
-					@click="nodes.blockquote.command"
+					@click="commands.blockquote"
 				>
 					<icon name="quote" />
 				</button>
@@ -54,7 +54,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.code_block.active() }"
-					@click="nodes.code_block.command"
+					@click="commands.code_block"
 				>
 					<icon name="code" />
 				</button>
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
index 4b554134..b20512ae 100644
--- a/examples/Components/Routes/HidingMenuBar/index.vue
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -1,13 +1,13 @@
 <template>
 	<div class="editor">
 		<menu-bar :editor="editor">
-			<template slot-scope="{ nodes, marks, focused }">
+			<template slot-scope="{ nodes, marks, commands, focused }">
 				<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
 
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': marks.bold.active() }"
-						@click="marks.bold.command"
+						@click="commands.bold"
 					>
 						<icon name="bold" />
 					</button>
@@ -15,7 +15,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': marks.italic.active() }"
-						@click="marks.italic.command"
+						@click="commands.italic"
 					>
 						<icon name="italic" />
 					</button>
@@ -23,7 +23,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': marks.strike.active() }"
-						@click="marks.strike.command"
+						@click="commands.strike"
 					>
 						<icon name="strike" />
 					</button>
@@ -31,23 +31,23 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': marks.underline.active() }"
-						@click="marks.underline.command"
+						@click="commands.underline"
 					>
 						<icon name="underline" />
 					</button>
 
 					<button
 						class="menubar__button"
-						@click="marks.code.command"
-						:class="{ 'is-active': marks.code.active() }
-					">
+						:class="{ 'is-active': marks.code.active() }"
+						@click="commands.code"
+					>
 						<icon name="code" />
 					</button>
 
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.paragraph.active() }"
-						@click="nodes.paragraph.command"
+						@click="commands.paragraph"
 					>
 						<icon name="paragraph" />
 					</button>
@@ -55,7 +55,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.heading.active({ level: 1 }) }"
-						@click="nodes.heading.command({ level: 1 })"
+						@click="commands.heading({ level: 1 })"
 					>
 						H1
 					</button>
@@ -63,7 +63,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.heading.active({ level: 2 }) }"
-						@click="nodes.heading.command({ level: 2 })"
+						@click="commands.heading({ level: 2 })"
 					>
 						H2
 					</button>
@@ -71,7 +71,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.heading.active({ level: 3 }) }"
-						@click="nodes.heading.command({ level: 3 })"
+						@click="commands.heading({ level: 3 })"
 					>
 						H3
 					</button>
@@ -79,7 +79,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.bullet_list.active() }"
-						@click="nodes.bullet_list.command"
+						@click="commands.bullet_list"
 					>
 						<icon name="ul" />
 					</button>
@@ -87,7 +87,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.ordered_list.active() }"
-						@click="nodes.ordered_list.command"
+						@click="commands.ordered_list"
 					>
 						<icon name="ol" />
 					</button>
@@ -95,7 +95,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.blockquote.active() }"
-						@click="nodes.blockquote.command"
+						@click="commands.blockquote"
 					>
 						<icon name="quote" />
 					</button>
@@ -103,7 +103,7 @@
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.code_block.active() }"
-						@click="nodes.code_block.command"
+						@click="commands.code_block"
 					>
 						<icon name="code" />
 					</button>
diff --git a/examples/Components/Routes/Images/index.vue b/examples/Components/Routes/Images/index.vue
index 22e46126..a11fcf6b 100644
--- a/examples/Components/Routes/Images/index.vue
+++ b/examples/Components/Routes/Images/index.vue
@@ -1,10 +1,10 @@
 <template>
 	<div class="editor">
 		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ nodes }">
+			<template slot-scope="{ commands }">
 				<button
 					class="menubar__button"
-					@click="showImagePrompt(nodes.image.command)"
+					@click="showImagePrompt(commands.image)"
 				>
 					<icon name="image" />
 				</button>
diff --git a/examples/Components/Routes/MarkdownShortcuts/index.vue b/examples/Components/Routes/MarkdownShortcuts/index.vue
index e6feee59..e379ed1b 100644
--- a/examples/Components/Routes/MarkdownShortcuts/index.vue
+++ b/examples/Components/Routes/MarkdownShortcuts/index.vue
@@ -50,7 +50,7 @@ export default {
 				],
 				content: `
 					<h2>
-						down Shortcuts
+						Markdown Shortcuts
 					</h2>
 					<p>
 						Start a new line and type <code>#</code> followed by a <code>space</code> and you will get an H1 headline.
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index d25b807b..859e22cb 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="editor">
 		<menu-bubble class="menububble" :editor="editor">
-			<template slot-scope="{ nodes, marks }">
+			<template slot-scope="{ nodes, marks, commands }">
 
 				<button
 					class="menububble__button"
 					:class="{ 'is-active': marks.bold.active() }"
-					@click="marks.bold.command"
+					@click="commands.bold"
 				>
 					<icon name="bold" />
 				</button>
@@ -14,7 +14,7 @@
 				<button
 					class="menububble__button"
 					:class="{ 'is-active': marks.italic.active() }"
-					@click="marks.italic.command"
+					@click="commands.italic"
 				>
 					<icon name="italic" />
 				</button>
@@ -22,7 +22,7 @@
 				<button
 					class="menububble__button"
 					:class="{ 'is-active': marks.code.active() }"
-					@click="marks.code.command"
+					@click="commands.code"
 				>
 					<icon name="code" />
 				</button>
diff --git a/examples/Components/Routes/TextAlign/index.vue b/examples/Components/Routes/TextAlign/index.vue
index eeeaa0e3..02585091 100644
--- a/examples/Components/Routes/TextAlign/index.vue
+++ b/examples/Components/Routes/TextAlign/index.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="editor">
 		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ nodes, marks }">
+			<template slot-scope="{ nodes, marks, commands }">
 
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'left' }) }"
-					@click="nodes.paragraph.command({ textAlign: 'left' })"
+					@click="commands.paragraph({ textAlign: 'left' })"
 				>
 					<icon name="align-left" />
 				</button>
@@ -14,7 +14,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'center' }) }"
-					@click="nodes.paragraph.command({ textAlign: 'center' })"
+					@click="commands.paragraph({ textAlign: 'center' })"
 				>
 					<icon name="align-center" />
 				</button>
@@ -22,7 +22,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.paragraph.active({ textAlign: 'right' }) }"
-					@click="nodes.paragraph.command({ textAlign: 'right' })"
+					@click="commands.paragraph({ textAlign: 'right' })"
 				>
 					<icon name="align-right" />
 				</button>
diff --git a/examples/Components/Routes/TodoList/index.vue b/examples/Components/Routes/TodoList/index.vue
index b598fd5c..04f8078d 100644
--- a/examples/Components/Routes/TodoList/index.vue
+++ b/examples/Components/Routes/TodoList/index.vue
@@ -1,12 +1,12 @@
 <template>
 	<div class="editor">
 		<menu-bar class="menubar" :editor="editor">
-			<template slot-scope="{ nodes, marks }">
+			<template slot-scope="{ nodes, marks, commands }">
 
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': marks.bold.active() }"
-					@click="marks.bold.command"
+					@click="commands.bold"
 				>
 					<icon name="bold" />
 				</button>
@@ -14,7 +14,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': marks.italic.active() }"
-					@click="marks.italic.command"
+					@click="commands.italic"
 				>
 					<icon name="italic" />
 				</button>
@@ -22,7 +22,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': marks.code.active() }"
-					@click="marks.code.command"
+					@click="commands.code"
 				>
 					<icon name="code" />
 				</button>
@@ -30,7 +30,7 @@
 				<button
 					class="menubar__button"
 					:class="{ 'is-active': nodes.todo_list.active() }"
-					@click="nodes.todo_list.command"
+					@click="commands.todo_list"
 				>
 					<icon name="checklist" />
 				</button>
diff --git a/packages/tiptap/src/Components/FloatingMenu.js b/packages/tiptap/src/Components/FloatingMenu.js
index 90cc3320..4e03a599 100644
--- a/packages/tiptap/src/Components/FloatingMenu.js
+++ b/packages/tiptap/src/Components/FloatingMenu.js
@@ -17,7 +17,7 @@ export default {
 					})
 				}
 			},
-		}
+		},
 	},
 	render(createElement) {
 		if (this.editor) {
@@ -26,7 +26,8 @@ export default {
 				marks: this.editor.menuActions.marks,
 				focused: this.editor.view.focused,
 				focus: this.editor.focus,
+				commands: this.editor.commands,
 			}))
 		}
 	},
-}
\ No newline at end of file
+}
diff --git a/packages/tiptap/src/Components/MenuBubble.js b/packages/tiptap/src/Components/MenuBubble.js
index 661ada80..019fd1e5 100644
--- a/packages/tiptap/src/Components/MenuBubble.js
+++ b/packages/tiptap/src/Components/MenuBubble.js
@@ -17,7 +17,7 @@ export default {
 					})
 				}
 			},
-		}
+		},
 	},
 	render(createElement) {
 		if (this.editor) {
@@ -26,7 +26,8 @@ export default {
 				marks: this.editor.menuActions.marks,
 				focused: this.editor.view.focused,
 				focus: this.editor.focus,
+				commands: this.editor.commands,
 			}))
 		}
 	},
-}
\ No newline at end of file
+}