Merge pull request #78 from ckeditor/t/ckeditor5/436

Feature: Enabled code block autoformatting with the `` ``` `` sequence. Closes ckeditor/ckeditor5#5672.

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',
@@ -27,6 +28,8 @@ ClassicEditor
 				'indent',
 				'|',
 				'blockQuote',
+				'codeBlock',
+				'|',
 				'undo',
 				'redo'
 			],

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
 

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",

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/codeblock~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.

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
 				]
 			} )
@@ -288,6 +290,53 @@ describe( 'Autoformat', () => {
 		} );
 	} );
 
+	describe( 'Code block', () => {
+		it( 'should replace triple grave accents with a code block', () => {
+			setData( model, '<paragraph>``[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '`', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<codeBlock language="plaintext">[]</codeBlock>' );
+		} );
+
+		it( 'should not replace triple grave accents when already in a code block', () => {
+			setData( model, '<codeBlock language="plaintext">``[]</codeBlock>' );
+			model.change( writer => {
+				writer.insertText( '`', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<codeBlock language="plaintext">```[]</codeBlock>' );
+		} );
+
+		it( 'should not replace triple grave accents when inside heading', () => {
+			setData( model, '<heading1>``[]</heading1>' );
+			model.change( writer => {
+				writer.insertText( '`', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<heading1>```[]</heading1>' );
+		} );
+
+		it( 'should not replace triple grave accents when inside numbered list', () => {
+			setData( model, '<listItem listIndent="0" listType="numbered">1. ``[]</listItem>' );
+			model.change( writer => {
+				writer.insertText( '`', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<listItem listIndent="0" listType="numbered">1. ```[]</listItem>' );
+		} );
+
+		it( 'should not replace triple grave accents when inside buletted list', () => {
+			setData( model, '<listItem listIndent="0" listType="bulleted">1. ``[]</listItem>' );
+			model.change( writer => {
+				writer.insertText( '`', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<listItem listIndent="0" listType="bulleted">1. ```[]</listItem>' );
+		} );
+	} );
+
 	describe( 'Inline autoformat', () => {
 		it( 'should replace both "**" with bold', () => {
 			setData( model, '<paragraph>**foobar*[]</paragraph>' );
@@ -454,6 +503,15 @@ describe( 'Autoformat', () => {
 			expect( getData( model ) ).to.equal( '<paragraph>> []</paragraph>' );
 		} );
 
+		it( 'should not replace "```" with code block', () => {
+			setData( model, '<paragraph>``[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '`', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<paragraph>```[]</paragraph>' );
+		} );
+
 		it( 'should use only configured headings', () => {
 			return VirtualTestEditor
 				.create( {

tests/manual/autoformat.js

@@ -17,12 +17,13 @@ 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 ],
-		toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'code', 'undo', 'redo' ]
+		plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote, CodeBlock, ShiftEnter ],
+		toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'codeBlock', 'bold', 'italic', 'code', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		window.editor = editor;

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.