Allow for custom plugins to be passed in to the text editor and initialised when editor is created

src/components/text-editor/prosemirror-adapter/plugins/plugin-factory.ts

@@ -0,0 +1,35 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+
+export class CustomEditorPlugin<T = any> {
+    private key: PluginKey;
+
+    constructor(
+        private props: T,
+        private name: string,
+    ) {
+        this.key = new PluginKey(name);
+    }
+
+    public getPluginKey(): PluginKey {
+        return this.key;
+    }
+
+    public getName(): string {
+        return this.name;
+    }
+
+    public getProps(): T {
+        return this.props;
+    }
+
+    public createPlugin(): Plugin {
+        return new Plugin({
+            key: this.getPluginKey(),
+            props: this.getProps(),
+        });
+    }
+}
+
+export const pluginFactory = (plugin: CustomEditorPlugin): Plugin => {
+    return plugin.createPlugin();
+};

src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx

@@ -11,6 +11,7 @@
 import { EditorState, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
 import { Schema, DOMParser } from 'prosemirror-model';
+import { Plugin } from 'prosemirror-state';
 import { schema } from 'prosemirror-schema-basic';
 import { addListNodes } from 'prosemirror-schema-list';
 import { exampleSetup } from 'prosemirror-example-setup';
@@ -76,6 +77,12 @@
     @Prop({ reflect: true })
     public language: Languages;
 
+    /**
+     * An array of custom ProseMirror plugins to load into the editor.
+     */
+    @Prop()
+    public customPlugins: Array<Plugin> = [];
+
     @Element()
     private host: HTMLLimelTextEditorElement;
 
@@ -288,6 +295,7 @@
                     this.updateActiveActionBarItems,
                 ),
                 createActionBarInteractionPlugin(this.menuCommandFactory),
+                ...this.customPlugins,
             ],
         });
     }

src/components/text-editor/text-editor.tsx

@@ -1,7 +1,13 @@
 import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core';
+import { Plugin } from 'prosemirror-state';
 import { FormComponent } from '../form/form.types';
 import { Languages } from '../date-picker/date.types';
 import { createRandomString } from '../../util/random-string';
+import {
+    CustomEditorPlugin,
+    pluginFactory,
+} from './prosemirror-adapter/plugins/plugin-factory';
+
 /**
  * A rich text editor that offers a rich text editing experience with markdown support,
  * in the sense that you can easily type markdown syntax and see the rendered
@@ -120,6 +126,9 @@ export class TextEditor implements FormComponent<string> {
     private helperTextId: string;
     private editorId: string;
 
+    @Prop()
+    public customPlugins: CustomEditorPlugin[] = [];
+
     public constructor() {
         this.helperTextId = createRandomString();
         this.editorId = createRandomString();
@@ -173,12 +182,30 @@ export class TextEditor implements FormComponent<string> {
                 tabindex={this.disabled ? -1 : 0}
                 aria-disabled={this.disabled}
                 language={this.language}
+                customPlugins={this.createPlugins(this.customPlugins)}
             />,
             this.renderPlaceholder(),
             this.renderHelperLine(),
         ];
     }
 
+    private createPlugins(plugins: CustomEditorPlugin[]): Plugin[] {
+        const pluginArray: Plugin[] = [];
+
+        for (const plugin of plugins) {
+            if (!plugin) {
+                return;
+            }
+
+            const createdPlugin = pluginFactory(plugin);
+            if (createdPlugin) {
+                pluginArray.push(createdPlugin);
+            }
+        }
+
+        return pluginArray;
+    }
+
     private renderLabel() {
         if (!this.label) {
             return;