ckeditor5-phoenix 1.15.7 → 1.16.0

package/dist/shared/get-csrf-token.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Retrieves the CSRF token from the meta tag or cookie.
+ *
+ * @returns The CSRF token or null if not found.
+ */
+export declare function getCsrfToken(): string | null;
+//# sourceMappingURL=get-csrf-token.d.ts.map

package/dist/shared/get-csrf-token.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-csrf-token.d.ts","sourceRoot":"","sources":["../../src/shared/get-csrf-token.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,YAAY,IAAI,MAAM,GAAG,IAAI,CAY5C"}

package/dist/shared/index.d.ts

@@ -3,6 +3,7 @@ export * from './camel-case';
 export * from './debounce';
 export * from './deep-camel-case-keys';
 export * from './filter-object-values';
+export * from './get-csrf-token';
 export * from './hook';
 export * from './is-empty-object';
 export * from './is-nil';

package/dist/shared/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/shared/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,OAAO,CAAC;AACtB,cAAc,YAAY,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ckeditor5-phoenix",
-  "version": "1.15.7",
+  "version": "1.16.0",
   "description": "CKEditor 5 integration for Phoenix Framework",
   "exports": {
     ".": {

package/src/hooks/editor/editor.test.ts

@@ -907,4 +907,311 @@ describe('editor hook', () => {
       });
     });
   });
