chore(ckeditor5/plugins): integrate uploadimage

packages/ckeditor5/src/augmentation.ts

@@ -5,6 +5,10 @@ declare global {
         getComponentByEl(el: unknown): {
             triggerCommand(command: string): void;
         };
+        getActiveContextNote(): {
+            noteId: string;
+        };
+        getHeaders(): Promise<Record<string, string>>;
     }
 }
 

packages/ckeditor5/src/plugins.ts

@@ -1,9 +1,11 @@
 import { Autoformat, AutoLink, BlockQuote, Bold, CKFinderUploadAdapter, Clipboard, Code, CodeBlock, Enter, FindAndReplace, Font, FontBackgroundColor, FontColor, GeneralHtmlSupport, Heading, HeadingButtonsUI, HorizontalLine, Image, ImageCaption, ImageInline, ImageResize, ImageStyle, ImageToolbar, ImageUpload, Indent, IndentBlock, Italic, Link, List, ListProperties, Mention, PageBreak, Paragraph, ParagraphButtonUI, PasteFromOffice, PictureEditing, RemoveFormat, SelectAll, ShiftEnter, SpecialCharacters, SpecialCharactersEssentials, Strikethrough, Style, Subscript, Superscript, Table, TableCaption, TableCellProperties, TableColumnResize, TableProperties, TableSelection, TableToolbar, TextPartLanguage, TextTransformation, TodoList, Typing, Underline, Undo } from "ckeditor5";
 import type { Plugin } from "ckeditor5";
 import CutToNotePlugin from "./plugins/cuttonote.js";
+import UploadimagePlugin from "./plugins/uploadimage.js";
 
 const TRILIUM_PLUGINS: typeof Plugin[] = [
-    CutToNotePlugin
+    CutToNotePlugin,
+    UploadimagePlugin
 ];
 
 export const COMMON_PLUGINS: typeof Plugin[] = [
@@ -46,8 +48,7 @@ export const COMMON_PLUGINS: typeof Plugin[] = [
 	IndentBlock,
 	ParagraphButtonUI,
 	HeadingButtonsUI,
-	//Uploadfileplugin,
-	//UploadimagePlugin,
+	//Uploadfileplugin
 	TextTransformation,
 	Font,
 	FontColor,

packages/ckeditor5/src/plugins/cuttonote.ts

@@ -12,7 +12,6 @@ export default class CutToNotePlugin extends Plugin {
 		this.editor.ui.componentFactory.add( 'cutToNote', locale => {
 			const view = new ButtonView( locale );
 
-            console.log("Got ", scissorsIcon);
 			view.set( {
 				label: 'Cut & paste selection to sub-note',
 				icon: scissorsIcon,

packages/ckeditor5/src/plugins/uploadimage.ts

@@ -1,10 +1,6 @@
-import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
-import FileRepository from '@ckeditor/ckeditor5-upload/src/filerepository';
+import { FileRepository, Plugin, type FileLoader, type UploadAdapter } from "ckeditor5";
 
 export default class UploadimagePlugin extends Plugin {
-	/**
-	 * @inheritDoc
-	 */
 	static get requires() {
 		return [ FileRepository ];
 	}
@@ -18,17 +14,16 @@ export default class UploadimagePlugin extends Plugin {
 	}
 }
 
-class Adapter {
+class Adapter implements UploadAdapter {
+    private loader: FileLoader;
+    private xhr?: XMLHttpRequest;
+
 	/**
 	 * Creates a new adapter instance.
-	 *
-	 * @param {module:upload/filerepository~FileLoader} loader
 	 */
-	constructor(loader) {
+	constructor(loader: FileLoader) {
 		/**
 		 * FileLoader instance to use during the upload.
-		 *
-		 * @member {module:upload/filerepository~FileLoader} #loader
 		 */
 		this.loader = loader;
 	}
@@ -37,16 +32,15 @@ class Adapter {
 	 * Starts the upload process.
 	 *
 	 * @see module:upload/filerepository~Adapter#upload
-	 * @returns {Promise}
 	 */
 	upload() {
 		return this.loader.file
-			.then( file => new Promise( ( resolve, reject ) => {
+			.then( file => new Promise<File | null>( ( resolve, reject ) => {
 				this._initRequest().then(() => {
-					this._initListeners( resolve, reject, file );
-					this._sendRequest( file );
+					this._initListeners(resolve, reject);
+					this._sendRequest();
 				});
-			} ) );
+			} ) ) as Promise<any>;
 	}
 
 	/**
@@ -88,13 +82,23 @@ class Adapter {
 	 * Initializes XMLHttpRequest listeners.
 	 *
 	 * @private
-	 * @param {Function} resolve Callback function to be called when the request is successful.
-	 * @param {Function} reject Callback function to be called when the request cannot be completed.
+	 * @param resolve Callback function to be called when the request is successful.
+	 * @param reject Callback function to be called when the request cannot be completed.
 	 */
-	async _initListeners(resolve, reject) {
+	async _initListeners(resolve: (value: File | PromiseLike<File | null> | null) => void, reject: (reason?: any) => void) {
 		const xhr = this.xhr;
+        if (!xhr) {
+            reject("Missing XHR");
+            return;
+        }
+
 		const loader = this.loader;
 		const file = await loader.file;
+        if (!file) {
+            reject("Missing file");
+            return;
+        }
+
 		const genericError = 'Cannot upload file:' + ` ${file.name}.`;
 
 		xhr.addEventListener('error', () => reject(genericError));
@@ -108,7 +112,7 @@ class Adapter {
 
 			resolve({
 				default: response.url
-			});
+			} as unknown as File);
 		});
 
 		// Upload progress when it's supported.
@@ -131,9 +135,13 @@ class Adapter {
 	async _sendRequest() {
 		// Prepare form data.
 		const data = new FormData();
-		data.append('upload', await this.loader.file);
 
-		// Send request.
-		this.xhr.send(data);
+        const file = await this.loader.file;
+        if (file) {
+            data.append('upload', file);
+
+            // Send request.
+            this.xhr?.send(data);
+        }
 	}
 }

packages/ckeditor5/tsconfig.lib.json

@@ -9,8 +9,8 @@
     "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
     "emitDeclarationOnly": true,
     "forceConsistentCasingInFileNames": true,
+    "lib": ["DOM", "ES2015"],
     "types": [
-      "node",
       "vite/client"
     ]
   },