fix image example

examples/Components/Routes/Images/index.vue

@@ -1,37 +1,23 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
-
-			<div class="menubar" slot="menubar" slot-scope="{ nodes }">
-				<div v-if="nodes">
-
+	<div class="editor">
+		<menu-bar class="menubar" :editor="editor">
+			<template slot-scope="{ nodes }">
 				<button
 					class="menubar__button"
 					@click="showImagePrompt(nodes.image.command)"
 				>
 					<icon name="image" />
 				</button>
+			</template>
+		</menu-bar>
 		
-				</div>
-			</div>
-
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Images
-				</h2>
-				<p>
-					This is basic example of implementing images. Try to drop new images here. Reordering also works.
-				</p>
-				<img src="https://ljdchost.com/8I2DeFn.gif" />
-			</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 {
 	HardBreakNode,
 	HeadingNode,
@@ -44,10 +30,12 @@ import {
 export default {
 	components: {
 		Icon,
-		Editor,
+		EditorContent,
+		MenuBar,
 	},
 	data() {
 		return {
+			editor: new Editor({
 				extensions: [
 					new HardBreakNode(),
 					new HeadingNode({ maxLevel: 3 }),
@@ -56,6 +44,16 @@ export default {
 					new CodeMark(),
 					new ItalicMark(),
 				],
+				content: `
+					<h2>
+						Images
+					</h2>
+					<p>
+						This is basic example of implementing images. Try to drop new images here. Reordering also works.
+					</p>
+					<img src="https://ljdchost.com/8I2DeFn.gif" />
+				`,
+			}),
 		}
 	},
 	methods: {