chore(ckeditor5/plugins): integrate file-upload

packages/ckeditor5/src/plugins/file_upload/progressbarview.ts

@@ -0,0 +1,71 @@
+import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
+import { ButtonView, Locale, toUnit, View } from 'ckeditor5';
+
+const toPx = toUnit('%');
+
+export default class ProgressBarView extends View {
+    private cancelButton: ButtonView;
+    width!: number;
+    customWidth!: number;
+
+	constructor(locale: Locale) {
+		super(locale);
+
+		const bind = this.bindTemplate;
+		this.cancelButton = this._createCancelButton(locale);
+
+		// Views define their interface (state) using observable attributes.
+		this.set('width', 100);
+		this.set('customWidth', 0);
+
+
+		this.setTemplate({
+			tag: 'div',
+
+			// The element of the view can be defined with its children.
+			children: [
+				{
+					tag: 'div',
+					children: ['Uploading...'],
+					attributes: {
+						class: ['ck-uploading-progress'],
+						style: {
+							width: bind.to('customWidth', toPx),
+						}
+					}
+				},
+				this.cancelButton,
+			],
+			attributes: {
+				class: [
+					'ck-progress-bar',
+
+					// Observable attributes control the state of the view in DOM.
+                    //@ts-expect-error Type 'ListenerBinding' is not assignable to type 'TemplateSimpleValueSchema'
+					bind.to('elementClass')
+				],
+				style: {
+					width: bind.to('width', toPx),
+				}
+			}
+		});
+	}
+
+	_createCancelButton(locale: Locale) {
+		const view = new ButtonView(locale);
+		view.set({
+			icon: cancelIcon,
+			tooltip: true,
+			label: 'Cancel',
+            //@ts-expect-error Object literal may only specify known properties, and 'attributes' does not exist in type
+			attributes: {
+				class: ['ck', 'ck-button', 'ck-off', 'ck-button-cancel', 'ck-uploading-cancel']
+			}
+		});
+
+		view.on('execute', () => {
+			this.fire('cancel')
+		});
+		return view;
+	}
+}