From 7437992dd57a6659475efee6d4c24326a52656f9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 22 Oct 2018 21:40:12 +0200
Subject: [PATCH] fix some examples

---
 examples/Components/Routes/Basic/index.vue    |   3 +
 examples/Components/Routes/Embeds/index.vue   |  52 ++++-----
 .../Components/Routes/HidingMenuBar/index.vue | 101 ++++++++++++------
 .../Components/Routes/MenuBubble/index.vue    |   3 +
 packages/tiptap/src/Components/MenuBar.js     |   2 +
 packages/tiptap/src/Components/MenuBubble.js  |   2 +
 6 files changed, 104 insertions(+), 59 deletions(-)

diff --git a/examples/Components/Routes/Basic/index.vue b/examples/Components/Routes/Basic/index.vue
index 0d29f23b..09030237 100644
--- a/examples/Components/Routes/Basic/index.vue
+++ b/examples/Components/Routes/Basic/index.vue
@@ -188,5 +188,8 @@ export default {
 			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/Embeds/index.vue b/examples/Components/Routes/Embeds/index.vue
index b48dad87..9cdcd641 100644
--- a/examples/Components/Routes/Embeds/index.vue
+++ b/examples/Components/Routes/Embeds/index.vue
@@ -1,23 +1,11 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Embeds
-				</h2>
-				<p>
-					This is an example of a custom iframe node. This iframe is rendered as a <strong>vue component</strong>. This makes it possible to render the input below to change its source.
-				</p>
-				<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
-			</div>
-
-		</editor>
+	<div class="editor">
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	HardBreakNode,
 	HeadingNode,
@@ -29,21 +17,35 @@ import IframeNode from './Iframe.js'
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 	},
 	data() {
 		return {
-			extensions: [
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new BoldMark(),
-				new ItalicMark(),
-				new HistoryExtension(),
-				// custom extension
-				new IframeNode(),
-			],
+			editor: new Editor({
+				extensions: [
+					new HardBreakNode(),
+					new HeadingNode({ maxLevel: 3 }),
+					new BoldMark(),
+					new ItalicMark(),
+					new HistoryExtension(),
+					// custom extension
+					new IframeNode(),
+				],
+				content: `
+					<h2>
+						Embeds
+					</h2>
+					<p>
+						This is an example of a custom iframe node. This iframe is rendered as a <strong>vue component</strong>. This makes it possible to render the input below to change its source.
+					</p>
+					<iframe src="https://www.youtube.com/embed/XIMLoLxmTDw" frameborder="0" allowfullscreen></iframe>
+				`,
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
 
diff --git a/examples/Components/Routes/HidingMenuBar/index.vue b/examples/Components/Routes/HidingMenuBar/index.vue
index 056f8b9e..c42eacef 100644
--- a/examples/Components/Routes/HidingMenuBar/index.vue
+++ b/examples/Components/Routes/HidingMenuBar/index.vue
@@ -1,9 +1,8 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
-
-			<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
-				<div v-if="nodes && marks">
+	<div class="editor">
+		<menu-bar :editor="editor">
+			<template slot-scope="{ nodes, marks, focused }">
+				<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
 
 					<button
 						class="menubar__button"
@@ -21,6 +20,22 @@
 						<icon name="italic" />
 					</button>
 
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.strike.active() }"
+						@click="marks.strike.command"
+					>
+						<icon name="strike" />
+					</button>
+
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.underline.active() }"
+						@click="marks.underline.command"
+					>
+						<icon name="underline" />
+					</button>
+
 					<button
 						class="menubar__button"
 						@click="marks.code.command"
@@ -77,6 +92,14 @@
 						<icon name="ol" />
 					</button>
 
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': nodes.blockquote.active() }"
+						@click="nodes.blockquote.command"
+					>
+						<icon name="quote" />
+					</button>
+
 					<button
 						class="menubar__button"
 						:class="{ 'is-active': nodes.code_block.active() }"
@@ -86,24 +109,16 @@
 					</button>
 
 				</div>
-			</div>
+			</template>
+		</menu-bar>
 
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Hiding Menu Bar
-				</h2>
-				<p>
-					Click into this text to see the menu. Click outside and the menu will disappear. It's like magic.
-				</p>
-			</div>
-
-		</editor>
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent, MenuBar } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -118,33 +133,51 @@ import {
 	CodeMark,
 	ItalicMark,
 	LinkMark,
+	StrikeMark,
+	UnderlineMark,
 	HistoryExtension,
 } from 'tiptap-extensions'
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		MenuBar,
 		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(),
-			],
+			editor: new Editor({
+				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 StrikeMark(),
+					new UnderlineMark(),
+					new HistoryExtension(),
+				],
+				content: `
+					<h2>
+						Hiding Menu Bar
+					</h2>
+					<p>
+						Click into this text to see the menu. Click outside and the menu will disappear. It's like magic.
+					</p>
+				`,
+			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
\ No newline at end of file
diff --git a/examples/Components/Routes/MenuBubble/index.vue b/examples/Components/Routes/MenuBubble/index.vue
index 1cb0942e..6c1efda7 100644
--- a/examples/Components/Routes/MenuBubble/index.vue
+++ b/examples/Components/Routes/MenuBubble/index.vue
@@ -94,5 +94,8 @@ export default {
 			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>
\ No newline at end of file
diff --git a/packages/tiptap/src/Components/MenuBar.js b/packages/tiptap/src/Components/MenuBar.js
index 6a6dd9b3..5291d7e8 100644
--- a/packages/tiptap/src/Components/MenuBar.js
+++ b/packages/tiptap/src/Components/MenuBar.js
@@ -10,6 +10,8 @@ export default {
 			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,
 			}))
 		}
 	},
diff --git a/packages/tiptap/src/Components/MenuBubble.js b/packages/tiptap/src/Components/MenuBubble.js
index 1899f4f1..661ada80 100644
--- a/packages/tiptap/src/Components/MenuBubble.js
+++ b/packages/tiptap/src/Components/MenuBubble.js
@@ -24,6 +24,8 @@ export default {
 			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,
 			}))
 		}
 	},