ckeditor5-blazor 1.3.0 → 1.5.0

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

@@ -1 +1 @@
-{"version":3,"file":"create-editable-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editable-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAO9C;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IAgDpF;;OAEG;;IAiBH;;;OAGG;sBACqB,MAAM;EAWjC"}
+{"version":3,"file":"create-editable-blazor-interop.d.ts","sourceRoot":"","sources":["../../../src/interop/create-editable-blazor-interop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAQ9C;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,aAAa;IAgDpF;;OAEG;;IAiBH;;;OAGG;sBACqB,MAAM;EAWjC"}

package/package.json

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

package/src/elements/editor/typings.ts

@@ -10,9 +10,22 @@ export type EditorId = string;
 export type EditorType = 'inline' | 'classic' | 'balloon' | 'decoupled' | 'multiroot';
 
 /**
- * Represents a CKEditor5 plugin as a string identifier.
+ * Represents a custom plugin loaded from a JavaScript module path.
+ * Serialized from C# as <c>{ "$import": { "name": "...", "path": "..." } }</c>.
  */
-export type EditorPlugin = string;
+export type EditorPluginImport = {
+  $import: {
+    name: string;
+    path: string;
+  };
+};
+
+/**
+ * Represents a CKEditor5 plugin — either a built-in string identifier or a
+ * custom {@link EditorPluginImport} descriptor that loads a named export from
+ * the given JavaScript module path.
+ */
+export type EditorPlugin = string | EditorPluginImport;
 
 /**
  * Configuration object for CKEditor5 editor instance.

package/src/elements/editor/utils/load-editor-plugins.test.ts

@@ -1,6 +1,6 @@
 import type { EditorPlugin } from '../typings';
 
-import { afterEach, describe, expect, it } from 'vitest';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 
 import { CustomEditorPluginsRegistry } from '../custom-editor-plugins';
 import { loadEditorPlugins } from './load-editor-plugins';
@@ -11,6 +11,22 @@ class CustomPlugin {
   }
 }
 
+class ImportedPlugin {
+  static get pluginName() {
+    return 'ImportedPlugin';
+  }
+}
+
+vi.mock('custom-import-module', () => ({
+  ImportedPlugin,
+}));
+
+vi.mock('default-export-module', () => ({
+  default: ImportedPlugin,
+}));
+
+vi.mock('empty-module', () => ({}));
+
 describe('loadEditorPlugins', () => {
   it('should load plugins from base package', async () => {
     const plugins: EditorPlugin[] = ['Bold', 'Italic'];
@@ -97,4 +113,35 @@ describe('loadEditorPlugins', () => {
       expect(loadedPlugins[0]).toEqual(CustomPlugin);
     });
   });
+
+  describe('import descriptor plugins', () => {
+    it('should load plugin from named export via $import descriptor', async () => {
+      const plugins: EditorPlugin[] = [{ $import: { name: 'ImportedPlugin', path: 'custom-import-module' } }];
+      const { loadedPlugins } = await loadEditorPlugins(plugins);
+
+      expect(loadedPlugins).toHaveLength(1);
+      expect(loadedPlugins[0]).toEqual(ImportedPlugin);
+    });
+
+    it('should fall back to default export when named export is absent', async () => {
+      const plugins: EditorPlugin[] = [{ $import: { name: 'NonExistent', path: 'default-export-module' } }];
+      const { loadedPlugins } = await loadEditorPlugins(plugins);
+
+      expect(loadedPlugins).toHaveLength(1);
+      expect(loadedPlugins[0]).toEqual(ImportedPlugin);
+    });
+
+    it('should throw when neither named nor default export is found', async () => {
+      const plugins: EditorPlugin[] = [{ $import: { name: 'MissingExport', path: 'empty-module' } }];
+      await expect(loadEditorPlugins(plugins)).rejects.toThrowError(/not found in module/);
+    });
+
+    it('should mix string plugins and import descriptors', async () => {
+      const plugins: EditorPlugin[] = ['Bold', { $import: { name: 'ImportedPlugin', path: 'custom-import-module' } }];
+      const { loadedPlugins } = await loadEditorPlugins(plugins);
+
+      expect(loadedPlugins).toHaveLength(2);
+      expect(loadedPlugins[1]).toEqual(ImportedPlugin);
+    });
+  });
 });

package/src/elements/editor/utils/load-editor-plugins.ts

@@ -1,4 +1,4 @@
-import type { EditorPlugin } from '../typings';
+import type { EditorPlugin, EditorPluginImport } from '../typings';
 import type { PluginConstructor } from 'ckeditor5';
 
 import { CKEditor5BlazorError } from '../../../ckeditor5-blazor-error';
@@ -7,8 +7,9 @@ import { CustomEditorPluginsRegistry } from '../custom-editor-plugins';
 /**
  * Loads CKEditor plugins from base and premium packages.
  * First tries to load from the base 'ckeditor5' package, then falls back to 'ckeditor5-premium-features'.
+ * Supports custom import descriptors ({ $import: { name, path } }) for plugins loaded from custom modules.
  *
- * @param plugins - Array of plugin names to load
+ * @param plugins - Array of plugin names or import descriptors to load
  * @returns Promise that resolves to an array of loaded Plugin instances
  * @throws Error if a plugin is not found in either package
  */
@@ -17,8 +18,21 @@ export async function loadEditorPlugins(plugins: EditorPlugin[]): Promise<Loaded
   let premiumPackage: Record<string, any> | null = null;
 
   const loaders = plugins.map(async (plugin) => {
-    // Let's first try to load the plugin from the base package.
-    // Coverage is disabled due to Vitest issues with mocking dynamic imports.
+    // Handle custom import descriptor: { $import: { name, path } }
+    if (isPluginImport(plugin)) {
+      const { name, path } = plugin.$import;
+
+      const mod = await import(/* @vite-ignore */ path);
+      const typedMod = mod as Record<string, unknown>;
+      const ctor = (Object.prototype.hasOwnProperty.call(typedMod, name) ? typedMod[name] : undefined)
+        ?? (Object.prototype.hasOwnProperty.call(typedMod, 'default') ? typedMod['default'] : undefined);
+
+      if (!ctor) {
+        throw new CKEditor5BlazorError(`Plugin "${name}" not found in module "${path}".`);
+      }
+
+      return ctor as PluginConstructor;
+    }
 
     // If the plugin is not found in the base package, try custom plugins.
     const customPlugin = await CustomEditorPluginsRegistry.the.get(plugin);
@@ -63,6 +77,13 @@ export async function loadEditorPlugins(plugins: EditorPlugin[]): Promise<Loaded
   };
 }
 
+/**
+ * Returns `true` when the plugin entry is an import descriptor (`{ $import: ... }`).
+ */
+function isPluginImport(plugin: EditorPlugin): plugin is EditorPluginImport {
+  return typeof plugin === 'object' && plugin !== null && '$import' in plugin;
+}
+
 /**
  * Type representing the loaded plugins and whether premium features are available.
  */

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

@@ -78,6 +78,27 @@ describe('createEditableBlazorInterop', () => {
     );
   });
 
