diff --git a/docs/features/autoformat.md b/docs/features/autoformat.md index eba9f9e..a524ebc 100644 --- a/docs/features/autoformat.md +++ b/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 diff --git a/src/autoformat.js b/src/autoformat.js index 30a7138..5113982 100644 --- a/src/autoformat.js +++ b/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 */ + } } /** diff --git a/tests/autoformat.js b/tests/autoformat.js index 3d0291f..e2cd332 100644 --- a/tests/autoformat.js +++ b/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, '**foobar*[]' ); doc.enqueueChanges( () => { batch.insert( doc.selection.getFirstPosition(), '*' ); @@ -214,7 +225,7 @@ describe( 'Autoformat', () => { expect( getData( doc ) ).to.equal( '<$text bold="true">foobar[]' ); } ); - it( 'should replace both `*` with italic', () => { + it( 'should replace both "*" with italic', () => { setData( doc, '*foobar[]' ); doc.enqueueChanges( () => { batch.insert( doc.selection.getFirstPosition(), '*' ); @@ -223,7 +234,16 @@ describe( 'Autoformat', () => { expect( getData( doc ) ).to.equal( '<$text italic="true">foobar[]' ); } ); - it( 'nothing should be replaces when typing `*`', () => { + it( 'should replace both "`" with code', () => { + setData( doc, '`foobar[]' ); + doc.enqueueChanges( () => { + batch.insert( doc.selection.getFirstPosition(), '`' ); + } ); + + expect( getData( doc ) ).to.equal( '<$text code="true">foobar[]' ); + } ); + + it( 'nothing should be replaces when typing "*"', () => { setData( doc, 'foobar[]' ); doc.enqueueChanges( () => { batch.insert( doc.selection.getFirstPosition(), '*' ); @@ -300,7 +320,7 @@ describe( 'Autoformat', () => { expect( getData( doc ) ).to.equal( '## []' ); } ); - it( 'should not replace both `**` with bold', () => { + it( 'should not replace both "**" with bold', () => { setData( doc, '**foobar*[]' ); doc.enqueueChanges( () => { batch.insert( doc.selection.getFirstPosition(), '*' ); @@ -309,7 +329,7 @@ describe( 'Autoformat', () => { expect( getData( doc ) ).to.equal( '**foobar**[]' ); } ); - it( 'should not replace both `*` with italic', () => { + it( 'should not replace both "*" with italic', () => { setData( doc, '*foobar[]' ); doc.enqueueChanges( () => { batch.insert( doc.selection.getFirstPosition(), '*' ); @@ -318,7 +338,16 @@ describe( 'Autoformat', () => { expect( getData( doc ) ).to.equal( '*foobar*[]' ); } ); - it( 'should not replace `>` with block quote', () => { + it( 'should not replace both "`" with code', () => { + setData( doc, '`foobar[]' ); + doc.enqueueChanges( () => { + batch.insert( doc.selection.getFirstPosition(), '`' ); + } ); + + expect( getData( doc ) ).to.equal( '`foobar`[]' ); + } ); + + it( 'should not replace ">" with block quote', () => { setData( doc, '>[]' ); doc.enqueueChanges( () => { batch.insert( doc.selection.getFirstPosition(), ' ' ); diff --git a/tests/manual/autoformat.js b/tests/manual/autoformat.js index ec74946..2eb6e95 100644 --- a/tests/manual/autoformat.js +++ b/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; diff --git a/tests/manual/autoformat.md b/tests/manual/autoformat.md index 7ca67af..19ed3c0 100644 --- a/tests/manual/autoformat.md +++ b/tests/manual/autoformat.md @@ -4,7 +4,7 @@ 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. @@ -12,6 +12,8 @@ 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.