+
+  describe('phoenix upload adapter', () => {
+    let fetchSpy: ReturnType<typeof vi.spyOn>;
+
+    beforeEach(() => {
+      fetchSpy = vi.spyOn(globalThis, 'fetch') as any;
+    });
+
+    afterEach(() => {
+      fetchSpy.mockRestore();
+    });
+
+    it('should initialize PhoenixUploadAdapter when phoenixUpload.url is configured', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+
+      expect(editor.plugins.has('PhoenixUploadAdapter')).toBe(true);
+      expect(editor.config.get('phoenixUpload.url')).toBe(uploadUrl);
+    });
+
+    it('should not initialize PhoenixUploadAdapter when phoenixUpload.url is not configured', async () => {
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {}),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+
+      // Plugin should be loaded but adapter not registered
+      expect(editor.plugins.has('PhoenixUploadAdapter')).toBe(true);
+    });
+
+    it('should upload file successfully', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const mockResponse = { url: 'https://example.com/uploads/image.jpg' };
+
+      fetchSpy.mockResolvedValueOnce(
+        new Response(JSON.stringify(mockResponse), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      );
+
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+
+      // Create a mock file
+      const file = new File(['test content'], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      if (!loader) {
+        throw new Error('Loader was not created');
+      }
+
+      const result = await loader.upload();
+
+      expect(fetchSpy).toHaveBeenCalledTimes(1);
+
+      const [calledUrl, calledOptions] = fetchSpy.mock.calls[0] as [string, RequestInit];
+
+      expect(calledUrl).toBe(uploadUrl);
+      expect(calledOptions.method).toBe('POST');
+      expect(calledOptions.body).toBeInstanceOf(FormData);
+
+      expect(result).toEqual({ default: mockResponse.url });
+    });
+
+    it('should include CSRF token in upload request if available', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const mockResponse = { url: 'https://example.com/uploads/image.jpg' };
+      const csrfToken = 'test-csrf-token';
+
+      // Mock CSRF token
+      const metaElement = document.createElement('meta');
+      metaElement.name = 'csrf-token';
+      metaElement.content = csrfToken;
+      document.head.appendChild(metaElement);
+
+      fetchSpy.mockResolvedValueOnce(
+        new Response(JSON.stringify(mockResponse), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      );
+
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+
+      const file = new File(['test content'], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      await loader!.upload();
+
+      const [_url, options] = fetchSpy.mock.calls[0] as [string, any];
+
+      expect(options.headers['X-CSRF-Token']).toBe(csrfToken);
+
+      // Clean up
+      document.head.removeChild(metaElement);
+    });
+
+    it('should handle upload errors', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const errorMessage = 'File too large';
+
+      fetchSpy.mockResolvedValueOnce(
+        new Response(JSON.stringify({ error: { message: errorMessage } }), {
+          status: 400,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      );
+
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+
+      const file = new File(['test content'], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      await expect(loader!.upload()).rejects.toThrow(errorMessage);
+    });
+
+    it('should handle generic upload errors when error message is not provided', async () => {
+      const uploadUrl = 'https://example.com/upload';
+
+      fetchSpy.mockResolvedValueOnce(
+        new Response('Server error', {
+          status: 500,
+        }),
+      );
+
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+
+      const file = new File(['test content'], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      await expect(loader!.upload()).rejects.toThrow('Couldn\'t upload file!');
+    });
+
+    it('should track upload progress', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const mockResponse = { url: 'https://example.com/uploads/image.jpg' };
+
+      fetchSpy.mockResolvedValueOnce(
+        new Response(JSON.stringify(mockResponse), {
+          status: 200,
+          headers: { 'Content-Type': 'application/json' },
+        }),
+      );
+
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+
+      const fileContent = 'a'.repeat(1024); // 1KB file
+      const file = new File([fileContent], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      // Before upload
+      expect(loader!.uploaded).toBe(0);
+
+      await loader!.upload();
+
+      // After upload
+      expect(loader!.uploadTotal).toBe(file.size);
+      expect(loader!.uploaded).toBe(file.size);
+    });
+
+    it('should not initialize adapter if SimpleUploadAdapter plugin is present', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          plugins: ['Image', 'ImageUpload', 'SimpleUploadAdapter'],
+          toolbar: [],
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      try {
+        await loader!.upload();
+      }
+      catch {
+        // Expected to fail or do nothing if no adapter is present
+      }
+
+      expect(fetchSpy).not.toHaveBeenCalledWith(uploadUrl, expect.anything());
+    });
+
+    it('should not initialize adapter if Base64UploadAdapter plugin is present', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          plugins: ['Image', 'ImageUpload', 'Base64UploadAdapter'],
+          toolbar: [],
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      try {
+        await loader!.upload();
+      }
+      catch {
+        // Expected to fail or do nothing if no adapter is present
+      }
+
+      expect(fetchSpy).not.toHaveBeenCalledWith(uploadUrl, expect.anything());
+    });
+
+    it('should not initialize adapter if CKFinderUploadAdapter plugin is present', async () => {
+      const uploadUrl = 'https://example.com/upload';
+      const hookElement = createEditorHtmlElement({
+        preset: createEditorPreset('classic', {
+          plugins: ['Image', 'ImageUpload', 'Link', 'CKFinderUploadAdapter'],
+          toolbar: [],
+          phoenixUpload: { url: uploadUrl },
+        }),
+      });
+
+      document.body.appendChild(hookElement);
+      EditorHook.mounted.call({ el: hookElement });
+
+      const editor = await waitForTestEditor();
+      const fileRepository = editor.plugins.get('FileRepository');
+      const file = new File(['test'], 'test.jpg', { type: 'image/jpeg' });
+      const loader = fileRepository.createLoader(file);
+
+      try {
+        await loader!.upload();
+      }
+      catch {
+        // Expected to fail or do nothing if no adapter is present
+      }
+
+      expect(fetchSpy).not.toHaveBeenCalledWith(uploadUrl, expect.anything());
+    });
+  });
 });

package/src/hooks/editor/editor.ts

@@ -3,15 +3,15 @@ import type { Editor } from 'ckeditor5';
 import type { EditorId } from './typings';
 import type { EditorCreator } from './utils';
 
-import {
-  isEmptyObject,
-  parseIntIfNotNull,
-  waitFor,
-} from '../../shared';
+import { isEmptyObject, parseIntIfNotNull, waitFor } from '../../shared';
 import { ClassHook, makeHook } from '../../shared/hook';
 import { ContextsRegistry, getNearestContextParentPromise } from '../context';
 import { EditorsRegistry } from './editors-registry';
