update the code block page, add tests

docs/src/demos/Extensions/CodeBlock/index.spec.js

@@ -1,5 +1,48 @@
 context('/api/extensions/code-block', () => {
   beforeEach(() => {
     cy.visit('/api/extensions/code-block')
+
+    cy.get('.ProseMirror').window().then(window => {
+      const { editor } = window
+      editor.setContent('<p>Example Text</p>')
+      editor.focus().selectAll()
+    })
+  })
+
+  describe('code-block', () => {
+    it('the button should make the selected line a code block', () => {
+      cy.get('.demo__preview button:first').click({ force: true })
+      cy.get('.ProseMirror').contains('pre', 'Example Text')
+    })
+
+    it('the button should toggle the code block', () => {
+      cy.get('.demo__preview button:first').click({ force: true })
+      cy.get('.ProseMirror').contains('pre', 'Example Text')
+      cy.get('.demo__preview button:first').click({ force: true })
+      cy.get('.ProseMirror pre').should('not.exist')
+    })
+
+    it('the keyboard shortcut should make the selected line a code block', () => {
+      cy.get('.ProseMirror').type('{control}{shift}\\', {force: true})
+      cy.get('.ProseMirror').contains('pre', 'Example Text')
+    })
+
+    it('the keyboard shortcut should toggle the code block', () => {
+      cy.get('.ProseMirror').type('{control}{shift}\\', {force: true})
+      cy.get('.ProseMirror').contains('pre', 'Example Text')
+      cy.get('.ProseMirror').type('{control}{shift}\\', {force: true})
+      cy.get('.ProseMirror pre').should('not.exist')
+    })
+
+    it('should make a code block from markdown shortcuts', () => {
+      cy.get('.ProseMirror').window().then(window => {
+        const { editor } = window
+        editor.clearContent()
+
+        cy.get('.ProseMirror')
+          .type('``` {enter}Code', {force: true})
+          .contains('pre', 'Code')
+      })
+    })
   })
 })

docs/src/demos/Extensions/CodeBlock/index.vue

@@ -36,8 +36,19 @@ export default {
         CodeBlock(),
       ],
       content: `
-        <p>This is a code block:</p>
-        <pre><code>const foo = 'bar'</code></pre>
+        <p>That’s a boring paragraph followed by a fenced code block:</p>
+        <pre><code>for (var i=1; i <= 20; i++)
+{
+  if (i % 15 == 0)
+    console.log("FizzBuzz");
+  else if (i % 3 == 0)
+    console.log("Fizz");
+  else if (i % 5 == 0)
+    console.log("Buzz");
+  else
+    console.log(i);
+}</code></pre>
+        <p>Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
       `,
     })
 

docs/src/docPages/api/extensions/code-block.md

@@ -1,5 +1,11 @@
 # CodeBlock
-Enables you to use the `<pre>` HTML tag in the editor.
+With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `<pre>` and `<code>` HTML tags.
+
+Type three backticks and a space (`\`` ) and a code block is instantly added for you.
+
+::: warning Restrictions
+The CodeBlock extension doesn’t come with styling and has no syntax highlighting built-in. It’s on our roadmap though.
+:::
 
 ## Options
 | Option | Type   | Default | Description                                  |

docs/src/links.yaml

@@ -124,7 +124,6 @@
           link: /api/extensions/code
         - title: CodeBlock
           link: /api/extensions/code-block
-          draft: true
         # - title: CodeBlockHighlight
         #   link: /api/extensions/code-block-highlight
         #   draft: true