From b69c475ffe09a2088807d714e8a20e07aa2b3b1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Wallstr=C3=B6m?=
 <21986391+FredrikWallstrom@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:07:52 +0100
Subject: [PATCH] feat(text-editor): add insertHtml function to properly parse
 html string

Co-authored-by: Adrian Schmidt <adrian.schmidt@lime.tech>
---
 etc/lime-elements.api.md                      |  1 +
 .../examples/text-editor-custom-triggers.tsx  | 85 +++++++++++++---
 .../trigger/create-html-inserter.spec.ts      | 98 +++++++++++++++++++
 .../plugins/trigger/create-html-inserter.ts   | 25 +++++
 .../plugins/trigger/factory.ts                | 29 +++++-
 .../plugins/trigger/inserter.ts               | 83 ++++++++++------
 .../prosemirror-adapter.tsx                   |  5 +-
 .../text-editor/text-editor.types.ts          |  7 +-
 8 files changed, 279 insertions(+), 54 deletions(-)
 create mode 100644 src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.spec.ts
 create mode 100644 src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.ts

diff --git a/etc/lime-elements.api.md b/etc/lime-elements.api.md
index 9dd3535e60..dba08c3adf 100644
--- a/etc/lime-elements.api.md
+++ b/etc/lime-elements.api.md
@@ -2417,6 +2417,7 @@ export interface TabPanelComponent {
 // @alpha (undocumented)
 export interface TextEditor {
     insert: (input: TextEditorNode | string) => void;
+    insertHtml: (input: string) => Promise<void>;
     // (undocumented)
     stopTrigger: () => void;
 }
diff --git a/src/components/text-editor/examples/text-editor-custom-triggers.tsx b/src/components/text-editor/examples/text-editor-custom-triggers.tsx
index 38d2a8f979..659fcc4be1 100644
--- a/src/components/text-editor/examples/text-editor-custom-triggers.tsx
+++ b/src/components/text-editor/examples/text-editor-custom-triggers.tsx
@@ -27,8 +27,11 @@ import { TextEditor, TriggerEventDetail } from '../text-editor.types';
  * supplied methods will effectivly replace the trigger content in the text editor with
  * the content of choice.
  *
- * In this example we pass either a text or a `limel-chip` representing some chosen user
- * in a mention like situation.
+ * In this example we pass either plain text, HTML string, or a `limel-chip`
+ * representing some chosen user in a mention like situation.
+ *
+ * :::note
+ * Changing the contentType resets the text editor with an empty value.
  */
 @Component({
     tag: 'limel-example-text-editor-triggers',
@@ -43,13 +46,16 @@ export class TextEditorCustomTriggersExample {
     private triggerState: string = '';
 
     @State()
-    private inputText: string = '';
+    private tagValue: string = '';
 
     @State()
     private isPickerOpen: boolean = false;
 
     @State()
-    private insertMode: 'text' | 'chip' = 'text';
+    private insertMode: 'text' | 'chip' | 'html' = 'text';
+
+    @State()
+    private contentType: 'markdown' | 'html' = 'markdown';
 
     @State()
     private items: Array<MenuItem<number>> = [
@@ -76,6 +82,22 @@ export class TextEditorCustomTriggersExample {
             id: '2',
             title: 'chip',
         },
+        {
+            id: '3',
+            title: 'html',
+        },
+    ];
+
+    private contentTypeButtons: Button[] = [
+        {
+            id: '1',
+            title: 'markdown',
+            selected: true,
+        },
+        {
+            id: '2',
+            title: 'html',
+        },
     ];
 
     private triggerFunction?: TextEditor;
@@ -85,11 +107,11 @@ export class TextEditorCustomTriggersExample {
         this.setupEventHandlers();
     }
 
-    @Watch('inputText')
-    protected watchInputText() {
+    @Watch('tagValue')
+    protected watchTagValue() {
         if (this.isPickerOpen) {
             this.visibleItems = this.items.filter((item: MenuItem<number>) =>
-                item.text.toLowerCase().includes(this.inputText),
+                item.text.toLowerCase().includes(this.tagValue),
             );
         }
     }
@@ -180,6 +202,16 @@ export class TextEditorCustomTriggersExample {
 
     public render() {
         return [
+            <limel-example-controls>
+                <label>
+                    contentType:
+                    <limel-button-group
+                        class="mode"
+                        value={this.contentTypeButtons}
+                        onChange={this.handleContentTypeChange}
+                    />
+                </label>
+            </limel-example-controls>,
             this.renderPicker(),
             <limel-text-editor
                 style={{ display: 'block' }}
@@ -192,14 +224,18 @@ export class TextEditorCustomTriggersExample {
                 onTriggerStop={this.handleTriggerStop}
                 onTriggerChange={this.handleTriggerChange}
                 onChange={this.handleChange}
+                contentType={this.contentType}
+                key={this.contentType}
             />,
             <limel-example-controls>
-                Insert mode:
-                <limel-button-group
-                    class="mode"
-                    value={this.insertModeButtons}
-                    onChange={this.handleInsertModeChange}
-                />
+                <label>
+                    Insert mode:
+                    <limel-button-group
+                        class="mode"
+                        value={this.insertModeButtons}
+                        onChange={this.handleInsertModeChange}
+                    />
+                </label>
                 <div class="value">
                     <limel-example-value
                         label="Action"
@@ -207,7 +243,7 @@ export class TextEditorCustomTriggersExample {
                     />
                     <limel-example-value
                         label="Tag value"
-                        value={this.inputText}
+                        value={this.tagValue}
                     />
                 </div>
             </limel-example-controls>,
@@ -252,12 +288,12 @@ export class TextEditorCustomTriggersExample {
 
     private handleTriggerStop = () => {
         this.triggerState = 'stop';
-        this.inputText = '';
+        this.tagValue = '';
         this.isPickerOpen = false;
     };
 
     private handleTriggerChange = (event: CustomEvent<TriggerEventDetail>) => {
-        this.inputText = event.detail.value.toLowerCase();
+        this.tagValue = event.detail.value.toLowerCase();
     };
 
     private handleChange = (event: CustomEvent<string>) => {
@@ -274,9 +310,26 @@ export class TextEditorCustomTriggersExample {
         this.insertMode = event.detail.title as any;
     };
 
+    private handleContentTypeChange = (event: CustomEvent<Button>) => {
+        this.contentType = event.detail.title as any;
+        this.value = '';
+    };
+
     private insertItem = (item: MenuItem) => {
         this.removeAllSelections();
         this.visibleItems = this.items;
+
+        if (this.insertMode === 'html') {
+            this.triggerFunction
+                .insertHtml(`<strong>${item.text}</strong>`)
+                .then(() => console.log('HTML inserted successfully'))
+                .catch((error) =>
+                    console.error('Error inserting HTML:', error),
+                );
+
+            return;
+        }
+
         if (this.insertMode === 'text') {
             this.triggerFunction.insert('@' + item.text);
 
diff --git a/src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.spec.ts b/src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.spec.ts
new file mode 100644
index 0000000000..e17db66c6f
--- /dev/null
+++ b/src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.spec.ts
@@ -0,0 +1,98 @@
+import { Schema } from 'prosemirror-model';
+import { createHtmlInserter } from './create-html-inserter';
+
+describe('createHtmlInserter', () => {
+    let mockContentConverter: any;
+    let mockDispatchTransaction: jest.Mock;
+    let schema: Schema;
+
+    beforeEach(() => {
+        mockContentConverter = {
+            parseAsHTML: jest.fn((input) => Promise.resolve(`<p>${input}</p>`)),
+        };
+
+        mockDispatchTransaction = jest.fn();
+
+        schema = new Schema({
+            nodes: {
+                doc: { content: 'block+' },
+                paragraph: { group: 'block', content: 'inline*' },
+                text: { group: 'inline' },
+            },
+            marks: {},
+        });
+    });
+
+    it('resolves after inserting valid HTML into the editor', async () => {
+        const inserter = await createHtmlInserter(
+            { state: { schema: schema } } as any, // Mock EditorView
+            mockContentConverter,
+            0, // startPos
+            mockDispatchTransaction,
+        );
+
+        const inputHtml = '<strong>Test</strong>';
+        await inserter(inputHtml);
+
+        expect(mockContentConverter.parseAsHTML).toHaveBeenCalledWith(
+            inputHtml,
+            schema,
+        );
+        expect(mockDispatchTransaction).toHaveBeenCalledTimes(1);
+    });
+
+    it('resolves after handling invalid HTML gracefully', async () => {
+        const inserter = await createHtmlInserter(
+            { state: { schema: schema } } as any,
+            mockContentConverter,
+            0,
+            mockDispatchTransaction,
+        );
+
+        const inputHtml = '<div><p>Unclosed tag';
+        await inserter(inputHtml);
+
+        expect(mockContentConverter.parseAsHTML).toHaveBeenCalledWith(
+            inputHtml,
+            schema,
+        );
+        expect(mockDispatchTransaction).toHaveBeenCalledTimes(1);
+    });
+
+    it('dispatches the correct fragment for nested HTML', async () => {
+        const inserter = await createHtmlInserter(
+            { state: { schema: schema } } as any,
+            mockContentConverter,
+            0,
+            mockDispatchTransaction,
+        );
+
+        const inputHtml = '<div><span color="#FF0000">Nested</span></div>';
+        await inserter(inputHtml);
+
+        expect(mockDispatchTransaction).toHaveBeenCalledTimes(1);
+
+        // Convert the fragment to an array for easier testing
+        const dispatchedArgs = mockDispatchTransaction.mock.calls[0];
+        const dispatchedFragment = dispatchedArgs[2];
+        const fragmentArray = dispatchedFragment.content.map((node) =>
+            node.toJSON(),
+        );
+
+        // Check the structure and content of the fragment
+        // The reason that the structure doesn't completely match the input is
+        // that ProseMirror will transform the input based on what the schema
+        // allows. (At least I think that's why… /Ads)
+        expect(fragmentArray).toEqual([
+            {
+                type: 'paragraph',
+                content: [
+                    {
+                        type: 'text',
+                        text: 'Nested',
+                    },
+                ],
+            },
+        ]);
+    });
+});
diff --git a/src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.ts b/src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.ts
new file mode 100644
index 0000000000..e72579fdb3
--- /dev/null
+++ b/src/components/text-editor/prosemirror-adapter/plugins/trigger/create-html-inserter.ts
@@ -0,0 +1,25 @@
+import { Node, DOMParser, Fragment } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { ContentTypeConverter } from '../../../utils/content-type-converter';
+
+export const createHtmlInserter = (
+    view: EditorView,
+    contentConverter: ContentTypeConverter,
+    startPos: number,
+    dispatchTransaction: (
+        view: EditorView,
+        startPos: number,
+        fragment: Fragment | Node,
+    ) => void,
+): ((input: string) => Promise<void>) => {
+    const schema = view.state.schema;
+
+    return async (input: string): Promise<void> => {
+        const container = document.createElement('span');
+        container.innerHTML = await contentConverter.parseAsHTML(input, schema);
+
+        const fragment = DOMParser.fromSchema(schema).parse(container).content;
+
+        dispatchTransaction(view, startPos, fragment);
+    };
+};
diff --git a/src/components/text-editor/prosemirror-adapter/plugins/trigger/factory.ts b/src/components/text-editor/prosemirror-adapter/plugins/trigger/factory.ts
index 38bdb0e629..13ae6fe023 100644
--- a/src/components/text-editor/prosemirror-adapter/plugins/trigger/factory.ts
+++ b/src/components/text-editor/prosemirror-adapter/plugins/trigger/factory.ts
@@ -6,6 +6,7 @@ import {
     TriggerCharacter,
     TriggerEventDetail,
 } from 'src/components/text-editor/text-editor.types';
+import { ContentTypeConverter } from '../../../utils/content-type-converter';
 
 const isTrigger = (
     key: string,
@@ -61,12 +62,13 @@ const stillHasTrigger = (
 
 const getTriggerEventDetail = (
     view: EditorView,
+    contentConverter: ContentTypeConverter,
     trigger: TriggerCharacter,
     value: string,
 ): TriggerEventDetail => {
     return {
         trigger: trigger,
-        textEditor: inserterFactory(view),
+        textEditor: inserterFactory(view, contentConverter),
         value: value,
     };
 };
@@ -74,11 +76,12 @@ const getTriggerEventDetail = (
 const sendTriggerEvent = (
     type: 'triggerStart' | 'triggerStop' | 'triggerChange',
     view: EditorView,
+    contentConverter: ContentTypeConverter,
     trigger: TriggerCharacter,
     value: string,
 ) => {
     const event = new CustomEvent<TriggerEventDetail>(type, {
-        detail: getTriggerEventDetail(view, trigger, value),
+        detail: getTriggerEventDetail(view, contentConverter, trigger, value),
         bubbles: true,
         composed: true,
     });
@@ -129,7 +132,10 @@ const processTransactions = (
     return text;
 };
 
-export const createTriggerPlugin = (triggerCharacters: TriggerCharacter[]) => {
+export const createTriggerPlugin = (
+    triggerCharacters: TriggerCharacter[],
+    contentConverter: ContentTypeConverter,
+) => {
     let activeTrigger: TriggerCharacter | null = null;
     let triggerText = '';
     let pluginView: EditorView | null = null;
@@ -137,7 +143,13 @@ export const createTriggerPlugin = (triggerCharacters: TriggerCharacter[]) => {
 
     const stopTrigger = () => {
         triggerText = '';
-        sendTriggerEvent('triggerStop', pluginView, activeTrigger, triggerText);
+        sendTriggerEvent(
+            'triggerStop',
+            pluginView,
+            contentConverter,
+            activeTrigger,
+            triggerText,
+        );
         triggerPosition = null;
         activeTrigger = null;
     };
@@ -163,7 +175,13 @@ export const createTriggerPlugin = (triggerCharacters: TriggerCharacter[]) => {
             activeTrigger = event.data;
             triggerText = '';
             triggerPosition = state.selection.$from.pos - triggerText.length;
-            sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);
+            sendTriggerEvent(
+                'triggerStart',
+                view,
+                contentConverter,
+                activeTrigger,
+                triggerText,
+            );
 
             return false;
         }
@@ -202,6 +220,7 @@ export const createTriggerPlugin = (triggerCharacters: TriggerCharacter[]) => {
             sendTriggerEvent(
                 'triggerChange',
                 pluginView,
+                contentConverter,
                 activeTrigger,
                 triggerText.slice(1),
             );
diff --git a/src/components/text-editor/prosemirror-adapter/plugins/trigger/inserter.ts b/src/components/text-editor/prosemirror-adapter/plugins/trigger/inserter.ts
index 038038d897..404c889643 100644
--- a/src/components/text-editor/prosemirror-adapter/plugins/trigger/inserter.ts
+++ b/src/components/text-editor/prosemirror-adapter/plugins/trigger/inserter.ts
@@ -1,52 +1,73 @@
-import { Node, NodeType, Schema } from 'prosemirror-model';
+import { Node, NodeType, Schema, Fragment } from 'prosemirror-model';
 import { EditorView } from 'prosemirror-view';
 import {
     TextEditor,
     TextEditorNode,
 } from 'src/components/text-editor/text-editor.types';
+import { ContentTypeConverter } from '../../../utils/content-type-converter';
+import { createHtmlInserter } from './create-html-inserter';
 
-export const inserterFactory = (view: EditorView): TextEditor => {
+export const inserterFactory = (
+    view: EditorView,
+    contentConverter: ContentTypeConverter,
+): TextEditor => {
     const startPos = getTriggerStartPosition(view);
 
     return {
-        insert: (input: TextEditorNode | string) => {
-            const { state, dispatch } = view;
-            const { schema, selection } = state;
-            const { $from } = selection;
+        insert: createNodeAndTextInserter(view, startPos),
+        insertHtml: createHtmlInserter(
+            view,
+            contentConverter,
+            startPos,
+            dispatchTransaction,
+        ),
+        stopTrigger: () => stopTriggerTransaction(view),
+    };
+};
+
+const createNodeAndTextInserter =
+    (view: EditorView, startPos: number) =>
+    (input: TextEditorNode | string): void => {
+        const schema = view.state.schema;
+        let node: Node;
 
-            let node: Node;
+        try {
+            node = createNode(input, schema);
+        } catch (error) {
+            // eslint-disable-next-line no-console
+            console.error(error.message);
 
-            try {
-                node = createNode(input, schema);
-            } catch (error) {
-                // eslint-disable-next-line no-console
-                console.error(error.message);
+            return;
+        }
 
-                return;
-            }
+        const spaceNode = schema.text(' ');
 
-            const spaceNode = schema.text(' ');
+        const fragment = schema.nodes.doc.create(null, [node, spaceNode]);
 
-            const fragment = schema.nodes.doc.create(null, [node, spaceNode]);
+        dispatchTransaction(view, startPos, fragment);
+    };
 
-            const transaction = state.tr.replaceWith(
-                startPos,
-                $from.pos,
-                fragment,
-            );
+const stopTriggerTransaction = (view: EditorView): void => {
+    const { state, dispatch } = view;
 
-            transaction.setMeta('stopTrigger', true);
-            dispatch(transaction);
-        },
-        stopTrigger: () => {
-            const { state, dispatch } = view;
+    const transaction = state.tr;
+    transaction.setMeta('stopTrigger', true);
 
-            const transaction = state.tr;
-            transaction.setMeta('stopTrigger', true);
+    dispatch(transaction);
+};
 
-            dispatch(transaction);
-        },
-    };
+const dispatchTransaction = (
+    view: EditorView,
+    startPos: number,
+    fragment: Fragment | Node,
+): void => {
+    const state = view.state;
+    const dispatch = view.dispatch;
+    const fromPos = state.selection.$from.pos;
+
+    const transaction = state.tr.replaceWith(startPos, fromPos, fragment);
+    transaction.setMeta('stopTrigger', true);
+    dispatch(transaction);
 };
 
 const createNode = (input: TextEditorNode | string, schema: Schema): Node => {
diff --git a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx
index c44baa73ca..b10bccff71 100644
--- a/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx
+++ b/src/components/text-editor/prosemirror-adapter/prosemirror-adapter.tsx
@@ -352,7 +352,10 @@ export class ProsemirrorAdapter {
                 ...exampleSetup({ schema: this.schema, menuBar: false }),
                 keymap(this.menuCommandFactory.buildKeymap()),
                 createLinkPlugin(this.handleNewLinkSelection),
-                createTriggerPlugin(this.triggerCharacters),
+                createTriggerPlugin(
+                    this.triggerCharacters,
+                    this.contentConverter,
+                ),
                 createImageRemoverPlugin(),
                 createMenuStateTrackingPlugin(
                     editorMenuTypesArray,
diff --git a/src/components/text-editor/text-editor.types.ts b/src/components/text-editor/text-editor.types.ts
index 91f4c74d4e..1cd402aeee 100644
--- a/src/components/text-editor/text-editor.types.ts
+++ b/src/components/text-editor/text-editor.types.ts
@@ -56,9 +56,14 @@ export type TextEditorNode = {
 export interface TextEditor {
     /**
      * Method to insert either text or a node at the cursor position
-     *
      */
     insert: (input: TextEditorNode | string) => void;
+
+    /**
+     * Method to insert an HTML string at the cursor position
+     */
+    insertHtml: (input: string) => Promise<void>;
+
     stopTrigger: () => void;
 }