Merge pull request #36 from ckeditor/t/35

Feature: Added support for backticks which apply `<code>` to the wrapped fragment of text. Closes #35.

docs/features/autoformat.md

@@ -24,8 +24,9 @@ The following block formatting options are available:
 
 The following inline formatting options are available:
 
-* Bold – Type `**text**` or `__text__`.
-* Italic – Type `*text*` or `_text_`.
+* Bold – Type `**text**` or `__text__`,
+* Italic – Type `*text*` or `_text_`,
+* Code – Type ``` `text` ```.
 
 ## Autoformatting sample
 

src/autoformat.js

@@ -59,14 +59,15 @@ export default class Autoformat extends Plugin {
 	}
 
 	/**
-	 * Adds autoformatting related to the {@link module:basic-styles/bold~Bold} and
-	 * {@link module:basic-styles/italic~Italic}.
+	 * Adds autoformatting related to the {@link module:basic-styles/bold~Bold},
+	 * {@link module:basic-styles/italic~Italic} and {@link module:basic-styles/code~Code}.
 	 *
 	 * When typed:
-	 * - `**foobar**` – `**` characters are removed and `foobar` is set to bold.
-	 * - `__foobar__` – `__` characters are removed and `foobar` is set to bold.
-	 * - `*foobar*` – `*` characters are removed and `foobar` is set to italic.
-	 * - `_foobar_` – `_` characters are removed and `foobar` is set to italic.
+	 * - `**foobar**` – `**` characters are removed and `foobar` is set to bold,
+	 * - `__foobar__` – `__` characters are removed and `foobar` is set to bold,
+	 * - `*foobar*` – `*` characters are removed and `foobar` is set to italic,
+	 * - `_foobar_` – `_` characters are removed and `foobar` is set to italic,
+	 * - ``` `foobar` – ``` ` ``` characters are removed and `foobar` is set to code.
 	 *
 	 * @private
 	 */
@@ -89,6 +90,12 @@ export default class Autoformat extends Plugin {
 			new InlineAutoformatEngine( this.editor, /(?:^|[^_])(_)([^_]+)(_)$/g, 'italic' );
 			/* eslint-enable no-new */
 		}
+
+		if ( commands.get( 'code' ) ) {
+			/* eslint-disable no-new */
+			new InlineAutoformatEngine( this.editor, /(`)([^`]+)(`)$/g, 'code' );
+			/* eslint-enable no-new */
+		}
 	}
 
 	/**

tests/autoformat.js

@@ -9,6 +9,7 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ListEngine from '@ckeditor/ckeditor5-list/src/listengine';
 import HeadingEngine from '@ckeditor/ckeditor5-heading/src/headingengine';
 import BoldEngine from '@ckeditor/ckeditor5-basic-styles/src/boldengine';
+import CodeEngine from '@ckeditor/ckeditor5-basic-styles/src/codeengine';
 import ItalicEngine from '@ckeditor/ckeditor5-basic-styles/src/italicengine';
 import BlockQuoteEngine from '@ckeditor/ckeditor5-block-quote/src/blockquoteengine';
 import Enter from '@ckeditor/ckeditor5-enter/src/enter';
@@ -28,7 +29,17 @@ describe( 'Autoformat', () => {
 	beforeEach( () => {
 		return VirtualTestEditor
 			.create( {
-				plugins: [ Enter, Paragraph, Autoformat, ListEngine, HeadingEngine, BoldEngine, ItalicEngine, BlockQuoteEngine ]
+				plugins: [
+					Enter,
+					Paragraph,
+					Autoformat,
+					ListEngine,
+					HeadingEngine,
+					BoldEngine,
+					ItalicEngine,
+					CodeEngine,
+					BlockQuoteEngine
+				]
 			} )
 			.then( newEditor => {
 				editor = newEditor;
@@ -205,7 +216,7 @@ describe( 'Autoformat', () => {
 	} );
 
 	describe( 'Inline autoformat', () => {
-		it( 'should replace both `**` with bold', () => {
+		it( 'should replace both "**" with bold', () => {
 			setData( doc, '<paragraph>**foobar*[]</paragraph>' );
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -214,7 +225,7 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph><$text bold="true">foobar</$text>[]</paragraph>' );
 		} );
 
-		it( 'should replace both `*` with italic', () => {
+		it( 'should replace both "*" with italic', () => {
 			setData( doc, '<paragraph>*foobar[]</paragraph>' );
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -223,7 +234,16 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph><$text italic="true">foobar</$text>[]</paragraph>' );
 		} );
 
-		it( 'nothing should be replaces when typing `*`', () => {
+		it( 'should replace both "`" with code', () => {
+			setData( doc, '<paragraph>`foobar[]</paragraph>' );
+			doc.enqueueChanges( () => {
+				batch.insert( doc.selection.getFirstPosition(), '`' );
+			} );
+
+			expect( getData( doc ) ).to.equal( '<paragraph><$text code="true">foobar</$text>[]</paragraph>' );
+		} );
+
+		it( 'nothing should be replaces when typing "*"', () => {
 			setData( doc, '<paragraph>foobar[]</paragraph>' );
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -300,7 +320,7 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph>## []</paragraph>' );
 		} );
 
