diff --git a/demos/playground/src/__tests__/e2e/Tables.spec.mjs b/demos/playground/src/__tests__/e2e/Tables.spec.mjs
index ebfa524..61a6820 100644
--- a/demos/playground/src/__tests__/e2e/Tables.spec.mjs
+++ b/demos/playground/src/__tests__/e2e/Tables.spec.mjs
@@ -37,6 +37,7 @@ import {
selectCellsFromTableCords,
selectFromAdditionalStylesDropdown,
test,
+ unmergeTableCell,
} from '../utils/index.mjs';
async function fillTablePartiallyWithText(page) {
@@ -62,7 +63,7 @@ async function fillTablePartiallyWithText(page) {
test.describe('Tables', () => {
test.fixme();
- test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
+ test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page }));
test(`Can a table be inserted from the toolbar`, async ({
page,
isPlainText,
@@ -97,11 +98,11 @@ test.describe('Tables', () => {
`,
undefined,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
- test(`Can type inside of table cell`, async ({page, isPlainText}) => {
+ test(`Can type inside of table cell`, async ({ page, isPlainText }) => {
test.skip(isPlainText);
await focusEditor(page);
@@ -134,11 +135,11 @@ test.describe('Tables', () => {
`,
undefined,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
- test(`Can navigate table with keyboard`, async ({page, isPlainText}) => {
+ test(`Can navigate table with keyboard`, async ({ page, isPlainText }) => {
test.skip(isPlainText);
await focusEditor(page);
@@ -177,7 +178,7 @@ test.describe('Tables', () => {
`,
undefined,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
@@ -193,8 +194,8 @@ test.describe('Tables', () => {
await fillTablePartiallyWithText(page);
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 1, y: 1},
+ { x: 0, y: 0 },
+ { x: 1, y: 1 },
true,
false,
);
@@ -261,7 +262,7 @@ test.describe('Tables', () => {
`,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
@@ -379,11 +380,11 @@ test.describe('Tables', () => {
`,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
- test(`Can style text using Table selection`, async ({page, isPlainText}) => {
+ test(`Can style text using Table selection`, async ({ page, isPlainText }) => {
test.skip(isPlainText);
await focusEditor(page);
@@ -392,8 +393,8 @@ test.describe('Tables', () => {
await fillTablePartiallyWithText(page);
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 1, y: 1},
+ { x: 0, y: 0 },
+ { x: 1, y: 1 },
true,
false,
);
@@ -465,7 +466,7 @@ test.describe('Tables', () => {
`,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
@@ -481,8 +482,8 @@ test.describe('Tables', () => {
await fillTablePartiallyWithText(page);
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 1, y: 1},
+ { x: 0, y: 0 },
+ { x: 1, y: 1 },
true,
false,
);
@@ -545,11 +546,11 @@ test.describe('Tables', () => {
`,
undefined,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
- test(`Can clear text using Table selection`, async ({page, isPlainText}) => {
+ test(`Can clear text using Table selection`, async ({ page, isPlainText }) => {
test.skip(isPlainText);
await focusEditor(page);
@@ -558,8 +559,8 @@ test.describe('Tables', () => {
await fillTablePartiallyWithText(page);
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 1, y: 1},
+ { x: 0, y: 0 },
+ { x: 1, y: 1 },
true,
false,
);
@@ -598,7 +599,7 @@ test.describe('Tables', () => {
`,
undefined,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
@@ -649,7 +650,7 @@ test.describe('Tables', () => {
`,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
@@ -731,11 +732,11 @@ test.describe('Tables', () => {
`,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
- test(`Horizontal rule inside cell`, async ({page, isPlainText}) => {
+ test(`Horizontal rule inside cell`, async ({ page, isPlainText }) => {
test.skip(isPlainText);
await focusEditor(page);
@@ -762,7 +763,7 @@ test.describe('Tables', () => {
`,
undefined,
- {ignoreClasses: true},
+ { ignoreClasses: true },
);
});
@@ -916,11 +917,11 @@ test.describe('Tables', () => {
);
});
- test('Merge cells', async ({page, isPlainText}) => {
+ test('Merge/unmerge cells (1)', async ({ page, isPlainText }) => {
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});
+ page.setViewportSize({ height: 1000, width: 3000 });
}
await focusEditor(page);
@@ -934,13 +935,12 @@ test.describe('Tables', () => {
await page.keyboard.type('second');
await selectCellsFromTableCords(
page,
- {x: 1, y: 0},
- {x: 2, y: 0},
+ { x: 1, y: 0 },
+ { x: 2, y: 0 },
true,
true,
);
await mergeTableCells(page);
-
await assertHTML(
page,
html`
@@ -964,6 +964,11 @@ test.describe('Tables', () => {
`,
+ );
+
+ await unmergeTableCell(page);
+ await assertHTML(
+ page,
html`
@@ -973,14 +978,140 @@ test.describe('Tables', () => {
+
|
+
+
+
+ `,
+ );
+ });
+
+ test('Merge/unmerge cells (2)', async ({ page, isPlainText }) => {
+ 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, 3, 3);
+
+ await click(page, '.PlaygroundEditorTheme__tableCell');
+ await moveRight(page, 1);
+ await page.keyboard.type('first');
+ await page.keyboard.press('Tab');
+ await page.keyboard.type('second');
+ await selectCellsFromTableCords(
+ page,
+ { x: 1, y: 1 },
+ { x: 2, y: 2 },
+ false,
+ false,
+ );
+ await mergeTableCells(page);
+ await assertHTML(
+ page,
+ html`
+
+
+
+
+
+
+
+
+
+ |
+
+ |
+
+
+
+
+
+
+ `,
+ );
+
+ await unmergeTableCell(page);
+ await assertHTML(
+ page,
+ html`
+
+
+
+
+
+
+
+
+
+ |
+
+ |
+
|
+
+
+
+
|
+
|
@@ -1002,8 +1133,8 @@ test.describe('Tables', () => {
await moveDown(page, 1);
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 0, y: 1},
+ { x: 0, y: 0 },
+ { x: 0, y: 1 },
true,
true,
);
@@ -1012,8 +1143,8 @@ test.describe('Tables', () => {
await moveRight(page, 1);
await selectCellsFromTableCords(
page,
- {x: 1, y: 0},
- {x: 2, y: 0},
+ { x: 1, y: 0 },
+ { x: 2, y: 0 },
true,
true,
);
@@ -1021,8 +1152,8 @@ test.describe('Tables', () => {
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 1, y: 0},
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
true,
true,
);
@@ -1121,7 +1252,7 @@ test.describe('Tables', () => {
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});
+ page.setViewportSize({ height: 1000, width: 3000 });
}
await focusEditor(page);
@@ -1131,8 +1262,8 @@ test.describe('Tables', () => {
await click(page, '.PlaygroundEditorTheme__tableCell');
await selectCellsFromTableCords(
page,
- {x: 1, y: 0},
- {x: 1, y: 1},
+ { x: 1, y: 0 },
+ { x: 1, y: 1 },
true,
false,
);
@@ -1179,7 +1310,7 @@ test.describe('Tables', () => {
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});
+ page.setViewportSize({ height: 1000, width: 3000 });
}
await focusEditor(page);
@@ -1189,8 +1320,8 @@ test.describe('Tables', () => {
await click(page, '.PlaygroundEditorTheme__tableCell');
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 1, y: 0},
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
true,
true,
);
@@ -1235,7 +1366,7 @@ test.describe('Tables', () => {
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});
+ page.setViewportSize({ height: 1000, width: 3000 });
}
await focusEditor(page);
@@ -1244,8 +1375,8 @@ test.describe('Tables', () => {
await selectCellsFromTableCords(
page,
- {x: 1, y: 1},
- {x: 1, y: 3},
+ { x: 1, y: 1 },
+ { x: 1, y: 3 },
false,
false,
);
@@ -1253,8 +1384,8 @@ test.describe('Tables', () => {
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 0, y: 1},
+ { x: 0, y: 0 },
+ { x: 0, y: 1 },
true,
true,
);
@@ -1294,7 +1425,7 @@ test.describe('Tables', () => {
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});
+ page.setViewportSize({ height: 1000, width: 3000 });
}
await focusEditor(page);
@@ -1303,8 +1434,8 @@ test.describe('Tables', () => {
await selectCellsFromTableCords(
page,
- {x: 1, y: 1},
- {x: 3, y: 1},
+ { x: 1, y: 1 },
+ { x: 3, y: 1 },
false,
false,
);
@@ -1312,8 +1443,8 @@ test.describe('Tables', () => {
await selectCellsFromTableCords(
page,
- {x: 0, y: 0},
- {x: 1, y: 0},
+ { x: 0, y: 0 },
+ { x: 1, y: 0 },
true,
true,
);
@@ -1353,7 +1484,7 @@ test.describe('Tables', () => {
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});
+ page.setViewportSize({ height: 1000, width: 3000 });
}
await focusEditor(page);
diff --git a/demos/playground/src/__tests__/utils/index.mjs b/demos/playground/src/__tests__/utils/index.mjs
index 9ea29f9..cc08295 100644
--- a/demos/playground/src/__tests__/utils/index.mjs
+++ b/demos/playground/src/__tests__/utils/index.mjs
@@ -6,12 +6,12 @@
*
*/
-import {expect, test as base} from '@playwright/test';
+import { expect, test as base } from '@playwright/test';
import prettier from 'prettier';
-import {URLSearchParams} from 'url';
-import {v4 as uuidv4} from 'uuid';
+import { URLSearchParams } from 'url';
+import { v4 as uuidv4 } from 'uuid';
-import {selectAll} from '../keyboardShortcuts/index.mjs';
+import { selectAll } from '../keyboardShortcuts/index.mjs';
export const E2E_PORT = process.env.E2E_PORT || 5173;
export const E2E_BROWSER = process.env.E2E_BROWSER;
@@ -60,13 +60,12 @@ export async function initialize({
appSettings.isMaxLength = !!isMaxLength;
const urlParams = appSettingsToURLParams(appSettings);
- const url = `http://localhost:${E2E_PORT}/${
- isCollab ? 'split/' : ''
- }?${urlParams.toString()}`;
+ const url = `http://localhost:${E2E_PORT}/${isCollab ? 'split/' : ''
+ }?${urlParams.toString()}`;
// Having more horizontal space prevents redundant text wraps for tests
// which affects CMD+ArrowRight/Left navigation
- page.setViewportSize({height: 1000, width: isCollab ? 2000 : 1000});
+ page.setViewportSize({ height: 1000, width: isCollab ? 2000 : 1000 });
await page.goto(url);
await exposeLexicalEditor(page);
@@ -95,7 +94,7 @@ export const test = base.extend({
legacyEvents: LEGACY_EVENTS,
});
-export {expect} from '@playwright/test';
+export { expect } from '@playwright/test';
function appSettingsToURLParams(appSettings) {
const params = new URLSearchParams();
@@ -142,7 +141,7 @@ export async function assertHTML(
page,
expectedHtml,
expectedHtmlFrameRight = expectedHtml,
- {ignoreClasses = false, ignoreInlineStyles = false} = {},
+ { ignoreClasses = false, ignoreInlineStyles = false } = {},
) {
if (IS_COLLAB) {
const withRetry = async (fn) => await retryAsync(page, fn, 5);
@@ -216,7 +215,7 @@ async function assertSelectionOnPageOrFrame(page, expected) {
return path.reverse();
};
- const {anchorNode, anchorOffset, focusNode, focusOffset} =
+ const { anchorNode, anchorOffset, focusNode, focusOffset } =
window.getSelection();
return {
@@ -344,7 +343,7 @@ async function pasteFromClipboardPageOrFrame(pageOrFrame, clipboardData) {
const [base64, type] = clipboardValue;
const res = await fetch(base64);
const blob = await res.blob();
- files.push(new File([blob], 'file', {type}));
+ files.push(new File([blob], 'file', { type }));
}
}
let eventClipboardData;
@@ -391,7 +390,7 @@ async function pasteFromClipboardPageOrFrame(pageOrFrame, clipboardData) {
}
}
},
- {canUseBeforeInput, clipboardData},
+ { canUseBeforeInput, clipboardData },
);
}
@@ -583,7 +582,7 @@ export async function insertImageCaption(page, caption) {
}
export async function mouseMoveToSelector(page, selector) {
- const {x, width, y, height} = await selectorBoundingBox(page, selector);
+ const { x, width, y, height } = await selectorBoundingBox(page, selector);
await page.mouse.move(x + width / 2, y + height / 2);
}
@@ -639,7 +638,7 @@ export async function dragImage(
);
}
-export function prettifyHTML(string, {ignoreClasses, ignoreInlineStyles} = {}) {
+export function prettifyHTML(string, { ignoreClasses, ignoreInlineStyles } = {}) {
let output = string;
if (ignoreClasses) {
@@ -753,13 +752,11 @@ export async function selectCellsFromTableCords(
}
const firstRowFirstColumnCell = await leftFrame.locator(
- `table:first-of-type > tr:nth-child(${firstCords.y + 1}) > ${
- isFirstHeader ? 'th' : 'td'
+ `table:first-of-type > tr:nth-child(${firstCords.y + 1}) > ${isFirstHeader ? 'th' : 'td'
}:nth-child(${firstCords.x + 1})`,
);
const secondRowSecondCell = await leftFrame.locator(
- `table:first-of-type > tr:nth-child(${secondCords.y + 1}) > ${
- isSecondHeader ? 'th' : 'td'
+ `table:first-of-type > tr:nth-child(${secondCords.y + 1}) > ${isSecondHeader ? 'th' : 'td'
}:nth-child(${secondCords.x + 1})`,
);
@@ -767,7 +764,7 @@ export async function selectCellsFromTableCords(
await firstRowFirstColumnCell.click(
// This is a test runner quirk. Chrome seems to need two clicks to focus on the
// content editable cell before dragging, but Firefox treats it as a double click event.
- E2E_BROWSER === 'chromium' ? {clickCount: 2} : {},
+ E2E_BROWSER === 'chromium' ? { clickCount: 2 } : {},
);
await dragMouse(
@@ -802,6 +799,11 @@ export async function mergeTableCells(page) {
await click(page, '.item[data-test-id="table-merge-cells"]');
}
+export async function unmergeTableCell(page) {
+ await click(page, '.table-cell-action-button-container');
+ await click(page, '.item[data-test-id="table-unmerge-cells"]');
+}
+
export async function deleteTableRows(page) {
await click(page, '.table-cell-action-button-container');
await click(page, '.item[data-test-id="table-delete-rows"]');