-import { createSyncEditorWithInputPlugin, createSyncEditorWithPhoenixPlugin } from './plugins';
+import {
+  createPhoenixUploadAdapterPlugin,
+  createSyncEditorWithInputPlugin,
+  createSyncEditorWithPhoenixPlugin,
+} from './plugins';
 import {
   createEditorInContext,
   isSingleRootEditor,
@@ -189,13 +189,16 @@ class EditorHookImpl extends ClassHook {
     }
 
     loadedPlugins.push(
-      await createSyncEditorWithPhoenixPlugin({
-        editorId,
-        saveDebounceMs,
-        events,
-        pushEvent: this.pushEvent.bind(this),
-        handleEvent: this.handleEvent.bind(this),
-      }),
+      ...await Promise.all([
+        createSyncEditorWithPhoenixPlugin({
+          editorId,
+          saveDebounceMs,
+          events,
+          pushEvent: this.pushEvent.bind(this),
+          handleEvent: this.handleEvent.bind(this),
+        }),
+        createPhoenixUploadAdapterPlugin(),
+      ]),
     );
 
     // Mix custom translations with loaded translations.

package/src/hooks/editor/plugins/index.ts

@@ -1,2 +1,3 @@
+export * from './phoenix-upload-adapter';
 export * from './sync-editor-with-input';
 export * from './sync-editor-with-phoenix';

package/src/hooks/editor/plugins/phoenix-upload-adapter.ts

@@ -0,0 +1,155 @@
+import type { FileLoader, PluginConstructor, UploadAdapter } from 'ckeditor5';
+
+import { getCsrfToken } from '../../../shared';
+
+/**
+ * Creates a PhoenixUploadAdapter plugin class for CKEditor 5.
+ * This adapter handles image uploads to a Phoenix backend endpoint.
+ */
+export async function createPhoenixUploadAdapterPlugin(): Promise<PluginConstructor> {
+  const { Plugin, FileRepository } = await import('ckeditor5');
+
+  return class PhoenixUploadAdapter extends Plugin {
+    /**
+     * The name of the plugin.
+     */
+    static get pluginName() {
+      return 'PhoenixUploadAdapter' as const;
+    }
+
+    static get requires() {
+      return [FileRepository];
+    }
+
+    /**
+     * Initializes the plugin.
+     */
+    public init(): void {
+      const { editor } = this;
+      const { plugins, config } = editor;
+      const uploadUrl = config.get('phoenixUpload.url');
+
+      if (!uploadUrl) {
+        return;
+      }
+
+      // Check if we should enable this adapter
+      if (
+        plugins.has('SimpleUploadAdapter')
+        || plugins.has('Base64UploadAdapter')
+        || plugins.has('CKFinderUploadAdapter')
+      ) {
+        return;
+      }
+
+      // Register the upload adapter
+      const fileRepository = plugins.get(FileRepository);
+
+      fileRepository.createUploadAdapter = (loader: FileLoader) => new Adapter(loader, uploadUrl);
+    }
+  };
+}
+
+declare module '@ckeditor/ckeditor5-core' {
+  // eslint-disable-next-line ts/consistent-type-definitions
+  interface EditorConfig {
+    /**
+     * Configuration for Phoenix upload adapter.
+     */
+    phoenixUpload?: {
+      /**
+       * The URL to which files will be uploaded.
+       */
+      url: string;
+    };
+  }
+}
+
+/**
+ * Upload adapter that handles communication with Phoenix backend.
+ */
+class Adapter implements UploadAdapter {
+  private readonly loader: FileLoader;
+  private readonly uploadUrl: string;
+  private abortController: AbortController | null = null;
+
+  constructor(loader: FileLoader, uploadUrl: string) {
+    this.loader = loader;
+    this.uploadUrl = uploadUrl;
+  }
+
+  /**
+   * Starts the upload process.
+   */
+  public async upload(): Promise<{ default: string; }> {
+    const file = (await this.loader.file)!;
+
+    this.abortController = new AbortController();
+
+    const data = new FormData();
+
+    data.append('file', file);
+
+    // Attempt to track progress if the file size is known, though fetch doesn't support
+    // upload progress events natively.
+    if (file.size) {
+      this.loader.uploadTotal = file.size;
+      this.loader.uploaded = 0;
+    }
+
+    const headers: HeadersInit = {};
+    const csrfToken = getCsrfToken();
+
+    if (csrfToken) {
+      headers['X-CSRF-Token'] = csrfToken;
+    }
+
+    try {
+      const response = await fetch(this.uploadUrl, {
+        method: 'POST',
+        headers,
+        body: data,
+        signal: this.abortController.signal,
+      });
+
+      if (!response.ok) {
+        let errorMessage = 'Couldn\'t upload file!';
+
+        try {
+          const errorData = await response.json();
+          if (errorData?.error?.message) {
+            errorMessage = errorData.error.message;
+          }
+        }
+        catch { /* ignore */ }
+
+        throw new Error(errorMessage);
+      }
+
+      this.loader.uploaded = this.loader.uploadTotal!;
+
+      const result = await response.json();
+
+      return {
+        default: result.url,
+      };
+    }
+    /* v8 ignore next 7 */
+    catch (error: any) {
+      if (error.name === 'AbortError') {
+        throw error;
+      }
+
+      throw error.message || 'Couldn\'t upload file!';
+    }
+  }
+
+  /**
+   * Aborts the upload process.
+   */
+  /* v8 ignore next 4 */
+  public abort(): void {
+    this.abortController?.abort();
+    this.abortController = null;
+  }
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export { Hooks } from './hooks';
+export { ContextsRegistry } from './hooks/context/contexts-registry';
 export { CustomEditorPluginsRegistry } from './hooks/editor/custom-editor-plugins';
 export { EditorsRegistry } from './hooks/editor/editors-registry';
 export { unwrapEditorContext } from './hooks/editor/utils/create-editor-in-context';

package/src/shared/get-csrf-token.test.ts

@@ -0,0 +1,54 @@
+import { afterEach, describe, expect, it } from 'vitest';
+
+import { getCsrfToken } from './get-csrf-token';
+
+describe('getCsrfToken', () => {
+  afterEach(() => {
+    document.head.innerHTML = '';
+
+    // Clear cookies by expiring them
+    const cookies = document.cookie.split(';');
+
+    for (let i = 0; i < cookies.length; i++) {
+      const cookie = cookies[i]!;
+      const eqPos = cookie.indexOf('=');
+      const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
+
+      document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+    }
+  });
+
+  it('should return null if no token is found', () => {
+    expect(getCsrfToken()).toBeNull();
+  });
+
+  it('should retrieve token from meta tag', () => {
+    const meta = document.createElement('meta');
+    meta.name = 'csrf-token';
+    meta.content = 'meta-token-123';
+    document.head.appendChild(meta);
+
+    expect(getCsrfToken()).toBe('meta-token-123');
+  });
+
+  it('should retrieve token from cookie', () => {
+    document.cookie = '_csrf_token=cookie-token-456; other=value';
+    expect(getCsrfToken()).toBe('cookie-token-456');
+  });
+
+  it('should prioritize meta tag over cookie', () => {
+    const meta = document.createElement('meta');
+    meta.name = 'csrf-token';
+    meta.content = 'meta-token-789';
+    document.head.appendChild(meta);
+
+    document.cookie = '_csrf_token=cookie-token-000';
+
+    expect(getCsrfToken()).toBe('meta-token-789');
+  });
+
+  it('should handle URL encoded cookie values', () => {
+    document.cookie = '_csrf_token=token%20with%20spaces';
+    expect(getCsrfToken()).toBe('token with spaces');
+  });
+});

package/src/shared/get-csrf-token.ts

@@ -0,0 +1,18 @@
+/**
+ * Retrieves the CSRF token from the meta tag or cookie.
+ *
+ * @returns The CSRF token or null if not found.
+ */
+export function getCsrfToken(): string | null {
+  // Try to get from meta tag (Phoenix default).
+  const metaTag = document.querySelector('meta[name="csrf-token"]');
+
+  if (metaTag) {
+    return metaTag.getAttribute('content');
+  }
+
+  // Try to get from cookie.
+  const match = document.cookie.match(/(?:^|; )_csrf_token=([^;]*)/);
+
+  return match ? decodeURIComponent(match[1]!) : null;
+}

package/src/shared/index.ts

@@ -3,6 +3,7 @@ export * from './camel-case';
 export * from './debounce';
 export * from './deep-camel-case-keys';
 export * from './filter-object-values';
+export * from './get-csrf-token';
 export * from './hook';
 export * from './is-empty-object';
 export * from './is-nil';

package/test-utils/editor/create-editor-preset.ts

@@ -9,7 +9,7 @@ export function createEditorPreset(
   customTranslations?: object,
 ) {
   const defaultConfig: EditorConfig = {
-    plugins: ['Essentials', 'Paragraph', 'Bold', 'Italic', 'Undo'],
+    plugins: ['Essentials', 'Paragraph', 'Bold', 'Italic', 'Undo', 'Image', 'ImageUpload'],
     toolbar: ['undo', 'redo', '|', 'bold', 'italic'],
   };