Merge pull request #10508 from ckeditor/ck/10413-backspace-reverting-…

…autoformat Feature (autoformat): Allowed undoing automatic [Markdown-like formatting](https://ckeditor.com/docs/ckeditor5/latest/features/autoformat.html) by pressing <kbd>Backspace</kbd>. See #10413.
ckeditor · Sep 15, 2021 · b46ae90 · b46ae90
2 parents 8730b59 + 8526c70
commit b46ae90
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 24 deletions.
diff --git a/packages/ckeditor5-autoformat/src/autoformat.js b/packages/ckeditor5-autoformat/src/autoformat.js
@@ -8,6 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
+import { Delete } from 'ckeditor5/src/typing';
 
 import blockAutoformatEditing from './blockautoformatediting';
 import inlineAutoformatEditing from './inlineautoformatediting';
@@ -21,6 +22,13 @@ import inlineAutoformatEditing from './inlineautoformatediting';
  * @extends module:core/plugin~Plugin
  */
 export default class Autoformat extends Plugin {
+	/**
+	 * @inheritdoc
+	 */
+	static get requires() {
+		return [ Delete ];
+	}
+
 	/**
 	 * @inheritDoc
 	 */

diff --git a/packages/ckeditor5-autoformat/src/blockautoformatediting.js b/packages/ckeditor5-autoformat/src/blockautoformatediting.js
@@ -148,6 +148,10 @@ export default function blockAutoformatEditing( editor, plugin, pattern, callbac
 				}
 			}
 			range.detach();
+
+			editor.model.enqueueChange( () => {
+				editor.plugins.get( 'Delete' ).requestUndoOnBackspace();
+			} );
 		} );
 	} );
 }
diff --git a/packages/ckeditor5-autoformat/src/inlineautoformatediting.js b/packages/ckeditor5-autoformat/src/inlineautoformatediting.js
@@ -170,6 +170,10 @@ export default function inlineAutoformatEditing( editor, plugin, testRegexpOrCal
 			for ( const range of rangesToRemove.reverse() ) {
 				writer.remove( range );
 			}
+
+			model.enqueueChange( () => {
+				editor.plugins.get( 'Delete' ).requestUndoOnBackspace();
+			} );
 		} );
 	} );
 }

diff --git a/packages/ckeditor5-autoformat/tests/undointegration.js b/packages/ckeditor5-autoformat/tests/undointegration.js
@@ -14,47 +14,28 @@ import StrikethroughEditing from '@ckeditor/ckeditor5-basic-styles/src/strikethr
 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';
+import Delete from '@ckeditor/ckeditor5-typing/src/delete';
 import Undo from '@ckeditor/ckeditor5-undo/src/undoediting';
 
+import ModelTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/modeltesteditor';
 import VirtualTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/virtualtesteditor';
 
 import { setData, getData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
+import { DomEventData } from '@ckeditor/ckeditor5-engine';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
 
 describe( 'Autoformat undo integration', () => {
 	let editor, model, doc;
 
 	testUtils.createSinonSandbox();
 
-	beforeEach( () => {
-		return VirtualTestEditor
-			.create( {
-				plugins: [
-					Enter,
-					Undo,
-					Paragraph,
-					Autoformat,
-					ListEditing,
-					HeadingEditing,
-					BoldEditing,
-					ItalicEditing,
-					CodeEditing,
-					StrikethroughEditing,
-					BlockQuoteEditing
-				]
-			} )
-			.then( newEditor => {
-				editor = newEditor;
-				model = editor.model;
-				doc = model.document;
-			} );
-	} );
-
 	afterEach( () => {
 		return editor.destroy();
 	} );
 
 	describe( 'inline', () => {
+		beforeEach( createVirtualEditorInstance );
+
 		it( 'should undo replacing "**" with bold', () => {
 			setData( model, '<paragraph>**foobar*[]</paragraph>' );
 			model.change( writer => {
@@ -123,6 +104,8 @@ describe( 'Autoformat undo integration', () => {
 	} );
 
 	describe( 'block', () => {
+		beforeEach( createVirtualEditorInstance );
+
 		it( 'should work when replacing asterisk', () => {
 			setData( model, '<paragraph>*[]</paragraph>' );
 			model.change( writer => {
@@ -203,4 +186,100 @@ describe( 'Autoformat undo integration', () => {
 			expect( getData( model ) ).to.equal( '<paragraph>> []</paragraph>' );
 		} );
 	} );
+
+	describe( 'by pressing backspace', () => {
+		let viewDocument, deleteEvent;
+
+		beforeEach( async () => {
+			const newEditor = await ModelTestEditor
+				.create( {
+					plugins: [
+						Autoformat,
+						Paragraph,
+						BoldEditing,
+						ListEditing,
+						Delete,
+						Undo
+					]
+				} );
+
+			editor = newEditor;
+			model = editor.model;
+			doc = model.document;
+			viewDocument = editor.editing.view.document;
+			deleteEvent = new DomEventData(
+				viewDocument,
+				{ preventDefault: sinon.spy() },
+				{ direction: 'backward', unit: 'codePoint', sequence: 1 }
+			);
+		} );
+
+		it( 'should undo after inline autoformat', () => {
+			setData( model, '<paragraph>**foobar*[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '*', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<paragraph><$text bold="true">foobar</$text>[]</paragraph>' );
+
+			viewDocument.fire( 'delete', deleteEvent );
+
+			expect( getData( model ) ).to.equal( '<paragraph>**foobar**[]</paragraph>' );
+		} );
+
+		it( 'should undo after block autoformat', () => {
+			setData( model, '<paragraph>-[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( ' ', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<listItem listIndent="0" listType="bulleted">[]</listItem>' );
+
+			viewDocument.fire( 'delete', deleteEvent );
+
+			expect( getData( model ) ).to.equal( '<paragraph>- []</paragraph>' );
+		} );
+
+		it( 'should not undo after selection has changed', () => {
+			setData( model, '<paragraph>**foobar*[]</paragraph>' );
+			model.change( writer => {
+				writer.insertText( '*', doc.selection.getFirstPosition() );
+			} );
+
+			expect( getData( model ) ).to.equal( '<paragraph><$text bold="true">foobar</$text>[]</paragraph>' );
+
+			model.change( writer => {
+				const selection = model.createSelection();
+				writer.setSelection( selection );
+			} );
+
+			viewDocument.fire( 'delete', deleteEvent );
+
+			expect( getData( model, { withoutSelection: true } ) )
+				.to.equal( '<paragraph><$text bold="true">foobar</$text></paragraph>' );
+		} );
+	} );
+
+	async function createVirtualEditorInstance() {
+		const newEditor = await VirtualTestEditor
+			.create( {
+				plugins: [
+					Enter,
+					Undo,
+					Paragraph,
+					Autoformat,
+					ListEditing,
+					HeadingEditing,
+					BoldEditing,
+					ItalicEditing,
+					CodeEditing,
+					StrikethroughEditing,
+					BlockQuoteEditing
+				]
+			} );
+
+		editor = newEditor;
+		model = editor.model;
+		doc = model.document;
+	}
 } );