Pass options object to plugins

addon/components/ce/content-editable.ts

@@ -24,7 +24,7 @@ import {
   Logger,
 } from '@lblod/ember-rdfa-editor/utils/logging-utils';
 import SidewayArrowsHandler from '@lblod/ember-rdfa-editor/editor/input-handlers/sideway-arrows-handler';
-import { EditorPlugin } from '@lblod/ember-rdfa-editor/utils/editor-plugin';
+import { ResolvedPluginConfig } from '../rdfa/rdfa-editor';
 
 interface FeatureService {
   isEnabled(key: string): boolean;
@@ -35,7 +35,7 @@ interface ContentEditableArgs {
 
   rawEditorInit(editor: RawEditor): void;
 
-  plugins: EditorPlugin[];
+  plugins: ResolvedPluginConfig[];
 
   baseIRI?: string;
 

addon/components/rdfa/rdfa-editor.ts

@@ -20,6 +20,17 @@ import BasicStyles from '@lblod/ember-rdfa-editor/plugins/basic-styles/basic-sty
 import LumpNodePlugin from '@lblod/ember-rdfa-editor/plugins/lump-node/lump-node';
 import { ActiveComponentEntry } from '@lblod/ember-rdfa-editor/model/inline-components/inline-components-registry';
 
+export type PluginConfig =
+  | string
+  | {
+      name: string;
+      options: unknown;
+    };
+
+export interface ResolvedPluginConfig {
+  instance: EditorPlugin;
+  options: unknown;
+}
 interface RdfaEditorArgs {
   /**
    * callback that is called with an interface to the editor after editor init completed
@@ -28,7 +39,7 @@ interface RdfaEditorArgs {
    */
   rdfaEditorInit(editor: RdfaDocument): void;
 
-  plugins: string[];
+  plugins: PluginConfig[];
   stealFocus?: boolean;
 }
 
@@ -64,10 +75,10 @@ export default class RdfaEditor extends Component<RdfaEditorArgs> {
   private owner: ApplicationInstance;
   private logger: Logger;
 
-  get plugins(): string[] {
+  get plugins(): PluginConfig[] {
     return this.args.plugins || [];
   }
-  get editorPlugins(): EditorPlugin[] {
+  get editorPlugins(): ResolvedPluginConfig[] {
     return this.getPlugins();
   }
 
@@ -108,13 +119,25 @@ export default class RdfaEditor extends Component<RdfaEditorArgs> {
     this.editorLoading = false;
   }
 
-  getPlugins(): EditorPlugin[] {
-    const pluginNames = this.plugins;
-    const plugins = [new BasicStyles(), new LumpNodePlugin()];
-    for (const name of pluginNames) {
+  getPlugins(): ResolvedPluginConfig[] {
+    const pluginConfigs = this.plugins;
+    const plugins: ResolvedPluginConfig[] = [
+      { instance: new BasicStyles(), options: null },
+      { instance: new LumpNodePlugin(), options: null },
+    ];
+    for (const config of pluginConfigs) {
+      let name;
+      let options: unknown = null;
+      if (typeof config === 'string') {
+        name = config;
+      } else {
+        name = config.name;
+        options = config.options;
+      }
+
       const plugin = this.owner.lookup(`plugin:${name}`) as EditorPlugin | null;
       if (plugin) {
-        plugins.push(plugin);
+        plugins.push({ instance: plugin, options });
       } else {
         this.logger(`plugin ${name} not found! Skipping...`);
       }

addon/utils/ce/raw-editor.ts

@@ -69,10 +69,10 @@ import RemovePropertyCommand from '@lblod/ember-rdfa-editor/commands/node-proper
 import AddMarkToSelectionCommand from '@lblod/ember-rdfa-editor/commands/add-mark-to-selection-command';
 import RemoveMarkFromSelectionCommand from '@lblod/ember-rdfa-editor/commands/remove-mark-from-selection-command';
 import InsertComponentCommand from '@lblod/ember-rdfa-editor/commands/insert-component-command';
-import { EditorPlugin } from '../editor-plugin';
 import { createLogger, Logger } from '../logging-utils';
 import RemoveComponentCommand from '@lblod/ember-rdfa-editor/commands/remove-component-command';
 import { InlineComponentSpec } from '@lblod/ember-rdfa-editor/model/inline-components/model-inline-component';
+import { ResolvedPluginConfig } from '@lblod/ember-rdfa-editor/components/rdfa/rdfa-editor';
 
 export interface RawEditorProperties {
   baseIRI: string;
@@ -142,19 +142,22 @@ export default class RawEditor {
     );
   }
 
-  async initializePlugins(plugins: EditorPlugin[]) {
-    for (const plugin of plugins) {
-      await this.initializePlugin(plugin);
+  async initializePlugins(configs: ResolvedPluginConfig[]) {
+    for (const config of configs) {
+      await this.initializePlugin(config);
     }
   }
 
-  async initializePlugin(plugin: EditorPlugin): Promise<void> {
-    const controller = new RawEditorController(plugin.name, this);
-    await plugin.initialize(controller);
-    this.logger(`Initialized plugin ${plugin.name}`);
+  async initializePlugin(config: ResolvedPluginConfig): Promise<void> {
+    const controller = new RawEditorController(config.instance.name, this);
+    await config.instance.initialize(controller, config.options);
+    this.logger(
+      `Initialized plugin ${config.instance.name} with options: `,
+      config.options
+    );
   }
 
-  async initialize(rootNode: HTMLElement, plugins: EditorPlugin[]) {
+  async initialize(rootNode: HTMLElement, plugins: ResolvedPluginConfig[]) {
     this.registeredCommands = new Map<string, Command>();
     if (this.modelSelectionTracker) {
       this.modelSelectionTracker.stopTracking();

addon/utils/editor-plugin.ts

@@ -41,5 +41,5 @@ export interface EditorPlugin {
    * However, it is not advised to depend on this fact.
    * @param controller Each plugin receives a unique controller instance. It is their only interface to the editor.
    */
-  initialize(controller: Controller): Promise<void>;
+  initialize(controller: Controller, options: unknown): Promise<void>;
 }

tests/dummy/app/controllers/index.ts

@@ -22,7 +22,7 @@ export default class IndexController extends Controller {
   @service router!: RouterService;
   @service features!: FeaturesService;
   @tracked htmlDebuggerOpen = false;
-  @tracked plugins = ['dummy'];
+  @tracked plugins = [{ name: 'dummy', options: { testKey: 'hello' } }];
   private unloadListener?: () => void;
   private xmlEditor?: EditorView;
   private htmlEditor?: EditorView;

tests/dummy/app/testplugin/dummy-plugin.ts

@@ -3,12 +3,25 @@ import Controller from '@lblod/ember-rdfa-editor/model/controller';
 import GenTreeWalker from '@lblod/ember-rdfa-editor/model/util/gen-tree-walker';
 import ModelNode from '@lblod/ember-rdfa-editor/model/model-node';
 import { toFilterSkipFalse } from '@lblod/ember-rdfa-editor/model/util/model-tree-walker';
+import {
+  createLogger,
+  Logger,
+} from '@lblod/ember-rdfa-editor/utils/logging-utils';
+
+export interface DummyPluginOptions {
+  testKey: string;
+}
 
 export default class DummyPlugin implements EditorPlugin {
   private controller!: Controller;
+  private logger: Logger = createLogger(this.constructor.name);
 
   // eslint-disable-next-line @typescript-eslint/require-await
-  async initialize(controller: Controller): Promise<void> {
+  async initialize(
+    controller: Controller,
+    options: DummyPluginOptions
+  ): Promise<void> {
+    this.logger('recieved options: ', options);
     this.controller = controller;
     this.controller.onEvent('contentChanged', () => {
       for (const mark of this.controller.ownMarks) {