add highlight commands

This commit is contained in:
Philipp Kühn
2020-11-17 21:59:04 +01:00
parent f9025775ca
commit 34a25c7ea0
6 changed files with 22 additions and 10 deletions

View File

@@ -1,7 +1,7 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button <button
@click="editor.chain().focus().highlight().run()" @click="editor.chain().focus().toggleHighlight().run()"
:class="{ 'is-active': editor.isActive('highlight') }" :class="{ 'is-active': editor.isActive('highlight') }"
> >
highlight (any) highlight (any)

View File

@@ -48,7 +48,7 @@ const Code = Mark.create({
return commands.toggleMark('code') return commands.toggleMark('code')
}, },
/** /**
* Set a code mark * Unset a code mark
*/ */
unsetCode: (): Command => ({ commands }) => { unsetCode: (): Command => ({ commands }) => {
return commands.addMark('code') return commands.addMark('code')

View File

@@ -58,18 +58,30 @@ const Highlight = Mark.create({
addCommands() { addCommands() {
return { return {
/**
* Set a highlight mark
*/
setHighlight: (attributes?: { color: string }): Command => ({ commands }) => {
return commands.addMark('highlight', attributes)
},
/** /**
* Toggle a highlight mark * Toggle a highlight mark
*/ */
highlight: (attributes?: { color: string }): Command => ({ commands }) => { toggleHighlight: (attributes?: { color: string }): Command => ({ commands }) => {
return commands.toggleMark('highlight', attributes) return commands.toggleMark('highlight', attributes)
}, },
/**
* Set a highlight mark
*/
unsetHighlight: (): Command => ({ commands }) => {
return commands.removeMark('highlight')
},
} }
}, },
addKeyboardShortcuts() { addKeyboardShortcuts() {
return { return {
'Mod-e': () => this.editor.commands.highlight(), 'Mod-e': () => this.editor.commands.toggleHighlight(),
} }
}, },

View File

@@ -45,7 +45,7 @@ const Italic = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Set a italic mark * Set an italic mark
*/ */
setItalic: (): Command => ({ commands }) => { setItalic: (): Command => ({ commands }) => {
return commands.addMark('italic') return commands.addMark('italic')
@@ -57,7 +57,7 @@ const Italic = Mark.create({
return commands.toggleMark('italic') return commands.toggleMark('italic')
}, },
/** /**
* Set a italic mark * Unset an italic mark
*/ */
unsetItalic: (): Command => ({ commands }) => { unsetItalic: (): Command => ({ commands }) => {
return commands.addMark('italic') return commands.addMark('italic')

View File

@@ -57,7 +57,7 @@ const Strike = Mark.create({
return commands.toggleMark('strike') return commands.toggleMark('strike')
}, },
/** /**
* Set a strike mark * Unset a strike mark
*/ */
unsetStrike: (): Command => ({ commands }) => { unsetStrike: (): Command => ({ commands }) => {
return commands.addMark('strike') return commands.addMark('strike')

View File

@@ -31,19 +31,19 @@ const Underline = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Set a underline mark * Set an underline mark
*/ */
setUnderline: (): Command => ({ commands }) => { setUnderline: (): Command => ({ commands }) => {
return commands.addMark('underline') return commands.addMark('underline')
}, },
/** /**
* Toggle a underline mark * Toggle an underline mark
*/ */
toggleUnderline: (): Command => ({ commands }) => { toggleUnderline: (): Command => ({ commands }) => {
return commands.toggleMark('underline') return commands.toggleMark('underline')
}, },
/** /**
* Set a underline mark * Unset an underline mark
*/ */
unsetUnderline: (): Command => ({ commands }) => { unsetUnderline: (): Command => ({ commands }) => {
return commands.addMark('underline') return commands.addMark('underline')