Merge pull request #79 from ckeditor/i/6412

Feature: Added strikethrough auto format support. Closes ckeditor/ckeditor5#6412.

docs/_snippets/features/autoformat.js

@@ -8,17 +8,19 @@
 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 Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
 import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
 
 ClassicEditor
 	.create( document.querySelector( '#snippet-autoformat' ), {
-		plugins: ClassicEditor.builtinPlugins.concat( [ Code, CodeBlock ] ),
+		plugins: ClassicEditor.builtinPlugins.concat( [ Code, CodeBlock, Strikethrough ] ),
 		toolbar: {
 			items: [
 				'heading',
 				'|',
 				'bold',
 				'italic',
+				'strikethrough',
 				'code',
 				'link',
 				'bulletedList',

docs/features/autoformat.md

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

src/autoformat.js

@@ -63,14 +63,16 @@ export default class Autoformat extends Plugin {
 
 	/**
 	 * Adds autoformatting related to the {@link module:basic-styles/bold~Bold},
-	 * {@link module:basic-styles/italic~Italic} and {@link module:basic-styles/code~Code}.
+	 * {@link module:basic-styles/italic~Italic}, {@link module:basic-styles/code~Code}
+	 * and {@link module:basic-styles/strikethrough~Strikethrough}
 	 *
 	 * 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 code.
+	 * - ``` `foobar` – ``` ` ``` characters are removed and `foobar` is set to code,
+	 * - `~~foobar~~` – `~~` characters are removed and `foobar` is set to strikethrough.
 	 *
 	 * @private
 	 */
@@ -104,6 +106,14 @@ export default class Autoformat extends Plugin {
 			new InlineAutoformatEditing( this.editor, /(`)([^`]+)(`)$/g, codeCallback );
 			/* eslint-enable no-new */
 		}
+
+		if ( commands.get( 'strikethrough' ) ) {
+			/* eslint-disable no-new */
+			const strikethroughCallback = getCallbackFunctionForInlineAutoformat( this.editor, 'strikethrough' );
+
+			new InlineAutoformatEditing( this.editor, /(~~)([^~]+)(~~)$/g, strikethroughCallback );
+			/* eslint-enable no-new */
+		}
 	}
 
 	/**

tests/autoformat.js

@@ -9,6 +9,7 @@ import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import ListEditing from '@ckeditor/ckeditor5-list/src/listediting';
 import HeadingEditing from '@ckeditor/ckeditor5-heading/src/headingediting';
 import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting';
+import StrikethroughEditing from '@ckeditor/ckeditor5-basic-styles/src/strikethrough/strikethroughediting';
 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';
@@ -40,6 +41,7 @@ describe( 'Autoformat', () => {
 					BoldEditing,
 					ItalicEditing,
 					CodeEditing,
+					StrikethroughEditing,
 					BlockQuoteEditing,
 					CodeBlockEditing,
 					ShiftEnter
@@ -365,6 +367,15 @@ describe( 'Autoformat', () => {
 			expect( getData( model ) ).to.equal( '<paragraph><$text code="true">foobar</$text>[]</paragraph>' );
 		} );
 
+		it( 'should replace both "~~" with strikethrough', () => {
+			setData( model, '<paragraph>~~foobar~[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '~', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<paragraph><$text strikethrough="true">foobar</$text>[]</paragraph>' );
+		} );
+
 		it( 'nothing should be replaces when typing "*"', () => {
 			setData( model, '<paragraph>foobar[]</paragraph>' );
 			model.change( writer => {

tests/manual/autoformat.js

@@ -16,14 +16,17 @@ 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 Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
 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, CodeBlock, ShiftEnter ],
-		toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'codeBlock', 'bold', 'italic', 'code', 'undo', 'redo' ]
+		plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic, Code, Strikethrough, Heading, List, Autoformat, BlockQuote, CodeBlock,
+			ShiftEnter ],
+		toolbar: [ 'heading', '|', 'numberedList', 'bulletedList', 'blockQuote', 'codeBlock', 'bold', 'italic', 'code', 'strikethrough',
+			'undo', 'redo' ]
 	} )
 	.then( editor => {
 		window.editor = editor;

tests/manual/autoformat.md

@@ -16,10 +16,12 @@
 
 1. Type ``` `foobar` ``` to mark as code `foobar`. ```  ` ``` should be removed.
 
+1. Type `~~foobar~~` to strikethrough `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.
 
-1. Type inline formatting (bold, italic, code) after a soft break (<kbd>Shift</kbd>+<kbd>Enter</kbd>).
+1. Type inline formatting (bold, italic, code, strikethrough) after a soft break (<kbd>Shift</kbd>+<kbd>Enter</kbd>).

tests/undointegration.js

@@ -10,6 +10,7 @@ import ListEditing from '@ckeditor/ckeditor5-list/src/listediting';
 import HeadingEditing from '@ckeditor/ckeditor5-heading/src/headingediting';
 import BoldEditing from '@ckeditor/ckeditor5-basic-styles/src/bold/boldediting';
 import CodeEditing from '@ckeditor/ckeditor5-basic-styles/src/code/codeediting';
+import StrikethroughEditing from '@ckeditor/ckeditor5-basic-styles/src/strikethrough/strikethroughediting';
 import ItalicEditing from '@ckeditor/ckeditor5-basic-styles/src/italic/italicediting';
 import BlockQuoteEditing from '@ckeditor/ckeditor5-block-quote/src/blockquoteediting';
 import Enter from '@ckeditor/ckeditor5-enter/src/enter';
@@ -38,6 +39,7 @@ describe( 'Autoformat undo integration', () => {
 					BoldEditing,
 					ItalicEditing,
 					CodeEditing,
+					StrikethroughEditing,
 					BlockQuoteEditing
 				]
 			} )
@@ -107,6 +109,17 @@ describe( 'Autoformat undo integration', () => {
 			editor.execute( 'undo' );
 			expect( getData( model ) ).to.equal( '<paragraph>`foobar`[]</paragraph>' );
 		} );
+
+		it( 'should undo replacing "~~" with strikethrough', () => {
+			setData( model, '<paragraph>~~foobar~[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '~', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<paragraph><$text strikethrough="true">foobar</$text>[]</paragraph>' );
+			editor.execute( 'undo' );
+			expect( getData( model ) ).to.equal( '<paragraph>~~foobar~~[]</paragraph>' );
+		} );
 	} );
 
 	describe( 'block', () => {