Skip to content

Commit

Permalink
Add TableCell writingMode facebook#4437
Browse files Browse the repository at this point in the history
  • Loading branch information
@ibastawisi
ibastawisi committed May 1, 2023
1 parent 1be6422 commit 1bcb6b4
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 1 deletion.
52 changes: 52 additions & 0 deletions packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ import {
insertTableColumnBefore,
insertTableRowBelow,
IS_COLLAB,
makeHorizontal,
makeVertical,
mergeTableCells,
pasteFromClipboard,
SAMPLE_IMAGE_URL,
Expand Down Expand Up @@ -1882,4 +1884,54 @@ test.describe('Tables', () => {
`,
);
});

test('Change Cell writing mode', async ({page, isPlainText, isCollab}) => {
await initialize({isCollab, page});
test.skip(isPlainText);
if (IS_COLLAB) {
// The contextual menu positioning needs fixing (it's hardcoded to show on the right side)
page.setViewportSize({height: 1000, width: 3000});
}

await focusEditor(page);

await insertTable(page, 1, 1);
await makeVertical(page);

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="writing-mode: vertical-rl">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);

await makeHorizontal(page);

await assertHTML(
page,
html`
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
<table class="PlaygroundEditorTheme__table">
<tr>
<th
class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"
style="writing-mode: horizontal-tb">
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
</th>
</tr>
</table>
<p class="PlaygroundEditorTheme__paragraph"><br /></p>
`,
);
});
});
10 changes: 10 additions & 0 deletions packages/lexical-playground/__tests__/utils/index.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -839,6 +839,16 @@ export async function setBackgroundColor(page) {
await click(page, '.item[data-test-id="table-background-color"]');
}

export async function makeVertical(page) {
await click(page, '.table-cell-action-button-container');
await click(page, '.item[data-test-id="table-cell-vertical"]');
}

export async function makeHorizontal(page) {
await click(page, '.table-cell-action-button-container');
await click(page, '.item[data-test-id="table-cell-horizontal"]');
}

export async function enableCompositionKeyEvents(page) {
const targetPage = IS_COLLAB ? await page.frame('left') : page;
await targetPage.evaluate(() => {
Expand Down
60 changes: 60 additions & 0 deletions packages/lexical-playground/src/plugins/TableActionMenuPlugin/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,6 +157,22 @@ function currentCellBackgroundColor(editor: LexicalEditor): null | string {
});
}

function currentCellWritingMode(editor: LexicalEditor): null | string {
return editor.getEditorState().read(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
if ($isTableCellNode(cell)) {
return cell.getWritingMode();
}
}
return null;
});
}

type TableCellActionMenuProps = Readonly<{
contextRef: {current: null | HTMLElement};
onClose: () => void;
Expand Down Expand Up @@ -189,6 +205,9 @@ function TableActionMenu({
const [backgroundColor, setBackgroundColor] = useState(
() => currentCellBackgroundColor(editor) || '',
);
const [writingMode, setWritingMode] = useState(
() => currentCellWritingMode(editor) || '',
);

useEffect(() => {
return editor.registerMutationListener(TableCellNode, (nodeMutations) => {
Expand All @@ -200,6 +219,7 @@ function TableActionMenu({
updateTableCellNode(tableCellNode.getLatest());
});
setBackgroundColor(currentCellBackgroundColor(editor) || '');
setWritingMode(currentCellWritingMode(editor) || '');
}
});
}, [editor, tableCellNode]);
Expand Down Expand Up @@ -460,6 +480,24 @@ function TableActionMenu({
[editor],
);

const handleCellWritingMode = useCallback(
(value: string) => {
editor.update(() => {
const selection = $getSelection();
if (
$isRangeSelection(selection) ||
DEPRECATED_$isGridSelection(selection)
) {
const [cell] = DEPRECATED_$getNodeTriplet(selection.anchor);
if ($isTableCellNode(cell)) {
cell.setWritingMode(value);
}
}
});
},
[editor],
);

let mergeCellButton: null | JSX.Element = null;
if (cellMerge) {
if (canMergeCells) {
Expand All @@ -483,6 +521,27 @@ function TableActionMenu({
}
}

let writingModeButton: null | JSX.Element = null;
if (writingMode === 'vertical-rl') {
writingModeButton = (
<button
className="item"
onClick={() => handleCellWritingMode('horizontal-tb')}
data-test-id="table-cell-horizontal">
<span className="text">Make horizontal</span>
</button>
);
} else {
writingModeButton = (
<button
className="item"
onClick={() => handleCellWritingMode('vertical-rl')}
data-test-id="table-cell-vertical">
<span className="text">Make vertical</span>
</button>
);
}

return createPortal(
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
<div
Expand All @@ -505,6 +564,7 @@ function TableActionMenu({
data-test-id="table-background-color">
<span className="text">Background color</span>
</button>
{writingModeButton}
<hr />
<button
className="item"
Expand Down
30 changes: 29 additions & 1 deletion packages/lexical-table/src/LexicalTableCellNode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export type SerializedTableCellNode = Spread<
headerState: TableCellHeaderState;
width?: number;
backgroundColor?: null | string;
writingMode?: null | string;
},
SerializedGridCellNode
>;
Expand All @@ -54,6 +55,8 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
__width?: number;
/** @internal */
__backgroundColor: null | string;
/** @internal */
__writingMode: null | string;

static getType(): string {
return 'tablecell';
Expand All @@ -68,6 +71,7 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
);
cellNode.__rowSpan = node.__rowSpan;
cellNode.__backgroundColor = node.__backgroundColor;
cellNode.__writingMode = node.__writingMode;
return cellNode;
}

Expand All @@ -92,6 +96,7 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
);
cellNode.__rowSpan = serializedNode.rowSpan;
cellNode.__backgroundColor = serializedNode.backgroundColor || null;
cellNode.__writingMode = serializedNode.writingMode || null;
return cellNode;
}

Expand All @@ -105,6 +110,7 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
this.__headerState = headerState;
this.__width = width;
this.__backgroundColor = null;
this.__writingMode = null;
}

createDOM(config: EditorConfig): HTMLElement {
Expand All @@ -124,6 +130,9 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
if (this.__backgroundColor !== null) {
element.style.backgroundColor = this.__backgroundColor;
}
if (this.__writingMode !== null) {
element.style.writingMode = this.__writingMode;
}

addClassNamesToElement(
element,
Expand Down Expand Up @@ -161,6 +170,10 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
} else if (this.hasHeader()) {
element_.style.backgroundColor = '#f2f3f5';
}
const writingMode = this.getWritingMode();
if (writingMode !== null) {
element_.style.writingMode = writingMode;
}
}

return {
Expand All @@ -175,6 +188,7 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
headerState: this.__headerState,
type: 'tablecell',
width: this.getWidth(),
writingMode: this.getWritingMode(),
};
}

Expand Down Expand Up @@ -210,6 +224,14 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
this.getWritable().__backgroundColor = newBackgroundColor;
}

getWritingMode(): null | string {
return this.getLatest().__writingMode;
}

setWritingMode(newWritingMode: null | string): void {
this.getWritable().__writingMode = newWritingMode;
}

toggleHeaderStyle(headerStateToToggle: TableCellHeaderState): TableCellNode {
const self = this.getWritable();

Expand All @@ -236,7 +258,8 @@ export class TableCellNode extends DEPRECATED_GridCellNode {
prevNode.__width !== this.__width ||
prevNode.__colSpan !== this.__colSpan ||
prevNode.__rowSpan !== this.__rowSpan ||
prevNode.__backgroundColor !== this.__backgroundColor
prevNode.__backgroundColor !== this.__backgroundColor ||
prevNode.__writingMode !== this.__writingMode
);
}

Expand Down Expand Up @@ -275,6 +298,11 @@ export function convertTableCellNodeElement(
tableCellNode.__backgroundColor = backgroundColor;
}

const writingMode = domNode_.style.writingMode;
if (writingMode !== '') {
tableCellNode.__writingMode = writingMode;
}

return {
forChild: (lexicalNode, parentLexicalNode) => {
if ($isTableCellNode(parentLexicalNode) && !$isElementNode(lexicalNode)) {
Expand Down

0 comments on commit 1bcb6b4

Please sign in to comment.