From b90166980366c20fe2ce935475a63350f9d01fa9 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 16 Sep 2021 20:34:21 +0200
Subject: [PATCH] docs: improve the link mark example, fix #1277

---
 demos/src/Marks/Link/Vue/index.vue  | 29 +++++++++++++++++++++++++----
 docs/src/docPages/api/marks/link.md |  7 +++++++
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/demos/src/Marks/Link/Vue/index.vue b/demos/src/Marks/Link/Vue/index.vue
index 7ba9b94b..e604e006 100644
--- a/demos/src/Marks/Link/Vue/index.vue
+++ b/demos/src/Marks/Link/Vue/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div v-if="editor">
     <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
-      link
+      setLink
     </button>
     <button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
-      remove
+      unsetLink
     </button>
     <editor-content :editor="editor" />
   </div>
@@ -36,7 +36,9 @@ export default {
         Paragraph,
         Text,
         Bold,
-        Link,
+        Link.configure({
+          openOnClick: false,
+        }),
       ],
       content: `
         <p>
@@ -51,8 +53,27 @@ export default {
 
   methods: {
     setLink() {
-      const url = window.prompt('URL')
+      const previousUrl = this.editor.getAttributes('link').href
+      const url = window.prompt('URL', previousUrl)
 
+      // cancelled
+      if (url === null) {
+        return
+      }
+
+      // empty
+      if (url === '') {
+        this.editor
+          .chain()
+          .focus()
+          .extendMarkRange('link')
+          .unsetLink()
+          .run()
+
+        return
+      }
+
+      // update link
       this.editor
         .chain()
         .focus()
diff --git a/docs/src/docPages/api/marks/link.md b/docs/src/docPages/api/marks/link.md
index bd3639f3..137c725c 100644
--- a/docs/src/docPages/api/marks/link.md
+++ b/docs/src/docPages/api/marks/link.md
@@ -36,6 +36,13 @@ yarn add @tiptap/extension-link
 This extension doesn’t bind a specific keyboard shortcut. You would probably open your custom UI on `Mod-k` though.
 :::
 
+## Get the current value
+Did you know that you can use [`getAttributes`](/api/editor#methods) to find out which attributes, for example which href, is currently set? Don’t confuse it with a [command](/api/commands) (which changes the state), it’s just a method. Here is how that could look like:
+
+```js
+this.editor.getAttributes('link').href
+```
+
 ## Source code
 [packages/extension-link/](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-link/)