Fire the change event after uploading is done

CHANGES.md

@@ -9,6 +9,7 @@ Fixed Issues:
 * [#439](/~https://github.com/ckeditor/ckeditor4/issues/439): Fixed: Incorrect <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd> navigation for radio buttons inside the dialog.
 * [#4829](/~https://github.com/ckeditor/ckeditor4/issues/4829): Fixed: Undo reversed entire table content instead of a single cell. Thanks to that fix, multiple changes in a table can be undone one by one.
 * [#5396](/~https://github.com/ckeditor/ckeditor4/issues/5396): Fixed: Event listeners for `popstate` and `hashchange` events on the `window`, added by the [Maximize](https://ckeditor.com/cke4/addon/maximize) plugin, were not removed when destroying the editor instance.
+* [#5414](/~https://github.com/ckeditor/ckeditor4/issues/5414): Fixed: File and image uploaders based on the [Upload Widget plugin](https://ckeditor.com/cke4/addon/uploadwidget) and [Easy Image plugin ](https://ckeditor.com/cke4/addon/easyimage) didn't fire the [`change` event](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#event-change) upon finishing upload, resulting in passing incorrect data in form controls for integration frameworks, like [Reactive forms in Angular](https://angular.io/guide/reactive-forms).
 
 API changes:
 

plugins/easyimage/plugin.js

@@ -349,6 +349,10 @@
 							srcset: srcset,
 							sizes: '100vw'
 						} );
+
+						// Ensure that replacing the placeholder image with the final one
+						// is considered a content change (#5414).
+						this.editor.fire( 'change' );
 					} );
 
 					this.on( 'uploadFailed', function() {

plugins/uploadwidget/plugin.js

@@ -359,6 +359,10 @@
 				} else {
 					editor.getSelection().selectBookmarks( bookmarks );
 				}
+
+				// Ensure that replacing the upload placeholder with the final
+				// uploaded element is considered a content change (#5414).
+				editor.fire( 'change' );
 			},
 
 			/**

tests/plugins/easyimage/manual/changeevent.html

@@ -0,0 +1,29 @@
+<p>Note, this test uses a real Cloud Service connection, so you might want to be on-line 😉.</p>
+
+<div id="editor">
+	<p>Drop image here:</p>
+</div>
+
+<div id="changes"></div>
+
+<script>
+	( function() {
+		bender.tools.ignoreUnsupportedEnvironment( 'easyimage' );
+
+		var changeLog = CKEDITOR.document.getById( 'changes' ),
+			i = 0;
+
+		CKEDITOR.replace( 'editor', {
+			cloudServices_uploadUrl: easyImageTools.CLOUD_SERVICES_UPLOAD_GATEWAY,
+			cloudServices_tokenUrl: easyImageTools.CLOUD_SERVICES_TOKEN_URL,
+			on: {
+				change: function( evt ) {
+					var change = CKEDITOR.dom.element.createFromHtml( '<p>Change #' + ( ++i ) + '</p>' );
+
+					changeLog.append( change );
+					console.log( 'change ' + i, evt.editor.getData() );
+				}
+			}
+		} );
+	} ) ();
+</script>

tests/plugins/easyimage/manual/changeevent.md

@@ -0,0 +1,12 @@
+@bender-tags: 4.20.2, bug, 5414
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, easyimage, undo
+@bender-include: ../_helpers/tools.js
+
+1. Drop image into the editor.
+1. Wait for its upload.
+
+**Expected** There are two change events noted under the editor.
+**Unexpected** There is only one change event noted under the editor.
+
+**Note** You can check editor's data for each `change` event in the browser console.

tests/plugins/easyimage/uploadintegrations.js

@@ -218,6 +218,32 @@
 				wait();
 			},
 
+			// (#5414)
+			'test change event is fired after the upload finishes': function() {
+				var editor = this.editor,
+					listeners = this.listeners;
+
+				listeners.push( editor.widgets.on( 'instanceCreated', function( evt ) {
+					var widget = evt.data;
+					if ( widget.name == 'easyimage' ) {
+						listeners.push( editor.once( 'change', function( evt ) {
+							resume( function() {
+								var editorData = evt.editor.getData(),
+									// To check if the change contains correct upload data,
+									// we can simply check the existence of srcset attribute with a part of the path.
+									containsUploadedImageSrc = editorData.indexOf( 'srcset="/tests/' ) !== -1;
+
+								assert.isTrue( containsUploadedImageSrc );
+							} );
+						} ) );
+					}
+				} ) );
+
+				pasteFiles( editor, [ bender.tools.getTestPngFile() ], null, { type: 'auto', method: 'paste' } );
+
+				wait();
+			},
+
 			'test pasting mixed HTML content': function() {
 				var editor = this.editor,
 					widgets;

tests/plugins/uploadfile/manual/changeevent.html

@@ -0,0 +1,28 @@
+<div id="editor">
+	<p>Drop some file here:</p>
+</div>
+
+<div id="changes"></div>
+
+<script>
+	( function() {
+		var changeLog = CKEDITOR.document.getById( 'changes' ),
+			i = 0;
+
+		CKEDITOR.once( 'instanceReady', function() {
+			bender.tools.ignoreUnsupportedEnvironment( 'uploadfile' );
+		} );
+
+		CKEDITOR.replace( 'editor', {
+			uploadUrl: 'fakeUrl',
+			on: {
+				change: function( evt ) {
+					var change = CKEDITOR.dom.element.createFromHtml( '<p>Change #' + ( ++i ) + '</p>' );
+
+					changeLog.append( change );
+					console.log( 'change ' + i, evt.editor.getData() );
+				}
+			}
+		} );
+	} ) ();
+</script>

tests/plugins/uploadfile/manual/changeevent.md

@@ -0,0 +1,12 @@
+@bender-tags: 4.20.2, bug, 5414
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, uploadfile, undo
+@bender-include: ../../uploadwidget/manual/_helpers/xhr.js
+
+1. Drop some file into the editor.
+1. Wait for its upload.
+
+**Expected** There are two change events noted under the editor.
+**Unexpected** There is only one change event noted under the editor.
+
+**Note** You can check editor's data for each `change` event in the browser console.

tests/plugins/uploadfile/uploadfile.js

@@ -229,5 +229,27 @@ bender.test( {
 		loader.abort();
 
 		assert.areSame( 'abort', loader.status, 'Loader status' );
+	},
+
+	// (#5414)
+	'test firing change event after the upload finishes': function() {
+		var editor = this.editors.uploadfile,
+			uploads = editor.uploadRepository,
+			loader = uploads.create( bender.tools.getTestTxtFile() );
+
+		this.editorBots.uploadfile.setData( '<span data-cke-upload-id="' + loader.id +
+			'" data-widget="uploadfile">...</span>', function() {
+			editor.once( 'change', function() {
+				resume( function() {
+					assert.sameData( '<p><a href="%BASE_PATH%_assets/sample.txt" target="_blank">name.txt</a></p>',
+						editor.getData() );
+				} );
+			} );
+
+			loader.url = '%BASE_PATH%_assets/sample.txt';
+			loader.changeStatus( 'uploaded' );
+
+			wait();
+		} );
 	}
 } );

tests/plugins/uploadimage/manual/changeevent.html

@@ -0,0 +1,47 @@
+<h2>With <code>image</code> plugin</h2>
+<div id="image">
+	<p>Drop image here:</p>
+</div>
+
+<div id="changes-image"></div>
+
+<h2>With <code>image2</code> plugin</h2>
+<div id="image2">
+	<p>Drop image here:</p>
+</div>
+
+<div id="changes-image2"></div>
+
+<script>
+	( function() {
+		CKEDITOR.once( 'instanceReady', function() {
+			bender.tools.ignoreUnsupportedEnvironment( 'uploadimage' );
+		} );
+
+		creatEditorWithChangelog( 'image', {
+			extraPlugins: 'image'
+		} );
+		creatEditorWithChangelog( 'image2', {
+			extraPlugins: 'image2'
+		} );
+
+		function creatEditorWithChangelog( editorId, userConfig ) {
+			var changeLog = CKEDITOR.document.getById( 'changes-' + editorId ),
+				i = 0,
+				commonConfig = {
+					uploadUrl: 'fakeUrl',
+						on: {
+							change: function( evt ) {
+								var change = CKEDITOR.dom.element.createFromHtml( '<p>Change #' + ( ++i ) + '</p>' );
+
+								changeLog.append( change );
+								console.log( 'change ' + i, evt.editor.getData() );
+							}
+						}
+					},
+				config = CKEDITOR.tools.object.merge( commonConfig, userConfig || {} );
+
+			CKEDITOR.replace( editorId, config );
+		}
+	} ) ();
+</script>

tests/plugins/uploadimage/manual/changeevent.md

@@ -0,0 +1,12 @@
+@bender-tags: 4.20.2, bug, 5414
+@bender-ui: collapsed
+@bender-ckeditor-plugins: wysiwygarea, toolbar, uploadimage, undo
+@bender-include: ../../uploadwidget/manual/_helpers/xhr.js
+
+1. Drop image into the editor.
+1. Wait for its upload.
+
+**Expected** There are two change events noted under the editor.
+**Unexpected** There is only one change event noted under the editor.
+
+**Note** You can check editor's data for each `change` event in the browser console.

tests/plugins/uploadimage/uploadimage.js

@@ -631,6 +631,45 @@
 
 					pasteFilesWithFilesMimeType( editor, [ image ] );
 
+					wait();
+				} );
+			} );
+		},
+
+		// (#5414)
+		'test change event is fired after upload finishes': function() {
+			bender.editorBot.create( {
+				name: 'undo-integration-change-after-upload',
+				config: {
+					uploadUrl: '%BASE_PATH',
+					extraPlugins: 'uploadimage'
+				}
+			}, function( bot ) {
+				var editor = bot.editor,
+					imageName = 'test.png',
+					image = {
+						name: imageName,
+						type: 'image/png'
+					},
+					loader;
+
+				bot.setData( '', function() {
+					editor.once( 'change', function( evt ) {
+						resume( function() {
+							var editorData = evt.editor.getData(),
+								containsUploadedImageUrl = editorData.indexOf( 'src="' + IMG_URL ) !== -1;
+
+							assert.isTrue( containsUploadedImageUrl );
+						} );
+					} );
+
+					pasteFilesWithFilesMimeType( editor, [ image ] );
+
+					loader = editor.uploadRepository.loaders[ 0 ];
+
+					loader.url = IMG_URL;
+					loader.changeStatus( 'uploaded' );
+
 					wait();
 				} );
 			} );

tests/plugins/uploadwidget/uploadwidget.js

@@ -11,7 +11,8 @@
 		htmlMatchingOpts = {
 			compareSelection: true,
 			normalizeSelection: true
-		};
+		},
+		UPLOADED_MARKER = 'uploaded';
 
 	bender.editor = {
 		config: {
@@ -34,7 +35,7 @@
 			},
 
 			onUploaded: function() {
-				this.replaceWith( 'uploaded' );
+				this.replaceWith( UPLOADED_MARKER );
 			}
 		} );
 
@@ -1133,6 +1134,33 @@
 
 				assert.areSame( '<p><u>xxx</u></p>', editor.getData() );
 			} );
+		},
+
+		// (#5414)
+		'test firing change after calling replaceWith() method': function() {
+			var bot = this.editorBot,
+				editor = bot.editor,
+				uploads = editor.uploadRepository,
+				loader = uploads.create( bender.tools.getTestPngFile() );
+
+			loader.loadAndUpload( 'uploadUrl' );
+
+			addTestUploadWidget( editor, 'testChange' );
+
+			bot.setData( '<span data-cke-upload-id="' + loader.id + '" data-widget="testChange">...</span>', function() {
+				editor.once( 'change', function() {
+					resume( function() {
+						var editorContent = editor.getData(),
+							containsUploadedContent = editorContent.indexOf( UPLOADED_MARKER ) !== -1;
+
+						assert.isTrue( containsUploadedContent, 'The editor contains the marker of the uploaded widget' );
+					} );
+				} );
+
+				loader.changeStatus( 'uploaded' );
+
+				wait();
+			} );
 		}
 	} );
 } )();