docs: improve the link mark example, fix #1277

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()

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/)