From e608808c2721b9cdcbf2deb683155517da8a638e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Mon, 29 Oct 2018 23:58:07 +0100
Subject: [PATCH] fix link example

---
 examples/Components/Routes/Links/index.vue     | 18 +++++++++---------
 packages/tiptap/src/Components/FloatingMenu.js |  1 +
 packages/tiptap/src/Components/MenuBar.js      |  1 +
 packages/tiptap/src/Components/MenuBubble.js   |  1 +
 packages/tiptap/src/utils/Editor.js            | 11 +++++++++++
 5 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/examples/Components/Routes/Links/index.vue b/examples/Components/Routes/Links/index.vue
index 3498dce06..ca6c43f68 100644
--- a/examples/Components/Routes/Links/index.vue
+++ b/examples/Components/Routes/Links/index.vue
@@ -1,11 +1,11 @@
 <template>
 	<div class="editor">
 		<menu-bubble class="menububble" :editor="editor">
-			<template slot-scope="{ nodes, marks }">
+			<template slot-scope="{ commands, isActive, markAttrs }">
 
-				<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(linkUrl, marks.link)">
+				<form class="menububble__form" v-if="linkMenuIsActive" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
 					<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">
+					<button class="menububble__button" @click="setLinkUrl(commands.link, null)" type="button">
 						<icon name="remove" />
 					</button>
 				</form>
@@ -13,8 +13,8 @@
 				<template v-else>
 					<button
 						class="menububble__button"
-						@click="showLinkMenu(marks.link)"
-						:class="{ 'is-active': marks.link.active() }"
+						@click="showLinkMenu(markAttrs('link'))"
+						:class="{ 'is-active': isActive('link') }"
 					>
 						<span>Add Link</span>
 						<icon name="link" />
@@ -87,8 +87,8 @@ export default {
 		}
 	},
 	methods: {
-		showLinkMenu(type) {
-			this.linkUrl = type.attrs.href
+		showLinkMenu(attrs) {
+			this.linkUrl = attrs.href
 			this.linkMenuIsActive = true
 			this.$nextTick(() => {
 				this.$refs.linkInput.focus()
@@ -98,8 +98,8 @@ export default {
 			this.linkUrl = null
 			this.linkMenuIsActive = false
 		},
-		setLinkUrl(url, type, focus) {
-			type.command({ href: url })
+		setLinkUrl(command, url) {
+			command({ href: url })
 			this.hideLinkMenu()
 			this.editor.focus()
 		},
diff --git a/packages/tiptap/src/Components/FloatingMenu.js b/packages/tiptap/src/Components/FloatingMenu.js
index 811a0b30d..21f58f3d6 100644
--- a/packages/tiptap/src/Components/FloatingMenu.js
+++ b/packages/tiptap/src/Components/FloatingMenu.js
@@ -26,6 +26,7 @@ export default {
 				focus: this.editor.focus,
 				commands: this.editor.commands,
 				isActive: this.editor.isActive.bind(this.editor),
+				markAttrs: this.editor.markAttrs.bind(this.editor),
 			}))
 		}
 	},
diff --git a/packages/tiptap/src/Components/MenuBar.js b/packages/tiptap/src/Components/MenuBar.js
index a5c1ca632..87d74fb29 100644
--- a/packages/tiptap/src/Components/MenuBar.js
+++ b/packages/tiptap/src/Components/MenuBar.js
@@ -12,6 +12,7 @@ export default {
 				focus: this.editor.focus,
 				commands: this.editor.commands,
 				isActive: this.editor.isActive.bind(this.editor),
+				markAttrs: this.editor.markAttrs.bind(this.editor),
 			}))
 		}
 	},
diff --git a/packages/tiptap/src/Components/MenuBubble.js b/packages/tiptap/src/Components/MenuBubble.js
index 743900405..3c698de0b 100644
--- a/packages/tiptap/src/Components/MenuBubble.js
+++ b/packages/tiptap/src/Components/MenuBubble.js
@@ -26,6 +26,7 @@ export default {
 				focus: this.editor.focus,
 				commands: this.editor.commands,
 				isActive: this.editor.isActive.bind(this.editor),
+				markAttrs: this.editor.markAttrs.bind(this.editor),
 			}))
 		}
 	},
diff --git a/packages/tiptap/src/utils/Editor.js b/packages/tiptap/src/utils/Editor.js
index bfb3272f1..bb7d71fd3 100644
--- a/packages/tiptap/src/utils/Editor.js
+++ b/packages/tiptap/src/utils/Editor.js
@@ -239,6 +239,13 @@ export default class Editor {
 				[name]: (attrs = {}) => markIsActive(this.state, mark, attrs),
 			}), {})
 
+		this.activeMarkAttrs = Object
+			.entries(this.schema.marks)
+			.reduce((marks, [name, mark]) => ({
+				...marks,
+				[name]: getMarkAttrs(this.state, mark),
+			}), {})
+
 		this.activeNodes = Object
 			.entries(this.schema.nodes)
 			.reduce((nodes, [name, node]) => ({
@@ -268,6 +275,10 @@ export default class Editor {
 		}
 	}
 
+	markAttrs(type = null) {
+		return this.activeMarkAttrs[type]
+	}
+
 	isActive(type = null, attrs = {}) {
 		const types = {
 			...this.activeMarks,