panr 5 years ago
parent
commit
164653997d

+ 12 - 56
packages/ckeditor5-image/src/imageinsert.js

@@ -10,20 +10,18 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ImageUpload from './imageupload';
 import ImageInsertUI from './imageinsert/imageinsertui';
-// import ImageInsertEditing from './imageinsert/imageinsertediting';
-// import ImageUploadProgress from './imageupload/imageuploadprogress';
 
-// TODO FIX THE DESCR
 /**
- * The image upload plugin.
+ * The image insert plugin.
  *
- * For a detailed overview, check the {@glink features/image-upload/image-upload image upload feature} documentation.
+ * For a detailed overview, check the {@glink features/image-upload/image-upload Image upload feature}
+ * and {@glink features/image#inserting-images-via-source-url Insert images via source URL} documentation.
  *
- * This plugin does not do anything directly, but it loads a set of specific plugins to enable image uploading:
+ * This plugin does not do anything directly, but it loads a set of specific plugins
+ * to enable image uploading or inserting via implemented integrations:
  *
- * * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing},
- * * {@link module:image/imageupload/imageuploadui~ImageUploadUI},
- * * {@link module:image/imageupload/imageuploadprogress~ImageUploadProgress}.
+ * * {@link module:image/imageupload~ImageUpload}
+ * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI},
  *
  * @extends module:core/plugin~Plugin
  */
@@ -44,63 +42,21 @@ export default class ImageInsert extends Plugin {
 }
 
 /**
- * Image upload configuration.
- *
- * @member {module:image/imageupload~ImageUploadConfig} module:image/image~ImageConfig#upload
- */
-
-/**
- * The configuration of the image upload feature. Used by the image upload feature in the `@ckeditor/ckeditor5-image` package.
- *
- *		ClassicEditor
- *			.create( editorElement, {
- * 				image: {
- * 					upload:  ... // Image upload feature options.
- * 				}
- *			} )
- *			.then( ... )
- *			.catch( ... );
- *
- * See {@link module:core/editor/editorconfig~EditorConfig all editor options}.
- *
- * @interface module:image/imageupload~ImageUploadConfig
- */
-
-/**
- * The list of accepted image types.
- *
- * The accepted types of images can be customized to allow only certain types of images:
- *
- *		// Allow only JPEG and PNG images:
- *		const imageUploadConfig = {
- *			types: [ 'png', 'jpeg' ]
- *		};
- *
- * The type string should match [one of the sub-types](https://www.iana.org/assignments/media-types/media-types.xhtml#image)
- * of the image MIME type. E.g. for the `image/jpeg` MIME type, add `'jpeg'` to your image upload configuration.
- *
- * **Note:** This setting only restricts some image types to be selected and uploaded through the CKEditor UI and commands. Image type
- * recognition and filtering should also be implemented on the server which accepts image uploads.
- *
- * @member {Array.<String>} module:image/imageupload~ImageUploadConfig#types
- * @default [ 'jpeg', 'png', 'gif', 'bmp', 'webp', 'tiff' ]
- */
-
-/**
- * Image upload panel view configuration.
+ * Image insert panel view configuration.
+ * **NOTE:** Currently the panel settings are configurable through the `image.upload` property.
  *
  * @protected
  * @member {module:image/imageupload~ImageUploadPanelConfig} module:image/imageupload~ImageUploadConfig#panel
  */
 
 /**
- * The configuration of the image upload dropdown panel view. Used by the image upload feature in the `@ckeditor/ckeditor5-image` package.
+ * The configuration of the image insert dropdown panel view. Used by the image insert feature in the `@ckeditor/ckeditor5-image` package.
  *
  *		ClassicEditor
  *			.create( editorElement, {
  * 				image: {
  * 					upload: {
- * 						panel: ... // panel settings goes here
+ * 						panel: ... // panel settings for "imageInsert" view goes here
  * 					}
  * 				}
  *			} )
@@ -114,7 +70,7 @@ export default class ImageInsert extends Plugin {
  */
 
 /**
- * The list of {@link module:image/imageupload~ImageUpload} integrations.
+ * The list of {@link module:image/imageinsert~ImageInsert} integrations.
  *
  * The option accepts string tokens.
  * * for predefined integrations, we have two special strings: `insertImageViaUrl` and `openCKFinder`.

+ 4 - 3
packages/ckeditor5-image/src/imageinsert/imageinsertui.js

@@ -14,11 +14,12 @@ import { prepareIntegrations } from './utils';
 import { isImage } from '../image/utils';
 
 /**
- * The image upload button plugin.
+ * The image insert dropdown plugin.
  *
- * For a detailed overview, check the {@glink features/image-upload/image-upload Image upload feature} documentation.
+ * For a detailed overview, check the {@glink features/image-upload/image-upload Image upload feature}
+ * and {@glink features/image#inserting-images-via-source-url Insert images via source URL} documentation.
  *
- * Adds the `'imageUpload'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
+ * Adds the `'imageInsert'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
  *
  * @extends module:core/plugin~Plugin
  */

