8
0
Просмотр исходного кода

Bring back old ImageUpload component.

panr 5 лет назад
Родитель
Сommit
8d9144868d

+ 1 - 4
packages/ckeditor5-image/src/imageupload/imageuploadcommand.js

@@ -44,10 +44,7 @@ export default class ImageUploadCommand extends Command {
 	 * @inheritDoc
 	 */
 	refresh() {
-		const imageElement = this.editor.model.document.selection.getSelectedElement();
-		const isImage = imageElement && imageElement.name === 'image' || false;
-
-		this.isEnabled = isImageAllowed( this.editor.model ) || isImage;
+		this.isEnabled = isImageAllowed( this.editor.model );
 	}
 
 	/**

+ 3 - 105
packages/ckeditor5-image/src/imageupload/imageuploadui.js

@@ -8,15 +8,12 @@
  */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import ImageUploadPanelView from './ui/imageuploadpanelview';
 
 import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbuttonview';
-import { createImageTypeRegExp, prepareIntegrations } from './utils';
+import { createImageTypeRegExp } from './utils';
 
 import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
 
-import { isImage } from '../image/utils';
-
 /**
  * The image upload button plugin.
  *
@@ -39,109 +36,10 @@ export default class ImageUploadUI extends Plugin {
 	 */
 	init() {
 		const editor = this.editor;
-		const isImageUploadPanelViewEnabled = !!editor.config.get( 'image.upload.panel.items' );
 
 		editor.ui.componentFactory.add( 'imageUpload', locale => {
-			if ( isImageUploadPanelViewEnabled ) {
-				return this._createDropdownView( locale );
-			} else {
-				return this._createFileDialogButtonView( locale );
-			}
-		} );
-	}
-
-	/**
-	 * Sets up the dropdown view.
-	 *
-	 * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdownView.
-	 * @param {module:image/imageupload/ui/imageuploadpanelview~ImageUploadPanelView} imageUploadView An imageUploadView.
-	 * @param {module:core/command~Command} command An imageUpload command
-	 *
-	 * @private
-	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
-	 */
-	_setUpDropdown( dropdownView, imageUploadView, command ) {
-		const editor = this.editor;
-		const t = editor.t;
-		const insertButtonView = imageUploadView.insertButtonView;
-		const insertImageViaUrlForm = imageUploadView.getIntegration( 'insertImageViaUrl' );
-
-		dropdownView.bind( 'isEnabled' ).to( command );
-
-		dropdownView.on( 'change:isOpen', () => {
-			const selectedElement = editor.model.document.selection.getSelectedElement();
-
-			if ( dropdownView.isOpen ) {
-				imageUploadView.focus();
-
-				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' );
-				}
-			}
-		} );
-
-		imageUploadView.delegate( 'submit', 'cancel' ).to( dropdownView );
-		this.delegate( 'cancel' ).to( dropdownView );
-
-		dropdownView.on( 'submit', () => {
-			closePanel();
-			onSubmit();
-		} );
-
-		dropdownView.on( 'cancel', () => {
-			closePanel();
+			return this._createFileDialogButtonView( locale );
 		} );
-
-		function onSubmit() {
-			const selectedElement = editor.model.document.selection.getSelectedElement();
-
-			if ( isImage( selectedElement ) ) {
-				editor.model.change( writer => {
-					writer.setAttribute( 'src', imageUploadView.imageURLInputValue, selectedElement );
-					writer.removeAttribute( 'srcset', selectedElement );
-					writer.removeAttribute( 'sizes', selectedElement );
-				} );
-			} else {
-				editor.execute( 'imageInsert', { source: imageUploadView.imageURLInputValue } );
-			}
-		}
-
-		function closePanel() {
-			editor.editing.view.focus();
-			dropdownView.isOpen = false;
-		}
-
-		return dropdownView;
-	}
-
-	/**
-	 * Creates the dropdown view.
-	 *
-	 * @param {module:utils/locale~Locale} locale The localization services instance.
-	 *
-	 * @private
-	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
-	 */
-	_createDropdownView( locale ) {
-		const editor = this.editor;
-		const imageUploadView = new ImageUploadPanelView( locale, prepareIntegrations( editor ) );
-		const command = editor.commands.get( 'imageUpload' );
-
-		const dropdownView = imageUploadView.dropdownView;
-		const panelView = dropdownView.panelView;
-		const splitButtonView = dropdownView.buttonView;
-
-		splitButtonView.actionView = this._createFileDialogButtonView( locale );
-
-		panelView.children.add( imageUploadView );
-
-		return this._setUpDropdown( dropdownView, imageUploadView, command );
 	}
 
 	/**
@@ -166,7 +64,7 @@ export default class ImageUploadUI extends Plugin {
 		} );
 
 		fileDialogButtonView.buttonView.set( {
-			label: t( 'Insert image' ),
+			label: t( 'Upload image' ),
 			icon: imageIcon,
 			tooltip: true
 		} );

+ 0 - 103
packages/ckeditor5-image/src/imageupload/ui/imageuploadformrowview.js

@@ -1,103 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module image/imageupload/ui/imageuploadformrowview
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-
-import '../../../theme/imageuploadformrowview.css';
-
-/**
- * The class representing a single row in a complex form,
- * used by {@link module:image/imageupload/ui/imageuploadpanelview~ImageUploadPanelView}.
- *
- * **Note**: For now this class is private. When more use cases arrive (beyond ckeditor5-table and ckeditor5-image),
- * it will become a component in ckeditor5-ui.
- *
- * @private
- * @extends module:ui/view~View
- */
-export default class ImageUploadFormRowView extends View {
-	/**
-	 * Creates an instance of the form row class.
-	 *
-	 * @param {module:utils/locale~Locale} locale The locale instance.
-	 * @param {Object} options
-	 * @param {Array.<module:ui/view~View>} [options.children]
-	 * @param {String} [options.class]
-	 * @param {module:ui/view~View} [options.labelView] When passed, the row gets the `group` and `aria-labelledby`
-	 * DOM attributes and gets described by the label.
-	 */
-	constructor( locale, options = {} ) {
-		super( locale );
-
-		const bind = this.bindTemplate;
-
-		/**
-		 * An additional CSS class added to the {@link #element}.
-		 *
-		 * @observable
-		 * @member {String} #class
-		 */
-		this.set( 'class', options.class || null );
-
-		/**
-		 * A collection of row items (buttons, dropdowns, etc.).
-		 *
-		 * @readonly
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this.children = this.createCollection();
-
-		if ( options.children ) {
-			options.children.forEach( child => this.children.add( child ) );
-		}
-
-		/**
-		 * The role property reflected by the `role` DOM attribute of the {@link #element}.
-		 *
-		 * **Note**: Used only when a `labelView` is passed to constructor `options`.
-		 *
-		 * @private
-		 * @observable
-		 * @member {String} #role
-		 */
-		this.set( '_role', null );
-
-		/**
-		 * The ARIA property reflected by the `aria-labelledby` DOM attribute of the {@link #element}.
-		 *
-		 * **Note**: Used only when a `labelView` is passed to constructor `options`.
-		 *
-		 * @private
-		 * @observable
-		 * @member {String} #ariaLabelledBy
-		 */
-		this.set( '_ariaLabelledBy', null );
-
-		if ( options.labelView ) {
-			this.set( {
-				_role: 'group',
-				_ariaLabelledBy: options.labelView.id
-			} );
-		}
-
-		this.setTemplate( {
-			tag: 'div',
-			attributes: {
-				class: [
-					'ck',
-					'ck-form__row',
-					bind.to( 'class' )
-				],
-				role: bind.to( '_role' ),
-				'aria-labelledby': bind.to( '_ariaLabelledBy' )
-			},
-			children: this.children
-		} );
-	}
-}

