Merge pull request #9494 from ckeditor/i/9399-easy-image-independence

Other (easy-image): Removed the Image plugin dependency from the EasyImage plugin. Closes #9399.

packages/ckeditor5-easy-image/docs/features/easy-image.md

@@ -128,10 +128,11 @@ Then add {@link module:easy-image/easyimage~EasyImage} to your plugin list and [
 
 ```js
 import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
+import Image from '@ckeditor/ckeditor5-image/src/image';
 
 ClassicEditor
 	.create( document.querySelector( '#editor' ), {
-		plugins: [ EasyImage, ... ],
+		plugins: [ EasyImage, Image, ... ],
 		toolbar: [ 'uploadImage', ... ],
 
 		// Configure the endpoint. See the "Configuration" section above.
@@ -144,6 +145,10 @@ ClassicEditor
 	.catch( ... );
 ```
 
+<info-box info>
+	Please note that most integrations will also require the {@link module:image/image~Image} plugin to be loaded in the editor to make this feature work properly (or one of {@link module:image/imageblock~ImageBlock} or {@link module:image/imageinline~ImageInline}). Check out the comprehensive {@link features/image#installation guide to images} in CKEditor 5 to learn more.
+</info-box>
+
 ## What's next?
 
 Check out the comprehensive {@link features/image-upload Image upload overview} to learn more about different ways of uploading images in CKEditor 5.

packages/ckeditor5-easy-image/src/easyimage.js

@@ -8,6 +8,7 @@
  */
 
 import { Plugin } from 'ckeditor5/src/core';
+import { logWarning } from 'ckeditor5/src/utils';
 
 import CloudServicesUploadAdapter from './cloudservicesuploadadapter';
 
@@ -42,7 +43,30 @@ export default class EasyImage extends Plugin {
 	 * @inheritDoc
 	 */
 	static get requires() {
-		return [ CloudServicesUploadAdapter, 'Image', 'ImageUpload' ];
+		return [ CloudServicesUploadAdapter, 'ImageUpload' ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+
+		if ( !editor.plugins.has( 'ImageBlockEditing' ) && !editor.plugins.has( 'ImageInlineEditing' ) ) {
+			/**
+			 * The Easy Image feature requires one of the following plugins to be loaded to work correctly:
+			 *
+			 * * {@link module:image/imageblock~ImageBlock},
+			 * * {@link module:image/imageinline~ImageInline},
+			 * * {@link module:image/image~Image} (loads both `ImageBlock` and `ImageInline`)
+			 *
+			 * Please make sure your editor configuration is correct.
+			 *
+			 * @error easy-image-image-feature-missing
+			 * @param {module:core/editor/editor~Editor} editor
+			 */
+			logWarning( 'easy-image-image-feature-missing', editor );
+		}
 	}
 
 	/**

packages/ckeditor5-easy-image/tests/easyimage.js

@@ -3,7 +3,7 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
-/* globals window, setTimeout */
+/* globals console, window, setTimeout */
 
 import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor';
 
@@ -21,6 +21,8 @@ import CloudServices from '@ckeditor/ckeditor5-cloud-services/src/cloudservices'
 import TokenMock from '@ckeditor/ckeditor5-cloud-services/tests/_utils/tokenmock';
 import CloudServicesCore from '@ckeditor/ckeditor5-cloud-services/src/cloudservicescore';
 
+import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+
 // EasyImage requires the `CloudServicesCore` plugin as a soft-requirement.
 // In order to mock the `Token` class, we create a new class that extend the `CloudServicesCore` plugin
 // and override the `#createToken()` method which creates an instance of the `Token` class.
@@ -33,15 +35,14 @@ class CloudServicesCoreMock extends CloudServicesCore {
 		return new UploadGatewayMock( token, apiAddress );
 	}
 }
+
 describe( 'EasyImage', () => {
+	testUtils.createSinonSandbox();
+
 	it( 'should require other plugins', () => {
 		expect( EasyImage.requires ).to.include( CloudServicesUploadAdapter );
 	} );
 
-	it( 'should require Image by name', () => {
-		expect( EasyImage.requires ).to.include( 'Image' );
-	} );
-
 	it( 'should require ImageUpload by name', () => {
 		expect( EasyImage.requires ).to.include( 'ImageUpload' );
 	} );
@@ -69,6 +70,28 @@ describe( 'EasyImage', () => {
 			} );
 	} );
 
+	it( 'should warn if there is no image feature loaded in the editor', async () => {
+		const stub = testUtils.sinon.stub( console, 'warn' );
+		const div = window.document.createElement( 'div' );
+
+		window.document.body.appendChild( div );
+
+		const editor = await ClassicTestEditor.create( div, {
+			plugins: [ Clipboard, ImageUpload, CloudServices, EasyImage ],
+			substitutePlugins: [ CloudServicesCoreMock ],
+			cloudServices: {
+				tokenUrl: 'abc',
+				uploadUrl: 'def'
+			}
+		} );
+
+		sinon.assert.calledOnceWithExactly( stub, 'easy-image-image-feature-missing', editor, sinon.match.string );
+
+		window.document.body.removeChild( div );
+
+		await editor.destroy();
+	} );
+
 	describe( 'integration tests', () => {
 		let div;
 

packages/ckeditor5-image/src/imageupload/imageuploadediting.js

@@ -61,26 +61,10 @@ export default class ImageUploadEditing extends Plugin {
 	init() {
 		const editor = this.editor;
 		const doc = editor.model.document;
-		const schema = editor.model.schema;
 		const conversion = editor.conversion;
 		const fileRepository = editor.plugins.get( FileRepository );
 		const imageUtils = editor.plugins.get( 'ImageUtils' );
-
 		const imageTypes = createImageTypeRegExp( editor.config.get( 'image.upload.types' ) );
-
-		// Setup schema to allow uploadId and uploadStatus for images.
-		if ( this.editor.plugins.has( 'ImageBlockEditing' ) ) {
-			schema.extend( 'image', {
-				allowAttributes: [ 'uploadId', 'uploadStatus' ]
-			} );
-		}
-
-		if ( this.editor.plugins.has( 'ImageInlineEditing' ) ) {
-			schema.extend( 'imageInline', {
-				allowAttributes: [ 'uploadId', 'uploadStatus' ]
-			} );
-		}
-
 		const uploadImageCommand = new UploadImageCommand( editor );
 
 		// Register `uploadImage` command and add `imageUpload` command as an alias for backward compatibility.
@@ -216,6 +200,28 @@ export default class ImageUploadEditing extends Plugin {
 		}, { priority: 'low' } );
 	}
 
+	/**
+	 * @inheritDoc
+	 */
+	afterInit() {
+		const schema = this.editor.model.schema;
+
+		// Setup schema to allow uploadId and uploadStatus for images.
+		// Wait for ImageBlockEditing or ImageInlineEditing to register their elements first,
+		// that's why doing this in afterInit() instead of init().
+		if ( this.editor.plugins.has( 'ImageBlockEditing' ) ) {
+			schema.extend( 'image', {
+				allowAttributes: [ 'uploadId', 'uploadStatus' ]
+			} );
+		}
+
+		if ( this.editor.plugins.has( 'ImageInlineEditing' ) ) {
+			schema.extend( 'imageInline', {
+				allowAttributes: [ 'uploadId', 'uploadStatus' ]
+			} );
+		}
+	}
+
 	/**
 	 * Reads and uploads an image.
 	 *

packages/ckeditor5-image/tests/imageupload/imageuploadediting.js

@@ -84,8 +84,11 @@ describe( 'ImageUploadEditing', () => {
 		return editor.destroy();
 	} );
 
-	it( 'should register proper schema rules', () => {
+	it( 'should register proper schema rules when both ImageBlock and ImageInline are enabled', () => {
 		expect( model.schema.checkAttribute( [ '$root', 'image' ], 'uploadId' ) ).to.be.true;
+		expect( model.schema.checkAttribute( [ '$root', 'image' ], 'uploadStatus' ) ).to.be.true;
+		expect( model.schema.checkAttribute( [ '$root', 'imageInline' ], 'uploadId' ) ).to.be.true;
+		expect( model.schema.checkAttribute( [ '$root', 'imageInline' ], 'uploadStatus' ) ).to.be.true;
 	} );
 
 	it( 'should register proper schema rules for image style when ImageBlock plugin is enabled', async () => {
@@ -102,6 +105,22 @@ describe( 'ImageUploadEditing', () => {
 		await newEditor.destroy();
 	} );
 
+	it( 'should wait for ImageInlineEditing and ImageBlockEditing before extending their model elements in schema', async () => {
+		const editor = await VirtualTestEditor.create( {
+			plugins: [
+				// The order matters.
+				ImageUploadEditing, ImageBlockEditing, ImageInlineEditing
+			]
+		} );
+
+		expect( editor.model.schema.checkAttribute( [ '$root', 'image' ], 'uploadId' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$root', 'image' ], 'uploadStatus' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$root', 'imageInline' ], 'uploadId' ) ).to.be.true;
+		expect( editor.model.schema.checkAttribute( [ '$root', 'imageInline' ], 'uploadStatus' ) ).to.be.true;
+
+		await editor.destroy();
+	} );
+
 	it( 'should register the uploadImage command', () => {
 		expect( editor.commands.get( 'uploadImage' ) ).to.be.instanceOf( UploadImageCommand );
 	} );