Merge pull request #13419 from ckeditor/ck/13009-rewrite-easy-image-i…

…nto-typescript

Other (easy-image): Rewrite `ckeditor5-easy-image` into Typescript. Closes #13009.

.gitignore

@@ -38,6 +38,7 @@ packages/ckeditor5-clipboard/src/**/*.js
 packages/ckeditor5-cloud-services/src/**/*.js
 packages/ckeditor5-code-block/src/**/*.js
 packages/ckeditor5-core/src/**/*.js
+packages/ckeditor5-easy-image/src/**/*.js
 packages/ckeditor5-editor-balloon/src/**/*.js
 packages/ckeditor5-editor-classic/src/**/*.js
 packages/ckeditor5-editor-decoupled/src/**/*.js

packages/ckeditor5-cloud-services/src/index.ts

@@ -11,3 +11,5 @@ export { default as CloudServices } from './cloudservices';
 export { default as CloudServicesCore } from './cloudservicescore';
 export { TokenUrl } from './cloudservicesconfig';
 export type { default as Token, InitializedToken } from './token/token';
+export type { default as UploadGateway } from './uploadgateway/uploadgateway';
+export type { default as FileUploader } from './uploadgateway/fileuploader';

packages/ckeditor5-easy-image/package.json

@@ -10,7 +10,7 @@
     "ckeditor5-plugin",
     "ckeditor5-dll"
   ],
-  "main": "src/index.js",
+  "main": "src/index.ts",
   "dependencies": {
     "ckeditor5": "^36.0.1"
   },
@@ -25,6 +25,7 @@
     "@ckeditor/ckeditor5-theme-lark": "^36.0.1",
     "@ckeditor/ckeditor5-upload": "^36.0.1",
     "@ckeditor/ckeditor5-utils": "^36.0.1",
+    "typescript": "^4.8.4",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   },
@@ -43,13 +44,16 @@
   },
   "files": [
     "lang",
-    "src",
+    "src/**/*.js",
+    "src/**/*.d.ts",
     "theme",
     "build",
     "ckeditor5-metadata.json",
     "CHANGELOG.md"
   ],
   "scripts": {
+    "build": "tsc -p ./tsconfig.release.json",
+    "postversion": "npm run build",
     "dll:build": "webpack"
   }
 }

packages/ckeditor5-easy-image/src/cloudservicesuploadadapter.ts