+ 0 - 315
packages/ckeditor5-image/src/imageupload/ui/imageuploadpanelview.js

@@ -1,315 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/**
- * @module image/imageupload/ui/imageuploadpanelview
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
-import ImageUploadFormRowView from './imageuploadformrowview';
-import { createDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
-
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
-import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-
-import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
-import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
-import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
-
-import '../../../theme/imageupload.css';
-
-/**
- * The insert an image via URL view controller class.
- *
- * See {@link module:image/imageupload/ui/imageuploadpanelview~ImageUploadPanelView}.
- *
- * @extends module:ui/view~View
- */
-export default class ImageUploadPanelView extends View {
-	/**
-	 * Creates a view for the dropdown panel of {@link module:image/imageupload/imageuploadui~ImageUploadUI}.
-	 *
-	 * @param {module:utils/locale~Locale} [locale] The localization services instance..
-	 * @param {Object} [integrations] Integrations object that contain
-	 * components (or tokens for components) to be shown in the panel view.
-	 */
-	constructor( locale, integrations ) {
-		super( locale );
-
-		const { insertButtonView, cancelButtonView } = this._createActionButtons( locale );
-
-		/**
-		 * The "insert/update" button view.
-		 *
-		 * @member {module:ui/button/buttonview~ButtonView}
-		 */
-		this.insertButtonView = insertButtonView;
-
-		/**
-		 * The "cancel" button view.
-		 *
-		 * @member {module:ui/button/buttonview~ButtonView}
-		 */
-		this.cancelButtonView = cancelButtonView;
-
-		/**
-		 * The dropdown view.
-		 *
-		 * @member {module:ui/dropdown/dropdownview~DropdownView}
-		 */
-		this.dropdownView = this._createDropdownView( locale );
-
-		/**
-		 * Value of the URL input.
-		 *
-		 * @member {String} #imageURLInputValue
-		 * @observable
-		 */
-		this.set( 'imageURLInputValue', '' );
-
-		/**
-		 * Tracks information about DOM focus in the form.
-		 *
-		 * @readonly
-		 * @member {module:utils/focustracker~FocusTracker}
-		 */
-		this.focusTracker = new FocusTracker();
-
-		/**
-		 * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
-		 *
-		 * @readonly
-		 * @member {module:utils/keystrokehandler~KeystrokeHandler}
-		 */
-		this.keystrokes = new KeystrokeHandler();
-
-		/**
-		 * A collection of views that can be focused in the form.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/viewcollection~ViewCollection}
-		 */
-		this._focusables = new ViewCollection();
-
-		/**
-		 * Helps cycling over {@link #_focusables} in the form.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/focuscycler~FocusCycler}
-		 */
-		this._focusCycler = new FocusCycler( {
-			focusables: this._focusables,
-			focusTracker: this.focusTracker,
-			keystrokeHandler: this.keystrokes,
-			actions: {
-				// Navigate form fields backwards using the Shift + Tab keystroke.
-				focusPrevious: 'shift + tab',
-
-				// Navigate form fields forwards using the Tab key.
-				focusNext: 'tab'
-			}
-		} );
-
-		/**
-		 * Collection of the defined integrations for inserting the images.
-		 *
-		 * @private
-		 * @member {module:utils/collection~Collection}
-		 */
-		this.set( '_integrations', new Collection() );
-
-		if ( integrations ) {
-			for ( const [ integration, integrationView ] of Object.entries( integrations ) ) {
-				if ( integration === 'insertImageViaUrl' ) {
-					integrationView.fieldView.bind( 'value' ).to( this, 'imageURLInputValue', value => value || '' );
-
-					integrationView.fieldView.on( 'input', () => {
-						this.imageURLInputValue = integrationView.fieldView.element.value;
-					} );
-				}
-
-				integrationView.name = integration;
-
-				this._integrations.add( integrationView );
-			}
-		}
-
-		this.setTemplate( {
-			tag: 'form',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-image-upload-form'
-				],
-
-				tabindex: '-1'
-			},
-
-			children: [
-				...this._integrations,
-				new ImageUploadFormRowView( locale, {
-					children: [
-						this.insertButtonView,
-						this.cancelButtonView
-					],
-					class: 'ck-image-upload-form__action-row'
-				} )
-			]
-		} );
-	}
-
-	/**
-	 * @inheritDoc
-	 */
-	render() {
-		super.render();
-
-		submitHandler( {
-			view: this
-		} );
-
-		const childViews = [
-			...this._integrations,
-			this.insertButtonView,
-			this.cancelButtonView
-		];
-
-		childViews.forEach( v => {
-			// Register the view as focusable.
-			this._focusables.add( v );
-
-			// Register the view in the focus tracker.
-			this.focusTracker.add( v.element );
-		} );
-
-		// Start listening for the keystrokes coming from #element.
-		this.keystrokes.listenTo( this.element );
-
-		const stopPropagation = data => data.stopPropagation();
-
-		// Since the form is in the dropdown panel which is a child of the toolbar, the toolbar's
-		// keystroke handler would take over the key management in the URL input. We need to prevent
-		// this ASAP. Otherwise, the basic caret movement using the arrow keys will be impossible.
-		this.keystrokes.set( 'arrowright', stopPropagation );
-		this.keystrokes.set( 'arrowleft', stopPropagation );
-		this.keystrokes.set( 'arrowup', stopPropagation );
-		this.keystrokes.set( 'arrowdown', stopPropagation );
-
-		// Intercept the "selectstart" event, which is blocked by default because of the default behavior
-		// of the DropdownView#panelView.
-		// TODO: blocking "selectstart" in the #panelView should be configurable per–drop–down instance.
-		this.listenTo( childViews[ 0 ].element, 'selectstart', ( evt, domEvt ) => {
-			domEvt.stopPropagation();
-		}, { 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.
-	 *
-	 * @param {module:utils/locale~Locale} locale The localization services instance.
-	 *
-	 * @private
-	 * @returns {module:ui/dropdown/dropdownview~DropdownView}
-	 */
-	_createDropdownView( locale ) {
-		const t = locale.t;
-		const dropdownView = createDropdown( locale, SplitButtonView );
-		const splitButtonView = dropdownView.buttonView;
-		const panelView = dropdownView.panelView;
-
-		splitButtonView.set( {
-			label: t( 'Insert image' ),
-			icon: imageIcon,
-			tooltip: true
-		} );
-
-		panelView.extendTemplate( {
-			attributes: {
-				class: 'ck-image-upload__panel'
-			}
-		} );
-
-		return dropdownView;
-	}
-
-	/**
-	 * Creates the following form controls:
-	 *
-	 * * {@link #insertButtonView},
-	 * * {@link #cancelButtonView}.
-	 *
-	 * @param {module:utils/locale~Locale} locale The localization services instance.
-	 *
-	 * @private
-	 * @returns {Object.<String,module:ui/view~View>}
-	 */
-	_createActionButtons( locale ) {
-		const t = locale.t;
-		const insertButtonView = new ButtonView( locale );
-		const cancelButtonView = new ButtonView( locale );
-
-		insertButtonView.set( {
-			label: t( 'Insert' ),
-			icon: checkIcon,
-			class: 'ck-button-save',
-			type: 'submit',
-			withText: true,
-			isEnabled: this.imageURLInputValue
-		} );
-
-		cancelButtonView.set( {
-			label: t( 'Cancel' ),
-			icon: cancelIcon,
-			class: 'ck-button-cancel',
-			withText: true
-		} );
-
-		insertButtonView.bind( 'isEnabled' ).to( this, 'imageURLInputValue' );
-		insertButtonView.delegate( 'execute' ).to( this, 'submit' );
-		cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );
-
-		return { insertButtonView, cancelButtonView };
-	}
-
-	/**
-	 * Focuses the fist {@link #_focusables} in the form.
-	 */
-	focus() {
-		this._focusCycler.focusFirst();
-	}
-}
-
-/**
- * Fired when the form view is submitted (when one of the children triggered the submit event),
- * e.g. click on {@link #insertButtonView}.
- *
- * @event submit
- */
-
-/**
- * Fired when the form view is canceled, e.g. click on {@link #cancelButtonView}.
- *
- * @event cancel
- */

+ 0 - 412
packages/ckeditor5-image/tests/imageupload/imageuploadui.js

@@ -9,7 +9,6 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Image from '../../src/image';
-import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
 import FileDialogButtonView from '@ckeditor/ckeditor5-upload/src/ui/filedialogbuttonview';
 import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
 import ImageUploadUI from '../../src/imageupload/imageuploadui';
@@ -17,11 +16,6 @@ import ImageUploadEditing from '../../src/imageupload/imageuploadediting';
 import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
 import Notification from '@ckeditor/ckeditor5-ui/src/notification/notification';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
-import EventInfo from '@ckeditor/ckeditor5-utils/src/eventinfo';
-import DomEventData from '@ckeditor/ckeditor5-engine/src/view/observer/domeventdata';
-import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
-import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
 import { createNativeFileMock, UploadAdapterMock } from '@ckeditor/ckeditor5-upload/tests/_utils/mocks';
 import { setData as setModelData, getData as getModelData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
@@ -206,410 +200,4 @@ describe( 'ImageUploadUI', () => {
 			);
 		} );
 	} );
