[WIP] prosemirror tables

etc/lime-elements.api.md

@@ -565,6 +565,8 @@ export namespace Components {
         // @alpha
         "customElements": CustomElementDefinition[];
         "language": Languages;
+        // (undocumented)
+        "supportTables": boolean;
         // @alpha
         "triggerCharacters": TriggerCharacter[];
         "value": string;
@@ -668,6 +670,8 @@ export namespace Components {
         // @alpha
         "customElements": CustomElementDefinition[];
         "disabled"?: boolean;
+        // @alpha
+        "enableTables"?: boolean;
         "helperText"?: string;
         "invalid"?: boolean;
         "label"?: string;
@@ -1551,6 +1555,8 @@ namespace JSX_2 {
         "customElements"?: CustomElementDefinition[];
         "language"?: Languages;
         "onChange"?: (event: LimelProsemirrorAdapterCustomEvent<string>) => void;
+        // (undocumented)
+        "supportTables"?: boolean;
         // @alpha
         "triggerCharacters"?: TriggerCharacter[];
         "value"?: string;
@@ -1667,6 +1673,8 @@ namespace JSX_2 {
         // @alpha
         "customElements"?: CustomElementDefinition[];
         "disabled"?: boolean;
+        // @alpha
+        "enableTables"?: boolean;
         "helperText"?: string;
         "invalid"?: boolean;
         "label"?: string;

package.json

@@ -89,6 +89,7 @@
     "prosemirror-example-setup": "^1.2.3",
     "prosemirror-markdown": "^1.13.1",
     "prosemirror-schema-basic": "^1.2.3",
+    "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,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: green;"><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,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;
 
@@ -100,6 +101,14 @@ export class ProsemirrorAdapter {
     @Prop()
     triggerCharacters: TriggerCharacter[] = [];
 
+    @Prop()
+    /**
+     * Will only work if 'contentType' is set to 'html'
+     * @private
+     * @alpha
+     */
+    public supportTables: boolean = false;
+
     @Element()
     private host: HTMLLimelTextEditorElement;
 
@@ -304,6 +313,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 +356,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,14 @@ 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`.
+     * @private
+     * @alpha
+     */
+    @Prop({ reflect: true })
+    public enableTables?: boolean;
+
     /**
      * Dispatched when a change is made to the editor
      */
@@ -246,12 +255,17 @@ export class TextEditor implements FormComponent<string> {
                 aria-disabled={this.disabled}
                 language={this.language}
                 triggerCharacters={this.triggers}
+                supportTables={this.checkForTables()}
             />,
             this.renderPlaceholder(),
             this.renderHelperLine(),
         ];
     }
 
+    private checkForTables() {
+        return this.enableTables && this.contentType === 'html';
+    }
+
     private renderLabel() {
         if (!this.label) {
             return;