add link button

This commit is contained in:
Philipp Kühn 2020-09-25 14:17:53 +02:00
parent 03c65c43f7
commit 49eff17fb6
4 changed files with 22 additions and 4 deletions

View File

@ -35,6 +35,7 @@ module.exports = {
'airbnb-base',
],
rules: {
'no-alert': 'off',
semi: ['error', 'never'],
'import/extensions': 'off',
'import/no-extraneous-dependencies': 'off',

View File

@ -1,5 +1,8 @@
<template>
<div v-if="editor">
<button @click="addLink">
link
</button>
<editor-content :editor="editor" />
</div>
</template>
@ -39,6 +42,14 @@ export default {
})
},
methods: {
addLink() {
const url = window.prompt('Link:')
this.editor.link(url)
},
},
beforeDestroy() {
this.editor.destroy()
},

View File

@ -7,7 +7,7 @@ type RemoveMarkCommand = (typeOrName: string | MarkType) => Command
declare module '../Editor' {
interface Commands {
toggleMark: RemoveMarkCommand,
removeMark: RemoveMarkCommand,
}
}

View File

@ -8,7 +8,7 @@ export interface LinkOptions {
target: string,
}
export type LinkCommand = () => Command
export type LinkCommand = (url?: string) => Command
declare module '@tiptap/core/src/Editor' {
interface Commands {
@ -50,8 +50,14 @@ export default new Mark<LinkOptions>()
}, 0],
}))
.commands(({ name }) => ({
link: () => ({ commands }) => {
return commands.toggleMark(name)
link: url => ({ commands }) => {
if (!url) {
return commands.removeMark(name)
}
return commands.updateMark(name, {
href: url,
})
},
}))
.pasteRules(({ type }) => [