+  it('falls back to the first available editor id when data-cke-editor-id attribute is missing', async () => {
+    element.removeAttribute('data-cke-editor-id');
+
+    createEditableBlazorInterop(element, dotnetInterop);
+
+    const editor = await waitForTestEditor();
+    const changeEvent = new CKEditor5ChangeDataEvent({
+      editorId: DEFAULT_TEST_EDITOR_ID,
+      editor,
+      roots: { main: 'fallback changed' },
+    });
+
+    document.body.dispatchEvent(changeEvent);
+
+    expect(dotnetInterop.invokeMethodAsync).toHaveBeenCalledWith(
+      'OnChangeEditableData',
+      expect.anything(),
+      'fallback changed',
+    );
+  });
+
   it('should ignore ckeditor5 change events from other editors', async () => {
     createEditableBlazorInterop(element, dotnetInterop);
 

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

@@ -2,6 +2,7 @@ import type { DotNetInterop } from '../types';
 
 import { EditorsRegistry } from '../elements/editor/editors-registry';
 import { CKEditor5ChangeDataEvent } from '../elements/editor/plugins/dispatch-editor-roots-change-event';
+import { queryAllEditorIds } from '../elements/editor/utils';
 import { markElementAsInteractive } from '../shared';
 import { createEditorValueSync, createNoopSync } from './utils/create-editor-value-sync';
 
@@ -14,7 +15,7 @@ import { createEditorValueSync, createNoopSync } from './utils/create-editor-val
  * @returns An object containing lifecycle and synchronization methods.
  */
 export function createEditableBlazorInterop(element: HTMLElement, interop: DotNetInterop) {
-  const editorId = element.getAttribute('data-cke-editor-id');
+  const editorId = element.getAttribute('data-cke-editor-id') ?? queryAllEditorIds()[0]!;
   const rootName = element.getAttribute('data-cke-root-name') ?? 'main';
 
   let unmounted = false;