From e3907cf4fe3bba538b83c2b0e7b3d9f8a6627ece Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 28 Aug 2020 15:42:06 +0200 Subject: [PATCH 1/7] Change the insertImageViaUrl form label depending on whether the image is currently selected or not. --- packages/ckeditor5-image/src/imageupload/imageuploadui.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/ckeditor5-image/src/imageupload/imageuploadui.js b/packages/ckeditor5-image/src/imageupload/imageuploadui.js index ced7f7374fb..2148742d043 100644 --- 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' ); } } } ); From 204008a41278c41eaaafe15aff4d0d3a3d6b3561 Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 28 Aug 2020 15:42:57 +0200 Subject: [PATCH 2/7] Add getIntegration() method. --- .../src/imageupload/ui/imageuploadpanelview.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js b/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js index 0bc63536412..75d7d76695b 100644 --- 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,17 @@ export default class ImageUploadPanelView extends View { }, { priority: 'high' } ); } + /** + * Returns a view for 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. * From 3b7e7cd64d3d667711c485809a03a21306fbd56c Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 28 Aug 2020 16:01:14 +0200 Subject: [PATCH 3/7] Update tests. --- .../tests/imageupload/imageuploadui.js | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) diff --git a/packages/ckeditor5-image/tests/imageupload/imageuploadui.js b/packages/ckeditor5-image/tests/imageupload/imageuploadui.js index 3128b80d98c..e6174c4cfd4 100644 --- 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( '

test

' ); + + 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( '
' ); + + 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' ); From 2ef8fca56bab6737cfdcd7f64c4d5510bcc90882 Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 28 Aug 2020 16:06:31 +0200 Subject: [PATCH 4/7] Fix typo. --- .../ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js b/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js index 75d7d76695b..3cb92ddba05 100644 --- a/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js +++ b/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js @@ -216,7 +216,7 @@ export default class ImageUploadPanelView extends View { } /** - * Returns a view for the integration. + * Returns a view of the integration. * * @param {string} name The name of the integration. * From 71f7b8279d1defac49a2aa9bce3bf085dc8d65ab Mon Sep 17 00:00:00 2001 From: panr Date: Fri, 28 Aug 2020 16:08:03 +0200 Subject: [PATCH 5/7] Add string to context.json. --- packages/ckeditor5-image/lang/contexts.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ckeditor5-image/lang/contexts.json b/packages/ckeditor5-image/lang/contexts.json index f7e8ea5dc04..e6f8d8dd2b5 100644 --- 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" } From 8349d42efaf768fc12e0121c95536137ff383ef2 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Mon, 31 Aug 2020 10:29:27 +0200 Subject: [PATCH 6/7] Tests: Enabled inspector in the image upload via url manual test. --- packages/ckeditor5-image/tests/manual/imageuploadviaurl.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ckeditor5-image/tests/manual/imageuploadviaurl.js b/packages/ckeditor5-image/tests/manual/imageuploadviaurl.js index 8fc4ad61c89..cacc91fbc62 100644 --- 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 => { From 5d7799e7cac29d0b350d039b0cff8b27efa1f30f Mon Sep 17 00:00:00 2001 From: panr Date: Mon, 31 Aug 2020 12:41:46 +0200 Subject: [PATCH 7/7] Fixes after CR. --- .../src/imageupload/ui/imageuploadpanelview.js | 1 - .../tests/imageupload/ui/imageuploadpanelview.js | 10 +++++----- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js b/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js index 3cb92ddba05..9bb8277e958 100644 --- a/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js +++ b/packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js @@ -219,7 +219,6 @@ export default class ImageUploadPanelView extends View { * Returns a view of the integration. * * @param {string} name The name of the integration. - * * @returns {module:ui/view~View} */ getIntegration( name ) { diff --git a/packages/ckeditor5-image/tests/imageupload/ui/imageuploadpanelview.js b/packages/ckeditor5-image/tests/imageupload/ui/imageuploadpanelview.js index 8eb2776e246..73b16db3611 100644 --- 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' );