Add tables plugin to text editor

package.json

@@ -90,6 +90,7 @@
     "prosemirror-markdown": "^1.13.1",
     "prosemirror-schema-basic": "^1.2.3",
     "prosemirror-model": ">=1.22.1",
+    "prosemirror-tables": "^1.5.0",
     "puppeteer": "^19.11.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/text-editor/examples/text-editor-with-tables.tsx

@@ -0,0 +1,63 @@
+import { Component, h, State } from '@stencil/core';
+/**
+ * Text editor with tables (HTML mode only).
+ *
+ * Basic table support is available when using the text editor in `HTML` mode.
+ * This allows you to paste and display tables in the text editor.
+ * Complex operations are not supported, adding and removing columns are not supported.
+ *
+ * Tables will only appear as expected in text-editor fields that are in `HTML` mode.
+ */
+@Component({
+    tag: 'limel-example-text-editor-with-tables',
+    shadow: true,
+})
+export class TextEditorWithTablesExample {
+    @State()
+    private value: string = `<table><tbody>
+        <tr>
+        <td style="background-color: rgb(25, 107, 36);color: white;"><p><strong>Column1</strong></p></td>
+        <td style="background-color: rgb(25, 107, 36);color: white;"><p><strong>Column2</strong></p></td>
+        </tr>
+        <tr>
+        <td style="background-color: rgb(193, 240, 200);color: black;"><p>Cell A1</p></td>
+        <td style="background-color: rgb(193, 240, 200);color: black;"><p>Cell B1</p></td>
+        </tr>
+        <tr>
+        <td style="background-color: yellow;color: red;"><p>Cell A2</p></td>
+        <td style="background-color: yellow;color: red;"><p>Cell B2</p></td>
+        </tr>
+        </tbody></table>`;
+
+    @State()
+    private readonly = false;
+
+    public render() {
+        return [
+            <limel-text-editor
+                key="html-editor"
+                value={this.value}
+                onChange={this.handleChange}
+                readonly={this.readonly}
+                contentType="html"
+            />,
+            <limel-example-controls key="controls">
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+            </limel-example-controls>,
+            <limel-example-value key="example-value" value={this.value} />,
+        ];
+    }
+
+    private setReadonly = (event: CustomEvent<boolean>) => {
+        event.stopPropagation();
+        this.readonly = event.detail;
+    };
+
+    private handleChange = (event: CustomEvent<string>) => {
+        this.value = event.detail;
+    };
+}

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

@@ -0,0 +1,31 @@
+import { tableNodes, tableEditing } from 'prosemirror-tables';
+import { Plugin } from 'prosemirror-state';
+
+export const getTableEditingPlugins = (tablesEnabled: boolean): Plugin[] => {
+    if (tablesEnabled) {
+        return [tableEditing()];
+    }
+
+    return [];
+};
+
+const createStyleAttribute = (cssProperty: string) => ({
+    default: null,
+    getFromDOM: (dom: HTMLElement) => dom.style[cssProperty] || null,
+    setDOMAttr: (value: string, attrs: Record<string, any>) => {
+        if (value) {
+            attrs.style = (attrs.style || '') + `${cssProperty}: ${value};`;
+        }
+    },
+});
+
+export const getTableNodes = () => {
+    return tableNodes({
+        tableGroup: 'block',
+        cellContent: 'block+',
+        cellAttributes: {
+            background: createStyleAttribute('background-color'),
+            color: createStyleAttribute('color'),
+        },
+    });
+};

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

@@ -44,6 +44,7 @@ import { CustomElementDefinition } from '../../../global/shared-types/custom-ele
 import { createNodeSpec } from '../utils/plugin-factory';
 import { createTriggerPlugin } from './plugins/trigger/factory';
 import { TriggerCharacter } from '../text-editor.types';
+import { getTableNodes, getTableEditingPlugins } from './plugins/table-plugin';
 
 const DEBOUNCE_TIMEOUT = 300;
 
@@ -304,6 +305,10 @@ export class ProsemirrorAdapter {
         });
         nodes = addListNodes(nodes, 'paragraph block*', 'block');
 
+        if (this.contentType === 'html') {
+            nodes = nodes.append(getTableNodes());
+        }
+
         return new Schema({
             nodes: nodes,
             marks: schema.spec.marks.append({
@@ -343,6 +348,7 @@ export class ProsemirrorAdapter {
                     this.updateActiveActionBarItems,
                 ),
                 createActionBarInteractionPlugin(this.menuCommandFactory),
+                ...getTableEditingPlugins(this.contentType === 'html'),
             ],
         });
     }

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

@@ -19,6 +19,7 @@ import { EditorUiType } from './types';
  * @exampleComponent limel-example-text-editor-as-form-component
  * @exampleComponent limel-example-text-editor-with-markdown
  * @exampleComponent limel-example-text-editor-with-html
+ * @exampleComponent limel-example-text-editor-with-tables
  * @exampleComponent limel-example-text-editor-allow-resize
  * @exampleComponent limel-example-text-editor-size
  * @exampleComponent limel-example-text-editor-ui