-		it( 'should not replace both `**` with bold', () => {
+		it( 'should not replace both "**" with bold', () => {
 			setData( doc, '<paragraph>**foobar*[]</paragraph>' );
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -309,7 +329,7 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph>**foobar**[]</paragraph>' );
 		} );
 
-		it( 'should not replace both `*` with italic', () => {
+		it( 'should not replace both "*" with italic', () => {
 			setData( doc, '<paragraph>*foobar[]</paragraph>' );
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), '*' );
@@ -318,7 +338,16 @@ describe( 'Autoformat', () => {
 			expect( getData( doc ) ).to.equal( '<paragraph>*foobar*[]</paragraph>' );
 		} );
 
-		it( 'should not replace `>` with block quote', () => {
+		it( 'should not replace both "`" with code', () => {
+			setData( doc, '<paragraph>`foobar[]</paragraph>' );
+			doc.enqueueChanges( () => {
+				batch.insert( doc.selection.getFirstPosition(), '`' );
+			} );
+
+			expect( getData( doc ) ).to.equal( '<paragraph>`foobar`[]</paragraph>' );
+		} );
+
+		it( 'should not replace ">" with block quote', () => {
 			setData( doc, '<paragraph>>[]</paragraph>' );
 			doc.enqueueChanges( () => {
 				batch.insert( doc.selection.getFirstPosition(), ' ' );

tests/manual/autoformat.js

@@ -15,12 +15,13 @@ import Heading from '@ckeditor/ckeditor5-heading/src/heading';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 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';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Heading, List, Autoformat, BlockQuote ],
-		toolbar: [ 'headings', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'undo', 'redo' ]
+		plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Heading, List, Autoformat, BlockQuote ],
+		toolbar: [ 'headings', 'numberedList', 'bulletedList', 'blockQuote', 'bold', 'italic', 'code', 'undo', 'redo' ]
 	} )
 	.then( editor => {
 		window.editor = editor;

tests/manual/autoformat.md

@@ -4,14 +4,16 @@
 
 1. Type `*` or `-` and the press space in an empty paragraph to replace it with a list item.
 
-1. Type `> ` and press the space in an empty paragraph to replace it with a block quote.
+1. Type `>` and press the space in an empty paragraph to replace it with a block quote.
 
 1. Type a number from the range **1-3** to replace an empty paragraph with a numbered list item.
 
 1. Type `*foobar*`/`_foobar_` to italicize `foobar`. `*`/`_` should be removed.
 
 1. Type `**foobar**`/`__foobar__` to bold `foobar`. `**`/`__` should be removed.
 
+1. Type ``` `foobar` ``` to mark as code `foobar`. ```  ` ``` 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.