Merge pull request #8421 from ckeditor/i/8357

Fix (html-embed): The save button will now reflect commands state. Closes #8357.
ckeditor · Nov 20, 2020 · b2805dd · b2805dd
2 parents 6a7f381 + e603aad
commit b2805dd
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git a/packages/ckeditor5-html-embed/src/htmlembedediting.js b/packages/ckeditor5-html-embed/src/htmlembedediting.js
@@ -167,8 +167,6 @@ export default class HtmlEmbedEditing extends Plugin {
 						if ( newValue !== state.getRawHtmlValue() ) {
 							editor.execute( 'updateHtmlEmbed', newValue );
 							editor.editing.view.focus();
-						} else {
-							this.cancel();
 						}
 					},
 					cancel() {
@@ -264,9 +262,9 @@ export default class HtmlEmbedEditing extends Plugin {
 				class: 'raw-html-embed__buttons-wrapper'
 			} );
 			// TODO these should be cached and we should only clone here these cached nodes!
-			const domEditButton = createDomButton( editor.locale, 'edit' );
-			const domSaveButton = createDomButton( editor.locale, 'save' );
-			const domCancelButton = createDomButton( editor.locale, 'cancel' );
+			const domEditButton = createDomButton( editor, 'edit' );
+			const domSaveButton = createDomButton( editor, 'save' );
+			const domCancelButton = createDomButton( editor, 'cancel' );
 
 			if ( state.isEditable ) {
 				const clonedDomSaveButton = domSaveButton.cloneNode( true );
@@ -328,9 +326,10 @@ export default class HtmlEmbedEditing extends Plugin {
 //  @param {module:utils/locale~Locale} locale Editor locale.
 //  @param {'edit'|'save'|'cancel'} type Type of button to create.
 //  @returns {HTMLElement}
-function createDomButton( locale, type ) {
-	const t = locale.t;
-	const buttonView = new ButtonView( locale );
+function createDomButton( editor, type ) {
+	const t = editor.locale.t;
+	const buttonView = new ButtonView( editor.locale );
+	const command = editor.commands.get( 'updateHtmlEmbed' );
 
 	buttonView.set( {
 		tooltipPosition: 'sw',
@@ -352,6 +351,7 @@ function createDomButton( locale, type ) {
 			label: t( 'Save changes' ),
 			class: 'raw-html-embed__save-button'
 		} );
+		buttonView.bind( 'isEnabled' ).to( command, 'isEnabled' );
 	} else {
 		buttonView.set( {
 			icon: cancelIcon,

diff --git a/packages/ckeditor5-html-embed/tests/htmlembedediting.js b/packages/ckeditor5-html-embed/tests/htmlembedediting.js
@@ -316,6 +316,22 @@ describe( 'HtmlEmbedEditing', () => {
 				expect( domContentWrapper.querySelectorAll( '.raw-html-embed__cancel-button' ) ).to.have.lengthOf( 1 );
 			} );
 
+			it( 'disable save button when update command is disabled', () => {
+				setModelData( model, '<rawHtml value="foo"></rawHtml>' );
+				const updateHtmlEmbedCommand = editor.commands.get( 'updateHtmlEmbed' );
+				updateHtmlEmbedCommand.isEnabled = false;
+
+				const widget = viewDocument.getRoot().getChild( 0 );
+				const contentWrapper = widget.getChild( 1 );
+				const domContentWrapper = editor.editing.view.domConverter.mapViewToDom( contentWrapper );
+
+				widget.getCustomProperty( 'rawHtmlApi' ).makeEditable();
+
+				const button = domContentWrapper.querySelector( '.raw-html-embed__save-button' );
+
+				expect( button.classList.contains( 'ck-disabled' ) ).to.be.true;
+			} );
+
 			it( 'updates the model state after clicking the "save changes" button', () => {
 				setModelData( model, '<rawHtml value="foo"></rawHtml>' );
 				const widget = viewDocument.getRoot().getChild( 0 );