opensource/lexical
1
0
Fork 0
mirror of https://github.com/facebook/lexical.git synced 2025-05-22 09:36:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix assert (#1505)

Browse Source 
* fix assertHTML

* remove unused

* lint

* fix history

* add back retries
This commit is contained in:
Acy Watson
2022-03-22 17:19:56 -07:00
committed by acywatson
parent 654611dc94
commit d57876077a
8 changed files with 1616 additions and 1089 deletions
Download Patch File Download Diff File Expand all files Collapse all files

825
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -123,6 +123,7 @@
"gzip-size": "^6.0.0",
"husky": "^7.0.1",
"jest": "26.6.0",
"jsdom": "^19.0.0",
"lint-staged": "^11.1.0",
"minimist": "^1.2.5",
"playwright": "1.16.0-next-alpha-trueadm-fork",

143
packages/lexical-playground/__tests__/e2e/History.spec.mjs
View File

@ -7,19 +7,23 @@
*/
import {redo, toggleBold, undo} from '../keyboardShortcuts/index.mjs';
import { assertHTML,
import {
assertHTML,
assertSelection,
focusEditor,
initialize ,
initialize,
repeat,
sleep,
test} from '../utils/index.mjs';
test,
} from '../utils/index.mjs';
test.describe('History', () => {
test.beforeEach(({isCollab, page }) => initialize({ isCollab, page }));
test(
`Can type two paragraphs of text and correctly undo and redo`,
async ({isRichText, page, isCollab}) => {
test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
test(`Can type two paragraphs of text and correctly undo and redo`, async ({
isRichText,
page,
isCollab,
}) => {
test.skip(isCollab);
await page.focus('div[contenteditable="true"]');
await page.keyboard.type('hello');
@ -33,7 +37,10 @@ test.describe('History', () => {
await page.keyboard.type(', again and');
if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 22,
anchorPath: [1, 0, 0],
@ -41,7 +48,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0],
});
} else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 22,
anchorPath: [0, 2, 0],
@ -53,7 +63,10 @@ test.describe('History', () => {
await undo(page);
if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 11,
anchorPath: [1, 0, 0],
@ -61,7 +74,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0],
});
} else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 11,
anchorPath: [0, 2, 0],
@ -73,8 +89,10 @@ test.describe('History', () => {
await undo(page);
if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><br /></p>
`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><br /></p>`,
);
await assertSelection(page, {
anchorOffset: 0,
anchorPath: [1],
@ -82,7 +100,10 @@ test.describe('History', () => {
focusPath: [1],
});
} else {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><br/></p>`);
assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><br/></p>`,
);
await assertSelection(page, {
anchorOffset: 2,
anchorPath: [0],
@ -93,8 +114,9 @@ test.describe('History', () => {
await undo(page);
await assertHTML(page,
`<p dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
);
await assertSelection(page, {
anchorOffset: 11,
@ -105,8 +127,9 @@ test.describe('History', () => {
await undo(page);
await assertHTML(page,
`<p dir="ltr"><span data-lexical-text="true">hello</span></p>`,
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
);
await assertSelection(page, {
anchorOffset: 5,
@ -117,7 +140,10 @@ test.describe('History', () => {
await undo(page);
await assertHTML(page, `<p><br /></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
);
await assertSelection(page, {
anchorOffset: 0,
anchorPath: [0],
@ -127,8 +153,9 @@ test.describe('History', () => {
await redo(page);
await assertHTML(page,
`<p dir="ltr"><span data-lexical-text="true">hello</span></p>`,
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello</span></p>`,
);
await assertSelection(page, {
anchorOffset: 5,
@ -139,8 +166,9 @@ test.describe('History', () => {
await redo(page);
await assertHTML(page,
`<p dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>`,
);
await assertSelection(page, {
anchorOffset: 11,
@ -152,7 +180,10 @@ test.describe('History', () => {
await redo(page);
if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p><br /></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
);
await assertSelection(page, {
anchorOffset: 0,
anchorPath: [1],
@ -160,7 +191,10 @@ test.describe('History', () => {
focusPath: [1],
});
} else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><br /></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><br /></p>`,
);
await assertSelection(page, {
anchorOffset: 2,
anchorPath: [0],
@ -172,7 +206,10 @@ test.describe('History', () => {
await redo(page);
if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 17,
anchorPath: [1, 0, 0],
@ -180,7 +217,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0],
});
} else {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><spandata-lexical-text="true">helloworldagain</span></p>`);
assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 17,
anchorPath: [0, 2, 0],
@ -192,7 +232,10 @@ test.describe('History', () => {
await redo(page);
if (isRichText) {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span></p><pdir="ltr"><spandata-lexical-text="true">helloworld,againandagain</span></p>`);
assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 22,
anchorPath: [1, 0, 0],
@ -200,7 +243,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0],
});
} else {
assertHTML(page, `<pdir="ltr"><spandata-lexical-text="true">helloworld</span><br/><spandata-lexical-text="true">helloworld,againandagain</span></p>`);
assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br/><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 22,
anchorPath: [0, 2, 0],
@ -214,7 +260,10 @@ test.describe('History', () => {
});
if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 18,
anchorPath: [1, 0, 0],
@ -222,7 +271,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0],
});
} else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 18,
anchorPath: [0, 2, 0],
@ -234,7 +286,10 @@ test.describe('History', () => {
await undo(page);
if (isRichText) {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span></p><p dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 22,
anchorPath: [1, 0, 0],
@ -242,7 +297,10 @@ test.describe('History', () => {
focusPath: [1, 0, 0],
});
} else {
await assertHTML(page, `<p dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span><br /><span data-lexical-text="true">hello world, again and again</span></p>`,
);
await assertSelection(page, {
anchorOffset: 22,
anchorPath: [0, 2, 0],
@ -250,13 +308,14 @@ test.describe('History', () => {
focusPath: [0, 2, 0],
});
}
},
);
});
test(
'Can coalesce when switching inline styles (#1151)',
async ({page, isCollab, isPlainText}) => {
test.skip(isCollab || isPlainText)
test('Can coalesce when switching inline styles (#1151)', async ({
page,
isCollab,
isPlainText,
}) => {
test.skip(isCollab || isPlainText);
await focusEditor(page);
await toggleBold(page);
@ -272,8 +331,7 @@ test.describe('History', () => {
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong><span data-lexical-text="true">bar</span></p>';
const step3HTML =
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">foo</strong></p>';
const step4HTML =
'<p class="PlaygroundEditorTheme__paragraph"><br /></p>';
const step4HTML = '<p class="PlaygroundEditorTheme__paragraph"><br /></p>';
await assertHTML(page, step1HTML);
await undo(page);
@ -288,6 +346,5 @@ test.describe('History', () => {
await assertHTML(page, step2HTML);
await redo(page);
await assertHTML(page, step1HTML);
},
);
});
});

21
packages/lexical-playground/__tests__/e2e/Tables.spec.mjs
View File

@ -94,13 +94,16 @@ test.describe('Tables', () => {
test.skip(isPlainText);
await focusEditor(page);
await assertHTML(page, `<p><br /></p>`);
await assertHTML(
page,
`<p class="PlaygroundEditorTheme__paragraph"><br /></p>`,
);
await insertTable(page);
await assertHTML(
page,
`<p><br/></p><table><tr><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
`<p class="PlaygroundEditorTheme__paragraph"><br/></p><table class="PlaygroundEditorTheme__table"><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br/></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br/></p></td></tr></table><p class="PlaygroundEditorTheme__paragraph"><br/></p>`,
);
});
@ -114,7 +117,7 @@ test.describe('Tables', () => {
await assertHTML(
page,
`<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">abc</span></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">abc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
);
});
@ -128,7 +131,7 @@ test.describe('Tables', () => {
await assertHTML(
page,
`<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><td><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
);
});
@ -146,14 +149,14 @@ test.describe('Tables', () => {
await assertHTML(
page,
`<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true,
);
// Check that the highlight styles are applied.
await assertHTML(
page,
`<p><br/></p><table><tr><th><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><td><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
);
});
@ -189,7 +192,7 @@ test.describe('Tables', () => {
await assertHTML(
page,
'<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">a</span></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">bb</span></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">d</span></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><spandata-lexical-text="true">e</span></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>',
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">a</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">bb</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">d</span></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">e</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true,
);
});
@ -213,7 +216,7 @@ test.describe('Tables', () => {
// Check that the character styles are applied.
await assertHTML(
page,
`<p><br/></p><table><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">a</strong></p></th><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">bb</strong></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><thstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">d</strong></p></th><tdstyle="background-color:rgb(163,187,255);caret-color:transparent"><pdir="ltr"><strongdata-lexical-text="true">e</strong></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">a</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">bb</strong></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">d</strong></p></th><td class="PlaygroundEditorTheme__tableCell" style="background-color: rgb(163, 187, 255); caret-color: transparent;"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold PlaygroundEditorTheme__textItalic PlaygroundEditorTheme__textUnderlineStrikethrough" data-lexical-text="true">e</strong></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true,
);
});
@ -232,7 +235,7 @@ test.describe('Tables', () => {
// Check that the text was cleared.
await assertHTML(
page,
`<p><br/></p><table><tr><th><p><br/></p></th><th><p><br/></p></th><th><pdir="ltr"><spandata-lexical-text="true">cc</span></p></th><th><p><br/></p></th><th><p><br/></p></th></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><pdir="ltr"><spandata-lexical-text="true">f</span></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr><tr><th><p><br/></p></th><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td><td><p><br/></p></td></tr></table><p><br/></p>`,
`<p class="PlaygroundEditorTheme__paragraph"><br></p><table class="PlaygroundEditorTheme__table"><tbody><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">cc</span></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">f</span></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr><tr><th class="PlaygroundEditorTheme__tableCell PlaygroundEditorTheme__tableCellHeader"><p class="PlaygroundEditorTheme__paragraph"><br></p></th><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td><td class="PlaygroundEditorTheme__tableCell"><p class="PlaygroundEditorTheme__paragraph"><br></p></td></tr></tbody></table><p class="PlaygroundEditorTheme__paragraph"><br></p>`,
true,
);
});

111
packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs
View File

@ -7,23 +7,26 @@
*/
import {moveToLineBeginning} from '../keyboardShortcuts/index.mjs';
import { assertHTML,
import {
assertHTML,
assertSelection,
click,
focusEditor,
initialize ,
initialize,
keyDownCtrlOrMeta,
keyUpCtrlOrMeta,
repeat,
selectOption,
test,
waitForSelector} from '../utils/index.mjs';
waitForSelector,
} from '../utils/index.mjs';
test.describe('TextFormatting', () => {
test.beforeEach(({isCollab, page }) => initialize({ isCollab, page }));
test(
`Can create bold text using the shortcut`,
async ({page, isPlainText}) => {
test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
test(`Can create bold text using the shortcut`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -57,12 +60,12 @@ test.describe('TextFormatting', () => {
focusOffset: 1,
focusPath: [0, 2, 0],
});
},
);
});
test(
`Can create italic text using the shortcut`,
async ({page, isPlainText}) => {
test(`Can create italic text using the shortcut`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -96,12 +99,12 @@ test.describe('TextFormatting', () => {
focusOffset: 1,
focusPath: [0, 2, 0],
});
},
);
});
test(
`Can select text and boldify it with the shortcut`,
async ({page, isPlainText}) => {
test(`Can select text and boldify it with the shortcut`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -146,12 +149,12 @@ test.describe('TextFormatting', () => {
focusOffset: 11,
focusPath: [0, 0, 0],
});
},
);
});
test(
'Should not format the text in the subsequent paragraph after a triple click selection event.',
async ({page, isPlainText}) => {
test('Should not format the text in the subsequent paragraph after a triple click selection event.', async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -179,12 +182,12 @@ test.describe('TextFormatting', () => {
page,
'<p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><strong class="PlaygroundEditorTheme__textBold" data-lexical-text="true">hello world</strong></p><p class="PlaygroundEditorTheme__paragraph PlaygroundEditorTheme__ltr" dir="ltr"><span data-lexical-text="true">hello world</span></p>',
);
},
);
});
test(
`Can select text and italicify it with the shortcut`,
async ({page, isPlainText}) => {
test(`Can select text and italicify it with the shortcut`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -229,12 +232,12 @@ test.describe('TextFormatting', () => {
focusOffset: 11,
focusPath: [0, 0, 0],
});
},
);
});
test(
`Can select text and underline+strikethrough`,
async ({page, isPlainText}) => {
test(`Can select text and underline+strikethrough`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -311,12 +314,12 @@ test.describe('TextFormatting', () => {
focusOffset: 5,
focusPath: [0, 1, 0],
});
},
);
});
test(
`Can select text and change the font-size`,
async ({page, isPlainText}) => {
test(`Can select text and change the font-size`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -349,12 +352,12 @@ test.describe('TextFormatting', () => {
focusOffset: 5,
focusPath: [0, 1, 0],
});
},
);
});
test(
`Can select text and change the font-size and font-family`,
async ({page, isPlainText}) => {
test(`Can select text and change the font-size and font-family`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -417,12 +420,13 @@ test.describe('TextFormatting', () => {
focusOffset: 5,
focusPath: [0, 1, 0],
});
},
);
});
test(
`Can select multiple text parts and format them with shortcuts`,
async ({page, isPlainText, browserName}) => {
test(`Can select multiple text parts and format them with shortcuts`, async ({
page,
isPlainText,
browserName,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -560,12 +564,12 @@ test.describe('TextFormatting', () => {
focusOffset: 11,
focusPath: [0, 0, 0],
});
},
);
});
test(
`Can insert range of formatted text and select part and replace with character`,
async ({page, isPlainText}) => {
test(`Can insert range of formatted text and select part and replace with character`, async ({
page,
isPlainText,
}) => {
test.skip(isPlainText);
await focusEditor(page);
@ -639,6 +643,5 @@ test.describe('TextFormatting', () => {
focusOffset: 3,
focusPath: [0, 0, 0],
});
},
);
});
});

18
packages/lexical-playground/__tests__/regression/1384-insert-nodes.spec.mjs
View File

@ -13,14 +13,16 @@ import {
focusEditor,
initialize,
pasteFromClipboard,
test
test,
} from '../utils/index.mjs';
test.describe('Regression test #1384', () => {
test.beforeEach(({isCollab, page }) => initialize({ isCollab, page }));
test(
`Properly pastes in code blocks`,
async ({ page, isPlainText, isCollab }) => {
test.beforeEach(({isCollab, page}) => initialize({isCollab, page}));
test(`Properly pastes in code blocks`, async ({
page,
isPlainText,
isCollab,
}) => {
test.skip(isPlainText || isCollab);
await focusEditor(page);
await page.keyboard.type('``` alert(1);');
@ -35,7 +37,9 @@ test.describe('Regression test #1384', () => {
const clipboard = await copyToClipboard(page);
await page.keyboard.press('ArrowLeft');
await pasteFromClipboard(page, clipboard);
await assertHTML(page, `<codespellcheck="false"dir="ltr"><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">1</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">1</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span><br/><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">2</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span><br/><spandata-lexical-text="true">alert</span><spandata-lexical-text="true">(</span><spandata-lexical-text="true">3</span><spandata-lexical-text="true">)</span><spandata-lexical-text="true">;</span></code>`);
},
await assertHTML(
page,
`<code class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr"><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">1</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">2</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span><br><span class="PlaygroundEditorTheme__tokenFunction" data-lexical-text="true">alert</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">(</span><span class="PlaygroundEditorTheme__tokenProperty" data-lexical-text="true">3</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">)</span><span class="PlaygroundEditorTheme__tokenPunctuation" data-lexical-text="true">;</span></code>`,
);
});
});

42
packages/lexical-playground/__tests__/utils/index.mjs
View File

@ -7,8 +7,9 @@
* @flow strict
*/
import { expect,test as base } from '@playwright/test';
import {expect, test as base} from '@playwright/test';
import jestSnapshot from 'jest-snapshot';
import {JSDOM} from 'jsdom';
import prettier from 'prettier';
import {URLSearchParams} from 'url';
import {v4 as uuidv4} from 'uuid';
@ -22,14 +23,17 @@ export const E2E_BROWSER = process.env.E2E_BROWSER;
export const IS_MAC = process.platform === 'darwin';
export const IS_WINDOWS = process.platform === 'win32';
export const IS_LINUX = !IS_MAC && !IS_WINDOWS;
export const IS_COLLAB = process.env.E2E_EDITOR_MODE === 'rich-text-with-collab';
export const IS_COLLAB =
process.env.E2E_EDITOR_MODE === 'rich-text-with-collab';
const IS_RICH_TEXT = process.env.E2E_EDITOR_MODE !== 'plain-text';
const IS_PLAIN_TEXT = process.env.E2E_EDITOR_MODE === 'plain-text';
export async function initialize({ page, isCollab, isCharLimit, isCharLimitUtf8 }) {
page.exposeFunction('expectToBeEqual', (actual, expected) => {
return expect(actual).toEqual(expected);
});
export async function initialize({
page,
isCollab,
isCharLimit,
isCharLimitUtf8,
}) {
const appSettings = {};
appSettings.isRichText = IS_RICH_TEXT;
appSettings.disableBeforeInput =
@ -56,10 +60,10 @@ export const test = base.extend({
isCharLimitUtf8: false,
isCollab: IS_COLLAB,
isPlainText: IS_PLAIN_TEXT,
isRichText: IS_RICH_TEXT
isRichText: IS_RICH_TEXT,
});
export { expect } from '@playwright/test';
export {expect} from '@playwright/test';
function appSettingsToURLParams(appSettings) {
const params = new URLSearchParams();
@ -84,24 +88,12 @@ export async function clickSelectors(page, selectors) {
async function assertHTMLOnPageOrFrame(page, pageOrFrame, expectedHtml) {
const actualHtml = await pageOrFrame.innerHTML('div[contenteditable="true"]');
await page.evaluate(async (args) => {
const actualHtmlString = args.actualHtml;
const expectedHtmlString = args.expectedHtml;
// Assert HTML of the editor matches the given html
if (expectedHtmlString === '') {
// eslint-disable-next-line no-console
console.log('Output HTML:\n\n' + actualHtml);
throw new Error('Empty HTML assertion!');
}
// HTML might differ between browsers, so we use attach
// outputs to an element using JSDOM to normalize and prettify
// the output.
const {document} = new JSDOM().window;
const actual = document.createElement('div');
actual.innerHTML = actualHtmlString;
actual.innerHTML = actualHtml;
const expected = document.createElement('div');
expected.innerHTML = expectedHtmlString;
await window.expectToBeEqual(actual, expected);
}, {actualHtml, expectedHtml});
expected.innerHTML = expectedHtml;
expect(actual).toEqual(expected);
}
export async function assertHTML(page, expectedHtml, ignoreSecondFrame) {
@ -326,7 +318,7 @@ export async function sleep(delay) {
export async function focusEditor(page, parentSelector = '.editor-shell') {
const selector = `${parentSelector} div[contenteditable="true"]`;
if (IS_COLLAB) {
await page.waitForSelector('iframe[name="left"]')
await page.waitForSelector('iframe[name="left"]');
const leftFrame = page.frame('left');
if ((await leftFrame.$$('.loading').length) !== 0) {
await leftFrame.waitForSelector('.loading', {

2
playwright.config.js
View File

@ -20,7 +20,7 @@ const config = {
use: {...devices['Desktop Safari']},
},
],
retries: 5,
retries: process.env.CI ? 5 : 1,
timeout: 60000,
use: {
// this causes issues in the CI on on current version.