fix(text-editor tables): put repeated code in single function

Author: john-traas

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

@@ -9,34 +9,23 @@ export const getTableEditingPlugins = (tablesEnabled: boolean): Plugin[] => {
     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: {
-                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};`;
-                    }
-                },
-            },
+            background: createStyleAttribute('background-color'),
+            color: createStyleAttribute('color'),
         },
     });
 };

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

@@ -101,9 +101,6 @@ export class ProsemirrorAdapter {
     @Prop()
     triggerCharacters: TriggerCharacter[] = [];
 
-    @Prop()
-    public supportTables: boolean = false;
-
     @Element()
     private host: HTMLLimelTextEditorElement;
 
@@ -308,7 +305,7 @@ export class ProsemirrorAdapter {
         });
         nodes = addListNodes(nodes, 'paragraph block*', 'block');
 
-        if (this.supportTables) {
+        if (this.contentType === 'html') {
             nodes = nodes.append(getTableNodes());
         }
 
@@ -351,7 +348,7 @@ export class ProsemirrorAdapter {
                     this.updateActiveActionBarItems,
                 ),
                 createActionBarInteractionPlugin(this.menuCommandFactory),
-                ...getTableEditingPlugins(this.supportTables),
+                ...getTableEditingPlugins(this.contentType === 'html'),
             ],
         });
     }

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

@@ -155,13 +155,6 @@ export class TextEditor implements FormComponent<string> {
     @Prop({ reflect: true })
     public ui?: EditorUiType = '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
      */
@@ -255,17 +248,12 @@ 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;