Uploader adds support for handlers extension

packages/quill/src/modules/uploader.ts

@@ -6,14 +6,16 @@ import type { Range } from '../core/selection.js';
 
 interface UploaderOptions {
   mimetypes: string[];
-  handler: (this: { quill: Quill }, range: Range, files: File[]) => void;
+  handler?: (this: { quill: Quill }, range: Range, files: File[]) => void;
+  handlers?: Array<UploaderHandler<any>>;
 }
 
 class Uploader extends Module<UploaderOptions> {
   static DEFAULTS: UploaderOptions;
 
   constructor(quill: Quill, options: Partial<UploaderOptions>) {
     super(quill, options);
+    options.handlers?.forEach((handler) => handler.setQuill(quill));
     quill.root.addEventListener('drop', (e) => {
       e.preventDefault();
       let native: ReturnType<typeof document.createRange> | null = null;
@@ -46,38 +48,93 @@ class Uploader extends Module<UploaderOptions> {
       }
     });
     if (uploads.length > 0) {
-      // @ts-expect-error Fix me later
-      this.options.handler.call(this, range, uploads);
+      if (this.options.handlers) {
+        const handlerFlag: Array<number> = [];
+        uploads.forEach(() => handlerFlag.push(0));
+        let rangLength = range.length;
+        for (let index = 0; index < uploads.length; index++) {
+          const file = uploads[index];
+          const handler = this.options.handlers?.find((h) =>
+            h.support(file.type),
+          );
+          if (!handler) continue;
+          handler.handler(file).then((coverFile) => {
+            const nodeCoverLength = rangLength;
+            rangLength = 0;
+            let beforeRangeLength = 0;
+            for (let i = 0; i < index; i++) {
+              beforeRangeLength += handlerFlag[i];
+            }
+            const nodeLength = handler.insert(
+              {
+                index: range.index + beforeRangeLength,
+                length: nodeCoverLength,
+              },
+              file,
+              coverFile,
+            );
+            handlerFlag[index] = nodeLength;
+            const uploadsFinish = handlerFlag.every((f) => f > 0);
+            if (uploadsFinish) {
+              this.quill.setSelection(
+                range.index + handlerFlag.reduce((v, s) => v + s),
+                Emitter.sources.SILENT,
+              );
+            }
+          });
+        }
+        return;
+      }
+      this.options.handler?.call(this, range, uploads);
     }
   }
 }
 
-Uploader.DEFAULTS = {
-  mimetypes: ['image/png', 'image/jpeg'],
-  handler(range: Range, files: File[]) {
+export abstract class UploaderHandler<T> {
+  quill: Quill;
+  setQuill(quill: Quill): void {
+    this.quill = quill;
+  }
+  abstract support(fileType: String): boolean;
+  abstract handler(file: File): Promise<T>;
+  abstract insert(range: Range, file: File, cover: T): number;
+}
+export abstract class AbstractUploaderHandler<T> extends UploaderHandler<T> {
+  abstract support(fileType: String): boolean;
+  abstract handler(file: File): Promise<T>;
+  insert(range: Range, file: File, cover: T): number {
+    const singleDelta = new Delta()
+      .retain(range.index)
+      .delete(range.length)
+      .insert(this.deltaData(file, cover));
+    this.quill.updateContents(singleDelta, Emitter.sources.USER);
+    return 1;
+  }
+  protected abstract deltaData(file: File, cover: T): any;
+}
+export class ImageUploaderHandler extends AbstractUploaderHandler<String> {
+  support(fileType: String) {
     if (!this.quill.scroll.query('image')) {
-      return;
+      return false;
     }
-    const promises = files.map<Promise<string>>((file) => {
-      return new Promise((resolve) => {
-        const reader = new FileReader();
-        reader.onload = () => {
-          resolve(reader.result as string);
-        };
-        reader.readAsDataURL(file);
-      });
-    });
-    Promise.all(promises).then((images) => {
-      const update = images.reduce((delta: Delta, image) => {
-        return delta.insert({ image });
-      }, new Delta().retain(range.index).delete(range.length)) as Delta;
-      this.quill.updateContents(update, Emitter.sources.USER);
-      this.quill.setSelection(
-        range.index + images.length,
-        Emitter.sources.SILENT,
-      );
+    return fileType.startsWith('image');
+  }
+  handler(file: File): Promise<String> {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onload = () => {
+        resolve(reader.result as string);
+      };
+      reader.readAsDataURL(file);
     });
-  },
+  }
+  protected deltaData(file: File, cover: String): any {
+    return { image: cover };
+  }
+}
+Uploader.DEFAULTS = {
+  mimetypes: ['image/png', 'image/jpeg'],
+  handlers: [new ImageUploaderHandler()],
 };
 
 export default Uploader;