From e51abf11fddda8f6ba88a23d19b63457e921e92f 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:46:45 +0200
Subject: [PATCH] fix image example

---
 examples/Components/Routes/Images/index.vue | 72 ++++++++++-----------
 1 file changed, 35 insertions(+), 37 deletions(-)

diff --git a/examples/Components/Routes/Images/index.vue b/examples/Components/Routes/Images/index.vue
index 648d735c..56300244 100644
--- a/examples/Components/Routes/Images/index.vue
+++ b/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">
-
-					<button
-						class="menubar__button"
-						@click="showImagePrompt(nodes.image.command)"
-					>
-						<icon name="image" />
-					</button>
-
-				</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>
+	<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>
+		
+		<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,18 +30,30 @@ import {
 export default {
 	components: {
 		Icon,
-		Editor,
+		EditorContent,
+		MenuBar,
 	},
 	data() {
 		return {
-			extensions: [
-				new HardBreakNode(),
-				new HeadingNode({ maxLevel: 3 }),
-				new ImageNode(),
-				new BoldMark(),
-				new CodeMark(),
-				new ItalicMark(),
-			],
+			editor: new Editor({
+				extensions: [
+					new HardBreakNode(),
+					new HeadingNode({ maxLevel: 3 }),
+					new ImageNode(),
+					new BoldMark(),
+					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: {