add codeblock commands

This commit is contained in:
Philipp Kühn 2020-11-18 12:00:26 +01:00
parent a148d9cd17
commit 116b189a93
5 changed files with 13 additions and 7 deletions

View File

@ -46,7 +46,7 @@
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">

View File

@ -46,7 +46,7 @@
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">

View File

@ -46,7 +46,7 @@
<button @click="editor.chain().focus().toggleOrderedList().run()" :class="{ 'is-active': editor.isActive('orderedList') }">
ordered list
</button>
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.chain().focus().toggleBlockquote().run()" :class="{ 'is-active': editor.isActive('blockquote') }">

View File

@ -1,6 +1,6 @@
<template>
<div v-if="editor">
<button @click="editor.chain().focus().codeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
<button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>

View File

@ -74,18 +74,24 @@ const CodeBlock = Node.create({
addCommands() {
return {
/**
* Set a code block
*/
setCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
return commands.setBlockType('codeBlock', attributes)
},
/**
* Toggle a code block
*/
codeBlock: (attrs?: CodeBlockOptions): Command => ({ commands }) => {
return commands.toggleBlockType('codeBlock', 'paragraph', attrs)
toggleCodeBlock: (attributes?: { language: string }): Command => ({ commands }) => {
return commands.toggleBlockType('codeBlock', 'paragraph', attributes)
},
}
},
addKeyboardShortcuts() {
return {
'Mod-Shift-c': () => this.editor.commands.codeBlock(),
'Mod-Shift-c': () => this.editor.commands.toggleCodeBlock(),
}
},