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