add link commands

This commit is contained in:
Philipp Kühn
2020-11-18 11:10:06 +01:00
parent 9d99e9c9d0
commit 56c8bb1bd0
3 changed files with 19 additions and 11 deletions

View File

@@ -3,7 +3,7 @@
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }"> <button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
link link
</button> </button>
<button @click="editor.chain().focus().removeMark('link').run()" v-if="editor.isActive('link')"> <button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')">
remove remove
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -55,7 +55,7 @@ export default {
addLink() { addLink() {
const url = window.prompt('URL') const url = window.prompt('URL')
this.editor.chain().focus().link({ href: url }).run() this.editor.chain().focus().addLink({ href: url }).run()
}, },
}, },

View File

@@ -3,7 +3,7 @@
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }"> <button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
link link
</button> </button>
<button @click="editor.chain().focus().removeMark('link').run()" v-if="editor.isActive('link')"> <button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')">
remove remove
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -52,7 +52,7 @@ export default {
addLink() { addLink() {
const url = window.prompt('URL') const url = window.prompt('URL')
this.editor.chain().focus().link({ href: url }).run() this.editor.chain().focus().addLink({ href: url }).run()
}, },
}, },

View File

@@ -47,14 +47,22 @@ const Link = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Toggle or update a link mark * Add a link mark
*/ */
link: (options: { href?: string, target?: string } = {}): Command => ({ commands }) => { addLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => {
if (!options.href) { return commands.addMark('link', attributes)
},
/**
* Toggle a link mark
*/
toggleLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => {
return commands.toggleMark('link', attributes)
},
/**
* Remove a link mark
*/
removeLink: (): Command => ({ commands }) => {
return commands.removeMark('link') return commands.removeMark('link')
}
return commands.addMark('link', options)
}, },
} }
}, },