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', 'airbnb-base',
], ],
rules: { rules: {
'no-alert': 'off',
semi: ['error', 'never'], semi: ['error', 'never'],
'import/extensions': 'off', 'import/extensions': 'off',
'import/no-extraneous-dependencies': 'off', 'import/no-extraneous-dependencies': 'off',

View File

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

View File

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

View File

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