fix code blocks

docs/src/demos/Examples/Basic/index.vue

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

docs/src/docPages/examples/basic.md

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

docs/src/layouts/App/base.scss

@@ -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;
+    }
+  }
 }

packages/extension-codeblock/index.ts

@@ -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()