Merge pull request #8415 from ckeditor/i/8318

Fix (html-embed): The editing root should remain focused when saving changes in the HTML embed widget. Closes #8318.
ckeditor · Nov 5, 2020 · 2d8207a · 2d8207a
2 parents 44a0633 + 5209946
commit 2d8207a
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/packages/ckeditor5-html-embed/src/htmlembedediting.js b/packages/ckeditor5-html-embed/src/htmlembedediting.js
@@ -166,6 +166,7 @@ export default class HtmlEmbedEditing extends Plugin {
 						// it's enough to update the model – the entire widget will be reconverted.
 						if ( newValue !== state.getRawHtmlValue() ) {
 							editor.execute( 'updateHtmlEmbed', newValue );
+							editor.editing.view.focus();
 						} else {
 							this.cancel();
 						}
@@ -176,6 +177,7 @@ export default class HtmlEmbedEditing extends Plugin {
 						} );
 
 						renderContent( { domElement: domContentWrapper, editor, state, props } );
+						editor.editing.view.focus();
 
 						view.change( writer => {
 							writer.removeAttribute( 'data-cke-ignore-events', viewContentWrapper );

diff --git a/packages/ckeditor5-html-embed/tests/htmlembedediting.js b/packages/ckeditor5-html-embed/tests/htmlembedediting.js
@@ -352,6 +352,21 @@ describe( 'HtmlEmbedEditing', () => {
 				expect( domContentWrapper.querySelectorAll( '.raw-html-embed__edit-button' ) ).to.have.lengthOf( 1 );
 			} );
 
+			it( 'does not lose editor focus after saving changes', () => {
+				setModelData( model, '<rawHtml value="foo"></rawHtml>' );
+				const widget = viewDocument.getRoot().getChild( 0 );
+				const contentWrapper = widget.getChild( 1 );
+				const domContentWrapper = editor.editing.view.domConverter.mapViewToDom( contentWrapper );
+				const spy = sinon.spy( editor.editing.view, 'focus' );
+
+				widget.getCustomProperty( 'rawHtmlApi' ).makeEditable();
+
+				domContentWrapper.querySelector( 'textarea' ).value = 'Foo Bar.';
+				domContentWrapper.querySelector( '.raw-html-embed__save-button' ).click();
+
+				sinon.assert.calledOnce( spy );
+			} );
+
 			it( 'does not update the model state after saving the same changes', () => {
 				setModelData( model, '<rawHtml value="foo"></rawHtml>' );
 				const widget = viewDocument.getRoot().getChild( 0 );
@@ -392,6 +407,20 @@ describe( 'HtmlEmbedEditing', () => {
 				expect( domContentWrapper.querySelector( 'textarea.raw-html-embed__source' ).disabled ).to.be.true;
 			} );
 
+			it( 'does not lose editor focus after canceling editing', () => {
+				setModelData( model, '<rawHtml value="foo"></rawHtml>' );
+				const widget = viewDocument.getRoot().getChild( 0 );
+				const contentWrapper = widget.getChild( 1 );
+				const domContentWrapper = editor.editing.view.domConverter.mapViewToDom( contentWrapper );
+				const spy = sinon.spy( editor.editing.view, 'focus' );
+
+				widget.getCustomProperty( 'rawHtmlApi' ).makeEditable();
+
+				domContentWrapper.querySelector( '.raw-html-embed__cancel-button' ).click();
+
+				sinon.assert.calledOnce( spy );
+			} );
+
 			describe( 'rawHtmlApi.makeEditable()', () => {
 				it( 'makes the textarea editable', () => {
 					setModelData( model, '<rawHtml value="foo"></rawHtml>' );