-
-	describe( 'dropdown', () => {
-		beforeEach( () => {
-			editorElement = document.createElement( 'div' );
-			document.body.appendChild( editorElement );
-
-			return ClassicEditor
-				.create( editorElement, {
-					plugins: [ Paragraph, Image, ImageUploadEditing, ImageUploadUI, FileRepository, UploadAdapterPluginMock, Clipboard ],
-					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl'
-								]
-							}
-						}
-					}
-				} )
-				.then( newEditor => {
-					editor = newEditor;
-					model = editor.model;
-
-					// Hide all notifications (prevent alert() calls).
-					const notification = editor.plugins.get( Notification );
-					notification.on( 'show', evt => evt.stop() );
-				} );
-		} );
-
-		afterEach( () => {
-			editorElement.remove();
-
-			return editor.destroy();
-		} );
-		it( 'should register imageUpload dropdown', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-
-			expect( button ).to.be.instanceOf( DropdownView );
-		} );
-
-		it( 'should set proper accepted mime-types for imageUpload button as defined in configuration', () => {
-			editor.config.set( 'image.upload.types', [ 'svg+xml', 'jpeg', 'vnd.microsoft.icon', 'x-xbitmap' ] );
-
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
-			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
-
-			expect( fileDialogButton.acceptedType ).to.equal( 'image/svg+xml,image/jpeg,image/vnd.microsoft.icon,image/x-xbitmap' );
-		} );
-
-		it( 'should be disabled while ImageUploadCommand is disabled', () => {
-			const button = editor.ui.componentFactory.create( 'imageUpload' );
-			const command = editor.commands.get( 'imageUpload' );
-
-			command.isEnabled = true;
-
-			expect( button.buttonView.isEnabled ).to.true;
-
-			command.isEnabled = false;
-
-			expect( button.buttonView.isEnabled ).to.false;
-		} );
-
-		// ckeditor5-upload/#77
-		it( 'should be properly bound with ImageUploadCommand', () => {
-			const dropdown = editor.ui.componentFactory.create( 'imageUpload' );
-			const command = editor.commands.get( 'imageUpload' );
-			const spy = sinon.spy();
-
-			dropdown.render();
-
-			dropdown.buttonView.on( 'execute', spy );
-
-			command.isEnabled = false;
-
-			dropdown.buttonView.element.dispatchEvent( new Event( 'click' ) );
-
-			sinon.assert.notCalled( spy );
-		} );
-
-		it( 'should execute imageUpload command', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
-			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
-			const files = [ createNativeFileMock() ];
-
-			fileDialogButton.fire( 'done', files );
-			sinon.assert.calledOnce( executeStub );
-			expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
-			expect( executeStub.firstCall.args[ 1 ].file ).to.deep.equal( files );
-		} );
-
-		it( 'should execute imageUpload command with multiple files', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
-			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
-			const files = [ createNativeFileMock(), createNativeFileMock(), createNativeFileMock() ];
-
-			fileDialogButton.fire( 'done', files );
-			sinon.assert.calledOnce( executeStub );
-			expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
-			expect( executeStub.firstCall.args[ 1 ].file ).to.deep.equal( files );
-		} );
-
-		it( 'should optimize the insertion position', () => {
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
-			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
-			const files = [ createNativeFileMock() ];
-
-			setModelData( model, '<paragraph>f[]oo</paragraph>' );
-
-			fileDialogButton.fire( 'done', files );
-
-			const id = fileRepository.getLoader( files[ 0 ] ).id;
-
-			expect( getModelData( model ) ).to.equal(
-				`[<image uploadId="${ id }" uploadStatus="reading"></image>]` +
-			'<paragraph>foo</paragraph>'
-			);
-		} );
-
-		it( 'should correctly insert multiple files', () => {
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
-			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
-			const files = [ createNativeFileMock(), createNativeFileMock() ];
-
-			setModelData( model, '<paragraph>foo[]</paragraph><paragraph>bar</paragraph>' );
-
-			fileDialogButton.fire( 'done', files );
-
-			const id1 = fileRepository.getLoader( files[ 0 ] ).id;
-			const id2 = fileRepository.getLoader( files[ 1 ] ).id;
-
-			expect( getModelData( model ) ).to.equal(
-				'<paragraph>foo</paragraph>' +
-			`<image uploadId="${ id1 }" uploadStatus="reading"></image>` +
-			`[<image uploadId="${ id2 }" uploadStatus="reading"></image>]` +
-			'<paragraph>bar</paragraph>'
-			);
-		} );
-
-		it( 'should not execute imageUpload if the file is not an image', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
-			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
-			const file = {
-				type: 'media/mp3',
-				size: 1024
-			};
-
-			fileDialogButton.fire( 'done', [ file ] );
-			sinon.assert.notCalled( executeStub );
-		} );
-
-		it( 'should work even if the FileList does not support iterators', () => {
-			const executeStub = sinon.stub( editor, 'execute' );
-			const plugin = editor.plugins.get( 'ImageUploadUI' );
-			const fileDialogButton = plugin._createFileDialogButtonView( editor.locale );
-			const files = {
-				0: createNativeFileMock(),
-				length: 1
-			};
-
-			fileDialogButton.fire( 'done', files );
-			sinon.assert.calledOnce( executeStub );
-			expect( executeStub.firstCall.args[ 0 ] ).to.equal( 'imageUpload' );
-			expect( executeStub.firstCall.args[ 1 ].file ).to.deep.equal( [ files[ 0 ] ] );
-		} );
-
-		describe( 'dropdown action button', () => {
-			it( 'should be an instance of FileDialogButtonView', () => {
-				const dropdown = editor.ui.componentFactory.create( 'imageUpload' );
-
-				expect( dropdown.buttonView.actionView ).to.be.instanceOf( FileDialogButtonView );
-			} );
-		} );
-
-		describe( 'dropdown panel buttons', () => {
-			it( 'should have "Update" label on submit button when URL input is already filled', () => {
-				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 img = viewDocument.selection.getSelectedElement();
-
-				const data = fakeEventData();
-				const eventInfo = new EventInfo( img, 'click' );
-				const domEventDataMock = new DomEventData( viewDocument, eventInfo, data );
-
-				viewDocument.fire( 'click', domEventDataMock );
-
-				dropdown.isOpen = true;
-
-				const inputValue = dropdown.panelView.children.first.imageURLInputValue;
-
-				expect( dropdown.isOpen ).to.be.true;
-				expect( inputValue ).to.equal( '/assets/sample.png' );
-				expect( dropdown.panelView.children.first.insertButtonView.label ).to.equal( 'Update' );
-			} );
-
-			it( 'should have "Insert" label on submit button on uploading a 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;
-
-				expect( dropdown.isOpen ).to.be.true;
-				expect( inputValue ).to.equal( '' );
-				expect( dropdown.panelView.children.first.insertButtonView.label ).to.equal( 'Insert' );
-			} );
-		} );
-
-		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' );
-			const insertButtonView = dropdown.panelView.children.first.insertButtonView;
-			const commandSpy = sinon.spy( editor.commands.get( 'imageInsert' ), 'execute' );
-			const submitSpy = sinon.spy();
-
-			dropdown.isOpen = true;
-
-			editor.setData( '<figure><img src="image-url-800w.jpg"' +
-			'srcset="image-url-480w.jpg 480w,image-url-800w.jpg 800w"' +
-			'sizes="(max-width: 600px) 480px,800px"' +
-			'alt="test-image"></figure>' );
-
-			editor.editing.view.change( writer => {
-				writer.setSelection( viewDocument.getRoot().getChild( 0 ), 'on' );
-			} );
-
-			const selectedElement = editor.model.document.selection.getSelectedElement();
-
-			expect( selectedElement.getAttribute( 'src' ) ).to.equal( 'image-url-800w.jpg' );
-			expect( selectedElement.hasAttribute( 'srcset' ) ).to.be.true;
-
-			dropdown.panelView.children.first.imageURLInputValue = '/assets/sample3.png';
-
-			dropdown.on( 'submit', submitSpy );
-
-			insertButtonView.fire( 'execute' );
-
-			sinon.assert.notCalled( commandSpy );
-			sinon.assert.calledOnce( submitSpy );
-			expect( dropdown.isOpen ).to.be.false;
-			expect( selectedElement.getAttribute( 'src' ) ).to.equal( '/assets/sample3.png' );
-			expect( selectedElement.hasAttribute( 'srcset' ) ).to.be.false;
-			expect( selectedElement.hasAttribute( 'sizes' ) ).to.be.false;
-		} );
-
-		describe( 'events', () => {
-			it( 'should emit "submit" event when clicking on submit button', () => {
-				const dropdown = editor.ui.componentFactory.create( 'imageUpload' );
-				const insertButtonView = dropdown.panelView.children.first.insertButtonView;
-				const commandSpy = sinon.spy( editor.commands.get( 'imageInsert' ), 'execute' );
-				const submitSpy = sinon.spy();
-
-				dropdown.isOpen = true;
-
-				dropdown.on( 'submit', submitSpy );
-
-				insertButtonView.fire( 'execute' );
-
-				expect( dropdown.isOpen ).to.be.false;
-				sinon.assert.calledOnce( commandSpy );
-				sinon.assert.calledOnce( submitSpy );
-			} );
-
-			it( 'should emit "cancel" event when clicking on cancel button', () => {
-				const dropdown = editor.ui.componentFactory.create( 'imageUpload' );
-				const cancelButtonView = dropdown.panelView.children.first.cancelButtonView;
-				const commandSpy = sinon.spy( editor.commands.get( 'imageInsert' ), 'execute' );
-				const cancelSpy = sinon.spy();
-
-				dropdown.isOpen = true;
-
-				dropdown.on( 'cancel', cancelSpy );
-
-				cancelButtonView.fire( 'execute' );
-
-				expect( dropdown.isOpen ).to.be.false;
-				sinon.assert.notCalled( commandSpy );
-				sinon.assert.calledOnce( cancelSpy );
-			} );
-		} );
-
-		it( 'should inject integrations to the dropdown panel view from the config', async () => {
-			const editor = await ClassicEditor
-				.create( editorElement, {
-					plugins: [
-						CKFinder,
-						Paragraph,
-						Image,
-						ImageUploadEditing,
-						ImageUploadUI,
-						FileRepository,
-						UploadAdapterPluginMock,
-						Clipboard
-					],
-					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl',
-									'openCKFinder'
-								]
-							}
-						}
-					}
-				} );
-
-			const dropdown = editor.ui.componentFactory.create( 'imageUpload' );
-
-			expect( dropdown.panelView.children.first._integrations.length ).to.equal( 2 );
-			expect( dropdown.panelView.children.first._integrations.first ).to.be.instanceOf( LabeledFieldView );
-			expect( dropdown.panelView.children.first._integrations.last ).to.be.instanceOf( ButtonView );
-
-			editor.destroy();
-		} );
-	} );
 } );
