From 1dbd0bae7c22402a8e2cc5e2a666509bb5fbd2c6 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 12 Nov 2019 14:57:04 +0100 Subject: [PATCH 1/5] Added the Code Block feature support using 3 grave accent characters (```) in a row. --- src/autoformat.js | 16 +++++++++++++ tests/autoformat.js | 58 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 74 insertions(+) diff --git a/src/autoformat.js b/src/autoformat.js index 31fec83..c293a8f 100644 --- a/src/autoformat.js +++ b/src/autoformat.js @@ -35,6 +35,7 @@ export default class Autoformat extends Plugin { this._addBasicStylesAutoformats(); this._addHeadingAutoformats(); this._addBlockQuoteAutoformats(); + this._addCodeBlockAutoformats(); } /** @@ -152,6 +153,21 @@ export default class Autoformat extends Plugin { new BlockAutoformatEditing( this.editor, /^>\s$/, 'blockQuote' ); } } + + /** + * Adds autoformatting related to {@link module:code-block/code-block~CodeBlock}. + * + * When typed: + * - `\`\`\`` – A paragraph will be changed to a code block. + * + * @private + */ + _addCodeBlockAutoformats() { + if ( this.editor.commands.get( 'codeBlock' ) ) { + // eslint-disable-next-line no-new + new BlockAutoformatEditing( this.editor, /^```$/, 'codeBlock' ); + } + } } // Helper function for getting `InlineAutoformatEditing` callbacks that checks if command is enabled. diff --git a/tests/autoformat.js b/tests/autoformat.js index 22a4543..82ee955 100644 --- a/tests/autoformat.js +++ b/tests/autoformat.js @@ -12,6 +12,7 @@ import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting'; import CodeEditing from '@ckeditor/ckeditor5-basic-styles/src/code/codeediting'; import ItalicEditing from '@ckeditor/ckeditor5-basic-styles/src/italic/italicediting'; import BlockQuoteEditing from '@ckeditor/ckeditor5-block-quote/src/blockquoteediting'; +import CodeBlockEditing from '@ckeditor/ckeditor5-code-block/src/codeblockediting'; import Enter from '@ckeditor/ckeditor5-enter/src/enter'; import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter'; @@ -40,6 +41,7 @@ describe( 'Autoformat', () => { ItalicEditing, CodeEditing, BlockQuoteEditing, + CodeBlockEditing, ShiftEnter ] } ) @@ -252,6 +254,53 @@ describe( 'Autoformat', () => { } ); } ); + describe( 'Code block', () => { + it( 'should replace triple grave accents with a code block', () => { + setData( model, '``[]' ); + model.change( writer => { + writer.insertText( '`', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '[]' ); + } ); + + it( 'should not replace triple grave accents when already in a code block', () => { + setData( model, '``[]' ); + model.change( writer => { + writer.insertText( '`', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '```[]' ); + } ); + + it( 'should not replace triple grave accents when inside heading', () => { + setData( model, '``[]' ); + model.change( writer => { + writer.insertText( '`', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '```[]' ); + } ); + + it( 'should not replace triple grave accents when inside numbered list', () => { + setData( model, '1. ``[]' ); + model.change( writer => { + writer.insertText( '`', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '1. ```[]' ); + } ); + + it( 'should not replace triple grave accents when inside buletted list', () => { + setData( model, '1. ``[]' ); + model.change( writer => { + writer.insertText( '`', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '1. ```[]' ); + } ); + } ); + describe( 'Inline autoformat', () => { it( 'should replace both "**" with bold', () => { setData( model, '**foobar*[]' ); @@ -418,6 +467,15 @@ describe( 'Autoformat', () => { expect( getData( model ) ).to.equal( '> []' ); } ); + it( 'should not replace "```" with code block', () => { + setData( model, '``[]' ); + model.change( writer => { + writer.insertText( '`', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '```[]' ); + } ); + it( 'should use only configured headings', () => { return VirtualTestEditor .create( { From becdd85b8bfd477ff18a9f77993cd12996f21037 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Wed, 13 Nov 2019 14:31:33 +0100 Subject: [PATCH 2/5] Added Code Block functionality to the Autoformat docs and tests. --- docs/_snippets/features/autoformat.js | 3 ++- docs/features/autoformat.md | 1 + src/autoformat.js | 4 ++-- tests/manual/autoformat.js | 3 ++- tests/manual/autoformat.md | 2 ++ 5 files changed, 9 insertions(+), 4 deletions(-) diff --git a/docs/_snippets/features/autoformat.js b/docs/_snippets/features/autoformat.js index 80b3546..91d6d49 100644 --- a/docs/_snippets/features/autoformat.js +++ b/docs/_snippets/features/autoformat.js @@ -7,11 +7,12 @@ import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor'; import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; +import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config'; ClassicEditor .create( document.querySelector( '#snippet-autoformat' ), { - plugins: ClassicEditor.builtinPlugins.concat( [ Code ] ), + plugins: ClassicEditor.builtinPlugins.concat( [ Code, CodeBlock ] ), toolbar: { items: [ 'heading', diff --git a/docs/features/autoformat.md b/docs/features/autoformat.md index 7f997c0..9ebfcc0 100644 --- a/docs/features/autoformat.md +++ b/docs/features/autoformat.md @@ -17,6 +17,7 @@ The following block formatting options are available: * Numbered list – Start a line with `1.` or `1)` followed by a space. * Headings – Start a line with `#` or `##` or `###` followed by a space to create a heading 1, heading 2 or heading 3 (up to heading 6 if {@link module:heading/heading~HeadingConfig#options} defines more headings). * Block quote – Start a line with `>` followed by a space. +* Code block – Start a line with `` ``` ``. ## Inline formatting diff --git a/src/autoformat.js b/src/autoformat.js index c293a8f..f78ebcd 100644 --- a/src/autoformat.js +++ b/src/autoformat.js @@ -155,10 +155,10 @@ export default class Autoformat extends Plugin { } /** - * Adds autoformatting related to {@link module:code-block/code-block~CodeBlock}. + * Adds autoformatting related to {@link module:code-block/codeblock~CodeBlock}. * * When typed: - * - `\`\`\`` – A paragraph will be changed to a code block. + * - `` ``` `` – A paragraph will be changed to a code block. * * @private */ diff --git a/tests/manual/autoformat.js b/tests/manual/autoformat.js index ca428be..2a0e763 100644 --- a/tests/manual/autoformat.js +++ b/tests/manual/autoformat.js @@ -17,11 +17,12 @@ import Undo from '@ckeditor/ckeditor5-undo/src/undo'; import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold'; import Code from '@ckeditor/ckeditor5-basic-styles/src/code'; import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic'; +import CodeBlock from '@ckeditor/ckeditor5-code-block/src/codeblock'; import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter'; ClassicEditor .create( document.querySelector( '#editor' ), { - plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote, ShiftEnter ], + plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote, CodeBlock, ShiftEnter ], toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'code', 'undo', 'redo' ] } ) .then( editor => { diff --git a/tests/manual/autoformat.md b/tests/manual/autoformat.md index 1b0e254..b88069b 100644 --- a/tests/manual/autoformat.md +++ b/tests/manual/autoformat.md @@ -16,6 +16,8 @@ 1. Type ``` `foobar` ``` to mark as code `foobar`. ``` ` ``` should be removed. +1. Type `` ``` `` in a new line to create an empty code block. `` ``` `` should be removed. + 1. For every autoformat pattern: Undo until you'll see just the pattern (e.g. `- `). Typing should be then possible without triggering the autoformatting again. 1. Typing a different pattern in an already converted block **must not** trigger the autoformatting. For example, typing `- ` in a heading should not convert a heading to a list. From 869b9f3ec4efb2c4e0628a446650fdd7c513d94e Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Fri, 15 Nov 2019 13:17:23 +0100 Subject: [PATCH 3/5] Added a missing dependency to package.json. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 97714f0..2bf4e5e 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "devDependencies": { "@ckeditor/ckeditor5-basic-styles": "^15.0.0", "@ckeditor/ckeditor5-block-quote": "^15.0.0", + "@ckeditor/ckeditor5-code-block": "^0.0.1", "@ckeditor/ckeditor5-editor-classic": "^15.0.0", "@ckeditor/ckeditor5-engine": "^15.0.0", "@ckeditor/ckeditor5-enter": "^15.0.0", From 86587cd047ebfd27185dedc306bb070baea96eaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 26 Nov 2019 07:24:34 +0100 Subject: [PATCH 4/5] Add code block button to manual test. --- tests/manual/autoformat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/manual/autoformat.js b/tests/manual/autoformat.js index 2a0e763..02c1075 100644 --- a/tests/manual/autoformat.js +++ b/tests/manual/autoformat.js @@ -23,7 +23,7 @@ import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter'; ClassicEditor .create( document.querySelector( '#editor' ), { plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote, CodeBlock, ShiftEnter ], - toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'code', 'undo', 'redo' ] + toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'codeBlock', 'bold', 'italic', 'code', 'undo', 'redo' ] } ) .then( editor => { window.editor = editor; From b76a53c3d217e95e35b7218b0dc8849c47e815da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciej=20Go=C5=82aszewski?= Date: Tue, 26 Nov 2019 07:32:48 +0100 Subject: [PATCH 5/5] Add code block button to feature guide. --- docs/_snippets/features/autoformat.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/_snippets/features/autoformat.js b/docs/_snippets/features/autoformat.js index 91d6d49..ee84fe3 100644 --- a/docs/_snippets/features/autoformat.js +++ b/docs/_snippets/features/autoformat.js @@ -28,6 +28,8 @@ ClassicEditor 'indent', '|', 'blockQuote', + 'codeBlock', + '|', 'undo', 'redo' ],