From 804b44b146b1ed42887c0f1900d4845d80d5add0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 23 Oct 2018 23:21:45 +0200
Subject: [PATCH] fix links example

---
 examples/Components/Routes/Links/index.vue | 103 +++++++++++----------
 1 file changed, 53 insertions(+), 50 deletions(-)

diff --git a/examples/Components/Routes/Links/index.vue b/examples/Components/Routes/Links/index.vue
index 54f174e0..510500f8 100644
--- a/examples/Components/Routes/Links/index.vue
+++ b/examples/Components/Routes/Links/index.vue
@@ -1,44 +1,36 @@
 <template>
-	<div>
-		<editor class="editor" :extensions="extensions">
-			<div class="menububble" slot="menububble" slot-scope="{ marks, focus }">
-				<template v-if="marks">
+	<div class="editor">
+		<menu-bubble class="menububble" :editor="editor">
+			<template slot-scope="{ nodes, marks }">
 
-					<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link, focus)">
-						<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
-						<button class="menububble__button" @click="setLinkUrl(null, marks.link, focus)" type="button">
-							<icon name="remove" />
-						</button>
-					</form>
-
-					<template v-else>
-						<button
-							class="menububble__button"
-							@click="showLinkMenu(marks.link)"
-							:class="{ 'is-active': marks.link.active() }"
-						>
-							<span>Add Link</span>
-							<icon name="link" />
-						</button>
-					</template>
+				<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link)">
+					<input class="menububble__input" type="text" v-model="linkUrl" placeholder="https://" ref="linkInput" @keydown.esc="hideLinkMenu"/>
+					<button class="menububble__button" @click="setLinkUrl(null, marks.link)" type="button">
+						<icon name="remove" />
+					</button>
+				</form>
 
+				<template v-else>
+					<button
+						class="menububble__button"
+						@click="showLinkMenu(marks.link)"
+						:class="{ 'is-active': marks.link.active() }"
+					>
+						<span>Add Link</span>
+						<icon name="link" />
+					</button>
 				</template>
-			</div>
-			<div class="editor__content" slot="content" slot-scope="props">
-				<h2>
-					Links
-				</h2>
-				<p>
-					Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute.
-				</p>
-			</div>
-		</editor>
+
+			</template>
+		</menu-bubble>
+
+		<editor-content class="editor__content" :editor="editor" />
 	</div>
 </template>
 
 <script>
 import Icon from 'Components/Icon'
-import { Editor } from 'tiptap'
+import { Editor, EditorContent, MenuBubble } from 'tiptap'
 import {
 	BlockquoteNode,
 	BulletListNode,
@@ -58,27 +50,38 @@ import {
 
 export default {
 	components: {
-		Editor,
+		EditorContent,
+		MenuBubble,
 		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 HistoryExtension(),
+				],
+				content: `
+					<h2>
+						Links
+					</h2>
+					<p>
+						Try to add some links to the <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute.
+					</p>
+				`,
+			}),
 			linkUrl: null,
 			linkMenuIsActive: false,
 		}
@@ -98,7 +101,7 @@ export default {
 		setLinkUrl(url, type, focus) {
 			type.command({ href: url })
 			this.hideLinkMenu()
-			focus()
+			this.editor.focus()
 		},
 	},
 }