fix code blocks

This commit is contained in:
Hans Pagel 2020-09-10 15:03:48 +02:00
parent cd116b7d1a
commit e99ecb9595
4 changed files with 22 additions and 5 deletions

View File

@ -19,8 +19,8 @@
<button @click="editor.focus().code()" :class="{ 'is-active': editor.isActive('code') }">
code
</button>
<button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('code_block') }">
code_block
<button @click="editor.focus().codeBlock()" :class="{ 'is-active': editor.isActive('codeBlock') }">
code block
</button>
<button @click="editor.focus().heading({ level: 1 })" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }">
h1

View File

@ -1,5 +1,3 @@
# Basic
TODO: CodeBlock throws an exception.
<demo name="Examples/Basic" />

View File

@ -99,4 +99,17 @@ blockquote {
p {
margin: 0.5rem 0;
}
pre {
background: rgba($colorBlack, 0.9);
color: rgba($colorWhite, 0.9);
padding: 1rem;
margin: 0.5rem 0;
border-radius: 0.25rem;
code {
color: inherit;
background: none;
}
}
}

View File

@ -1,7 +1,7 @@
import { Node } from '@tiptap/core'
export default new Node()
.name('code_block')
.name('codeBlock')
.schema(() => ({
content: 'text*',
marks: '',
@ -14,4 +14,10 @@ export default new Node()
],
toDOM: () => ['pre', ['code', 0]],
}))
.commands(({ editor, name }) => ({
[name]: next => attrs => {
editor.toggleNode(name, 'paragraph', attrs)
next()
},
}))
.create()