[lexical-table] Support for vertical cell writing

packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx

@@ -501,6 +501,28 @@ function TableActionMenu({
     [editor],
   );
 
+  const toggleWritingMode = useCallback(() => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection) || $isTableSelection(selection)) {
+        const [cell] = $getNodeTriplet(selection.anchor);
+        const newDirection = cell.getWritingMode() ? 'vertical-rl' : undefined;
+        cell.setWritingMode(newDirection);
+
+        if ($isTableSelection(selection)) {
+          const nodes = selection.getNodes();
+
+          for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if ($isTableCellNode(node)) {
+              node.setWritingMode(newDirection);
+            }
+          }
+        }
+      }
+    });
+  }, [editor]);
+
   let mergeCellButton: null | JSX.Element = null;
   if (cellMerge) {
     if (canMergeCells) {
@@ -556,6 +578,17 @@ function TableActionMenu({
         data-test-id="table-row-striping">
         <span className="text">Toggle Row Striping</span>
       </button>
+      <button
+        type="button"
+        className="item"
+        onClick={() => toggleWritingMode()}
+        data-test-id="table-toggle-text-direction">
+        <span className="text">
+          {tableCellNode.__writingMode
+            ? 'Horizontal Text Direction'
+            : 'Vertical Text Direction'}
+        </span>
+      </button>
       <hr />
       <button
         type="button"

packages/lexical-table/src/LexicalTableCellNode.ts

@@ -29,6 +29,7 @@ import {
 } from 'lexical';
 
 import {COLUMN_WIDTH, PIXEL_VALUE_REG_EXP} from './constants';
+import {computeVerticalFormat} from './LexicalTableUtils';
 
 export const TableCellHeaderStates = {
   BOTH: 3,
@@ -47,6 +48,7 @@ export type SerializedTableCellNode = Spread<
     headerState: TableCellHeaderState;
     width?: number;
     backgroundColor?: null | string;
+    writingMode?: string;
   },
   SerializedElementNode
 >;
@@ -63,6 +65,8 @@ export class TableCellNode extends ElementNode {
   __width?: number;
   /** @internal */
   __backgroundColor: null | string;
+  /** @internal */
+  __writingMode?: string;
 
   static getType(): string {
     return 'tablecell';
@@ -77,6 +81,7 @@ export class TableCellNode extends ElementNode {
     );
     cellNode.__rowSpan = node.__rowSpan;
     cellNode.__backgroundColor = node.__backgroundColor;
+    cellNode.__writingMode = node.__writingMode;
     return cellNode;
   }
 
@@ -103,6 +108,7 @@ export class TableCellNode extends ElementNode {
     );
     cellNode.__rowSpan = rowSpan;
     cellNode.__backgroundColor = serializedNode.backgroundColor || null;
+    cellNode.__writingMode = serializedNode.writingMode;
     return cellNode;
   }
 
@@ -137,6 +143,12 @@ export class TableCellNode extends ElementNode {
     if (this.__backgroundColor !== null) {
       element.style.backgroundColor = this.__backgroundColor;
     }
+    if (this.__writingMode) {
+      element.style.writingMode = this.__writingMode;
+      element.style.verticalAlign = computeVerticalFormat(this.getFormatType());
+    } else {
+      element.style.verticalAlign = '';
+    }
 
     addClassNamesToElement(
       element,
@@ -164,6 +176,11 @@ export class TableCellNode extends ElementNode {
       element_.style.verticalAlign = 'top';
       element_.style.textAlign = 'start';
 
+      const writingMode = this.getWritingMode();
+      if (writingMode) {
+        element_.style.writingMode = writingMode;
+      }
+
       const backgroundColor = this.getBackgroundColor();
       if (backgroundColor !== null) {
         element_.style.backgroundColor = backgroundColor;
@@ -186,6 +203,7 @@ export class TableCellNode extends ElementNode {
       rowSpan: this.__rowSpan,
       type: 'tablecell',
       width: this.getWidth(),
+      writingMode: this.__writingMode,
     };
   }
 
@@ -231,6 +249,27 @@ export class TableCellNode extends ElementNode {
     return this.getLatest().__width;
   }
 
+  /**
+   * Returns the current cell writing direction
+   * @returns undefined for horizontal, string value if vertical
+   */
+  getWritingMode(): string | undefined {
+    return this.getLatest().__writingMode;
+  }
+
+  /**
+   * Update cell writing direction, set to null or undefined for horizontal (default)
+   * Set to 'vertical-rl' or 'vertical-lr' for vertical and paragraph order preference.
+   * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode}
+   */
+  setWritingMode(direction?: null | 'vertical-rl' | 'vertical-lr'): void {
+    if (!direction) {
+      this.getWritable().__writingMode = undefined;
+    } else {
+      this.getLatest().__writingMode = direction;
+    }
+  }
+
   getBackgroundColor(): null | string {
     return this.getLatest().__backgroundColor;
   }
@@ -265,7 +304,9 @@ 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.__writingMode !== this.__writingMode ||
+      prevNode.__format !== this.__format
     );
   }
 
@@ -311,6 +352,10 @@ export function $convertTableCellNodeElement(
   if (backgroundColor !== '') {
     tableCellNode.__backgroundColor = backgroundColor;
   }
+  const writingMode = domNode_.style.writingMode;
+  if (writingMode === 'vertical-lr' || writingMode === 'vertical-rl') {
+    tableCellNode.__writingMode = writingMode;
+  }
 
   const style = domNode_.style;
   const textDecoration = style.textDecoration.split(' ');

packages/lexical-table/src/LexicalTableSelectionHelpers.ts

@@ -459,6 +459,21 @@ export function applyTableHandlers(
       FORMAT_ELEMENT_COMMAND,
       (formatType) => {
         const selection = $getSelection();
+        if (
+          $isSelectionInTable(selection, tableNode) &&
+          selection!.getNodes().length === 1 &&
+          $isTextNode(selection!.getNodes()[0])
+        ) {
+          const tableCellNode = $findMatchingParent(
+            selection!.getNodes()[0],
+            $isTableCellNode,
+          );
+          if (tableCellNode) {
+            tableCellNode.setFormat(formatType);
+          }
+          return false;
+        }
+
         if (
           !$isTableSelection(selection) ||
           !$isSelectionInTable(selection, tableNode)

packages/lexical-table/src/LexicalTableUtils.ts

@@ -7,7 +7,7 @@
  */
 
 import type {TableMapType, TableMapValueType} from './LexicalTableSelection';
-import type {ElementNode, PointType} from 'lexical';
+import type {ElementFormatType, ElementNode, PointType} from 'lexical';
 
 import {$findMatchingParent} from '@lexical/utils';
 import {
@@ -892,3 +892,12 @@ export function $getTableCellNodeRect(tableCellNode: TableCellNode): {
 
   return null;
 }
+
+export const computeVerticalFormat = (format: ElementFormatType) => {
+  if (format === 'center') {
+    return 'middle';
+  } else if (format === 'right' || format === 'end') {
+    return 'bottom';
+  }
+  return 'top';
+};

packages/lexical-table/src/__tests__/unit/LexicalTableCellNode.test.ts

@@ -7,6 +7,7 @@
  */
 
 import {$createTableCellNode, TableCellHeaderStates} from '@lexical/table';
+import {$createParagraphNode, $createTextNode} from 'lexical';
 import {initializeUnitTest} from 'lexical/src/__tests__/utils';
 
 const editorConfig = Object.freeze({
@@ -66,5 +67,21 @@ describe('LexicalTableCellNode tests', () => {
         );
       });
     });
+
+    test('TableCellNode Toggle Writing Direction', async () => {
+      const {editor} = testEnv;
+
+      await editor.update(() => {
+        const cellNode = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+        const p = $createParagraphNode();
+        p.append($createTextNode('abc'));
+        cellNode.append(p);
+        cellNode.setWritingMode('vertical-rl');
+
+        expect(cellNode.createDOM(editorConfig).outerHTML).toBe(
+          `<td style="writing-mode: vertical-rl; vertical-align: top;" class="${editorConfig.theme.tableCell}"></td>`,
+        );
+      });
+    });
   });
 });