ckeditor5-blazor 1.1.0 → 1.2.0

package/dist/interop/create-editor-blazor-interop.d.ts

@@ -15,5 +15,11 @@ export declare function createEditorBlazorInterop(element: HTMLElement, interop:
      * Cleans up all event listeners when the Blazor component is disposed.
      */
     unmount(): void;
+    /**
+     * Installs the custom image upload adapter that delegates uploads to Blazor.
+     * This is called lazily from Blazor when the consumer sets the `OnImageUpload` callback
+     * to avoid unnecessary overhead for consumers that don't use this feature.
+     */
+    attachImageUploadAdapter: () => Promise<void>;
 };
 //# sourceMappingURL=create-editor-blazor-interop.d.ts.map

package/dist/interop/create-editor-blazor-interop.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-editor-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editor-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAS9C;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IA+DlF;;OAEG;sBACqB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAS9C;;OAEG;;EAkBN"}
+{"version":3,"file":"create-editor-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editor-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAU9C;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IA+DlF;;OAEG;sBACqB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAS9C;;OAEG;;IAkBH;;;;OAIG;;EAWN"}

package/dist/types/dot-net-interop.type.d.ts

@@ -2,6 +2,6 @@
  * Represents the .NET interop helper for communication with Blazor.
  */
 export type DotNetInterop = {
-    invokeMethodAsync: (methodName: string, ...args: any[]) => Promise<void>;
+    invokeMethodAsync: <T = void>(methodName: string, ...args: any[]) => Promise<T>;
 };
 //# sourceMappingURL=dot-net-interop.type.d.ts.map

package/dist/types/dot-net-interop.type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dot-net-interop.type.d.ts","sourceRoot":"","sources":["../../../src/types/dot-net-interop.type.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,iBAAiB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1E,CAAC"}
+{"version":3,"file":"dot-net-interop.type.d.ts","sourceRoot":"","sources":["../../../src/types/dot-net-interop.type.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,iBAAiB,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,UAAU,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;CACjF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-blazor",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "CKEditor 5 integration for Blazor",
   "license": "MIT",
   "repository": {

package/src/interop/create-editor-blazor-interop.test.ts

@@ -180,4 +180,112 @@ describe('createEditorBlazorInterop', () => {
       }).not.toThrow();
     });
   });
+
+  describe('attachImageUploadAdapter', () => {
+    it('should do nothing when already unmounted', async () => {
+      const interop = createEditorBlazorInterop(element, dotnetInterop);
+
+      await waitForTestEditor();
+      interop.unmount();
+
+      await expect(interop.attachImageUploadAdapter()).resolves.toBeUndefined();
+      expect(dotnetInterop.invokeMethodAsync).not.toHaveBeenCalledWith(
+        'OnEditorImageUpload',
+        expect.anything(),
+      );
+    });
+
+    it('should do nothing when FileRepository plugin is not available', async () => {
+      const { attachImageUploadAdapter } = createEditorBlazorInterop(element, dotnetInterop);
+      const editor = await waitForTestEditor();
+
+      expect(editor.plugins.has('FileRepository')).toBe(false);
+
+      await expect(attachImageUploadAdapter()).resolves.toBeUndefined();
+    });
+
+    it('should set createUploadAdapter on FileRepository when plugin is available', async () => {
+      const { attachImageUploadAdapter } = createEditorBlazorInterop(element, dotnetInterop);
+      const editor = await waitForTestEditor();
+
+      const mockFileRepository: { createUploadAdapter: any; } = { createUploadAdapter: null };
+
+      vi.spyOn(editor.plugins, 'has').mockReturnValue(true);
+      vi.spyOn(editor.plugins, 'get').mockReturnValue(mockFileRepository as any);
+
+      await attachImageUploadAdapter();
+
+      expect(mockFileRepository.createUploadAdapter).toBeTypeOf('function');
+    });
+
+    it('upload adapter should call OnEditorImageUpload with file details and return the url', async () => {
+      const { attachImageUploadAdapter } = createEditorBlazorInterop(element, dotnetInterop);
+      const editor = await waitForTestEditor();
+
+      const mockFileRepository: { createUploadAdapter: any; } = { createUploadAdapter: null };
+
+      vi.spyOn(editor.plugins, 'has').mockReturnValue(true);
+      vi.spyOn(editor.plugins, 'get').mockReturnValue(mockFileRepository as any);
+
+      await attachImageUploadAdapter();
+
+      const expectedUrl = 'https://example.com/uploaded.jpg';
+
+      (dotnetInterop.invokeMethodAsync as Mock).mockResolvedValueOnce(expectedUrl);
+
+      const mockFile = new File(['fake image data'], 'photo.jpg', { type: 'image/jpeg' });
+      const adapter = mockFileRepository.createUploadAdapter({ file: Promise.resolve(mockFile) });
+
+      const result = await adapter.upload();
+
+      expect(dotnetInterop.invokeMethodAsync).toHaveBeenCalledWith(
+        'OnEditorImageUpload',
+        expect.objectContaining({
+          fileName: 'photo.jpg',
+          mimeType: 'image/jpeg',
+          payload: expect.any(String),
+        }),
+      );
+
+      expect(result).toEqual({ default: expectedUrl });
+    });
+
+    it('upload adapter should throw when OnEditorImageUpload returns null', async () => {
+      const { attachImageUploadAdapter } = createEditorBlazorInterop(element, dotnetInterop);
+      const editor = await waitForTestEditor();
+
+      const mockFileRepository: { createUploadAdapter: any; } = { createUploadAdapter: null };
+
+      vi.spyOn(editor.plugins, 'has').mockReturnValue(true);
+      vi.spyOn(editor.plugins, 'get').mockReturnValue(mockFileRepository as any);
+
+      await attachImageUploadAdapter();
+
+      (dotnetInterop.invokeMethodAsync as Mock).mockResolvedValueOnce(null);
+
+      const mockFile = new File(['fake image data'], 'photo.jpg', { type: 'image/jpeg' });
+      const adapter = mockFileRepository.createUploadAdapter({ file: Promise.resolve(mockFile) });
+
+      await expect(adapter.upload()).rejects.toThrow('OnImageUpload handler returned null');
+    });
+
+    it('upload adapter should throw when aborted before file read completes', async () => {
+      const { attachImageUploadAdapter } = createEditorBlazorInterop(element, dotnetInterop);
+      const editor = await waitForTestEditor();
+
+      const mockFileRepository: { createUploadAdapter: any; } = { createUploadAdapter: null };
+
+      vi.spyOn(editor.plugins, 'has').mockReturnValue(true);
+      vi.spyOn(editor.plugins, 'get').mockReturnValue(mockFileRepository as any);
+
+      await attachImageUploadAdapter();
+
+      const mockFile = new File(['fake image data'], 'photo.jpg', { type: 'image/jpeg' });
+      const adapter = mockFileRepository.createUploadAdapter({ file: Promise.resolve(mockFile) });
+
+      adapter.abort();
+
+      await expect(adapter.upload()).rejects.toThrow('Upload aborted.');
+    });
+  });
 });

