From b1281b7b704c187df5ebcfd32d7e238ef8aebb96 Mon Sep 17 00:00:00 2001 From: Kuba Niegowski Date: Mon, 16 Mar 2020 19:23:01 +0100 Subject: [PATCH 1/3] Feature: Strikethrough support. Closes #6412. --- docs/_snippets/features/autoformat.js | 1 + docs/features/autoformat.md | 3 ++- src/autoformat.js | 14 ++++++++++++-- tests/autoformat.js | 11 +++++++++++ tests/manual/autoformat.js | 7 +++++-- tests/manual/autoformat.md | 4 +++- tests/undointegration.js | 13 +++++++++++++ 7 files changed, 47 insertions(+), 6 deletions(-) diff --git a/docs/_snippets/features/autoformat.js b/docs/_snippets/features/autoformat.js index 1b84a65..9945256 100644 --- a/docs/_snippets/features/autoformat.js +++ b/docs/_snippets/features/autoformat.js @@ -20,6 +20,7 @@ ClassicEditor 'bold', 'italic', 'code', + 'strikethrough', 'link', 'bulletedList', 'numberedList', diff --git a/docs/features/autoformat.md b/docs/features/autoformat.md index 9ebfcc0..c61fbd7 100644 --- a/docs/features/autoformat.md +++ b/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 diff --git a/src/autoformat.js b/src/autoformat.js index d7b17ca..18b9689 100644 --- a/src/autoformat.js +++ b/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 */ + } } /** diff --git a/tests/autoformat.js b/tests/autoformat.js index 874b10c..35464f3 100644 --- a/tests/autoformat.js +++ b/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( '<$text code="true">foobar[]' ); } ); + it( 'should replace both "~~`" with strikethrough', () => { + setData( model, '~~foobar~[]' ); + model.change( writer => { + writer.insertText( '~', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '<$text strikethrough="true">foobar[]' ); + } ); + it( 'nothing should be replaces when typing "*"', () => { setData( model, 'foobar[]' ); model.change( writer => { diff --git a/tests/manual/autoformat.js b/tests/manual/autoformat.js index 832b208..ff1067d 100644 --- a/tests/manual/autoformat.js +++ b/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; diff --git a/tests/manual/autoformat.md b/tests/manual/autoformat.md index b88069b..ccda42f 100644 --- a/tests/manual/autoformat.md +++ b/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 (Shift+Enter). +1. Type inline formatting (bold, italic, code, strikethrough) after a soft break (Shift+Enter). diff --git a/tests/undointegration.js b/tests/undointegration.js index 23e7479..5e79147 100644 --- a/tests/undointegration.js +++ b/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( '`foobar`[]' ); } ); + + it( 'should undo replacing "~~" with strikethrough', () => { + setData( model, '~~foobar~[]' ); + model.change( writer => { + writer.insertText( '~', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '<$text strikethrough="true">foobar[]' ); + editor.execute( 'undo' ); + expect( getData( model ) ).to.equal( '~~foobar~~[]' ); + } ); } ); describe( 'block', () => { From 713d9ed119ae5ba0a5b044d5a407ebafccfc7190 Mon Sep 17 00:00:00 2001 From: Kuba Niegowski Date: Thu, 19 Mar 2020 11:49:32 +0100 Subject: [PATCH 2/3] Added missing Strikethrough plugin for feature documentation. --- docs/_snippets/features/autoformat.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/docs/_snippets/features/autoformat.js b/docs/_snippets/features/autoformat.js index 9945256..4318dfc 100644 --- a/docs/_snippets/features/autoformat.js +++ b/docs/_snippets/features/autoformat.js @@ -8,19 +8,20 @@ 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', - 'code', 'strikethrough', + 'code', 'link', 'bulletedList', 'numberedList', From bdea913deb7310a326fc4e3c4a7b0b860f3bfa95 Mon Sep 17 00:00:00 2001 From: Kuba Niegowski <1232187+niegowski@users.noreply.github.com> Date: Thu, 19 Mar 2020 11:51:41 +0100 Subject: [PATCH 3/3] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Piotrek Koszuliński --- tests/autoformat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/autoformat.js b/tests/autoformat.js index 35464f3..ea54528 100644 --- a/tests/autoformat.js +++ b/tests/autoformat.js @@ -367,7 +367,7 @@ describe( 'Autoformat', () => { expect( getData( model ) ).to.equal( '<$text code="true">foobar[]' ); } ); - it( 'should replace both "~~`" with strikethrough', () => { + it( 'should replace both "~~" with strikethrough', () => { setData( model, '~~foobar~[]' ); model.change( writer => { writer.insertText( '~', doc.selection.getFirstPosition() );