From fcc374018043620ec025262b352baa91d9536b6e Mon Sep 17 00:00:00 2001
From: liuwei <wei2460@qq.com>
Date: Mon, 10 Feb 2025 14:19:16 +0800
Subject: [PATCH] [lexical-table] Feature: TableCellNode add verticalAlign
 attribute (#7077)

Co-authored-by: Ivaylo Pavlov <ivailo90@gmail.com>
Co-authored-by: Bob Ippolito <bob@redivi.com>
---
 .../html/TablesHTMLCopyAndPaste.spec.mjs      | 24 ++++++--
 .../src/images/icons/vertical-bottom.svg      |  1 +
 .../src/images/icons/vertical-middle.svg      |  1 +
 .../src/images/icons/vertical-top.svg         |  1 +
 packages/lexical-playground/src/index.css     | 15 +++++
 .../plugins/TableActionMenuPlugin/index.tsx   | 59 +++++++++++++++++++
 .../lexical-table/src/LexicalTableCellNode.ts | 38 +++++++++++-
 .../unit/LexicalTableCellNode.test.ts         | 18 ++++++
 .../__tests__/unit/LexicalTableNode.test.tsx  | 12 ++--
 9 files changed, 154 insertions(+), 15 deletions(-)
 create mode 100644 packages/lexical-playground/src/images/icons/vertical-bottom.svg
 create mode 100644 packages/lexical-playground/src/images/icons/vertical-middle.svg
 create mode 100644 packages/lexical-playground/src/images/icons/vertical-top.svg

diff --git a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
index bf61c484ccc..7f462e36d5b 100644
--- a/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
+++ b/packages/lexical-playground/__tests__/e2e/CopyAndPaste/html/TablesHTMLCopyAndPaste.spec.mjs
@@ -281,14 +281,18 @@ test.describe('HTML Tables CopyAndPaste', () => {
             <col style="width: 100px" />
           </colgroup>
           <tr style="height: 21px">
-            <td class="PlaygroundEditorTheme__tableCell">
+            <td
+              class="PlaygroundEditorTheme__tableCell"
+              style="vertical-align: bottom">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
                 dir="ltr">
                 <span data-lexical-text="true">a</span>
               </p>
             </td>
-            <td class="PlaygroundEditorTheme__tableCell">
+            <td
+              class="PlaygroundEditorTheme__tableCell"
+              style="vertical-align: bottom">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
                 dir="ltr">
@@ -300,7 +304,9 @@ test.describe('HTML Tables CopyAndPaste', () => {
                 <span data-lexical-text="true">b</span>
               </p>
             </td>
-            <td class="PlaygroundEditorTheme__tableCell">
+            <td
+              class="PlaygroundEditorTheme__tableCell"
+              style="vertical-align: bottom">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
                 dir="ltr">
@@ -309,21 +315,27 @@ test.describe('HTML Tables CopyAndPaste', () => {
             </td>
           </tr>
           <tr style="height: 21px">
-            <td class="PlaygroundEditorTheme__tableCell">
+            <td
+              class="PlaygroundEditorTheme__tableCell"
+              style="vertical-align: bottom">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
                 dir="ltr">
                 <span data-lexical-text="true">d</span>
               </p>
             </td>
-            <td class="PlaygroundEditorTheme__tableCell">
+            <td
+              class="PlaygroundEditorTheme__tableCell"
+              style="vertical-align: bottom">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
                 dir="ltr">
                 <span data-lexical-text="true">e</span>
               </p>
             </td>
-            <td class="PlaygroundEditorTheme__tableCell">
+            <td
+              class="PlaygroundEditorTheme__tableCell"
+              style="vertical-align: bottom">
               <p
                 class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr"
                 dir="ltr">
diff --git a/packages/lexical-playground/src/images/icons/vertical-bottom.svg b/packages/lexical-playground/src/images/icons/vertical-bottom.svg
new file mode 100644
index 00000000000..edd2ece6169
--- /dev/null
+++ b/packages/lexical-playground/src/images/icons/vertical-bottom.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737506997512" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8946" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M859.9 780H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM505.7 669c3.2 4.1 9.4 4.1 12.6 0l112-141.7c4.1-5.2 0.4-12.9-6.3-12.9h-74.1V176c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8z" p-id="8947"></path></svg>
\ No newline at end of file
diff --git a/packages/lexical-playground/src/images/icons/vertical-middle.svg b/packages/lexical-playground/src/images/icons/vertical-middle.svg
new file mode 100644
index 00000000000..7d06ffe6061
--- /dev/null
+++ b/packages/lexical-playground/src/images/icons/vertical-middle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737507002429" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9094" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M859.9 474H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM506.3 399.3c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7 0.4-11.7-5.7-11.7H550V104c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v156h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.6zM517.7 624.7c-2.9-3.7-8.5-3.7-11.3 0L405.6 752.3c-3.7 4.7-0.4 11.7 5.7 11.7H474v156c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V764h62.8c6 0 9.4-7 5.7-11.7L517.7 624.7z" p-id="9095"></path></svg>
\ No newline at end of file
diff --git a/packages/lexical-playground/src/images/icons/vertical-top.svg b/packages/lexical-playground/src/images/icons/vertical-top.svg
new file mode 100644
index 00000000000..1dc151d0b65
--- /dev/null
+++ b/packages/lexical-playground/src/images/icons/vertical-top.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1737506990507" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8798" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M859.9 168H164.1c-4.5 0-8.1 3.6-8.1 8v60c0 4.4 3.6 8 8.1 8h695.8c4.5 0 8.1-3.6 8.1-8v-60c0-4.4-3.6-8-8.1-8zM518.3 355c-3.2-4.1-9.4-4.1-12.6 0l-112 141.7c-4.1 5.2-0.4 12.9 6.3 12.9h73.9V848c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V509.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 355z" p-id="8799"></path></svg>
\ No newline at end of file
diff --git a/packages/lexical-playground/src/index.css b/packages/lexical-playground/src/index.css
index 2f271a3e1c3..b0c81a69455 100644
--- a/packages/lexical-playground/src/index.css
+++ b/packages/lexical-playground/src/index.css
@@ -513,6 +513,21 @@ i.justify-align {
   background-image: url(images/icons/justify.svg);
 }
 
+.icon.vertical-top,
+i.left-align {
+  background-image: url(images/icons/vertical-top.svg);
+}
+
+.icon.vertical-middle,
+i.center-align {
+  background-image: url(images/icons/vertical-middle.svg);
+}
+
+.icon.vertical-bottom,
+i.right-align {
+  background-image: url(images/icons/vertical-bottom.svg);
+}
+
 i.indent {
   background-image: url(images/icons/indent.svg);
 }
diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
index 06e8510163a..1103ba78299 100644
--- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
+++ b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
@@ -54,6 +54,7 @@ import invariant from 'shared/invariant';
 
 import useModal from '../../hooks/useModal';
 import ColorPicker from '../../ui/ColorPicker';
+import DropDown, {DropDownItem} from '../../ui/DropDown';
 
 function computeSelectionCount(selection: TableSelection): {
   columns: number;
@@ -473,6 +474,29 @@ function TableActionMenu({
     [editor],
   );
 
+  const formatVerticalAlign = (value: string) => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+        const [cell] = $getNodeTriplet(selection.anchor);
+        if ($isTableCellNode(cell)) {
+          cell.setVerticalAlign(value);
+        }
+
+        if ($isTableSelection(selection)) {
+          const nodes = selection.getNodes();
+
+          for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if ($isTableCellNode(node)) {
+              node.setVerticalAlign(value);
+            }
+          }
+        }
+      }
+    });
+  };
+
   let mergeCellButton: null | JSX.Element = null;
   if (cellMerge) {
     if (canMergeCells) {
@@ -528,6 +552,41 @@ function TableActionMenu({
         data-test-id="table-row-striping">
         <span className="text">Toggle Row Striping</span>
       </button>
+      <DropDown
+        buttonLabel="Vertical Align"
+        buttonClassName="item"
+        buttonAriaLabel="Formatting options for vertical alignment">
+        <DropDownItem
+          onClick={() => {
+            formatVerticalAlign('top');
+          }}
+          className="item wide">
+          <div className="icon-text-container">
+            <i className="icon vertical-top" />
+            <span className="text">Top Align</span>
+          </div>
+        </DropDownItem>
+        <DropDownItem
+          onClick={() => {
+            formatVerticalAlign('middle');
+          }}
+          className="item wide">
+          <div className="icon-text-container">
+            <i className="icon vertical-middle" />
+            <span className="text">Middle Align</span>
+          </div>
+        </DropDownItem>
+        <DropDownItem
+          onClick={() => {
+            formatVerticalAlign('bottom');
+          }}
+          className="item wide">
+          <div className="icon-text-container">
+            <i className="icon vertical-bottom" />
+            <span className="text">Bottom Align</span>
+          </div>
+        </DropDownItem>
+      </DropDown>
       <hr />
       <button
         type="button"
diff --git a/packages/lexical-table/src/LexicalTableCellNode.ts b/packages/lexical-table/src/LexicalTableCellNode.ts
index 85f282e07be..d6f28a4d2b4 100644
--- a/packages/lexical-table/src/LexicalTableCellNode.ts
+++ b/packages/lexical-table/src/LexicalTableCellNode.ts
@@ -49,6 +49,7 @@ export type SerializedTableCellNode = Spread<
     headerState: TableCellHeaderState;
     width?: number;
     backgroundColor?: null | string;
+    verticalAlign?: string;
   },
   SerializedElementNode
 >;
@@ -65,6 +66,8 @@ export class TableCellNode extends ElementNode {
   __width?: number | undefined;
   /** @internal */
   __backgroundColor: null | string;
+  /** @internal */
+  __verticalAlign?: undefined | string;
 
   static getType(): string {
     return 'tablecell';
@@ -83,6 +86,7 @@ export class TableCellNode extends ElementNode {
     super.afterCloneFrom(node);
     this.__rowSpan = node.__rowSpan;
     this.__backgroundColor = node.__backgroundColor;
+    this.__verticalAlign = node.__verticalAlign;
   }
 
   static importDOM(): DOMConversionMap | null {
@@ -111,7 +115,8 @@ export class TableCellNode extends ElementNode {
       .setColSpan(serializedNode.colSpan || 1)
       .setRowSpan(serializedNode.rowSpan || 1)
       .setWidth(serializedNode.width || undefined)
-      .setBackgroundColor(serializedNode.backgroundColor || null);
+      .setBackgroundColor(serializedNode.backgroundColor || null)
+      .setVerticalAlign(serializedNode.verticalAlign || undefined);
   }
 
   constructor(
@@ -143,6 +148,9 @@ export class TableCellNode extends ElementNode {
     if (this.__backgroundColor !== null) {
       element.style.backgroundColor = this.__backgroundColor;
     }
+    if (isValidVerticalAlign(this.__verticalAlign)) {
+      element.style.verticalAlign = this.__verticalAlign;
+    }
 
     addClassNamesToElement(
       element,
@@ -171,7 +179,7 @@ export class TableCellNode extends ElementNode {
       }
       element.style.width = `${this.getWidth() || COLUMN_WIDTH}px`;
 
-      element.style.verticalAlign = 'top';
+      element.style.verticalAlign = this.getVerticalAlign() || 'top';
       element.style.textAlign = 'start';
       if (this.__backgroundColor === null && this.hasHeader()) {
         element.style.backgroundColor = '#f2f3f5';
@@ -184,6 +192,9 @@ export class TableCellNode extends ElementNode {
   exportJSON(): SerializedTableCellNode {
     return {
       ...super.exportJSON(),
+      ...(isValidVerticalAlign(this.__verticalAlign) && {
+        verticalAlign: this.__verticalAlign,
+      }),
       backgroundColor: this.getBackgroundColor(),
       colSpan: this.__colSpan,
       headerState: this.__headerState,
@@ -249,6 +260,16 @@ export class TableCellNode extends ElementNode {
     return self;
   }
 
+  getVerticalAlign(): undefined | string {
+    return this.getLatest().__verticalAlign;
+  }
+
+  setVerticalAlign(newVerticalAlign: null | undefined | string): this {
+    const self = this.getWritable();
+    self.__verticalAlign = newVerticalAlign || undefined;
+    return self;
+  }
+
   toggleHeaderStyle(headerStateToToggle: TableCellHeaderState): this {
     const self = this.getWritable();
 
@@ -275,7 +296,8 @@ export class TableCellNode extends ElementNode {
       prevNode.__width !== this.__width ||
       prevNode.__colSpan !== this.__colSpan ||
       prevNode.__rowSpan !== this.__rowSpan ||
-      prevNode.__backgroundColor !== this.__backgroundColor
+      prevNode.__backgroundColor !== this.__backgroundColor ||
+      prevNode.__verticalAlign !== this.__verticalAlign
     );
   }
 
@@ -296,6 +318,12 @@ export class TableCellNode extends ElementNode {
   }
 }
 
+function isValidVerticalAlign(
+  verticalAlign?: null | string,
+): verticalAlign is 'middle' | 'bottom' {
+  return verticalAlign === 'middle' || verticalAlign === 'bottom';
+}
+
 export function $convertTableCellNodeElement(
   domNode: Node,
 ): DOMConversionOutput {
@@ -321,6 +349,10 @@ export function $convertTableCellNodeElement(
   if (backgroundColor !== '') {
     tableCellNode.__backgroundColor = backgroundColor;
   }
+  const verticalAlign = domNode_.style.verticalAlign;
+  if (isValidVerticalAlign(verticalAlign)) {
+    tableCellNode.__verticalAlign = verticalAlign;
+  }
 
   const style = domNode_.style;
   const textDecoration = ((style && style.textDecoration) || '').split(' ');
diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableCellNode.test.ts b/packages/lexical-table/src/__tests__/unit/LexicalTableCellNode.test.ts
index 9c56db63bf3..57060dbce92 100644
--- a/packages/lexical-table/src/__tests__/unit/LexicalTableCellNode.test.ts
+++ b/packages/lexical-table/src/__tests__/unit/LexicalTableCellNode.test.ts
@@ -64,6 +64,24 @@ describe('LexicalTableCellNode tests', () => {
         expect(cellWithCustomWidthNode.createDOM(editorConfig).outerHTML).toBe(
           `<td style="width: ${cellWidth}px;" class="${editorConfig.theme.tableCell}"></td>`,
         );
+        const ignoredVerticalAlign = 'top';
+        const cellWithIgnoredVerticalAlignNode = $createTableCellNode(
+          TableCellHeaderStates.NO_STATUS,
+        );
+        cellWithIgnoredVerticalAlignNode.setVerticalAlign(ignoredVerticalAlign);
+        expect(
+          cellWithIgnoredVerticalAlignNode.createDOM(editorConfig).outerHTML,
+        ).toBe(`<td class="${editorConfig.theme.tableCell}"></td>`);
+        const validVerticalAlign = 'middle';
+        const cellWithValidVerticalAlignNode = $createTableCellNode(
+          TableCellHeaderStates.NO_STATUS,
+        );
+        cellWithValidVerticalAlignNode.setVerticalAlign(validVerticalAlign);
+        expect(
+          cellWithValidVerticalAlignNode.createDOM(editorConfig).outerHTML,
+        ).toBe(
+          `<td style="vertical-align: ${validVerticalAlign};" class="${editorConfig.theme.tableCell}"></td>`,
+        );
       });
     });
   });
diff --git a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
index 136516733f2..a94865b86b2 100644
--- a/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
+++ b/packages/lexical-table/src/__tests__/unit/LexicalTableNode.test.tsx
@@ -659,34 +659,34 @@ describe('LexicalTableNode tests', () => {
                     <col style="width: 171px" />
                   </colgroup>
                   <tr style="height: 21px;">
-                    <td>
+                    <td style="vertical-align: bottom">
                       <p dir="ltr">
                         <strong data-lexical-text="true">Surface</strong>
                       </p>
                     </td>
-                    <td>
+                    <td style="vertical-align: bottom">
                       <p dir="ltr">
                         <em data-lexical-text="true">MWP_WORK_LS_COMPOSER</em>
                       </p>
                     </td>
-                    <td>
+                    <td style="vertical-align: bottom">
                       <p style="text-align: right;">
                         <span data-lexical-text="true">77349</span>
                       </p>
                     </td>
                   </tr>
                   <tr style="height: 21px;">
-                    <td>
+                    <td style="vertical-align: bottom">
                       <p dir="ltr">
                         <span data-lexical-text="true">Lexical</span>
                       </p>
                     </td>
-                    <td>
+                    <td style="vertical-align: bottom">
                       <p dir="ltr">
                         <span data-lexical-text="true">XDS_RICH_TEXT_AREA</span>
                       </p>
                     </td>
-                    <td>
+                    <td style="vertical-align: bottom">
                       <p dir="ltr">
                         <span data-lexical-text="true">sdvd</span>
                         <strong data-lexical-text="true">sdfvsfs</strong>