poc: prosemirror tables

Author: DavidAkkerman

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

@@ -0,0 +1,49 @@
+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"
+            />,
+            <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,35 @@
+import { tableNodes, tableEditing } from 'prosemirror-tables';
+
+export const tableEditingPlugin = tableEditing;
+
+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

@@ -40,6 +40,7 @@ import {
 import { createImageRemoverPlugin } from './plugins/image-remover-plugin';
 import { createMenuStateTrackingPlugin } from './plugins/menu-state-tracking-plugin';
 import { createActionBarInteractionPlugin } from './plugins/menu-action-interaction-plugin';
+import { getTableNodes, tableEditingPlugin } from './plugins/table-plugin';
 
 const DEBOUNCE_TIMEOUT = 300;
 
@@ -273,7 +274,11 @@ export class ProsemirrorAdapter {
 
     private initializeSchema() {
         return new Schema({
-            nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
+            nodes: addListNodes(
+                schema.spec.nodes,
+                'paragraph block*',
+                'block',
+            ).append(getTableNodes()),
             marks: schema.spec.marks.append({
                 strikethrough: strikethrough,
             }),
@@ -310,6 +315,7 @@ export class ProsemirrorAdapter {
                     this.updateActiveActionBarItems,
                 ),
                 createActionBarInteractionPlugin(this.menuCommandFactory),
+                tableEditingPlugin(),
             ],
         });
     }

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

@@ -15,6 +15,7 @@ import { createRandomString } from '../../util/random-string';
  * @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