-
-function fakeEventData() {
-	return {
-		preventDefault: sinon.spy()
-	};
-}

+ 0 - 100
packages/ckeditor5-image/tests/imageupload/ui/imageuploadformrowview.js

@@ -1,100 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-import View from '@ckeditor/ckeditor5-ui/src/view';
-import ImageUploadFormRowView from '../../../src/imageupload/ui/imageuploadformrowview';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
-
-describe( 'ImageUploadFormRowView', () => {
-	let view, locale;
-
-	beforeEach( () => {
-		locale = { t: val => val };
-		view = new ImageUploadFormRowView( locale );
-		view.render();
-	} );
-
-	afterEach( () => {
-		view.element.remove();
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'should set view#locale', () => {
-			expect( view.locale ).to.equal( locale );
-		} );
-
-		it( 'should create view#children collection', () => {
-			expect( view.children ).to.be.instanceOf( ViewCollection );
-			expect( view.children ).to.have.length( 0 );
-		} );
-
-		it( 'should set view#class', () => {
-			expect( view.class ).to.be.null;
-		} );
-
-		it( 'should set the template', () => {
-			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
-			expect( view.element.classList.contains( 'ck-form__row' ) ).to.be.true;
-		} );
-
-		describe( 'options', () => {
-			it( 'should set view#class when class was passed', () => {
-				const view = new ImageUploadFormRowView( locale, {
-					class: 'foo'
-				} );
-
-				expect( view.class ).to.equal( 'foo' );
-
-				view.destroy();
-			} );
-
-			it( 'should fill view#children when children were passed', () => {
-				const view = new ImageUploadFormRowView( locale, {
-					children: [
-						new View()
-					]
-				} );
-
-				expect( view.children ).to.have.length( 1 );
-
-				view.destroy();
-			} );
-
-			it( 'should use a label view when passed', () => {
-				const labelView = new View();
-				labelView.id = '123';
-
-				const view = new ImageUploadFormRowView( locale, {
-					labelView
-				} );
-
-				view.render();
-
-				expect( view.element.getAttribute( 'role' ) ).to.equal( 'group' );
-				expect( view.element.getAttribute( 'aria-labelledby' ) ).to.equal( '123' );
-
-				view.destroy();
-			} );
-		} );
-
-		describe( 'template bindings', () => {
-			it( 'should bind #class to the template', () => {
-				view.class = 'foo';
-				expect( view.element.classList.contains( 'foo' ) ).to.be.true;
-			} );
-
-			it( 'should bind #children to the template', () => {
-				const child = new View();
-				child.setTemplate( { tag: 'div' } );
-
-				view.children.add( child );
-
-				expect( view.element.firstChild ).to.equal( child.element );
-
-				view.destroy();
-			} );
-		} );
-	} );
-} );

