fix some examples

examples/Components/Routes/Basic/index.vue

@@ -188,5 +188,8 @@ export default {
 			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>

examples/Components/Routes/Embeds/index.vue

@@ -1,23 +1,11 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor class="editor" :extensions="extensions">
+		<editor-content class="editor__content" :editor="editor" />
-
-			<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>
 </template>
 
 <script>
-import { Editor } from 'tiptap'
+import { Editor, EditorContent } from 'tiptap'
 import {
 	HardBreakNode,
 	HeadingNode,
@@ -29,10 +17,11 @@ import IframeNode from './Iframe.js'
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
 	},
 	data() {
 		return {
+			editor: new Editor({
 				extensions: [
 					new HardBreakNode(),
 					new HeadingNode({ maxLevel: 3 }),
@@ -42,8 +31,21 @@ export default {
 					// 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>
 

examples/Components/Routes/HidingMenuBar/index.vue

@@ -1,9 +1,8 @@
 <template>
-	<div>
+	<div class="editor">
-		<editor class="editor" :extensions="extensions">
+		<menu-bar :editor="editor">
-
+			<template slot-scope="{ nodes, marks, focused }">
-			<div class="menubar is-hidden" :class="{ 'is-focused': focused }" slot="menubar" slot-scope="{ nodes, marks, focused }">
+				<div class="menubar is-hidden" :class="{ 'is-focused': focused }">
-				<div v-if="nodes && marks">
 
 					<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">
+		<editor-content class="editor__content" :editor="editor" />
-				<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>
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent, MenuBar } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -118,16 +133,20 @@ import {
 	CodeMark,
 	ItalicMark,
 	LinkMark,
+	StrikeMark,
+	UnderlineMark,
 	HistoryExtension,
 } from 'tiptap-extensions'
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		MenuBar,
 		Icon,
 	},
 	data() {
 		return {
+			editor: new Editor({
 				extensions: [
 					new BlockquoteNode(),
 					new BulletListNode(),
@@ -142,9 +161,23 @@ export default {
 					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>

examples/Components/Routes/MenuBubble/index.vue

@@ -94,5 +94,8 @@ export default {
 			}),
 		}
 	},
+	beforeDestroy() {
+		this.editor.destroy()
+	},
 }
 </script>

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,
 			}))
 		}
 	},

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,
 			}))
 		}
 	},