Merge pull request #8646 from ckeditor/i/5720

Feature (autoformat): Horizontal line can be inserted by typing `---` in an empty block. Closes #5720.
Docs (horizontal-line): Updated documentation after integration with the Autoformatting feature (see #5720).

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'

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

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",

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.

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();
 		} );
 	} );

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( '<codeBlock language="plaintext">```[]</codeBlock>' );
 		} );
+	} );
 
-		it( 'should not replace triple grave accents when inside numbered list', () => {
-			setData( model, '<listItem listIndent="0" listType="numbered">1. ``[]</listItem>' );
+	describe( 'Horizontal line', () => {
+		it( 'should replace three dashes with a horizontal line', () => {
+			setData( model, '<paragraph>--[]</paragraph>' );
 			model.change( writer => {
-				writer.insertText( '`', doc.selection.getFirstPosition() );
+				writer.insertText( '-', doc.selection.getFirstPosition() );
 			} );
 
-			expect( getData( model ) ).to.equal( '<listItem listIndent="0" listType="numbered">1. ```[]</listItem>' );
+			expect( getData( model ) ).to.equal( '<horizontalLine></horizontalLine><paragraph>[]</paragraph>' );
 		} );
 
-		it( 'should not replace triple grave accents when inside buletted list', () => {
-			setData( model, '<listItem listIndent="0" listType="bulleted">1. ``[]</listItem>' );
+		it( 'should replace three dashes in a heading', () => {
+			setData( model, '<heading1>--[]</heading1>' );
 			model.change( writer => {
-				writer.insertText( '`', doc.selection.getFirstPosition() );
+				writer.insertText( '-', doc.selection.getFirstPosition() );
 			} );
 
-			expect( getData( model ) ).to.equal( '<listItem listIndent="0" listType="bulleted">1. ```[]</listItem>' );
+			expect( getData( model ) ).to.equal( '<horizontalLine></horizontalLine><paragraph>[]</paragraph>' );
+		} );
+
+		it( 'should replace three dashes in a non-empty paragraph', () => {
+			setData( model, '<paragraph>--[]foo - bar</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '-', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal(
+				'<horizontalLine></horizontalLine><paragraph>[]foo - bar</paragraph>'
+			);
 		} );
 
 		it( 'should not replace triple grave accents when inside todo list', () => {
@@ -895,6 +910,15 @@ describe( 'Autoformat', () => {
 			expect( getData( model ) ).to.equal( '<paragraph>```[]</paragraph>' );
 		} );
 
+		it( 'should not replace "---" with horizontal line', () => {
+			setData( model, '<paragraph>--[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '-', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<paragraph>---[]</paragraph>' );
+		} );
+
 		it( 'should use only configured headings', () => {
 			return VirtualTestEditor
 				.create( {

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',

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 (<kbd>Shift</kbd>+<kbd>Enter</kbd>).

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