Merge pull request #7960 from ckeditor/i/7878

Other (image): The `ImageUploadPanelView` form label should change depending on whether the image is selected or not. Closes #7878. Internal (image): Added the new `ImageUploadPanelView#getIntegration()` method to pick a desired integration by name from the collection.
ckeditor · Aug 31, 2020 · 288fb97 · 288fb97
2 parents 1629616 + 5d7799e
commit 288fb97
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 6 deletions.
diff --git a/packages/ckeditor5-image/lang/contexts.json b/packages/ckeditor5-image/lang/contexts.json
@@ -19,5 +19,6 @@
 	"Insert": "The label of submit form button if image src URL input has no value",
 	"Update": "The label of submit form button if image src URL input has value",
 	"Insert image via URL": "The input label for the Insert image via URL form",
+	"Update image URL": "The alternative input label for the Insert image via URL form",
 	"Paste the image source URL.": "The tip label below the Insert image via URL form"
 }
diff --git a/packages/ckeditor5-image/src/imageupload/imageuploadui.js b/packages/ckeditor5-image/src/imageupload/imageuploadui.js
@@ -64,6 +64,7 @@ export default class ImageUploadUI extends Plugin {
 		const editor = this.editor;
 		const t = editor.t;
 		const insertButtonView = imageUploadView.insertButtonView;
+		const insertImageViaUrlForm = imageUploadView.getIntegration( 'insertImageViaUrl' );
 
 		dropdownView.bind( 'isEnabled' ).to( command );
 
@@ -76,9 +77,11 @@ export default class ImageUploadUI extends Plugin {
 				if ( isImage( selectedElement ) ) {
 					imageUploadView.imageURLInputValue = selectedElement.getAttribute( 'src' );
 					insertButtonView.label = t( 'Update' );
+					insertImageViaUrlForm.label = t( 'Update image URL' );
 				} else {
 					imageUploadView.imageURLInputValue = '';
 					insertButtonView.label = t( 'Insert' );
+					insertImageViaUrlForm.label = t( 'Insert image via URL' );
 				}
 			}
 		} );

diff --git a/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js b/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js
@@ -139,6 +139,8 @@ export default class ImageUploadPanelView extends View {
 					} );
 				}
 
+				integrationView.name = integration;
+
 				this._integrations.add( integrationView );
 			}
 		}
@@ -213,6 +215,16 @@ export default class ImageUploadPanelView extends View {
 		}, { priority: 'high' } );
 	}
 