+ 0 - 298
packages/ckeditor5-image/tests/imageupload/ui/imageuploadpanelview.js

@@ -1,298 +0,0 @@
-/**
- * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
- */
-
-/* globals Event */
-
-import DropdownView from '@ckeditor/ckeditor5-ui/src/dropdown/dropdownview';
-import LabeledFieldView from '@ckeditor/ckeditor5-ui/src/labeledfield/labeledfieldview';
-
-import ImageUploadPanelView from '../../../src/imageupload/ui/imageuploadpanelview';
-import ImageUploadFormRowView from '../../../src/imageupload/ui/imageuploadformrowview';
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
-import Collection from '@ckeditor/ckeditor5-utils/src/collection';
-
-import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
-import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
-import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
-import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
-import View from '@ckeditor/ckeditor5-ui/src/view';
-
-import { createLabeledInputView } from '../../../src/imageupload/utils';
-
-import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
-
-describe( 'ImageUploadPanelView', () => {
-	let view;
-
-	beforeEach( () => {
-		view = new ImageUploadPanelView( { t: val => val }, {
-			'insertImageViaUrl': createLabeledInputView( { t: val => val } )
-		} );
-		view.render();
-	} );
-
-	afterEach( () => {
-		sinon.restore();
-	} );
-
-	describe( 'constructor()', () => {
-		it( 'should contain instance of ButtonView as #insertButtonView', () => {
-			expect( view.insertButtonView ).to.be.instanceOf( ButtonView );
-			expect( view.insertButtonView.label ).to.equal( 'Insert' );
-		} );
-
-		it( 'should contain instance of ButtonView as #cancelButtonView', () => {
-			expect( view.cancelButtonView ).to.be.instanceOf( ButtonView );
-			expect( view.cancelButtonView.label ).to.equal( 'Cancel' );
-		} );
-
-		it( 'should contain instance of DropdownView as #dropdownView', () => {
-			expect( view.dropdownView ).to.be.instanceOf( DropdownView );
-		} );
-
-		it( 'should contain instance of SplitButtonView for the #dropdownView button', () => {
-			expect( view.dropdownView ).to.be.instanceOf( DropdownView );
-			expect( view.dropdownView.buttonView ).to.be.instanceOf( SplitButtonView );
-		} );
-
-		it( 'should contain #imageURLInputValue', () => {
-			expect( view.imageURLInputValue ).to.equal( '' );
-		} );
-
-		it( 'should contain #_integrations as an instance of Collection', () => {
-			expect( view._integrations ).to.be.instanceOf( Collection );
-		} );
-
-		describe( 'integrations', () => {
-			it( 'should contain 2 integrations when they were passed to the ImageUploadPanelView as integrations object', () => {
-				const view = new ImageUploadPanelView( { t: val => val }, {
-					'integration1': new View(),
-					'integration2': new ButtonView()
-				} );
-
-				expect( view._integrations ).to.be.instanceOf( Collection );
-				expect( view._integrations.length ).to.equal( 2 );
-			} );
-
-			it( 'should contain insertImageViaUrl view when it is passed via integrations object', () => {
-				const view = new ImageUploadPanelView( { t: val => val }, {
-					'insertImageViaUrl': createLabeledInputView( { t: val => val } ),
-					'integration1': new View(),
-					'integration2': new ButtonView()
-				} );
-
-				expect( view._integrations ).to.be.instanceOf( Collection );
-				expect( view._integrations.length ).to.equal( 3 );
-				expect( view._integrations.first ).to.be.instanceOf( LabeledFieldView );
-			} );
-
-			it( 'should contain no integrations when they were not provided', () => {
-				const view = new ImageUploadPanelView( { t: val => val } );
-
-				expect( view._integrations ).to.be.instanceOf( Collection );
-				expect( view._integrations.length ).to.equal( 0 );
-			} );
-		} );
-
-		it( 'should create #focusTracker instance', () => {
-			expect( view.focusTracker ).to.be.instanceOf( FocusTracker );
-		} );
-
-		it( 'should create #keystrokes instance', () => {
-			expect( view.keystrokes ).to.be.instanceOf( KeystrokeHandler );
-		} );
-
-		it( 'should create #_focusCycler instance', () => {
-			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
-		} );
-
-		it( 'should create #_focusables view collection', () => {
-			expect( view._focusables ).to.be.instanceOf( ViewCollection );
-		} );
-
-		describe( 'events', () => {
-			it( 'should fire "submit" event on insertButtonView#execute', () => {
-				const spy = sinon.spy();
-
-				view.on( 'submit', spy );
-
-				view.insertButtonView.fire( 'execute' );
-
-				expect( spy.calledOnce ).to.true;
-			} );
-
-			it( 'should fire "cancel" event on cancelButtonView#execute', () => {
-				const spy = sinon.spy();
-
-				view.on( 'cancel', spy );
-
-				view.cancelButtonView.fire( 'execute' );
-
-				expect( spy.calledOnce ).to.true;
-			} );
-		} );
-	} );
-
-	describe( 'template', () => {
-		it( 'should create element from the template', () => {
-			expect( view.element.classList.contains( 'ck' ) ).to.true;
-			expect( view.element.classList.contains( 'ck-image-upload-form' ) ).to.true;
-			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
-		} );
-
-		it( 'should have form row view with buttons', () => {
-			expect( view.template.children[ 1 ] ).to.be.instanceOf( ImageUploadFormRowView );
-			expect( view.template.children[ 1 ].children.first ).to.equal( view.insertButtonView );
-			expect( view.template.children[ 1 ].children.last ).to.equal( view.cancelButtonView );
-		} );
-	} );
-
-	describe( 'render()', () => {
-		it( 'should register child views in #_focusables', () => {
-			expect( view._focusables.map( f => f ) ).to.have.members( [
-				...view._integrations,
-				view.insertButtonView,
-				view.cancelButtonView
-			] );
-		} );
-
-		it( 'should register child views\' #element in #focusTracker with no integrations', () => {
-			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
-
-			view = new ImageUploadPanelView( { t: () => {} } );
-			view.render();
-
-			sinon.assert.calledWithExactly( spy.getCall( 0 ), view.insertButtonView.element );
-			sinon.assert.calledWithExactly( spy.getCall( 1 ), view.cancelButtonView.element );
-		} );
-
-		it( 'should register child views\' #element in #focusTracker with "insertImageViaUrl" integration', () => {
-			const spy = testUtils.sinon.spy( FocusTracker.prototype, 'add' );
-
-			view = new ImageUploadPanelView( { t: () => {} }, {
-				'insertImageViaUrl': createLabeledInputView( { t: val => val } )
-			} );
-			view.render();
-
-			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 );
-		} );
-
-		it( 'starts listening for #keystrokes coming from #element', () => {
-			view = new ImageUploadPanelView( { t: () => {} } );
-
-			const spy = sinon.spy( view.keystrokes, 'listenTo' );
-
-			view.render();
-			sinon.assert.calledOnce( spy );
-			sinon.assert.calledWithExactly( spy, view.element );
-		} );
-
-		it( 'intercepts the arrow* events and overrides the default toolbar behavior', () => {
-			const keyEvtData = {
-				stopPropagation: sinon.spy()
-			};
-
-			keyEvtData.keyCode = keyCodes.arrowdown;
-			view.keystrokes.press( keyEvtData );
-			sinon.assert.calledOnce( keyEvtData.stopPropagation );
-
-			keyEvtData.keyCode = keyCodes.arrowup;
-			view.keystrokes.press( keyEvtData );
-			sinon.assert.calledTwice( keyEvtData.stopPropagation );
-
-			keyEvtData.keyCode = keyCodes.arrowleft;
-			view.keystrokes.press( keyEvtData );
-			sinon.assert.calledThrice( keyEvtData.stopPropagation );
-
-			keyEvtData.keyCode = keyCodes.arrowright;
-			view.keystrokes.press( keyEvtData );
-			sinon.assert.callCount( keyEvtData.stopPropagation, 4 );
-		} );
-
-		it( 'intercepts the "selectstart" event of the first integration element with the high priority', () => {
-			const spy = sinon.spy();
-			const event = new Event( 'selectstart', {
-				bubbles: true,
-				cancelable: true
-			} );
-
-			event.stopPropagation = spy;
-
-			view.getIntegration( 'insertImageViaUrl' ).element.dispatchEvent( event );
-			sinon.assert.calledOnce( spy );
-		} );
-
-		describe( 'activates keyboard navigation for the toolbar', () => {
-			it( 'so "tab" focuses the next focusable item', () => {
-				const keyEvtData = {
-					keyCode: keyCodes.tab,
-					preventDefault: sinon.spy(),
-					stopPropagation: sinon.spy()
-				};
-
-				// Mock the url input is focused.
-				view.focusTracker.isFocused = true;
-				view.focusTracker.focusedElement = view.getIntegration( 'insertImageViaUrl' ).element;
-
-				const spy = sinon.spy( view.insertButtonView, 'focus' );
-
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.calledOnce( keyEvtData.preventDefault );
-				sinon.assert.calledOnce( keyEvtData.stopPropagation );
-				sinon.assert.calledOnce( spy );
-			} );
-
-			it( 'so "shift + tab" focuses the previous focusable item', () => {
-				const keyEvtData = {
-					keyCode: keyCodes.tab,
-					shiftKey: true,
-					preventDefault: sinon.spy(),
-					stopPropagation: sinon.spy()
-				};
-
-				// Mock the cancel button is focused.
-				view.focusTracker.isFocused = true;
-				view.focusTracker.focusedElement = view.cancelButtonView.element;
-
-				const spy = sinon.spy( view.insertButtonView, 'focus' );
-
-				view.keystrokes.press( keyEvtData );
-				sinon.assert.calledOnce( keyEvtData.preventDefault );
-				sinon.assert.calledOnce( keyEvtData.stopPropagation );
-				sinon.assert.calledOnce( spy );
-			} );
-		} );
-	} );
-
-	describe( 'focus()', () => {
-		it( 'should focus on the first integration', () => {
-			const spy = sinon.spy( view.getIntegration( 'insertImageViaUrl' ), 'focus' );
-
-			view.focus();
-
-			sinon.assert.calledOnce( spy );
-		} );
-	} );
-
-	describe( 'Insert image via URL integration input', () => {
-		it( 'should be bound with #imageURLInputValue', () => {
-			const form = view.getIntegration( 'insertImageViaUrl' );
-
-			form.fieldView.element.value = 'abc';
-			form.fieldView.fire( 'input' );
-
-			expect( view.imageURLInputValue ).to.equal( 'abc' );
-
-			form.fieldView.element.value = 'xyz';
-			form.fieldView.fire( 'input' );
-
-			expect( view.imageURLInputValue ).to.equal( 'xyz' );
-		} );
-	} );
-} );