+ 1 - 1
packages/ckeditor5-image/src/imageinsert/ui/imageinsertformrowview.js

@@ -13,7 +13,7 @@ import '../../../theme/imageinsertformrowview.css';
 
 /**
  * The class representing a single row in a complex form,
- * used by {@link module:image/imageinsert/ui/imageinsertpanelview~ImageUploadPanelView}.
+ * used by {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
  *
  * **Note**: For now this class is private. When more use cases appear (beyond `ckeditor5-table` and `ckeditor5-image`),
  * it will become a component in `ckeditor5-ui`.

+ 2 - 2
packages/ckeditor5-image/src/imageinsert/ui/imageinsertpanelview.js

@@ -36,7 +36,7 @@ import '../../../theme/imageinsert.css';
  */
 export default class ImageInsertPanelView extends View {
 	/**
-	 * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsert/ui~ImageInsertUI}.
+	 * Creates a view for the dropdown panel of {@link module:image/imageinsert/imageinsertui~ImageInsertUI}.
 	 *
 	 * @param {module:utils/locale~Locale} [locale] The localization services instance.
 	 * @param {Object} [integrations] An integrations object that contains
@@ -218,7 +218,7 @@ export default class ImageInsertPanelView extends View {
 	/**
 	 * Returns a view of the integration.
 	 *
-	 * @param {string} name The name of the integration.
+	 * @param {String} name The name of the integration.
 	 * @returns {module:ui/view~View}
 	 */
 	getIntegration( name ) {

+ 4 - 4
packages/ckeditor5-image/src/imageinsert/utils.js

@@ -12,7 +12,7 @@ import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/
 
 /**
  * Creates integrations object that will be passed to the
- * {@link module:image/imageinsert/ui/imageinsertpanelview~ImageUploadPanelView}.
+ * {@link module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView}.
  *
  * @param {module:core/editor/editor~Editor} editor Editor instance.
  *
@@ -20,7 +20,7 @@ import { createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledfield/
  */
 export function prepareIntegrations( editor ) {
 	const panelItems = editor.config.get( 'image.upload.panel.items' );
-	const imageUploadUIPlugin = editor.plugins.get( 'ImageInsertUI' );
+	const imageInsertUIPlugin = editor.plugins.get( 'ImageInsertUI' );
 
 	const PREDEFINED_INTEGRATIONS = {
 		'insertImageViaUrl': createLabeledInputView( editor.locale )
@@ -39,12 +39,12 @@ export function prepareIntegrations( editor ) {
 		} );
 
 		// We want to close the dropdown panel view when user clicks the ckFinderButton.
-		ckFinderButton.delegate( 'execute' ).to( imageUploadUIPlugin, 'cancel' );
+		ckFinderButton.delegate( 'execute' ).to( imageInsertUIPlugin, 'cancel' );
 
 		PREDEFINED_INTEGRATIONS.openCKFinder = ckFinderButton;
 	}
 
-	// Creates integrations object of valid views to pass it to the ImageUploadPanelView.
+	// Creates integrations object of valid views to pass it to the ImageInsertPanelView.
 	return panelItems.reduce( ( object, key ) => {
 		if ( PREDEFINED_INTEGRATIONS[ key ] ) {
 			object[ key ] = PREDEFINED_INTEGRATIONS[ key ];

+ 1 - 146
packages/ckeditor5-image/tests/imageupload/utils.js

@@ -3,18 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals document */
-
-import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
-
-import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
-import Image from '../../src/image';
-import ImageUploadUI from '../../src/imageupload/imageuploadui';
-import ImageUploadEditing from '../../src/imageupload/imageuploadediting';
-import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
-import Link from '@ckeditor/ckeditor5-link/src/link';
-import CKFinder from '@ckeditor/ckeditor5-ckfinder/src/ckfinder';
-import { createImageTypeRegExp, prepareIntegrations, createLabeledInputView } from '../../src/imageupload/utils';
+import { createImageTypeRegExp } from '../../src/imageupload/utils';
 
 describe( 'Upload utils', () => {
 	describe( 'createImageTypeRegExp()', () => {
@@ -42,138 +31,4 @@ describe( 'Upload utils', () => {
 			expect( createImageTypeRegExp( [ 'png' ] ).test( 'svg+xml' ) ).to.be.false;
 		} );
 	} );
-
-	describe( 'prepareIntegrations()', () => {
-		it( 'should return "insetImageViaUrl" and "openCKFinder" integrations', async () => {
-			const editorElement = document.createElement( 'div' );
-			document.body.appendChild( editorElement );
-
-			const editor = await ClassicEditor
-				.create( editorElement, {
-					plugins: [
-						CKFinder,
-						Paragraph,
-						Image,
-						ImageUploadEditing,
-						ImageUploadUI
-					],
-					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl',
-									'openCKFinder'
-								]
-							}
-						}
-					}
-				} );
-
-			const openCKFinderExtendedView = Object.values( prepareIntegrations( editor ) )[ 1 ];
-
-			expect( openCKFinderExtendedView.class ).contains( 'ck-image-upload__ck-finder-button' );
-			expect( openCKFinderExtendedView.label ).to.equal( 'Insert image or file' );
-			expect( openCKFinderExtendedView.withText ).to.be.true;
-
-			editor.destroy();
-			editorElement.remove();
-		} );
-
-		it( 'should return only "insertImageViaUrl" integration and throw warning' +
-			'for "image-upload-integrations-invalid-view" error', async () => {
-			const editorElement = document.createElement( 'div' );
-			document.body.appendChild( editorElement );
-
-			const editor = await ClassicEditor
-				.create( editorElement, {
-					plugins: [
-						Paragraph,
-						Image,
-						ImageUploadEditing,
-						ImageUploadUI
-					],
-					image: {
-						upload: {
-							panel: {
-								items: [
-									'insertImageViaUrl',
-									'openCKFinder'
-								]
-							}
-						}
-					}
-				} );
-
-			expect( Object.values( prepareIntegrations( editor ) ).length ).to.equal( 1 );
-
-			editor.destroy();
-			editorElement.remove();
-		} );
-
-		it( 'should return only "link" integration', async () => {
-			const editorElement = document.createElement( 'div' );
-			document.body.appendChild( editorElement );
-
-			const editor = await ClassicEditor
-				.create( editorElement, {
-					plugins: [
-						Paragraph,
-						Link,
-						Image,
-						ImageUploadEditing,
-						ImageUploadUI
-					],
-					image: {
-						upload: {
-							panel: {
-								items: [
-									'link'
-								]
-							}
-						}
-					}
-				} );
-
-			expect( Object.values( prepareIntegrations( editor ) ).length ).to.equal( 1 );
-			expect( Object.values( prepareIntegrations( editor ) )[ 0 ].label ).to.equal( 'Link' );
-			expect( Object.values( prepareIntegrations( editor ) )[ 0 ] ).to.be.instanceOf( ButtonView );
-
-			editor.destroy();
-			editorElement.remove();
-		} );
-
-		it( 'should return "insertImageViaUrl" integration, when no integrations were configured', async () => {
-			const editorElement = document.createElement( 'div' );
-			document.body.appendChild( editorElement );
-
-			const editor = await ClassicEditor
-				.create( editorElement, {
-					plugins: [
-						Paragraph,
-						Image,
-						ImageUploadEditing,
-						ImageUploadUI
-					]
-				} );
-
-			expect( Object.keys( prepareIntegrations( editor ) ).length ).to.equal( 1 );
-
-			editor.destroy();
-			editorElement.remove();
-		} );
-	} );
-
-	describe( 'createLabeledInputView()', () => {
-		describe( 'image URL input view', () => {
-			it( 'should have placeholder', () => {
-				const view = createLabeledInputView( { t: val => val } );
-				expect( view.fieldView.placeholder ).to.equal( 'https://example.com/src/image.png' );
-			} );
-
-			it( 'should have info text', () => {
-				const view = createLabeledInputView( { t: val => val } );
-				expect( view.infoText ).to.match( /^Paste the image source URL/ );
-			} );
-		} );
-	} );
 } );