From eb3a40a718963d603a5d653377668bba053b3c33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maksymilian=20Barna=C5=9B?= Date: Fri, 11 Dec 2020 10:38:55 +0100 Subject: [PATCH 1/7] Autoformat will insert horizontal line when line starts with `---`. --- .../docs/features/autoformat.md | 1 + .../ckeditor5-autoformat/src/autoformat.js | 15 +++++++ .../ckeditor5-autoformat/tests/autoformat.js | 44 ++++++++++++++++++- .../tests/manual/autoformat.js | 25 ++++++++--- .../tests/manual/autoformat.md | 2 + .../docs/features/horizontal-line.md | 3 +- 6 files changed, 81 insertions(+), 9 deletions(-) diff --git a/packages/ckeditor5-autoformat/docs/features/autoformat.md b/packages/ckeditor5-autoformat/docs/features/autoformat.md index 1b2e5b00aa3..ec609daa516 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 diff --git a/packages/ckeditor5-autoformat/src/autoformat.js b/packages/ckeditor5-autoformat/src/autoformat.js index 45a53dc1517..82fae3f22c4 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(); } /** @@ -166,6 +167,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/tests/autoformat.js b/packages/ckeditor5-autoformat/tests/autoformat.js index 7f6c614d743..0e5b4ec8482 100644 --- a/packages/ckeditor5-autoformat/tests/autoformat.js +++ b/packages/ckeditor5-autoformat/tests/autoformat.js @@ -14,6 +14,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'; @@ -44,6 +45,7 @@ describe( 'Autoformat', () => { StrikethroughEditing, BlockQuoteEditing, CodeBlockEditing, + HorizontalLineEditing, ShiftEnter ] } ) @@ -392,7 +394,7 @@ describe( 'Autoformat', () => { expect( getData( model ) ).to.equal( '1. ```[]' ); } ); - it( 'should not replace triple grave accents when inside buletted list', () => { + it( 'should not replace triple grave accents when inside bulleted list', () => { setData( model, '1. ``[]' ); model.change( writer => { writer.insertText( '`', doc.selection.getFirstPosition() ); @@ -402,6 +404,37 @@ describe( 'Autoformat', () => { } ); } ); + describe( 'Horizontal line', () => { + it( 'should replace three dashes with a horizontal line', () => { + setData( model, '--[]' ); + model.change( writer => { + writer.insertText( '-', doc.selection.getFirstPosition() ); + } ); + + expect( getData( model ) ).to.equal( '[]' ); + } ); + + it( 'should replace three dashes in a heading', () => { + setData( model, '--[]' ); + model.change( writer => { + writer.insertText( '-', doc.selection.getFirstPosition() ); + } ); + + 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' + ); + } ); + } ); + describe( 'Inline autoformat', () => { it( 'should replace both "**" with bold', () => { setData( model, '**foobar*[]' ); @@ -768,6 +801,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 ff1067df92d..881ee84ccef 100644 --- a/packages/ckeditor5-autoformat/tests/manual/autoformat.js +++ b/packages/ckeditor5-autoformat/tests/manual/autoformat.js @@ -6,27 +6,38 @@ /* globals console, window, document */ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'; + import Autoformat from '../../src/autoformat'; -import Enter from '@ckeditor/ckeditor5-enter/src/enter'; +import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials'; +import Widget from '@ckeditor/ckeditor5-widget/src/widget'; import List from '@ckeditor/ckeditor5-list/src/list'; import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote'; -import Typing from '@ckeditor/ckeditor5-typing/src/typing'; 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 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' ), { - 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' ] + plugins: [ + Essentials, Widget, Paragraph, Bold, Italic, + Code, Strikethrough, Heading, List, Autoformat, + BlockQuote, CodeBlock, + ShiftEnter, HorizontalLine + ], + toolbar: [ + 'heading', + '|', + 'numberedList', 'bulletedList', 'blockQuote', 'codeBlock', 'horizontalLine', + 'bold', 'italic', 'code', 'strikethrough', + '|', + 'undo', 'redo' + ] } ) .then( editor => { window.editor = editor; 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 From f09f885a9c429b5c8f4b7907768f1c907b151694 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maksymilian=20Barna=C5=9B?= Date: Fri, 11 Dec 2020 14:02:36 +0100 Subject: [PATCH 2/7] Remove unnecessary tests for blockquote. --- .../ckeditor5-autoformat/tests/autoformat.js | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/packages/ckeditor5-autoformat/tests/autoformat.js b/packages/ckeditor5-autoformat/tests/autoformat.js index 0e5b4ec8482..322e88e89f5 100644 --- a/packages/ckeditor5-autoformat/tests/autoformat.js +++ b/packages/ckeditor5-autoformat/tests/autoformat.js @@ -384,24 +384,6 @@ describe( 'Autoformat', () => { expect( getData( model ) ).to.equal( '```[]' ); } ); - - it( 'should not replace triple grave accents when inside numbered list', () => { - setData( model, '1. ``[]' ); - model.change( writer => { - writer.insertText( '`', doc.selection.getFirstPosition() ); - } ); - - expect( getData( model ) ).to.equal( '1. ```[]' ); - } ); - - it( 'should not replace triple grave accents when inside bulleted list', () => { - setData( model, '1. ``[]' ); - model.change( writer => { - writer.insertText( '`', doc.selection.getFirstPosition() ); - } ); - - expect( getData( model ) ).to.equal( '1. ```[]' ); - } ); } ); describe( 'Horizontal line', () => { From 243b7d9bf73492147877bfb32fcc83ab9b706623 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maksymilian=20Barna=C5=9B?= Date: Wed, 13 Jan 2021 10:44:40 +0100 Subject: [PATCH 3/7] Add missing devDep. --- packages/ckeditor5-autoformat/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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", From e77ca11bca1ec5d08b6e7d83a2b33a735cbff931 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maksymilian=20Barna=C5=9B?= Date: Fri, 15 Jan 2021 12:57:56 +0100 Subject: [PATCH 4/7] Improve removing empty paragraphs on autoformat. --- .../ckeditor5-autoformat/src/blockautoformatediting.js | 10 +++++++++- packages/ckeditor5-autoformat/tests/autoformat.js | 6 +++--- 2 files changed, 12 insertions(+), 4 deletions(-) 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 f6029567619..0ccbd2a31f8 100644 --- a/packages/ckeditor5-autoformat/tests/autoformat.js +++ b/packages/ckeditor5-autoformat/tests/autoformat.js @@ -499,7 +499,7 @@ describe( 'Autoformat', () => { writer.insertText( '-', doc.selection.getFirstPosition() ); } ); - expect( getData( model ) ).to.equal( '[]' ); + expect( getData( model ) ).to.equal( '[]' ); } ); it( 'should replace three dashes in a heading', () => { @@ -508,7 +508,7 @@ describe( 'Autoformat', () => { writer.insertText( '-', doc.selection.getFirstPosition() ); } ); - expect( getData( model ) ).to.equal( '[]' ); + expect( getData( model ) ).to.equal( '[]' ); } ); it( 'should replace three dashes in a non-empty paragraph', () => { @@ -518,7 +518,7 @@ describe( 'Autoformat', () => { } ); expect( getData( model ) ).to.equal( - '[]foo - bar' + '[]foo - bar' ); } ); From b02d25eb51f390b873542b444dee1b3885503be1 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 19 Jan 2021 09:31:35 +0100 Subject: [PATCH 5/7] Docs: Removed the lack of horizontal line support from the list of known issues. --- packages/ckeditor5-autoformat/docs/features/autoformat.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ckeditor5-autoformat/docs/features/autoformat.md b/packages/ckeditor5-autoformat/docs/features/autoformat.md index ec609daa516..27c4af185d1 100644 --- a/packages/ckeditor5-autoformat/docs/features/autoformat.md +++ b/packages/ckeditor5-autoformat/docs/features/autoformat.md @@ -95,7 +95,6 @@ You can use these tools to create your own autoformatters. Check the [`Autoforma 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 From ddf666a15b5d7ad219b1702d197852d0d42d7419 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 19 Jan 2021 09:32:24 +0100 Subject: [PATCH 6/7] Docs: Removed the invalid underscore support from the list of known issues. --- packages/ckeditor5-autoformat/docs/features/autoformat.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ckeditor5-autoformat/docs/features/autoformat.md b/packages/ckeditor5-autoformat/docs/features/autoformat.md index 27c4af185d1..a8c561f5077 100644 --- a/packages/ckeditor5-autoformat/docs/features/autoformat.md +++ b/packages/ckeditor5-autoformat/docs/features/autoformat.md @@ -93,7 +93,6 @@ 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). * 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). From 199d19c06b157baa003676d5acd55c3db3e962a9 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 19 Jan 2021 09:39:18 +0100 Subject: [PATCH 7/7] Added the horizontal line feature to the demo in the autoformatting guide. --- .../docs/_snippets/features/autoformat.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) 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'