rename some commands
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||
link
|
||||
</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
|
||||
</button>
|
||||
<editor-content :editor="editor" />
|
||||
@@ -52,10 +52,10 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
addLink() {
|
||||
setLink() {
|
||||
const url = window.prompt('URL')
|
||||
|
||||
this.editor.chain().focus().addLink({ href: url }).run()
|
||||
this.editor.chain().focus().setLink({ href: url }).run()
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
<template>
|
||||
<div v-if="editor">
|
||||
<button @click="addLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||
<button @click="setLink" :class="{ 'is-active': editor.isActive('link') }">
|
||||
link
|
||||
</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
|
||||
</button>
|
||||
<editor-content :editor="editor" />
|
||||
@@ -49,10 +49,10 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
addLink() {
|
||||
setLink() {
|
||||
const url = window.prompt('URL')
|
||||
|
||||
this.editor.chain().focus().addLink({ href: url }).run()
|
||||
this.editor.chain().focus().setLink({ href: url }).run()
|
||||
},
|
||||
},
|
||||
|
||||
|
||||
@@ -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. Let’s say you want to make text bold when a user clicks on a button. That’s how that would look like:
|
||||
|
||||
```js
|
||||
editor.commands.addBold()
|
||||
editor.commands.setBold()
|
||||
```
|
||||
|
||||
While that’s perfectly fine and does make the selected bold, you’d likely want to change multiple commands in one run. Let’s have a look at how that works.
|
||||
|
||||
@@ -46,9 +46,9 @@ const Bold = Mark.create({
|
||||
addCommands() {
|
||||
return {
|
||||
/**
|
||||
* Add a bold mark
|
||||
* Set a bold mark
|
||||
*/
|
||||
addBold: (): Command => ({ commands }) => {
|
||||
setBold: (): Command => ({ commands }) => {
|
||||
return commands.addMark('bold')
|
||||
},
|
||||
/**
|
||||
@@ -58,9 +58,9 @@ const Bold = Mark.create({
|
||||
return commands.toggleMark('bold')
|
||||
},
|
||||
/**
|
||||
* Remove a bold mark
|
||||
* Unset a bold mark
|
||||
*/
|
||||
removeBold: (): Command => ({ commands }) => {
|
||||
unsetBold: (): Command => ({ commands }) => {
|
||||
return commands.removeMark('bold')
|
||||
},
|
||||
}
|
||||
|
||||
@@ -36,9 +36,9 @@ const Code = Mark.create({
|
||||
addCommands() {
|
||||
return {
|
||||
/**
|
||||
* Add a code mark
|
||||
* Set a code mark
|
||||
*/
|
||||
addCode: (): Command => ({ commands }) => {
|
||||
setCode: (): Command => ({ commands }) => {
|
||||
return commands.addMark('code')
|
||||
},
|
||||
/**
|
||||
@@ -48,9 +48,9 @@ const Code = Mark.create({
|
||||
return commands.toggleMark('code')
|
||||
},
|
||||
/**
|
||||
* Remove a code mark
|
||||
* Unset a code mark
|
||||
*/
|
||||
removeCode: (): Command => ({ commands }) => {
|
||||
unsetCode: (): Command => ({ commands }) => {
|
||||
return commands.addMark('code')
|
||||
},
|
||||
}
|
||||
|
||||
@@ -59,9 +59,9 @@ const Highlight = Mark.create({
|
||||
addCommands() {
|
||||
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)
|
||||
},
|
||||
/**
|
||||
@@ -71,9 +71,9 @@ const Highlight = Mark.create({
|
||||
return commands.toggleMark('highlight', attributes)
|
||||
},
|
||||
/**
|
||||
* Remove a highlight mark
|
||||
* Unset a highlight mark
|
||||
*/
|
||||
removeHighlight: (): Command => ({ commands }) => {
|
||||
unsetHighlight: (): Command => ({ commands }) => {
|
||||
return commands.removeMark('highlight')
|
||||
},
|
||||
}
|
||||
|
||||
@@ -45,9 +45,9 @@ const Italic = Mark.create({
|
||||
addCommands() {
|
||||
return {
|
||||
/**
|
||||
* Add an italic mark
|
||||
* Set an italic mark
|
||||
*/
|
||||
addItalic: (): Command => ({ commands }) => {
|
||||
setItalic: (): Command => ({ commands }) => {
|
||||
return commands.addMark('italic')
|
||||
},
|
||||
/**
|
||||
@@ -57,9 +57,9 @@ const Italic = Mark.create({
|
||||
return commands.toggleMark('italic')
|
||||
},
|
||||
/**
|
||||
* Remove an italic mark
|
||||
* Unset an italic mark
|
||||
*/
|
||||
removeItalic: (): Command => ({ commands }) => {
|
||||
unsetItalic: (): Command => ({ commands }) => {
|
||||
return commands.addMark('italic')
|
||||
},
|
||||
}
|
||||
|
||||
@@ -47,9 +47,9 @@ const Link = Mark.create({
|
||||
addCommands() {
|
||||
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)
|
||||
},
|
||||
/**
|
||||
@@ -59,9 +59,9 @@ const Link = Mark.create({
|
||||
return commands.toggleMark('link', attributes)
|
||||
},
|
||||
/**
|
||||
* Remove a link mark
|
||||
* Unset a link mark
|
||||
*/
|
||||
removeLink: (): Command => ({ commands }) => {
|
||||
unsetLink: (): Command => ({ commands }) => {
|
||||
return commands.removeMark('link')
|
||||
},
|
||||
}
|
||||
|
||||
@@ -45,9 +45,9 @@ const Strike = Mark.create({
|
||||
addCommands() {
|
||||
return {
|
||||
/**
|
||||
* Add a strike mark
|
||||
* Set a strike mark
|
||||
*/
|
||||
addStrike: (): Command => ({ commands }) => {
|
||||
setStrike: (): Command => ({ commands }) => {
|
||||
return commands.addMark('strike')
|
||||
},
|
||||
/**
|
||||
@@ -57,9 +57,9 @@ const Strike = Mark.create({
|
||||
return commands.toggleMark('strike')
|
||||
},
|
||||
/**
|
||||
* Remove a strike mark
|
||||
* Unset a strike mark
|
||||
*/
|
||||
removeStrike: (): Command => ({ commands }) => {
|
||||
unsetStrike: (): Command => ({ commands }) => {
|
||||
return commands.addMark('strike')
|
||||
},
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@ const Underline = Mark.create({
|
||||
/**
|
||||
* Set an underline mark
|
||||
*/
|
||||
addUnderline: (): Command => ({ commands }) => {
|
||||
setUnderline: (): Command => ({ commands }) => {
|
||||
return commands.addMark('underline')
|
||||
},
|
||||
/**
|
||||
@@ -45,7 +45,7 @@ const Underline = Mark.create({
|
||||
/**
|
||||
* Unset an underline mark
|
||||
*/
|
||||
removeUnderline: (): Command => ({ commands }) => {
|
||||
unsetUnderline: (): Command => ({ commands }) => {
|
||||
return commands.addMark('underline')
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user