diff --git a/docs/src/demos/Extensions/CodeBlock/index.spec.js b/docs/src/demos/Extensions/CodeBlock/index.spec.js index 7e16e15f..c9cb0245 100644 --- a/docs/src/demos/Extensions/CodeBlock/index.spec.js +++ b/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('

Example Text

') + 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') + }) + }) }) }) \ No newline at end of file diff --git a/docs/src/demos/Extensions/CodeBlock/index.vue b/docs/src/demos/Extensions/CodeBlock/index.vue index e5277407..a3bf9687 100644 --- a/docs/src/demos/Extensions/CodeBlock/index.vue +++ b/docs/src/demos/Extensions/CodeBlock/index.vue @@ -36,8 +36,19 @@ export default { CodeBlock(), ], content: ` -

This is a code block:

-
const foo = 'bar'
+

That’s a boring paragraph followed by a fenced code block:

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

Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs. `, }) diff --git a/docs/src/docPages/api/extensions/code-block.md b/docs/src/docPages/api/extensions/code-block.md index 95224d7b..3edc00be 100644 --- a/docs/src/docPages/api/extensions/code-block.md +++ b/docs/src/docPages/api/extensions/code-block.md @@ -1,5 +1,11 @@ # CodeBlock -Enables you to use the `

` HTML tag in the editor.
+With the CodeBlock extension you can add fenced code blocks to your documents. It’ll wrap the code in `
` and `` 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                                  |
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 11bd2c6b..851ff501 100644
--- a/docs/src/links.yaml
+++ b/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