diff --git a/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.js b/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.js index b709c02e0ad..afa101955fb 100644 --- a/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.js +++ b/packages/ckeditor5-autoformat/docs/_snippets/features/autoformat.js @@ -9,11 +9,17 @@ 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 HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; 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, Strikethrough ] ), + plugins: ClassicEditor.builtinPlugins.concat( [ + Code, + CodeBlock, + HorizontalLine, + Strikethrough + ] ), toolbar: { items: [ 'heading', @@ -32,6 +38,7 @@ ClassicEditor '|', 'blockQuote', 'codeBlock', + 'horizontalLine', '|', 'undo', 'redo' diff --git a/packages/ckeditor5-autoformat/docs/features/autoformat.md b/packages/ckeditor5-autoformat/docs/features/autoformat.md index 1b2e5b00aa3..a8c561f5077 100644 --- a/packages/ckeditor5-autoformat/docs/features/autoformat.md +++ b/packages/ckeditor5-autoformat/docs/features/autoformat.md @@ -20,6 +20,7 @@ The following block formatting options are available: * {@link features/headings 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). * {@link features/block-quote Block quote} – Start a line with `>` followed by a space. * {@link features/code-blocks Code block} – Start a line with `` ``` ``. +* {@link features/horizontal-line Horizontal line} – Start a line with `---`. ## Inline formatting @@ -92,9 +93,7 @@ You can use these tools to create your own autoformatters. Check the [`Autoforma ## Known issues While the autoformatting feature is stable and ready to use, some issues were reported for it. Feel free to upvote 👍  them on GitHub if they are important for you: -* Using underscore inline (eg. variable names like `this_variable`) may result in italics. GitHub issue: [#2388](https://github.com/ckeditor/ckeditor5/issues/2388). * Pasting Markdown-formatted content does not automatically convert the pasted syntax markers into properly formatted content. GitHub issues: [#2321](https://github.com/ckeditor/ckeditor5/issues/2321), [#2322](https://github.com/ckeditor/ckeditor5/issues/2322). -* At the moment the feature does not support adding horizontal rules. GitHub issue: [#5720](https://github.com/ckeditor/ckeditor5/issues/5720). * Setting a specific code block language is not supprted yet (it defaults to plain text on insertion). GitHub issue: [#8598](https://github.com/ckeditor/ckeditor5/issues/8598). ## Contribute diff --git a/packages/ckeditor5-autoformat/package.json b/packages/ckeditor5-autoformat/package.json index 2e7ea1a6ae8..be2e7cdd15f 100644 --- a/packages/ckeditor5-autoformat/package.json +++ b/packages/ckeditor5-autoformat/package.json @@ -24,7 +24,8 @@ "@ckeditor/ckeditor5-list": "^24.0.0", "@ckeditor/ckeditor5-paragraph": "^24.0.0", "@ckeditor/ckeditor5-undo": "^24.0.0", - "@ckeditor/ckeditor5-utils": "^24.0.0" + "@ckeditor/ckeditor5-utils": "^24.0.0", + "@ckeditor/ckeditor5-horizontal-line": "^24.0.0" }, "engines": { "node": ">=12.0.0", diff --git a/packages/ckeditor5-autoformat/src/autoformat.js b/packages/ckeditor5-autoformat/src/autoformat.js index dc90ffc88fd..097846f43d9 100644 --- a/packages/ckeditor5-autoformat/src/autoformat.js +++ b/packages/ckeditor5-autoformat/src/autoformat.js @@ -36,6 +36,7 @@ export default class Autoformat extends Plugin { this._addHeadingAutoformats(); this._addBlockQuoteAutoformats(); this._addCodeBlockAutoformats(); + this._addHorizontalLineAutoformats(); } /** @@ -171,6 +172,20 @@ export default class Autoformat extends Plugin { blockAutoformatEditing( this.editor, this, /^```$/, 'codeBlock' ); } } + + /** + * Adds autoformatting related to {@link module:horizontal-line/horizontalline~HorizontalLine}. + * + * When typed: + * - `` --- `` – Will be replaced with a horizontal line. + * + * @private + */ + _addHorizontalLineAutoformats() { + if ( this.editor.commands.get( 'horizontalLine' ) ) { + blockAutoformatEditing( this.editor, this, /^---$/, 'horizontalLine' ); + } + } } // Helper function for getting `inlineAutoformatEditing` callbacks that checks if command is enabled. diff --git a/packages/ckeditor5-autoformat/src/blockautoformatediting.js b/packages/ckeditor5-autoformat/src/blockautoformatediting.js index 2957a9f25a4..5229b2d8dad 100644 --- a/packages/ckeditor5-autoformat/src/blockautoformatediting.js +++ b/packages/ckeditor5-autoformat/src/blockautoformatediting.js @@ -136,8 +136,16 @@ export default function blockAutoformatEditing( editor, plugin, pattern, callbac // Remove matched text. if ( wasChanged !== false ) { writer.remove( range ); - } + const selectionRange = editor.model.document.selection.getFirstRange(); + const blockRange = writer.createRangeIn( blockToFormat ); + + // If the block is empty and the document selection has been moved when + // applying formatting (e.g. is now in newly created block). + if ( blockToFormat.isEmpty && !blockRange.isEqual( selectionRange ) && !blockRange.containsRange( selectionRange, true ) ) { + writer.remove( blockToFormat ); + } + } range.detach(); } ); } ); diff --git a/packages/ckeditor5-autoformat/tests/autoformat.js b/packages/ckeditor5-autoformat/tests/autoformat.js index 88d98bd9df6..0ccbd2a31f8 100644 --- a/packages/ckeditor5-autoformat/tests/autoformat.js +++ b/packages/ckeditor5-autoformat/tests/autoformat.js @@ -15,6 +15,7 @@ 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 HorizontalLineEditing from '@ckeditor/ckeditor5-horizontal-line/src/horizontallineediting'; import Enter from '@ckeditor/ckeditor5-enter/src/enter'; import ShiftEnter from '@ckeditor/ckeditor5-enter/src/shiftenter'; @@ -46,6 +47,7 @@ describe( 'Autoformat', () => { StrikethroughEditing, BlockQuoteEditing, CodeBlockEditing, + HorizontalLineEditing, ShiftEnter ] } ) @@ -488,23 +490,36 @@ describe( 'Autoformat', () => { expect( getData( model ) ).to.equal( '```[]' ); } ); + } ); - it( 'should not replace triple grave accents when inside numbered list', () => { - setData( model, '1. ``[]' ); + describe( 'Horizontal line', () => { + it( 'should replace three dashes with a horizontal line', () => { + setData( model, '--[]' ); model.change( writer => { - writer.insertText( '`', doc.selection.getFirstPosition() ); + writer.insertText( '-', doc.selection.getFirstPosition() ); } ); - expect( getData( model ) ).to.equal( '1. ```[]' ); + expect( getData( model ) ).to.equal( '[]' ); } ); - it( 'should not replace triple grave accents when inside buletted list', () => { - setData( model, '1. ``[]' ); + it( 'should replace three dashes in a heading', () => { + setData( model, '--[]' ); model.change( writer => { - writer.insertText( '`', doc.selection.getFirstPosition() ); + writer.insertText( '-', doc.selection.getFirstPosition() ); } ); - expect( getData( model ) ).to.equal( '1. ```[]' ); + expect( getData( model ) ).to.equal( '[]' ); + } ); + + it( 'should replace three dashes in a non-empty paragraph', () => { + setData( model, '--[]foo - bar' ); + model.change( writer => { + writer.insertText( '-', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( + '[]foo - bar' + ); } ); it( 'should not replace triple grave accents when inside todo list', () => { @@ -895,6 +910,15 @@ describe( 'Autoformat', () => { expect( getData( model ) ).to.equal( '```[]' ); } ); + it( 'should not replace "---" with horizontal line', () => { + setData( model, '--[]' ); + model.change( writer => { + writer.insertText( '-', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '---[]' ); + } ); + it( 'should use only configured headings', () => { return VirtualTestEditor .create( { diff --git a/packages/ckeditor5-autoformat/tests/manual/autoformat.js b/packages/ckeditor5-autoformat/tests/manual/autoformat.js index 7b885661cfc..06dbc87bdfb 100644 --- a/packages/ckeditor5-autoformat/tests/manual/autoformat.js +++ b/packages/ckeditor5-autoformat/tests/manual/autoformat.js @@ -21,6 +21,7 @@ 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'; +import HorizontalLine from '@ckeditor/ckeditor5-horizontal-line/src/horizontalline'; ClassicEditor .create( document.querySelector( '#editor' ), { @@ -39,7 +40,8 @@ ClassicEditor Autoformat, BlockQuote, CodeBlock, - ShiftEnter + ShiftEnter, + HorizontalLine ], toolbar: [ 'heading', @@ -49,6 +51,7 @@ ClassicEditor 'todoList', 'blockQuote', 'codeBlock', + 'horizontalLine', 'bold', 'italic', 'code', diff --git a/packages/ckeditor5-autoformat/tests/manual/autoformat.md b/packages/ckeditor5-autoformat/tests/manual/autoformat.md index 2f6944e16e8..45dfd22afd7 100644 --- a/packages/ckeditor5-autoformat/tests/manual/autoformat.md +++ b/packages/ckeditor5-autoformat/tests/manual/autoformat.md @@ -20,6 +20,8 @@ Note: autoformat should not work in a code blocks. 1. Type `` ``` `` in a new line to create an empty code block. `` ``` `` should be removed. +1. Type `---` in a new line to create a horizontal line. `---` 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. Type inline formatting (bold, italic, code, strikethrough) after a soft break (Shift+Enter). diff --git a/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md b/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md index 194e15e916e..ee1035d53a7 100644 --- a/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md +++ b/packages/ckeditor5-horizontal-line/docs/features/horizontal-line.md @@ -11,7 +11,7 @@ Often known as the horizontal rule, it provides a visual way to separate the con ## Demo -Use the editor below to see the horizontal line feature in action. +To insert horizontal line, use the toolbar button. Alternatively, start the line with `---` to insert horizontal line thanks to the {@link features/autoformat autoformatting feature}. {@snippet features/horizontal-line} @@ -22,6 +22,7 @@ There are more CKEditor 5 features that can help you organize your document cont * {@link features/page-break Page break} – Divide your document into pages. * {@link features/title Document title} – Clearly separate the title from the body. * {@link features/lists Lists} – Create ordered (numbered) and unordered (bulleted) lists. +* {@link features/autoformat Autoformatting} – Format the content on the go with Markdown code. ## Installation