@@ -0,0 +1,96 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+* @module easy-image/cloudservicesuploadadapter
+*/
+
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+import { FileRepository, type FileLoader, type UploadAdapter } from 'ckeditor5/src/upload';
+import type { CloudServicesCore, CloudServices, UploadGateway, FileUploader } from '@ckeditor/ckeditor5-cloud-services';
+
+/**
+ * A plugin that enables upload to [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/).
+ *
+ * It is mainly used by the {@link module:easy-image/easyimage~EasyImage} feature.
+ *
+ * After enabling this adapter you need to configure the CKEditor Cloud Services integration through
+ * {@link module:cloud-services/cloudservices~CloudServicesConfig `config.cloudServices`}.
+ */
+export default class CloudServicesUploadAdapter extends Plugin {
+	private _uploadGateway?: UploadGateway;
+
+	/**
+	 * @inheritDoc
+	 */
+	public static get pluginName(): 'CloudServicesUploadAdapter' {
+		return 'CloudServicesUploadAdapter';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public static get requires(): PluginDependencies {
+		return [ 'CloudServices', FileRepository ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public init(): void {
+		const editor = this.editor;
+
+		const cloudServices: CloudServices = editor.plugins.get( 'CloudServices' );
+
+		const token = cloudServices.token;
+		const uploadUrl = cloudServices.uploadUrl;
+
+		if ( !token ) {
+			return;
+		}
+
+		const cloudServicesCore: CloudServicesCore = editor.plugins.get( 'CloudServicesCore' );
+		this._uploadGateway = cloudServicesCore.createUploadGateway( token, uploadUrl! );
+
+		editor.plugins.get( FileRepository ).createUploadAdapter = loader => {
+			return new Adapter( this._uploadGateway!, loader );
+		};
+	}
+}
+
+class Adapter implements UploadAdapter {
+	private uploadGateway: UploadGateway;
+	private loader: FileLoader;
+	private fileUploader?: FileUploader;
+
+	constructor( uploadGateway: UploadGateway, loader: FileLoader ) {
+		this.uploadGateway = uploadGateway;
+
+		this.loader = loader;
+	}
+
+	public upload() {
+		return this.loader.file.then( file => {
+			this.fileUploader = this.uploadGateway.upload( file! );
+
+			this.fileUploader.on( 'progress', ( evt, data ) => {
+				this.loader.uploadTotal = data.total;
+				this.loader.uploaded = data.uploaded;
+			} );
+
+			return this.fileUploader.send();
+		} );
+	}
+
+	public abort() {
+		this.fileUploader?.abort();
+	}
+}
+
+declare module '@ckeditor/ckeditor5-core' {
+	interface PluginsMap {
+		[ CloudServicesUploadAdapter.pluginName ]: CloudServicesUploadAdapter;
+	}
+}

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

@@ -0,0 +1,82 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module easy-image/easyimage
+ */
+
+import { Plugin, type PluginDependencies } from 'ckeditor5/src/core';
+import { logWarning } from 'ckeditor5/src/utils';
+
+import CloudServicesUploadAdapter from './cloudservicesuploadadapter';
+
+/**
+ * The Easy Image feature, which makes the image upload in CKEditor 5 possible with virtually zero
+ * server setup. A part of the [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/)
+ * family.
+ *
+ * This is a "glue" plugin which enables:
+ *
+ * * {@link module:easy-image/cloudservicesuploadadapter~CloudServicesUploadAdapter}.
+ *
+ * This plugin requires plugin to be present in the editor configuration:
+ *
+ * * {@link module:image/image~Image},
+ * * {@link module:image/imageupload~ImageUpload},
+ *
+ * See the {@glink features/images/image-upload/easy-image "Easy Image integration" guide} to learn how to configure
+ * and use this feature.
+ *
+ * Check out the {@glink features/images/image-upload/image-upload comprehensive "Image upload" guide} to learn about
+ * other ways to upload images into CKEditor 5.
+ *
+ * **Note**: After enabling the Easy Image plugin you need to configure the
+ * [CKEditor Cloud Services](https://ckeditor.com/ckeditor-cloud-services/)
+ * integration through {@link module:cloud-services/cloudservices~CloudServicesConfig `config.cloudServices`}.
+ */
+export default class EasyImage extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	public static get pluginName(): 'EasyImage' {
+		return 'EasyImage';
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public static get requires(): PluginDependencies {
+		return [ CloudServicesUploadAdapter, 'ImageUpload' ];
+	}
+
+	/**
+	 * @inheritDoc
+	 */
+	public init(): void {
+		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 );
+		}
+	}
+}
+
+declare module '@ckeditor/ckeditor5-core' {
+	interface PluginsMap {
+		[ EasyImage.pluginName ]: EasyImage;
+	}
+}

packages/ckeditor5-easy-image/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @license Copyright (c) 2003-2023, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module easy-image
+ */
+
+export { default as EasyImage } from './easyimage';
+export { default as CloudServicesUploadAdapter } from './cloudservicesuploadadapter';

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

@@ -9,8 +9,7 @@ import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictest
 
 import EasyImage from '../src/easyimage';
 import CloudServicesUploadAdapter from '../src/cloudservicesuploadadapter';
-import Image from '@ckeditor/ckeditor5-image/src/image';
-import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
+import { Image, ImageUpload } from '@ckeditor/ckeditor5-image';
 import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
 
 import UploadGatewayMock from './_utils/uploadgatewaymock';

packages/ckeditor5-easy-image/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "ckeditor5/tsconfig.json",
+  "include": [
+    "src",
+    "../../typings"
+  ]
+}

packages/ckeditor5-easy-image/tsconfig.release.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.release.json",
+  "include": [
+    "./src/",
+    "../../typings/"
+  ],
+  "exclude": [
+    "./tests/"
+  ]
+}