+	/**
+	 * Returns a view of the integration.
+	 *
+	 * @param {string} name The name of the integration.
+	 * @returns {module:ui/view~View}
+	 */
+	getIntegration( name ) {
+		return this._integrations.find( integration => integration.name === name );
+	}
+
 	/**
 	 * Creates dropdown view.
 	 *

diff --git a/packages/ckeditor5-image/tests/imageupload/imageuploadui.js b/packages/ckeditor5-image/tests/imageupload/imageuploadui.js
@@ -438,6 +438,67 @@ describe( 'ImageUploadUI', () => {
 			} );
 		} );
 
+		describe( 'dropdown panel integrations', () => {
+			describe( 'insert image via URL form', () => {
+				it( 'should have "Insert image via URL" label on inserting new image', () => {
+					const dropdown = editor.ui.componentFactory.create( 'imageUpload' );
+					const viewDocument = editor.editing.view.document;
+
+					editor.setData( '<p>test</p>' );
+
+					editor.editing.view.change( writer => {
+						writer.setSelection( viewDocument.getRoot().getChild( 0 ), 'end' );
+					} );
+
+					const el = viewDocument.selection.getSelectedElement();
+
+					const data = fakeEventData();
+					const eventInfo = new EventInfo( el, 'click' );
+					const domEventDataMock = new DomEventData( viewDocument, eventInfo, data );
+
+					viewDocument.fire( 'click', domEventDataMock );
+
+					dropdown.isOpen = true;
+
+					const inputValue = dropdown.panelView.children.first.imageURLInputValue;
+
+					const insertImageViaUrlForm = dropdown.panelView.children.first.getIntegration( 'insertImageViaUrl' );
+
+					expect( dropdown.isOpen ).to.be.true;
+					expect( inputValue ).to.equal( '' );
+					expect( insertImageViaUrlForm.label ).to.equal( 'Insert image via URL' );
+				} );
+
+				it( 'should have "Update image URL" label on updating the image source URL', () => {
+					const dropdown = editor.ui.componentFactory.create( 'imageUpload' );
+					const viewDocument = editor.editing.view.document;
+
+					editor.setData( '<figure><img src="/assets/sample.png" /></figure>' );
+
+					editor.editing.view.change( writer => {
+						writer.setSelection( viewDocument.getRoot().getChild( 0 ), 'on' );
+					} );
+
+					const el = viewDocument.selection.getSelectedElement();
+
+					const data = fakeEventData();
+					const eventInfo = new EventInfo( el, 'click' );
+					const domEventDataMock = new DomEventData( viewDocument, eventInfo, data );
+
+					viewDocument.fire( 'click', domEventDataMock );
+
+					dropdown.isOpen = true;
+
+					const inputValue = dropdown.panelView.children.first.imageURLInputValue;
+					const insertImageViaUrlForm = dropdown.panelView.children.first.getIntegration( 'insertImageViaUrl' );
+
+					expect( dropdown.isOpen ).to.be.true;
+					expect( inputValue ).to.equal( '/assets/sample.png' );
+					expect( insertImageViaUrlForm.label ).to.equal( 'Update image URL' );
+				} );
+			} );
+		} );
+
 		it( 'should remove all attributes from model except "src" when updating the image source URL', () => {
 			const viewDocument = editor.editing.view.document;
 			const dropdown = editor.ui.componentFactory.create( 'imageUpload' );

diff --git a/packages/ckeditor5-image/tests/imageupload/ui/imageuploadpanelview.js b/packages/ckeditor5-image/tests/imageupload/ui/imageuploadpanelview.js
@@ -178,7 +178,7 @@ describe( 'ImageUploadPanelView', () => {
 			} );
 			view.render();
 
-			sinon.assert.calledWithExactly( spy.getCall( 0 ), view._integrations.get( 0 ).element );
+			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.getIntegration( 'insertImageViaUrl' ).element );
 			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.insertButtonView.element );
 			sinon.assert.calledWithExactly( spy.getCall( 2 ), view.cancelButtonView.element );
 		} );
@@ -224,7 +224,7 @@ describe( 'ImageUploadPanelView', () => {
 
 			event.stopPropagation = spy;
 
-			view._integrations.get( 0 ).element.dispatchEvent( event );
+			view.getIntegration( 'insertImageViaUrl' ).element.dispatchEvent( event );
 			sinon.assert.calledOnce( spy );
 		} );
 
@@ -238,7 +238,7 @@ describe( 'ImageUploadPanelView', () => {
 
 				// Mock the url input is focused.
 				view.focusTracker.isFocused = true;
-				view.focusTracker.focusedElement = view._integrations.get( 0 ).element;
+				view.focusTracker.focusedElement = view.getIntegration( 'insertImageViaUrl' ).element;
 
 				const spy = sinon.spy( view.insertButtonView, 'focus' );
 
@@ -272,7 +272,7 @@ describe( 'ImageUploadPanelView', () => {
 
 	describe( 'focus()', () => {
 		it( 'should focus on the first integration', () => {
-			const spy = sinon.spy( view._integrations.get( 0 ), 'focus' );
+			const spy = sinon.spy( view.getIntegration( 'insertImageViaUrl' ), 'focus' );
 
 			view.focus();
 
@@ -282,7 +282,7 @@ describe( 'ImageUploadPanelView', () => {
 
 	describe( 'Insert image via URL integration input', () => {
 		it( 'should be bound with #imageURLInputValue', () => {
-			const form = view._integrations.get( 0 );
+			const form = view.getIntegration( 'insertImageViaUrl' );
 
 			form.fieldView.element.value = 'abc';
 			form.fieldView.fire( 'input' );

diff --git a/packages/ckeditor5-image/tests/manual/imageuploadviaurl.js b/packages/ckeditor5-image/tests/manual/imageuploadviaurl.js
@@ -47,7 +47,7 @@ ClassicEditor
 		}
 	} )
 	.then( editor => {
-		window.editor2 = editor;
+		window.editor = editor;
 
 		// Register fake adapter.
 		editor.plugins.get( 'FileRepository' ).createUploadAdapter = loader => {