feat(text-editor tables): add basic plugin for parsing tables

Author: DavidAkkerman

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

@@ -0,0 +1,50 @@
+import { Component, h, State } from '@stencil/core';
+/**
+ * Text editor with tables (HTML mode only).
+ *
+ * When using the text editor in HTML mode, it is possible to paste and
+ * display tables in the text editor.
+ * Basic interaction with the table is supported, but you cannot do
+ * complex operations
+ */
+@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="color: black;"><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
+                value={this.value}
+                onChange={this.handleChange}
+                readonly={this.readonly}
+                contentType="html"
+                enableTables={true}
+            />,
+            <limel-example-controls>
+                <limel-checkbox
+                    checked={this.readonly}
+                    label="Readonly"
+                    onChange={this.setReadonly}
+                />
+            </limel-example-controls>,
+            <limel-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,42 @@
+import { tableNodes, tableEditing } from 'prosemirror-tables';
+import { Plugin } from 'prosemirror-state';
+
+export const getTableEditingPlugins = (tablesEnabled: boolean): Plugin[] => {
+    if (tablesEnabled) {
+        return [tableEditing()];
+    }
+
+    return [];
+};
+
+export const getTableNodes = () => {
+    return tableNodes({
+        tableGroup: 'block',
+        cellContent: 'block+',
+        cellAttributes: {
+            background: {
+                default: null,
+                getFromDOM: (dom) => {
+                    return dom.style.backgroundColor || null;
+                },
+                setDOMAttr: (value: string, attrs: Record<string, string>) => {
+                    if (value) {
+                        attrs.style =
+                            (attrs.style || '') + `background-color: ${value};`;
+                    }
+                },
+            },
+            color: {
+                default: null,
+                getFromDOM: (dom) => {
+                    return dom.style.color || null;
+                },
+                setDOMAttr: (value: string, attrs: Record<string, string>) => {
+                    if (value) {
+                        attrs.style = (attrs.style || '') + `color: ${value};`;
+                    }
+                },
+            },
+        },
+    });
+};

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;
 
@@ -100,6 +101,9 @@ export class ProsemirrorAdapter {
     @Prop()
     triggerCharacters: TriggerCharacter[] = [];
 
+    @Prop()
+    public supportTables: boolean = false;
+
     @Element()
     private host: HTMLLimelTextEditorElement;
 
@@ -304,6 +308,10 @@ export class ProsemirrorAdapter {
         });
         nodes = addListNodes(nodes, 'paragraph block*', 'block');
 
+        if (this.supportTables) {
+            nodes = nodes.append(getTableNodes());
+        }
+
         return new Schema({
             nodes: nodes,
             marks: schema.spec.marks.append({
@@ -343,6 +351,7 @@ export class ProsemirrorAdapter {
                     this.updateActiveActionBarItems,
                 ),
                 createActionBarInteractionPlugin(this.menuCommandFactory),
+                ...getTableEditingPlugins(this.supportTables),
             ],
         });
     }

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

@@ -18,6 +18,7 @@ import { TriggerCharacter, TriggerEventDetail } from './text-editor.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
@@ -153,6 +154,12 @@ export class TextEditor implements FormComponent<string> {
     @Prop({ reflect: true })
     public ui?: 'standard' | 'minimal' = 'standard';
 
+    /**
+     * Set to `true` to allow parsing of table data. Only works when `type` is `html`.
+     */
+    @Prop({ reflect: true })
+    public enableTables?: boolean;
+
     /**
      * Dispatched when a change is made to the editor
      */
@@ -246,6 +253,7 @@ export class TextEditor implements FormComponent<string> {
                 aria-disabled={this.disabled}
                 language={this.language}
                 triggerCharacters={this.triggers}
+                supportTables={this.enableTables}
             />,
             this.renderPlaceholder(),
             this.renderHelperLine(),