rename some commands

This commit is contained in:
Philipp Kühn
2020-11-18 16:59:58 +01:00
parent 91297d29fb
commit 1b45acd5d5
10 changed files with 35 additions and 35 deletions

View File

@@ -1,9 +1,9 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }"> <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
link link
</button> </button>
<button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')"> <button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
remove remove
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -52,10 +52,10 @@ export default {
}, },
methods: { methods: {
addLink() { setLink() {
const url = window.prompt('URL') const url = window.prompt('URL')
this.editor.chain().focus().addLink({ href: url }).run() this.editor.chain().focus().setLink({ href: url }).run()
}, },
}, },

View File

@@ -1,9 +1,9 @@
<template> <template>
<div v-if="editor"> <div v-if="editor">
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }"> <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
link link
</button> </button>
<button @click="editor.chain().focus().removeLink().run()" v-if="editor.isActive('link')"> <button @click="editor.chain().focus().unsetLink().run()" v-if="editor.isActive('link')">
remove remove
</button> </button>
<editor-content :editor="editor" /> <editor-content :editor="editor" />
@@ -49,10 +49,10 @@ export default {
}, },
methods: { methods: {
addLink() { setLink() {
const url = window.prompt('URL') const url = window.prompt('URL')
this.editor.chain().focus().addLink({ href: url }).run() this.editor.chain().focus().setLink({ href: url }).run()
}, },
}, },

View File

@@ -9,7 +9,7 @@ The editor provides a ton of commands to programmtically add or change content o
All available commands are accessible through an editor instance. Lets say you want to make text bold when a user clicks on a button. Thats how that would look like: All available commands are accessible through an editor instance. Lets say you want to make text bold when a user clicks on a button. Thats how that would look like:
```js ```js
editor.commands.addBold() editor.commands.setBold()
``` ```
While thats perfectly fine and does make the selected bold, youd likely want to change multiple commands in one run. Lets have a look at how that works. While thats perfectly fine and does make the selected bold, youd likely want to change multiple commands in one run. Lets have a look at how that works.

View File

@@ -46,9 +46,9 @@ const Bold = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Add a bold mark * Set a bold mark
*/ */
addBold: (): Command => ({ commands }) => { setBold: (): Command => ({ commands }) => {
return commands.addMark('bold') return commands.addMark('bold')
}, },
/** /**
@@ -58,9 +58,9 @@ const Bold = Mark.create({
return commands.toggleMark('bold') return commands.toggleMark('bold')
}, },
/** /**
* Remove a bold mark * Unset a bold mark
*/ */
removeBold: (): Command => ({ commands }) => { unsetBold: (): Command => ({ commands }) => {
return commands.removeMark('bold') return commands.removeMark('bold')
}, },
} }

View File

@@ -36,9 +36,9 @@ const Code = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Add a code mark * Set a code mark
*/ */
addCode: (): Command => ({ commands }) => { setCode: (): Command => ({ commands }) => {
return commands.addMark('code') return commands.addMark('code')
}, },
/** /**
@@ -48,9 +48,9 @@ const Code = Mark.create({
return commands.toggleMark('code') return commands.toggleMark('code')
}, },
/** /**
* Remove a code mark * Unset a code mark
*/ */
removeCode: (): Command => ({ commands }) => { unsetCode: (): Command => ({ commands }) => {
return commands.addMark('code') return commands.addMark('code')
}, },
} }

View File

@@ -59,9 +59,9 @@ const Highlight = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Add a highlight mark * Set a highlight mark
*/ */
addHighlight: (attributes?: { color: string }): Command => ({ commands }) => { setHighlight: (attributes?: { color: string }): Command => ({ commands }) => {
return commands.addMark('highlight', attributes) return commands.addMark('highlight', attributes)
}, },
/** /**
@@ -71,9 +71,9 @@ const Highlight = Mark.create({
return commands.toggleMark('highlight', attributes) return commands.toggleMark('highlight', attributes)
}, },
/** /**
* Remove a highlight mark * Unset a highlight mark
*/ */
removeHighlight: (): Command => ({ commands }) => { unsetHighlight: (): Command => ({ commands }) => {
return commands.removeMark('highlight') return commands.removeMark('highlight')
}, },
} }

View File

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

View File

@@ -47,9 +47,9 @@ const Link = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Add a link mark * Set a link mark
*/ */
addLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => { setLink: (attributes: { href?: string, target?: string } = {}): Command => ({ commands }) => {
return commands.addMark('link', attributes) return commands.addMark('link', attributes)
}, },
/** /**
@@ -59,9 +59,9 @@ const Link = Mark.create({
return commands.toggleMark('link', attributes) return commands.toggleMark('link', attributes)
}, },
/** /**
* Remove a link mark * Unset a link mark
*/ */
removeLink: (): Command => ({ commands }) => { unsetLink: (): Command => ({ commands }) => {
return commands.removeMark('link') return commands.removeMark('link')
}, },
} }

View File

@@ -45,9 +45,9 @@ const Strike = Mark.create({
addCommands() { addCommands() {
return { return {
/** /**
* Add a strike mark * Set a strike mark
*/ */
addStrike: (): Command => ({ commands }) => { setStrike: (): Command => ({ commands }) => {
return commands.addMark('strike') return commands.addMark('strike')
}, },
/** /**
@@ -57,9 +57,9 @@ const Strike = Mark.create({
return commands.toggleMark('strike') return commands.toggleMark('strike')
}, },
/** /**
* Remove a strike mark * Unset a strike mark
*/ */
removeStrike: (): Command => ({ commands }) => { unsetStrike: (): Command => ({ commands }) => {
return commands.addMark('strike') return commands.addMark('strike')
}, },
} }

View File

@@ -33,7 +33,7 @@ const Underline = Mark.create({
/** /**
* Set an underline mark * Set an underline mark
*/ */
addUnderline: (): Command => ({ commands }) => { setUnderline: (): Command => ({ commands }) => {
return commands.addMark('underline') return commands.addMark('underline')
}, },
/** /**
@@ -45,7 +45,7 @@ const Underline = Mark.create({
/** /**
* Unset an underline mark * Unset an underline mark
*/ */
removeUnderline: (): Command => ({ commands }) => { unsetUnderline: (): Command => ({ commands }) => {
return commands.addMark('underline') return commands.addMark('underline')
}, },
} }