package/src/interop/create-editor-blazor-interop.ts

@@ -1,4 +1,5 @@
 import type { DotNetInterop } from '../types';
+import type { Editor, FileRepository } from 'ckeditor5';
 
 import { ensureEditorElementsRegistered } from '../elements';
 import { EditorsRegistry } from '../elements/editor/editors-registry';
@@ -108,5 +109,89 @@ export function createEditorBlazorInterop(element: HTMLElement, interop: DotNetI
 
       unmounted = true;
     },
+
+    /**
+     * Installs the custom image upload adapter that delegates uploads to Blazor.
+     * This is called lazily from Blazor when the consumer sets the `OnImageUpload` callback
+     * to avoid unnecessary overhead for consumers that don't use this feature.
+     */
+    attachImageUploadAdapter: async () => {
+      if (unmounted) {
+        return;
+      }
+
+      const editor = await EditorsRegistry.the.waitFor(editorId);
+
+      installImageUploadAdapter(editor, interop);
+    },
+  };
+}
+
+/**
+ * Installs a custom CKEditor 5 upload adapter that delegates image uploads to Blazor.
+ * When the user inserts an image the adapter encodes the file as Base64 and calls
+ * `OnEditorImageUpload` on the .NET interop object, which returns the public URL to embed.
+ */
+function installImageUploadAdapter(editor: Editor, interop: DotNetInterop) {
+  if (!editor.plugins.has('FileRepository')) {
+    return;
+  }
+
+  const fileRepository = editor.plugins.get('FileRepository') as FileRepository;
+
+  fileRepository.createUploadAdapter = (loader: any) => {
+    let aborted = false;
+
+    return {
+      async upload() {
+        const file: File = await loader.file;
+
+        if (aborted) {
+          throw new Error('Upload aborted.');
+        }
+
+        const payload = await fileToBase64(file);
+        const url = await interop.invokeMethodAsync<string | null>('OnEditorImageUpload', {
+          fileName: file.name,
+          mimeType: file.type,
+          payload,
+        });
+
+        if (!url) {
+          throw new Error(
+            'OnImageUpload handler returned null. '
+            + 'Make sure the OnImageUpload parameter is set on the <CKE5Editor> component.',
+          );
+        }
+
+        return { default: url };
+      },
+
+      abort() {
+        aborted = true;
+      },
+    };
   };
 }
+
+/**
+ * Converts a File object to a Base64-encoded string (data-URL prefix stripped).
+ */
+function fileToBase64(file: File): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const result = reader.result as string;
+
+      /* v8 ignore next -- @preserve */
+      const base64 = result.split(',')[1] ?? result;
+
+      resolve(base64);
+    };
+
+    /* v8 ignore next -- @preserve */
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(file);
+  });
+}

package/src/types/dot-net-interop.type.ts

@@ -2,5 +2,5 @@
  * Represents the .NET interop helper for communication with Blazor.
  */
 export type DotNetInterop = {
-  invokeMethodAsync: (methodName: string, ...args: any[]) => Promise<void>;
+  invokeMethodAsync: <T = void>(methodName: string, ...args: any[]) => Promise<T>;
 };