diff --git a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx b/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
index 0796241e5e1..fb941f84e3f 100644
--- a/packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
+++ b/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">
Toggle Row Striping
+