[lexical-table] Feature: Support TableNode.__style in createDOM and u…

…pdateDOM (facebook#7205)
yaojiu19 · Feb 18, 2025 · fecb0b2 · fecb0b2
1 parent 484cd5b
commit fecb0b2
Show file tree

Hide file tree

Showing 2 changed files with 122 additions and 7 deletions.
diff --git a/packages/lexical-table/src/LexicalTableNode.ts b/packages/lexical-table/src/LexicalTableNode.ts
@@ -264,6 +264,9 @@ export class TableNode extends ElementNode {
 
   createDOM(config: EditorConfig, editor?: LexicalEditor): HTMLElement {
     const tableElement = document.createElement('table');
+    if (this.__style) {
+      tableElement.style.cssText = this.__style;
+    }
     const colGroup = document.createElement('colgroup');
     tableElement.appendChild(colGroup);
     updateColgroup(
@@ -311,11 +314,11 @@ export class TableNode extends ElementNode {
       setFrozenRows(dom, config, this.__frozenRowCount);
     }
     updateColgroup(dom, config, this.getColumnCount(), this.getColWidths());
-    alignTableElement(
-      this.getDOMSlot(dom).element,
-      config,
-      this.getFormatType(),
-    );
+    const tableElement = this.getDOMSlot(dom).element;
+    if (prevNode.__style !== this.__style) {
+      tableElement.style.cssText = this.__style;
+    }
+    alignTableElement(tableElement, config, this.getFormatType());
     return false;
   }
 

diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
@@ -10,11 +10,16 @@ import {$insertDataTransferForRichText} from '@lexical/clipboard';
 import {$generateHtmlFromNodes} from '@lexical/html';
 import {TablePlugin} from '@lexical/react/LexicalTablePlugin';
 import {
+  $createTableCellNode,
   $createTableNode,
   $createTableNodeWithDimensions,
+  $createTableRowNode,
   $createTableSelection,
+  $getElementForTableNode,
   $insertTableColumn__EXPERIMENTAL,
   $isTableCellNode,
+  $isTableNode,
+  TableNode,
 } from '@lexical/table';
 import {$dfs} from '@lexical/utils';
 import {
@@ -37,8 +42,6 @@ import {
   polyfillContentEditable,
 } from 'lexical/src/__tests__/utils';
 
-import {$getElementForTableNode, TableNode} from '../../LexicalTableNode';
-
 export class ClipboardDataMock {
   getData: jest.Mock<string, [string]>;
   setData: jest.Mock<void, [string, string]>;
@@ -145,6 +148,115 @@ describe('LexicalTableNode tests', () => {
             });
           });
 
+          test('TableNode.createDOM() and updateDOM() style', () => {
+            const {editor} = testEnv;
+            const $createSmallTable = () =>
+              $createTableNode().append(
+                $createTableRowNode().append(
+                  $createTableCellNode().append($createParagraphNode()),
+                ),
+              );
+
+            editor.update(
+              () => {
+                $getRoot().clear().append(
+                  // no style
+                  $createSmallTable(),
+                  // with style
+                  $createSmallTable().setStyle('background-color: blue;'),
+                );
+                $setSelection(null);
+              },
+              {discrete: true},
+            );
+            {
+              const tables = [
+                ...testEnv.container.querySelectorAll(
+                  ':scope > [contentEditable] > *',
+                ),
+              ];
+              expect(tables).toHaveLength(2);
+              expectTableHtmlToBeEqual(
+                tables[0]!.outerHTML,
+                html`
+                  <table class="${editorConfig.theme.table}">
+                    <colgroup><col /></colgroup>
+                    <tr>
+                      <td>
+                        <p><br /></p>
+                      </td>
+                    </tr>
+                  </table>
+                `,
+              );
+              expectTableHtmlToBeEqual(
+                tables[1]!.outerHTML,
+                html`
+                  <table
+                    class="${editorConfig.theme.table}"
+                    style="background-color: blue">
+                    <colgroup><col /></colgroup>
+                    <tr>
+                      <td>
+                        <p><br /></p>
+                      </td>
+                    </tr>
+                  </table>
+                `,
+              );
+            }
+            editor.update(
+              () => {
+                $getRoot()
+                  .getChildren()
+                  .map((node, i) => {
+                    if ($isTableNode(node)) {
+                      node.setStyle(`--table-index: ${i};`);
+                    }
+                  });
+              },
+              {discrete: true},
+            );
+            {
+              const tables = [
+                ...testEnv.container.querySelectorAll(
+                  ':scope > [contentEditable] > *',
+                ),
+              ];
+              expect(tables).toHaveLength(2);
+              expectTableHtmlToBeEqual(
+                tables[0]!.outerHTML,
+                html`
+                  <table
+                    class="${editorConfig.theme.table}"
+                    style="--table-index: 0">
+                    <colgroup><col /></colgroup>
+                    <tr>
+                      <td>
+                        <p><br /></p>
+                      </td>
+                    </tr>
+                  </table>
+                `,
+              );
+              expectTableHtmlToBeEqual(
+                tables[1]!.outerHTML,
+                html`
+                  <table
+                    class="${editorConfig.theme.table}"
+                    style="--table-index: 1">
+                    <colgroup><col /></colgroup>
+                    <tr>
+                      <td>
+                        <p><br /></p>
+                      </td>
+                    </tr>
+                  </table>
+                `,
+              );
+            }
+          });
+
           test('TableNode.exportDOM() with range selection', async () => {
             const {editor} = testEnv;