+ 
+
+
+ BC
+ - Some text. -
- `, - ); - await assertSelection(page, { - anchorOffset: 10, - anchorPath: [1, 0, 0], - focusOffset: 10, - focusPath: [1, 0, 0], - }); - - await page.keyboard.down('Shift'); - await moveToLineBeginning(page); - await moveLeft(page, 3); - await page.keyboard.up('Shift'); - - await assertSelection(page, { - anchorOffset: 10, - anchorPath: [1, 0, 0], - focusOffset: 3, - focusPath: [0, 2, 0, 0], - }); - - // Copy the partial list item and paragraph - const clipboard = await copyToClipboard(page); - - // Select all and remove content - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('ArrowUp'); - if (!IS_WINDOWS && browserName === 'firefox') { + test( + 'Copy and paste of partial list items into the list', + {tag: '@flaky'}, + async ({page, isPlainText, isCollab, browserName}) => { + test.skip(isPlainText); + + await focusEditor(page); + + // Add three list items + await page.keyboard.type('- one'); + await page.keyboard.press('Enter'); + await page.keyboard.type('two'); + await page.keyboard.press('Enter'); + await page.keyboard.type('three'); + + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + + // Add a paragraph + await page.keyboard.type('Some text.'); + + await assertHTML( + page, + html` ++ Some text. +
+ `, + ); + await assertSelection(page, { + anchorOffset: 10, + anchorPath: [1, 0, 0], + focusOffset: 10, + focusPath: [1, 0, 0], + }); + + await page.keyboard.down('Shift'); + await moveToLineBeginning(page); + await moveLeft(page, 3); + await page.keyboard.up('Shift'); + + await assertSelection(page, { + anchorOffset: 10, + anchorPath: [1, 0, 0], + focusOffset: 3, + focusPath: [0, 2, 0, 0], + }); + + // Copy the partial list item and paragraph + const clipboard = await copyToClipboard(page); + + // Select all and remove content await page.keyboard.press('ArrowUp'); - } - await moveToLineEnd(page); - - await page.keyboard.down('Enter'); - - await assertHTML( - page, - html` -- Some text. -
- `, - ); - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [0, 1], - focusOffset: 0, - focusPath: [0, 1], - }); - - await pasteFromClipboard(page, clipboard); - - await assertHTML( - page, - html` -- Some text. -
-- Some text. -
- `, - ); - await assertSelection(page, { - anchorOffset: 10, - anchorPath: [1, 0, 0], - focusOffset: 10, - focusPath: [1, 0, 0], - }); - }); + await page.keyboard.press('ArrowUp'); + if (!IS_WINDOWS && browserName === 'firefox') { + await page.keyboard.press('ArrowUp'); + } + await moveToLineEnd(page); + + await page.keyboard.down('Enter'); + + await assertHTML( + page, + html` ++ Some text. +
+ `, + ); + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [0, 1], + focusOffset: 0, + focusPath: [0, 1], + }); + + await pasteFromClipboard(page, clipboard); + + await assertHTML( + page, + html` ++ Some text. +
++ Some text. +
+ `, + ); + await assertSelection(page, { + anchorOffset: 10, + anchorPath: [1, 0, 0], + focusOffset: 10, + focusPath: [1, 0, 0], + }); + }, + ); test('Copy list items and paste back into list', async ({ page, diff --git a/packages/lexical-playground/__tests__/e2e/HorizontalRule.spec.mjs b/packages/lexical-playground/__tests__/e2e/HorizontalRule.spec.mjs index 47a68316854..37ea391f7f9 100644 --- a/packages/lexical-playground/__tests__/e2e/HorizontalRule.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/HorizontalRule.spec.mjs @@ -27,131 +27,130 @@ import { test.describe('HorizontalRule', () => { test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); - test('Can create a horizontal rule and move selection around it', async ({ - page, - isCollab, - isPlainText, - browserName, - }) => { - test.skip(isPlainText); - await focusEditor(page); + test( + 'Can create a horizontal rule and move selection around it', + {tag: '@flaky'}, + async ({page, isCollab, isPlainText, browserName}) => { + test.skip(isPlainText); + await focusEditor(page); - await selectFromInsertDropdown(page, '.horizontal-rule'); + await selectFromInsertDropdown(page, '.horizontal-rule'); - await waitForSelector(page, 'hr'); + await waitForSelector(page, 'hr'); - await assertHTML( - page, - html` -- Some text -
-- Some more text -
- `, - ); + await assertHTML( + page, + html` ++ Some text +
++ Some more text +
+ `, + ); - await moveToLineBeginning(page); + await moveToLineBeginning(page); - await page.keyboard.press('ArrowLeft'); + await page.keyboard.press('ArrowLeft'); - await page.keyboard.press('ArrowLeft'); + await page.keyboard.press('ArrowLeft'); - await assertSelection(page, { - anchorOffset: 1, - anchorPath: [0], - focusOffset: 1, - focusPath: [0], - }); + await assertSelection(page, { + anchorOffset: 1, + anchorPath: [0], + focusOffset: 1, + focusPath: [0], + }); - await pressBackspace(page, 10); + await pressBackspace(page, 10); - // Collab doesn't process the cursor correctly - if (!isCollab) { - await assertHTML( - page, - 'Some more text
', - ); - } + // Collab doesn't process the cursor correctly + if (!isCollab) { + await assertHTML( + page, + 'Some more text
', + ); + } - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [], - focusOffset: 0, - focusPath: [], - }); - }); + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [], + focusOffset: 0, + focusPath: [], + }); + }, + ); test('Will add a horizontal rule at the end of a current TextNode and move selection to the new ParagraphNode.', async ({ page, diff --git a/packages/lexical-playground/__tests__/e2e/Links.spec.mjs b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs index 289ccf34996..0523dd0323c 100644 --- a/packages/lexical-playground/__tests__/e2e/Links.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/Links.spec.mjs @@ -25,7 +25,6 @@ import { focusEditor, html, initialize, - IS_LINUX, keyDownCtrlOrMeta, keyUpCtrlOrMeta, pasteFromClipboard, @@ -1923,82 +1922,86 @@ test.describe.parallel('Links', () => { ); }); - test('Can handle pressing Enter inside a Link', async ({page}) => { - await focusEditor(page); - await page.keyboard.type('Hello awesome'); - await selectAll(page); - await click(page, '.link'); - await click(page, '.link-confirm'); - await page.keyboard.press('ArrowRight'); - await page.keyboard.type('world'); + test( + 'Can handle pressing Enter inside a Link', + {tag: '@flaky'}, + async ({page}) => { + await focusEditor(page); + await page.keyboard.type('Hello awesome'); + await selectAll(page); + await click(page, '.link'); + await click(page, '.link-confirm'); + await page.keyboard.press('ArrowRight'); + await page.keyboard.type('world'); - await moveToLineBeginning(page); - await moveRight(page, 6); + await moveToLineBeginning(page); + await moveRight(page, 6); - await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); - await assertHTML( - page, - html` -- - Hello - -
-- - awesome - - world -
- `, - undefined, - {ignoreClasses: true}, - ); - }); + await assertHTML( + page, + html` ++ + Hello + +
++ + awesome + + world +
+ `, + undefined, + {ignoreClasses: true}, + ); + }, + ); - test('Can handle pressing Enter inside a Link containing multiple TextNodes', async ({ - page, - isCollab, - }) => { - test.fixme(isCollab && IS_LINUX, 'Flaky on Linux + Collab'); - await focusEditor(page); - await page.keyboard.type('Hello '); - await toggleBold(page); - await page.keyboard.type('awe'); - await toggleBold(page); - await page.keyboard.type('some'); - await selectAll(page); - await click(page, '.link'); - await click(page, '.link-confirm'); - await page.keyboard.press('ArrowRight'); - await page.keyboard.type(' world'); + test( + 'Can handle pressing Enter inside a Link containing multiple TextNodes', + {tag: '@flaky'}, + async ({page, isCollab}) => { + await focusEditor(page); + await page.keyboard.type('Hello '); + await toggleBold(page); + await page.keyboard.type('awe'); + await toggleBold(page); + await page.keyboard.type('some'); + await selectAll(page); + await click(page, '.link'); + await click(page, '.link-confirm'); + await page.keyboard.press('ArrowRight'); + await page.keyboard.type(' world'); - await moveToLineBeginning(page); - await moveRight(page, 6); + await moveToLineBeginning(page); + await moveRight(page, 6); - await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); - await assertHTML( - page, - html` -- - Hello - -
-- - awe - some - - world -
- `, - undefined, - {ignoreClasses: true}, - ); - }); + await assertHTML( + page, + html` ++ + Hello + +
++ + awe + some + + world +
+ `, + undefined, + {ignoreClasses: true}, + ); + }, + ); test( 'Can handle pressing Enter at the beginning of a Link', diff --git a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs index aa674960347..651e8707cdb 100644 --- a/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/Selection.spec.mjs @@ -874,30 +874,28 @@ test.describe.parallel('Selection', () => { }); }); - test('shift+arrowdown into a table, when the table is the last node, selects the whole table', async ({ - page, - isPlainText, - isCollab, - browserName, - legacyEvents, - }) => { - test.skip(isPlainText); - test.fixme(browserName === 'chromium' && legacyEvents); - await focusEditor(page); - await insertTable(page, 2, 2); - await moveToEditorEnd(page); - await deleteBackward(page); - await moveToEditorBeginning(page); - await page.keyboard.down('Shift'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.up('Shift'); - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [0], - focusOffset: 1, - focusPath: [1, 1, 1], - }); - }); + test( + 'shift+arrowdown into a table, when the table is the last node, selects the whole table', + {tag: '@flaky'}, + async ({page, isPlainText, isCollab, browserName, legacyEvents}) => { + test.skip(isPlainText); + test.fixme(browserName === 'chromium' && legacyEvents); + await focusEditor(page); + await insertTable(page, 2, 2); + await moveToEditorEnd(page); + await deleteBackward(page); + await moveToEditorBeginning(page); + await page.keyboard.down('Shift'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.up('Shift'); + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [0], + focusOffset: 1, + focusPath: [1, 1, 1], + }); + }, + ); test('shift+arrowup into a table, when the table is the first node, selects the whole table', async ({ page, @@ -924,37 +922,35 @@ test.describe.parallel('Selection', () => { }); }); - test('shift+arrowdown into a table, when the table is the only node, selects the whole table', async ({ - page, - isPlainText, - isCollab, - legacyEvents, - browserName, - }) => { - test.skip(isPlainText); - test.fixme(browserName === 'chromium' && legacyEvents); - await focusEditor(page); - await insertTable(page, 2, 2); - await moveToEditorBeginning(page); - await deleteBackward(page); - await moveToEditorEnd(page); - await deleteBackward(page); - await moveToEditorBeginning(page); - await moveUp(page, 1); - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [], - focusOffset: 0, - focusPath: [], - }); - await page.keyboard.down('Shift'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.up('Shift'); - await assertTableSelectionCoordinates(page, { - anchor: {x: 0, y: 0}, - focus: {x: 1, y: 1}, - }); - }); + test( + 'shift+arrowdown into a table, when the table is the only node, selects the whole table', + {tag: '@flaky'}, + async ({page, isPlainText, isCollab, legacyEvents, browserName}) => { + test.skip(isPlainText); + test.fixme(browserName === 'chromium' && legacyEvents); + await focusEditor(page); + await insertTable(page, 2, 2); + await moveToEditorBeginning(page); + await deleteBackward(page); + await moveToEditorEnd(page); + await deleteBackward(page); + await moveToEditorBeginning(page); + await moveUp(page, 1); + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [], + focusOffset: 0, + focusPath: [], + }); + await page.keyboard.down('Shift'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.up('Shift'); + await assertTableSelectionCoordinates(page, { + anchor: {x: 0, y: 0}, + focus: {x: 1, y: 1}, + }); + }, + ); test('shift+arrowup into a table, when the table is the only node, selects the whole table', async ({ page, diff --git a/packages/lexical-playground/__tests__/e2e/Tab.spec.mjs b/packages/lexical-playground/__tests__/e2e/Tab.spec.mjs index 0019f2fb25c..abbfd5c316c 100644 --- a/packages/lexical-playground/__tests__/e2e/Tab.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/Tab.spec.mjs @@ -17,71 +17,75 @@ import { /* eslint-disable sort-keys-fix/sort-keys-fix */ test.describe('Tab', () => { test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); - test(`can tab + IME`, async ({page, isPlainText, browserName}) => { - // CDP session is only available in Chromium - test.skip( - isPlainText || browserName === 'firefox' || browserName === 'webkit', - ); + test( + `can tab + IME`, + {tag: '@flaky'}, + async ({page, isPlainText, browserName}) => { + // CDP session is only available in Chromium + test.skip( + isPlainText || browserName === 'firefox' || browserName === 'webkit', + ); - const client = await page.context().newCDPSession(page); - async function imeType() { - // await page.keyboard.imeSetComposition('ｓ', 1, 1); - await client.send('Input.imeSetComposition', { - selectionStart: 1, - selectionEnd: 1, - text: 'ｓ', - }); - // await page.keyboard.imeSetComposition('す', 1, 1); - await client.send('Input.imeSetComposition', { - selectionStart: 1, - selectionEnd: 1, - text: 'す', - }); - // await page.keyboard.imeSetComposition('すｓ', 2, 2); - await client.send('Input.imeSetComposition', { - selectionStart: 2, - selectionEnd: 2, - text: 'すｓ', - }); - // await page.keyboard.imeSetComposition('すｓｈ', 3, 3); - await client.send('Input.imeSetComposition', { - selectionStart: 3, - selectionEnd: 3, - text: 'すｓｈ', - }); - // await page.keyboard.imeSetComposition('すし', 2, 2); - await client.send('Input.imeSetComposition', { - selectionStart: 2, - selectionEnd: 2, - text: 'すし', - }); - // await page.keyboard.insertText('すし'); - await client.send('Input.insertText', { - text: 'すし', - }); - await page.keyboard.type(' '); - } - await focusEditor(page); - // Indent - await page.keyboard.press('Tab'); - await imeType(); - await page.keyboard.press('Tab'); - await imeType(); + const client = await page.context().newCDPSession(page); + async function imeType() { + // await page.keyboard.imeSetComposition('ｓ', 1, 1); + await client.send('Input.imeSetComposition', { + selectionStart: 1, + selectionEnd: 1, + text: 'ｓ', + }); + // await page.keyboard.imeSetComposition('す', 1, 1); + await client.send('Input.imeSetComposition', { + selectionStart: 1, + selectionEnd: 1, + text: 'す', + }); + // await page.keyboard.imeSetComposition('すｓ', 2, 2); + await client.send('Input.imeSetComposition', { + selectionStart: 2, + selectionEnd: 2, + text: 'すｓ', + }); + // await page.keyboard.imeSetComposition('すｓｈ', 3, 3); + await client.send('Input.imeSetComposition', { + selectionStart: 3, + selectionEnd: 3, + text: 'すｓｈ', + }); + // await page.keyboard.imeSetComposition('すし', 2, 2); + await client.send('Input.imeSetComposition', { + selectionStart: 2, + selectionEnd: 2, + text: 'すし', + }); + // await page.keyboard.insertText('すし'); + await client.send('Input.insertText', { + text: 'すし', + }); + await page.keyboard.type(' '); + } + await focusEditor(page); + // Indent + await page.keyboard.press('Tab'); + await imeType(); + await page.keyboard.press('Tab'); + await imeType(); - await assertHTML( - page, - html` -- すし - - すし -
- `, - ); - }); + await assertHTML( + page, + html` ++ すし + + すし +
+ `, + ); + }, + ); test('can tab inside code block #4399', async ({page, isPlainText}) => { test.skip(isPlainText); diff --git a/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs b/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs index c4e715a8624..528cec14d12 100644 --- a/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs +++ b/packages/lexical-playground/__tests__/e2e/TextFormatting.spec.mjs @@ -1111,23 +1111,77 @@ test.describe.parallel('TextFormatting', () => { expect(isButtonActiveStatusDisplayedCorrectly).toBe(true); }); - test('Regression #2523: can toggle format when selecting a TextNode edge followed by a non TextNode; ', async ({ - page, - isCollab, - isPlainText, - }) => { - test.skip(isPlainText); - await focusEditor(page); - - await page.keyboard.type('A'); - await insertSampleImage(page); - await page.keyboard.type('BC'); - - await moveLeft(page, 1); - await selectCharacters(page, 'left', 2); - - if (!isCollab) { - await waitForSelector(page, '.editor-image img'); + test( + 'Regression #2523: can toggle format when selecting a TextNode edge followed by a non TextNode; ', + {tag: '@flaky'}, + async ({page, isCollab, isPlainText}) => { + test.skip(isPlainText); + await focusEditor(page); + + await page.keyboard.type('A'); + await insertSampleImage(page); + await page.keyboard.type('BC'); + + await moveLeft(page, 1); + await selectCharacters(page, 'left', 2); + + if (!isCollab) { + await waitForSelector(page, '.editor-image img'); + await assertHTML( + page, + html` +
+ A
+
+
+
+
+ BC
+
+
+ A
+
+
+
+
+
+ B
+
+ C
+
+
- A
-
-
-
-
-
- B
-
- C
-
-
- A
-
-
-
-
- BC
-
-
- - 🙂 - - or - - 🙁 - -
- `, - ); - await assertSelection(page, { - anchorOffset: 2, - anchorPath: [0, 2, 0, 0], - focusOffset: 2, - focusPath: [0, 2, 0, 0], - }); - - await moveLeft(page, 6); - await page.keyboard.press('Enter'); - if (isRichText) { + test( + `Can add new lines before the line with emoji`, + {tag: '@flaky'}, + async ({isRichText, page}) => { + await focusEditor(page); + await page.keyboard.type(':) or :('); await assertHTML( page, html` -@@ -68,19 +41,71 @@ test.describe('Regression test #429', () => { `, ); await assertSelection(page, { - anchorOffset: 0, - anchorPath: [1, 0, 0, 0], - focusOffset: 0, - focusPath: [1, 0, 0, 0], + anchorOffset: 2, + anchorPath: [0, 2, 0, 0], + focusOffset: 2, + focusPath: [0, 2, 0, 0], }); - } else { + + await moveLeft(page, 6); + await page.keyboard.press('Enter'); + if (isRichText) { + await assertHTML( + page, + html` +
+ + 🙂 + + or + + 🙁 + +
+ `, + ); + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [1, 0, 0, 0], + focusOffset: 0, + focusPath: [1, 0, 0, 0], + }); + } else { + await assertHTML( + page, + html` +
+
+
+ 🙂
+
+ or
+
+ 🙁
+
+
-
🙂
@@ -93,34 +118,10 @@ test.describe('Regression test #429', () => {
);
await assertSelection(page, {
anchorOffset: 0,
- anchorPath: [0, 1, 0, 0],
+ anchorPath: [0, 0, 0, 0],
focusOffset: 0,
- focusPath: [0, 1, 0, 0],
+ focusPath: [0, 0, 0, 0],
});
- }
-
- await page.keyboard.press('Backspace');
- await assertHTML(
- page,
- html`
-
- - 🙂 - - or - - 🙁 - -
- `, - ); - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [0, 0, 0, 0], - focusOffset: 0, - focusPath: [0, 0, 0, 0], - }); - }); + }, + ); });