From e53ced3c66ce0785c40521bdea6932a6427b709c Mon Sep 17 00:00:00 2001 From: umaranis Date: Sat, 6 Apr 2024 12:10:17 +1100 Subject: [PATCH] build: apply prettier formatting to playground --- demos/playground/README.md | 3 +- demos/playground/index.html | 2 +- demos/playground/package.json | 4 +- demos/playground/split/index.html | 2 +- demos/playground/src/RichTextComposer.svelte | 8 +- .../src/__tests__/e2e/AutoLinks.spec.mjs | 71 +- .../e2e/BlockWithAlignableContents.spec.mjs | 6 +- .../__tests__/e2e/ClearFormatting.spec.mjs | 6 +- .../src/__tests__/e2e/CodeBlock.spec.mjs | 1305 +++++++++-------- .../src/__tests__/e2e/Composition.spec.mjs | 172 +-- .../src/__tests__/e2e/CopyAndPaste.spec.mjs | 395 +++-- .../src/__tests__/e2e/Hashtags.spec.mjs | 8 +- .../src/__tests__/e2e/Headings.spec.mjs | 10 +- .../src/__tests__/e2e/HorizontalRule.spec.mjs | 10 +- .../src/__tests__/e2e/Keywords.spec.mjs | 472 +++--- .../src/__tests__/e2e/List.spec.mjs | 294 ++-- .../src/__tests__/e2e/Lock.spec.mjs | 35 +- .../src/__tests__/e2e/Markdown.spec.mjs | 418 +++--- .../src/__tests__/e2e/Mutations.spec.mjs | 429 +++--- .../src/__tests__/e2e/Navigation.spec.mjs | 528 +++---- .../src/__tests__/e2e/Selection.spec.mjs | 260 ++-- .../src/__tests__/e2e/Tables.spec.mjs | 174 +-- .../src/__tests__/e2e/TextEntry.spec.mjs | 18 +- .../src/__tests__/e2e/TextFormatting.spec.mjs | 460 +++--- .../regression/1384-insert-nodes.spec.mjs | 47 +- .../230-navigation-around-hashtags.spec.mjs | 61 +- .../regression/231-empty-text-nodes.spec.mjs | 49 +- .../3433-merge-markdown-lists.spec.mjs | 2 +- .../379-backspace-with-mentions.spec.mjs | 99 +- .../regression/429-swapping-emoji.spec.mjs | 134 +- .../playground/src/__tests__/utils/index.mjs | 56 +- demos/playground/src/index.css | 10 +- demos/playground/svelte.config.js | 6 +- pnpm-lock.yaml | 3 + 34 files changed, 2822 insertions(+), 2735 deletions(-) diff --git a/demos/playground/README.md b/demos/playground/README.md index 85328fea..4c63a49a 100644 --- a/demos/playground/README.md +++ b/demos/playground/README.md @@ -1,4 +1,3 @@ - # Rich Text Editor -A sample Rich Text Editor using svelte-lexical \ No newline at end of file +A sample Rich Text Editor using svelte-lexical diff --git a/demos/playground/index.html b/demos/playground/index.html index 535189b5..ea4c6d82 100644 --- a/demos/playground/index.html +++ b/demos/playground/index.html @@ -1,4 +1,4 @@ - + diff --git a/demos/playground/package.json b/demos/playground/package.json index b480ad71..3eea4ebf 100644 --- a/demos/playground/package.json +++ b/demos/playground/package.json @@ -9,7 +9,7 @@ "build-dev": "vite build", "preview": "vite preview", "check": "svelte-check --tsconfig ./tsconfig.json --fail-on-warnings", - "lint": "eslint .", + "lint": "prettier --check . --ignore-path ../../.gitignore && eslint .", "size": "pnpm build && size-limit", "collab": "cross-env HOST=localhost PORT=1234 npx y-websocket-server", "prepare-ci": "pnpm run build-dev", @@ -73,10 +73,12 @@ "concurrently": "^8.0.1", "cross-env": "^7.0.3", "eslint": "^8.39.0", + "eslint-config-prettier": "^8.8.0", "eslint-plugin-import": "^2.27.5", "eslint-plugin-svelte": "^2.35.1", "prettier": "^3.2.5", "prettier-plugin-organize-attributes": "^1.0.0", + "prettier-plugin-svelte": "^3.2.2", "serve": "^14.2.0", "size-limit": "^8.2.6", "start-server-and-test": "^2.0.0", diff --git a/demos/playground/split/index.html b/demos/playground/split/index.html index a0a7d52e..4550478b 100644 --- a/demos/playground/split/index.html +++ b/demos/playground/split/index.html @@ -1,4 +1,4 @@ - + diff --git a/demos/playground/src/RichTextComposer.svelte b/demos/playground/src/RichTextComposer.svelte index 33bcb2a3..3fa57eda 100644 --- a/demos/playground/src/RichTextComposer.svelte +++ b/demos/playground/src/RichTextComposer.svelte @@ -56,8 +56,8 @@ $: placeholderText = $settings.isCollab ? 'Enter some collaborative rich text...' : $settings.isRichText - ? 'Enter some rich text...' - : 'Enter some plain text...'; + ? 'Enter some rich text...' + : 'Enter some plain text...'; let isSmallWidthViewport = false; @@ -67,8 +67,8 @@ editorState: $settings.isCollab ? null : $settings.emptyEditor - ? undefined - : prepopulatedRichText, + ? undefined + : prepopulatedRichText, namespace: 'Playground', nodes: [ HeadingNode, diff --git a/demos/playground/src/__tests__/e2e/AutoLinks.spec.mjs b/demos/playground/src/__tests__/e2e/AutoLinks.spec.mjs index acbbad6f..81b6e622 100644 --- a/demos/playground/src/__tests__/e2e/AutoLinks.spec.mjs +++ b/demos/playground/src/__tests__/e2e/AutoLinks.spec.mjs @@ -156,42 +156,45 @@ test.describe('Auto Links', () => { ); }); - test.fixme('Does not create redundant auto-link', async ({page, isPlainText}) => { - test.skip(isPlainText); - await focusEditor(page); - await page.keyboard.type('hm'); + test.fixme( + 'Does not create redundant auto-link', + async ({page, isPlainText}) => { + test.skip(isPlainText); + await focusEditor(page); + await page.keyboard.type('hm'); - await selectAll(page); - await click(page, '.link'); + await selectAll(page); + await click(page, '.link'); - await assertHTML( - page, - html` -

- - hm - -

- `, - undefined, - {ignoreClasses: true}, - ); - await moveLeft(page, 1); - await moveRight(page, 1); - await page.keyboard.type('ttps://facebook.co'); - await assertHTML( - page, - html` -

- - https://facebook.com - -

- `, - undefined, - {ignoreClasses: true}, - ); - }); + await assertHTML( + page, + html` +

+ + hm + +

+ `, + undefined, + {ignoreClasses: true}, + ); + await moveLeft(page, 1); + await moveRight(page, 1); + await page.keyboard.type('ttps://facebook.co'); + await assertHTML( + page, + html` +

+ + https://facebook.com + +

+ `, + undefined, + {ignoreClasses: true}, + ); + }, + ); test('Can create links when pasting text with multiple autolinks in a row separated by non-alphanumeric characters, but not whitespaces', async ({ page, diff --git a/demos/playground/src/__tests__/e2e/BlockWithAlignableContents.spec.mjs b/demos/playground/src/__tests__/e2e/BlockWithAlignableContents.spec.mjs index 2b0ab424..44927655 100644 --- a/demos/playground/src/__tests__/e2e/BlockWithAlignableContents.spec.mjs +++ b/demos/playground/src/__tests__/e2e/BlockWithAlignableContents.spec.mjs @@ -6,7 +6,7 @@ * */ -import { selectAll } from '../keyboardShortcuts/index.mjs'; +import {selectAll} from '../keyboardShortcuts/index.mjs'; import { assertHTML, focusEditor, @@ -20,7 +20,7 @@ import { const TEST_URL = 'https://www.youtube-nocookie.com/embed/jNQXAC9IVRw'; test.describe('BlockWithAlignableContents', () => { test.fixme(); - test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page })); + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); test('Can create full width blocks for YouTube videos', async ({ page, @@ -126,7 +126,7 @@ test.describe('BlockWithAlignableContents', () => {

`, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); }); }); diff --git a/demos/playground/src/__tests__/e2e/ClearFormatting.spec.mjs b/demos/playground/src/__tests__/e2e/ClearFormatting.spec.mjs index b9a328ad..81f4a22a 100644 --- a/demos/playground/src/__tests__/e2e/ClearFormatting.spec.mjs +++ b/demos/playground/src/__tests__/e2e/ClearFormatting.spec.mjs @@ -28,11 +28,11 @@ import { test.describe('Clear All Formatting', () => { test.fixme(); - test.beforeEach(({ isPlainText, isCollab, page }) => { + test.beforeEach(({isPlainText, isCollab, page}) => { test.skip(isPlainText); - initialize({ isCollab, page }); + initialize({isCollab, page}); }); - test(`Can clear BIU formatting`, async ({ page }) => { + test(`Can clear BIU formatting`, async ({page}) => { await focusEditor(page); await page.keyboard.type('Hello'); diff --git a/demos/playground/src/__tests__/e2e/CodeBlock.spec.mjs b/demos/playground/src/__tests__/e2e/CodeBlock.spec.mjs index cbe8ebab..5b6a566a 100644 --- a/demos/playground/src/__tests__/e2e/CodeBlock.spec.mjs +++ b/demos/playground/src/__tests__/e2e/CodeBlock.spec.mjs @@ -30,147 +30,150 @@ async function toggleCodeBlock(page) { } test.describe('CodeBlock', () => { - test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page })); - test.fixme('Can create code block with markdown', async ({ page, isRichText }) => { - await focusEditor(page); - await page.keyboard.type('``` alert(1);'); - if (isRichText) { - await assertSelection(page, { - anchorOffset: 1, - anchorPath: [0, 4, 0], - focusOffset: 1, - focusPath: [0, 4, 0], - }); - await assertHTML( - page, - html` - - - alert - - - ( - - - 1 - - - ) - - - ; - - - `, - ); + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); + test.fixme( + 'Can create code block with markdown', + async ({page, isRichText}) => { + await focusEditor(page); + await page.keyboard.type('``` alert(1);'); + if (isRichText) { + await assertSelection(page, { + anchorOffset: 1, + anchorPath: [0, 4, 0], + focusOffset: 1, + focusPath: [0, 4, 0], + }); + await assertHTML( + page, + html` + + + alert + + + ( + + + 1 + + + ) + + + ; + + + `, + ); - // Remove code block (back to a normal paragraph) and check that highlights are converted into regular text - await moveToEditorBeginning(page); - await page.keyboard.press('Backspace'); - await assertHTML( - page, - html` -

- alert(1); -

- `, - ); - } else { - await assertHTML( - page, - html` -

- \`\`\` alert(1); -

- `, - ); - } - }); + // Remove code block (back to a normal paragraph) and check that highlights are converted into regular text + await moveToEditorBeginning(page); + await page.keyboard.press('Backspace'); + await assertHTML( + page, + html` +

+ alert(1); +

+ `, + ); + } else { + await assertHTML( + page, + html` +

+ \`\`\` alert(1); +

+ `, + ); + } + }, + ); - test.fixme('Can create code block with markdown and wrap existing text', async ({ - page, - isRichText, - }) => { - await focusEditor(page); - await page.keyboard.type('alert(1);'); - await moveToEditorBeginning(page); - await page.keyboard.type('``` '); - if (isRichText) { - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [0, 0, 0], - focusOffset: 0, - focusPath: [0, 0, 0], - }); - await assertHTML( - page, - html` - - - alert - - - ( - - - 1 - - - ) - - - ; - - - `, - ); - } else { - await assertHTML( - page, - html` -

- \`\`\` alert(1); -

- `, - ); - } - }); + test.fixme( + 'Can create code block with markdown and wrap existing text', + async ({page, isRichText}) => { + await focusEditor(page); + await page.keyboard.type('alert(1);'); + await moveToEditorBeginning(page); + await page.keyboard.type('``` '); + if (isRichText) { + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [0, 0, 0], + focusOffset: 0, + focusPath: [0, 0, 0], + }); + await assertHTML( + page, + html` + + + alert + + + ( + + + 1 + + + ) + + + ; + + + `, + ); + } else { + await assertHTML( + page, + html` +

+ \`\`\` alert(1); +

+ `, + ); + } + }, + ); test('Can select multiple paragraphs and convert to code block', async ({ page, @@ -240,13 +243,89 @@ test.describe('CodeBlock', () => { ); }); - test.fixme('Can switch highlighting language in a toolbar', async ({ - page, - isRichText, - }) => { - await focusEditor(page); - await page.keyboard.type('``` select * from users'); - if (isRichText) { + test.fixme( + 'Can switch highlighting language in a toolbar', + async ({page, isRichText}) => { + await focusEditor(page); + await page.keyboard.type('``` select * from users'); + if (isRichText) { + await assertHTML( + page, + html` + + select + + * + + from users + + `, + ); + await click(page, '.toolbar-item.code-language'); + await click(page, 'button:has-text("SQL")'); + await assertHTML( + page, + html` + + + select + + + + * + + + + from + + users + + `, + ); + } else { + await assertHTML( + page, + html` +

+ \`\`\` select * from users +

+ `, + ); + } + }, + ); + + test.fixme( + 'Can maintain indent when creating new lines', + async ({page, isRichText, isPlainText}) => { + test.skip(isPlainText); + await focusEditor(page); + await page.keyboard.type('``` alert(1);'); + await page.keyboard.press('Enter'); + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Indent")'); + await page.keyboard.type('alert(2);'); + await page.keyboard.press('Enter'); await assertHTML( page, html` @@ -254,20 +333,81 @@ test.describe('CodeBlock', () => { class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr" - data-gutter="1" + data-gutter="123" data-highlight-language="javascript"> - select + alert + + - * + ( - from users + + 1 + + + ) + + + ; + +
+ + + alert + + + ( + + + 2 + + + ) + + + ; + +
+ `, ); - await click(page, '.toolbar-item.code-language'); - await click(page, 'button:has-text("SQL")'); + }, + ); + + test.fixme( + 'Can (un)indent multiple lines at once', + async ({page, isRichText, isPlainText}) => { + test.skip(isPlainText); + await focusEditor(page); + await page.keyboard.type('``` if (x) {'); + await page.keyboard.press('Enter'); + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Indent")'); + await page.keyboard.type('x();'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Backspace'); + await page.keyboard.type('}'); await assertHTML( page, html` @@ -275,59 +415,278 @@ test.describe('CodeBlock', () => { class="PlaygroundEditorTheme__code PlaygroundEditorTheme__ltr" spellcheck="false" dir="ltr" - data-gutter="1" - data-highlight-language="sql"> + data-gutter="123" + data-highlight-language="javascript"> - select + if + + + + ( + + x + + ) - * + { +
+ + + x + + + ( + + + ) + + + ; + +
+ + } + + + `, + ); + await page.keyboard.down('Shift'); + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('ArrowUp'); + await page.keyboard.up('Shift'); + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Indent")'); + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Indent")'); + await assertHTML( + page, + html` + + + + if + + + + ( + + x + + ) + + + + { + +
+ + + x + + + ( + + + ) + + + ; + +
+ + + } + + + `, + ); + await page.keyboard.down('Shift'); + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Outdent")'); + await page.keyboard.up('Shift'); + await assertHTML( + page, + html` + - from + if + + + + ( + + x + + ) + + + + { + +
+ + + x + + + ( + + + ) + + + ; + +
+ + + } - users `, ); - } else { + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Outdent")'); + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Outdent")'); await assertHTML( page, html` -

- \`\`\` select * from users -

+ + + if + + + + ( + + x + + ) + + + + { + +
+ + x + + + ( + + + ) + + + ; + +
+ + } + + `, ); - } - }); + }, + ); - test.fixme('Can maintain indent when creating new lines', async ({ - page, - isRichText, - isPlainText, - }) => { - test.skip(isPlainText); - await focusEditor(page); - await page.keyboard.type('``` alert(1);'); - await page.keyboard.press('Enter'); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Indent")'); - await page.keyboard.type('alert(2);'); - await page.keyboard.press('Enter'); - await assertHTML( - page, - html` + test.fixme( + 'Can move around lines with option+arrow keys', + async ({page, isPlainText}) => { + test.skip(isPlainText); + const abcHTML = html` { - alert + a ( - - 1 - @@ -360,22 +714,16 @@ test.describe('CodeBlock', () => { ;
- - alert + b ( - - 2 - @@ -387,65 +735,10 @@ test.describe('CodeBlock', () => { ;
- - - `, - ); - }); - - test.fixme('Can (un)indent multiple lines at once', async ({ - page, - isRichText, - isPlainText, - }) => { - test.skip(isPlainText); - await focusEditor(page); - await page.keyboard.type('``` if (x) {'); - await page.keyboard.press('Enter'); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Indent")'); - await page.keyboard.type('x();'); - await page.keyboard.press('Enter'); - await page.keyboard.press('Backspace'); - await page.keyboard.type('}'); - await assertHTML( - page, - html` - - - if - - - - ( - - x - - ) - - - - { - -
- - x + c { data-lexical-text="true"> ; -
- - } - - `, - ); - await page.keyboard.down('Shift'); - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('ArrowUp'); - await page.keyboard.up('Shift'); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Indent")'); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Indent")'); - await assertHTML( - page, - html` + `; + const bcaHTML = html` - - - if - - - - ( - - x - - ) - - - - { - -
- - x + b { ;
- - - } - - - `, - ); - await page.keyboard.down('Shift'); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Outdent")'); - await page.keyboard.up('Shift'); - await assertHTML( - page, - html` - - - - if - - - - ( - - x - - ) - - - - { - -
- - x + c { ;
- - - } - - - `, - ); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Outdent")'); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Outdent")'); - await assertHTML( - page, - html` - - - if - - - - ( - - x - - ) - - - - { - -
- x + a { data-lexical-text="true"> ; -
- - } - - `, - ); - }); - - test.fixme('Can move around lines with option+arrow keys', async ({ - page, - isPlainText, - }) => { - test.skip(isPlainText); - const abcHTML = html` - - - a - - - ( - - - ) - - - ; - -
- - b - - - ( - - - ) - - - ; - -
- - c - - - ( - - - ) - - - ; - - - `; - const bcaHTML = html` - - - b - - - ( - - - ) - - - ; - -
- - c - - - ( - - - ) - - - ; - -
- - a - - - ( - - - ) - - - ; - - - `; - const endOfFirstLine = { - anchorOffset: 1, - anchorPath: [0, 3, 0], - focusOffset: 1, - focusPath: [0, 3, 0], - }; - const endOfLastLine = { - anchorOffset: 1, - anchorPath: [0, 13, 0], - focusOffset: 1, - focusPath: [0, 13, 0], - }; - await focusEditor(page); - await page.keyboard.type('``` a();\nb();\nc();'); - await assertHTML(page, abcHTML); - await assertSelection(page, endOfLastLine); - await page.keyboard.press('ArrowUp'); - await page.keyboard.press('ArrowUp'); - // Workaround for #1173: just insert and remove a space to fix Firefox losing the selection - await page.keyboard.type(' '); - await page.keyboard.press('Backspace'); - await assertSelection(page, endOfFirstLine); - // End workaround - // Ensure attempting to move a line up at the top of a codeblock no-ops - await page.keyboard.down('Alt'); - await page.keyboard.press('ArrowUp'); - await assertSelection(page, endOfFirstLine); - await assertHTML(page, abcHTML); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await assertSelection(page, endOfLastLine); - // Can't move a line down and out of codeblock - await assertHTML(page, bcaHTML); - await page.keyboard.press('ArrowDown'); - await assertSelection(page, endOfLastLine); - await assertHTML(page, bcaHTML); - }); + `; + const endOfFirstLine = { + anchorOffset: 1, + anchorPath: [0, 3, 0], + focusOffset: 1, + focusPath: [0, 3, 0], + }; + const endOfLastLine = { + anchorOffset: 1, + anchorPath: [0, 13, 0], + focusOffset: 1, + focusPath: [0, 13, 0], + }; + await focusEditor(page); + await page.keyboard.type('``` a();\nb();\nc();'); + await assertHTML(page, abcHTML); + await assertSelection(page, endOfLastLine); + await page.keyboard.press('ArrowUp'); + await page.keyboard.press('ArrowUp'); + // Workaround for #1173: just insert and remove a space to fix Firefox losing the selection + await page.keyboard.type(' '); + await page.keyboard.press('Backspace'); + await assertSelection(page, endOfFirstLine); + // End workaround + // Ensure attempting to move a line up at the top of a codeblock no-ops + await page.keyboard.down('Alt'); + await page.keyboard.press('ArrowUp'); + await assertSelection(page, endOfFirstLine); + await assertHTML(page, abcHTML); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await assertSelection(page, endOfLastLine); + // Can't move a line down and out of codeblock + await assertHTML(page, bcaHTML); + await page.keyboard.press('ArrowDown'); + await assertSelection(page, endOfLastLine); + await assertHTML(page, bcaHTML); + }, + ); /** * Code example for tests: @@ -1056,24 +1057,23 @@ test.describe('CodeBlock', () => { }); }); - test.fixme('When pressing CMD/Ctrl + Left, CMD/Ctrl + Right, the cursor should go to the start of the code', async ({ - page, - isPlainText, - }) => { - test.skip(isPlainText); - await focusEditor(page); - await page.keyboard.type('``` '); - await page.keyboard.press('Space'); - await click(page, '.toolbar-item.alignment'); - await click(page, 'button:has-text("Indent")'); - await page.keyboard.type('a b'); - await page.keyboard.press('Space'); - await page.keyboard.press('Enter'); - await page.keyboard.type('c d'); - await page.keyboard.press('Space'); - await assertHTML( - page, - ` + test.fixme( + 'When pressing CMD/Ctrl + Left, CMD/Ctrl + Right, the cursor should go to the start of the code', + async ({page, isPlainText}) => { + test.skip(isPlainText); + await focusEditor(page); + await page.keyboard.type('``` '); + await page.keyboard.press('Space'); + await click(page, '.toolbar-item.alignment'); + await click(page, 'button:has-text("Indent")'); + await page.keyboard.type('a b'); + await page.keyboard.press('Space'); + await page.keyboard.press('Enter'); + await page.keyboard.type('c d'); + await page.keyboard.press('Space'); + await assertHTML( + page, + ` { c d `, - ); + ); - await selectCharacters(page, 'left', 13); - await assertSelection(page, { - anchorOffset: 6, - anchorPath: [0, 2, 0], - focusOffset: 0, - focusPath: [0, 0, 0], - }); + await selectCharacters(page, 'left', 13); + await assertSelection(page, { + anchorOffset: 6, + anchorPath: [0, 2, 0], + focusOffset: 0, + focusPath: [0, 0, 0], + }); - await moveToStart(page); - await assertSelection(page, { - anchorOffset: 2, - anchorPath: [0, 0, 0], - focusOffset: 2, - focusPath: [0, 0, 0], - }); + await moveToStart(page); + await assertSelection(page, { + anchorOffset: 2, + anchorPath: [0, 0, 0], + focusOffset: 2, + focusPath: [0, 0, 0], + }); - await moveToEnd(page); - await assertSelection(page, { - anchorOffset: 5, - anchorPath: [0, 0, 0], - focusOffset: 5, - focusPath: [0, 0, 0], - }); + await moveToEnd(page); + await assertSelection(page, { + anchorOffset: 5, + anchorPath: [0, 0, 0], + focusOffset: 5, + focusPath: [0, 0, 0], + }); - await moveToStart(page); - await assertSelection(page, { - anchorOffset: 2, - anchorPath: [0, 0, 0], - focusOffset: 2, - focusPath: [0, 0, 0], - }); + await moveToStart(page); + await assertSelection(page, { + anchorOffset: 2, + anchorPath: [0, 0, 0], + focusOffset: 2, + focusPath: [0, 0, 0], + }); - await selectCharacters(page, 'right', 11); - await assertSelection(page, { - anchorOffset: 2, - anchorPath: [0, 0, 0], - focusOffset: 6, - focusPath: [0, 2, 0], - }); + await selectCharacters(page, 'right', 11); + await assertSelection(page, { + anchorOffset: 2, + anchorPath: [0, 0, 0], + focusOffset: 6, + focusPath: [0, 2, 0], + }); - await moveToEnd(page); - await assertSelection(page, { - anchorOffset: 5, - anchorPath: [0, 2, 0], - focusOffset: 5, - focusPath: [0, 2, 0], - }); + await moveToEnd(page); + await assertSelection(page, { + anchorOffset: 5, + anchorPath: [0, 2, 0], + focusOffset: 5, + focusPath: [0, 2, 0], + }); - await page.pause(); - }); + await page.pause(); + }, + ); }); diff --git a/demos/playground/src/__tests__/e2e/Composition.spec.mjs b/demos/playground/src/__tests__/e2e/Composition.spec.mjs index 2802c5fd..aa0d86e9 100644 --- a/demos/playground/src/__tests__/e2e/Composition.spec.mjs +++ b/demos/playground/src/__tests__/e2e/Composition.spec.mjs @@ -625,100 +625,102 @@ test.describe('Composition', () => { }); }); - test.fixme('Can type, delete and cancel Hiragana via IME', async ({ - page, - browserName, - }) => { - // We don't yet support FF. - test.skip(browserName === 'firefox'); - - await focusEditor(page); - await enableCompositionKeyEvents(page); - - await page.keyboard.imeSetComposition('ｓ', 1, 1); - await page.keyboard.imeSetComposition('す', 1, 1); - await page.keyboard.imeSetComposition('すｓ', 2, 2); - await page.keyboard.imeSetComposition('すｓｈ', 3, 3); - await page.keyboard.imeSetComposition('すし', 2, 2); - await page.keyboard.imeSetComposition('す', 1, 1); - await page.keyboard.imeSetComposition('', 0, 0); - // Escape would fire here - await page.keyboard.insertText(''); - - await assertHTML( - page, - html` -


- `, - ); - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [0], - focusOffset: 0, - focusPath: [0], - }); - - await page.keyboard.type(' '); - await page.keyboard.press('ArrowLeft'); + test.fixme( + 'Can type, delete and cancel Hiragana via IME', + async ({page, browserName}) => { + // We don't yet support FF. + test.skip(browserName === 'firefox'); + + await focusEditor(page); + await enableCompositionKeyEvents(page); + + await page.keyboard.imeSetComposition('ｓ', 1, 1); + await page.keyboard.imeSetComposition('す', 1, 1); + await page.keyboard.imeSetComposition('すｓ', 2, 2); + await page.keyboard.imeSetComposition('すｓｈ', 3, 3); + await page.keyboard.imeSetComposition('すし', 2, 2); + await page.keyboard.imeSetComposition('す', 1, 1); + await page.keyboard.imeSetComposition('', 0, 0); + // Escape would fire here + await page.keyboard.insertText(''); - await page.keyboard.imeSetComposition('ｓ', 1, 1); - await page.keyboard.imeSetComposition('す', 1, 1); - await page.keyboard.imeSetComposition('すｓ', 2, 2); - await page.keyboard.imeSetComposition('すｓｈ', 3, 3); - await page.keyboard.imeSetComposition('すし', 2, 2); - await page.keyboard.imeSetComposition('す', 1, 1); - await page.keyboard.imeSetComposition('', 0, 0); - // Escape would fire here - await page.keyboard.insertText(''); + await assertHTML( + page, + html` +


+ `, + ); + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [0], + focusOffset: 0, + focusPath: [0], + }); + + await page.keyboard.type(' '); + await page.keyboard.press('ArrowLeft'); + + await page.keyboard.imeSetComposition('ｓ', 1, 1); + await page.keyboard.imeSetComposition('す', 1, 1); + await page.keyboard.imeSetComposition('すｓ', 2, 2); + await page.keyboard.imeSetComposition('すｓｈ', 3, 3); + await page.keyboard.imeSetComposition('すし', 2, 2); + await page.keyboard.imeSetComposition('す', 1, 1); + await page.keyboard.imeSetComposition('', 0, 0); + // Escape would fire here + await page.keyboard.insertText(''); - await assertHTML( - page, - html` -

- -

- `, - ); - await assertSelection(page, { - anchorOffset: 0, - anchorPath: [0, 0, 0], - focusOffset: 0, - focusPath: [0, 0, 0], - }); - }); + await assertHTML( + page, + html` +

+ +

+ `, + ); + await assertSelection(page, { + anchorOffset: 0, + anchorPath: [0, 0, 0], + focusOffset: 0, + focusPath: [0, 0, 0], + }); + }, + ); - test.fixme('Floating toolbar should not be displayed when using IME', async ({ - page, - browserName, - isPlainText, - }) => { - test.skip(isPlainText); - // We don't yet support FF. - test.skip(browserName === 'firefox'); + test.fixme( + 'Floating toolbar should not be displayed when using IME', + async ({page, browserName, isPlainText}) => { + test.skip(isPlainText); + // We don't yet support FF. + test.skip(browserName === 'firefox'); - await focusEditor(page); - await enableCompositionKeyEvents(page); + await focusEditor(page); + await enableCompositionKeyEvents(page); - await page.keyboard.imeSetComposition('ｓ', 0, 1); - await page.keyboard.imeSetComposition('す', 0, 1); - await page.keyboard.imeSetComposition('すｓ', 0, 2); - await page.keyboard.imeSetComposition('すｓｈ', 0, 3); - await page.keyboard.imeSetComposition('すｓｈ', 0, 4); + await page.keyboard.imeSetComposition('ｓ', 0, 1); + await page.keyboard.imeSetComposition('す', 0, 1); + await page.keyboard.imeSetComposition('すｓ', 0, 2); + await page.keyboard.imeSetComposition('すｓｈ', 0, 3); + await page.keyboard.imeSetComposition('すｓｈ', 0, 4); - const isFloatingToolbarDisplayedWhenUseIME = await evaluate(page, () => { - return !!document.querySelector('.floating-text-format-popup'); - }); + const isFloatingToolbarDisplayedWhenUseIME = await evaluate( + page, + () => { + return !!document.querySelector('.floating-text-format-popup'); + }, + ); - expect(isFloatingToolbarDisplayedWhenUseIME).toEqual(false); + expect(isFloatingToolbarDisplayedWhenUseIME).toEqual(false); - await page.keyboard.insertText('すｓｈ'); - await selectCharacters(page, 'left', 3); + await page.keyboard.insertText('すｓｈ'); + await selectCharacters(page, 'left', 3); - const isFloatingToolbarDisplayed = await evaluate(page, () => { - return !!document.querySelector('.floating-text-format-popup'); - }); + const isFloatingToolbarDisplayed = await evaluate(page, () => { + return !!document.querySelector('.floating-text-format-popup'); + }); - expect(isFloatingToolbarDisplayed).toEqual(true); - }); + expect(isFloatingToolbarDisplayed).toEqual(true); + }, + ); }); }); diff --git a/demos/playground/src/__tests__/e2e/CopyAndPaste.spec.mjs b/demos/playground/src/__tests__/e2e/CopyAndPaste.spec.mjs index 52c41821..4cc7a1e7 100644 --- a/demos/playground/src/__tests__/e2e/CopyAndPaste.spec.mjs +++ b/demos/playground/src/__tests__/e2e/CopyAndPaste.spec.mjs @@ -5,7 +5,7 @@ * LICENSE file in the root directory of this source tree. * */ -import { expect } from '@playwright/test'; +import {expect} from '@playwright/test'; import { extendToNextWord, @@ -42,8 +42,8 @@ import { } from '../utils/index.mjs'; test.describe('CopyAndPaste', () => { - test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page })); - test('Basic copy + paste', async ({ isRichText, page, browserName }) => { + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); + test('Basic copy + paste', async ({isRichText, page, browserName}) => { await focusEditor(page); // Add paragraph @@ -256,7 +256,7 @@ test.describe('CopyAndPaste', () => { test.fixme( `Copy and paste heading`, - async ({ isPlainText, page, browserName }) => { + async ({isPlainText, page, browserName}) => { test.skip(isPlainText); await focusEditor(page); @@ -309,7 +309,7 @@ test.describe('CopyAndPaste', () => { test.fixme( `Copy and paste between sections`, - async ({ isRichText, page, browserName }) => { + async ({isRichText, page, browserName}) => { await focusEditor(page); await page.keyboard.type('Hello world #foobar test #foobar2 when #not'); @@ -789,7 +789,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy and paste of partial list items into an empty editor', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -869,7 +869,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy and paste of partial list items into the list', - async ({ page, isPlainText, isCollab, browserName }) => { + async ({page, isPlainText, isCollab, browserName}) => { test.skip(isPlainText); await focusEditor(page); @@ -1045,7 +1045,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy list items and paste back into list', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText); await focusEditor(page); @@ -1112,7 +1112,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy list items and paste into list', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText); await focusEditor(page); @@ -1298,7 +1298,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy and paste of list items and paste back into list on an existing item', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText); await focusEditor(page); @@ -1363,171 +1363,170 @@ test.describe('CopyAndPaste', () => { }, ); - test.fixme('Copy list of a different type and paste into list on an existing item - should merge the lists.', async ({ - page, - isPlainText, - isCollab, - }) => { - test.skip(isPlainText); + test.fixme( + 'Copy list of a different type and paste into list on an existing item - should merge the lists.', + async ({page, isPlainText, isCollab}) => { + test.skip(isPlainText); - await focusEditor(page); + await focusEditor(page); - await page.keyboard.type('- one'); - await page.keyboard.press('Enter'); - await page.keyboard.type('two'); - await page.keyboard.press('Tab'); - await page.keyboard.press('Enter'); - await page.keyboard.type('a'); + await page.keyboard.type('- one'); + await page.keyboard.press('Enter'); + await page.keyboard.type('two'); + await page.keyboard.press('Tab'); + await page.keyboard.press('Enter'); + await page.keyboard.type('a'); - await page.keyboard.press('Enter'); - await page.keyboard.press('Enter'); - await page.keyboard.press('Enter'); - await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); + await page.keyboard.press('Enter'); - await page.keyboard.type('1. four'); - await page.keyboard.press('Enter'); - await page.keyboard.type('five'); - await page.keyboard.press('Tab'); + await page.keyboard.type('1. four'); + await page.keyboard.press('Enter'); + await page.keyboard.type('five'); + await page.keyboard.press('Tab'); - await page.keyboard.press('ArrowUp'); + await page.keyboard.press('ArrowUp'); - await moveToLineBeginning(page); - await page.keyboard.down('Shift'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.press('ArrowDown'); - await page.keyboard.up('Shift'); + await moveToLineBeginning(page); + await page.keyboard.down('Shift'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.press('ArrowDown'); + await page.keyboard.up('Shift'); - await assertHTML( - page, - html` - -


-
    -
  1. - four -
    2. -
  2. -
      -
    1. - five -
      2. -
    -
    3. -
- `, - ); + await assertHTML( + page, + html` + +


+
    +
  1. + four +
    2. +
  2. +
      +
    1. + five +
      2. +
    +
    3. +
+ `, + ); - const clipboard = await copyToClipboard(page); + const clipboard = await copyToClipboard(page); - await page.keyboard.press('ArrowLeft'); - await page.keyboard.press('ArrowLeft'); - await page.keyboard.press('ArrowLeft'); - await page.keyboard.press('Backspace'); + await page.keyboard.press('ArrowLeft'); + await page.keyboard.press('ArrowLeft'); + await page.keyboard.press('ArrowLeft'); + await page.keyboard.press('Backspace'); - await pasteFromClipboard(page, clipboard); + await pasteFromClipboard(page, clipboard); - await assertHTML( - page, - html` - -


-
    -
  1. - four -
    2. -
  2. -
      -
    1. - five -
      2. -
    -
    3. -
- `, - ); - }); + await assertHTML( + page, + html` + +


+
    +
  1. + four +
    2. +
  2. +
      +
    1. + five +
      2. +
    +
    3. +
+ `, + ); + }, + ); test.fixme( 'Copy and paste two paragraphs into list on an existing item', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -1587,7 +1586,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy and paste two paragraphs at the end of a list', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -1643,7 +1642,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy and paste an inline element into a leaf node', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -1703,7 +1702,7 @@ test.describe('CopyAndPaste', () => { await focusEditor(page); - const clipboard = { 'text/html': 'Hello!' }; + const clipboard = {'text/html': 'Hello!'}; await pasteFromClipboard(page, clipboard); @@ -1725,12 +1724,12 @@ test.describe('CopyAndPaste', () => { }); }); - test('HTML Copy + paste a paragraph element', async ({ page, isPlainText }) => { + test('HTML Copy + paste a paragraph element', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); - const clipboard = { 'text/html': '

Hello!

' }; + const clipboard = {'text/html': '

Hello!

'}; await pasteFromClipboard(page, clipboard); @@ -1754,7 +1753,7 @@ test.describe('CopyAndPaste', () => { }); }); - test('HTML Copy + paste an anchor element', async ({ page, isPlainText }) => { + test('HTML Copy + paste an anchor element', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -1821,12 +1820,12 @@ test.describe('CopyAndPaste', () => { ); }); - test('HTML Copy + paste a list element', async ({ page, isPlainText }) => { + test('HTML Copy + paste a list element', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); - const clipboard = { 'text/html': '

' }; + const clipboard = {'text/html': ''}; await pasteFromClipboard(page, clipboard); @@ -1880,7 +1879,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste (Nested List - directly nested ul)', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -1986,7 +1985,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste (Nested List - li with non-list content plus ul child)', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -2086,7 +2085,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste (Table - Google Docs)', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText); test.fixme( @@ -2165,7 +2164,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste (Table - Quip)', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -2239,7 +2238,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste (Table - Google Sheets)', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -2313,7 +2312,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Merge Grids on Copy + paste', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText); await focusEditor(page); @@ -2325,8 +2324,8 @@ test.describe('CopyAndPaste', () => { await selectCellsFromTableCords( page, - { x: 0, y: 0 }, - { x: 3, y: 3 }, + {x: 0, y: 0}, + {x: 3, y: 3}, true, false, ); @@ -2552,8 +2551,8 @@ test.describe('CopyAndPaste', () => { // Explicitly checking inner text, since regular assertHTML will prettify it and strip all // extra newlines, which makes this test less acurate - await expect(paragraphs.nth(0)).toHaveText('Hello', { useInnerText: true }); - await expect(paragraphs.nth(1)).toHaveText('World', { useInnerText: true }); + await expect(paragraphs.nth(0)).toHaveText('Hello', {useInnerText: true}); + await expect(paragraphs.nth(1)).toHaveText('World', {useInnerText: true}); await expect(paragraphs.nth(2)).toHaveText('Hello World !', { useInnerText: true, }); @@ -2564,7 +2563,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste in front of or after a link', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); await pasteFromClipboard(page, { @@ -2600,7 +2599,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste link by selecting its (partial) content', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); await pasteFromClipboard(page, { @@ -2642,7 +2641,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Copy + paste multi-line plain text into rich text produces separate paragraphs', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); await page.keyboard.type('# Hello '); @@ -2784,9 +2783,8 @@ test.describe('CopyAndPaste', () => { await focusEditor(page); // These can sometimes be put onto the clipboard wrapped in a paragraph element - clipboard[ - 'text/html' - ] = `

My document

`; + clipboard['text/html'] = + `

My document

`; await pasteFromClipboard(page, clipboard); @@ -2802,7 +2800,7 @@ test.describe('CopyAndPaste', () => { ); }); - test('HTML Copy + paste a checklist', async ({ page, isPlainText }) => { + test('HTML Copy + paste a checklist', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -2843,9 +2841,8 @@ test.describe('CopyAndPaste', () => { await focusEditor(page); // Ensure we preserve checked status. - clipboard[ - 'text/html' - ] = ``; + clipboard['text/html'] = + ``; await pasteFromClipboard(page, clipboard); @@ -2878,7 +2875,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste a code block with BR', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -2967,7 +2964,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste empty link #3193', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -3015,7 +3012,7 @@ test.describe('CopyAndPaste', () => { }, ); - test.fixme('HTML Paste a link into text', async ({ page, isPlainText }) => { + test.fixme('HTML Paste a link into text', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -3052,7 +3049,7 @@ test.describe('CopyAndPaste', () => { ); }); - test.fixme('HTML Copy + paste an image', async ({ page, isPlainText }) => { + test.fixme('HTML Copy + paste an image', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -3094,7 +3091,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste + undo multiple image', - async ({ page, isPlainText }) => { + async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); @@ -3152,12 +3149,12 @@ test.describe('CopyAndPaste', () => { test.fixme( 'HTML Copy + paste a paragraph element between horizontal rules', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText); await focusEditor(page); - let clipboard = { 'text/html': '
' }; + let clipboard = {'text/html': '
'}; await pasteFromClipboard(page, clipboard); // Collab doesn't process the cursor correctly @@ -3186,7 +3183,7 @@ test.describe('CopyAndPaste', () => { // sets focus between HRs await page.keyboard.press('ArrowRight'); - clipboard = { 'text/html': '

Text between HRs

' }; + clipboard = {'text/html': '

Text between HRs

'}; await pasteFromClipboard(page, clipboard); await assertHTML( @@ -3213,7 +3210,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Paste top level element in the middle of paragraph', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText || isCollab); await focusEditor(page); await page.keyboard.type('Hello world'); @@ -3243,7 +3240,7 @@ test.describe('CopyAndPaste', () => { test.fixme( 'Paste top level element in the middle of list', - async ({ page, isPlainText, isCollab }) => { + async ({page, isPlainText, isCollab}) => { test.skip(isPlainText || isCollab); await focusEditor(page); // Add three list items diff --git a/demos/playground/src/__tests__/e2e/Hashtags.spec.mjs b/demos/playground/src/__tests__/e2e/Hashtags.spec.mjs index 9ec9a4dc..d85e9066 100644 --- a/demos/playground/src/__tests__/e2e/Hashtags.spec.mjs +++ b/demos/playground/src/__tests__/e2e/Hashtags.spec.mjs @@ -24,8 +24,8 @@ import { } from '../utils/index.mjs'; test.describe('Hashtags', () => { - test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page })); - test(`Can handle a single hashtag`, async ({ page }) => { + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); + test(`Can handle a single hashtag`, async ({page}) => { await focusEditor(page); await page.keyboard.type('#yolo'); @@ -91,7 +91,7 @@ test.describe('Hashtags', () => { }); }); - test(`Can handle adjacent hashtags`, async ({ page, browserName }) => { + test(`Can handle adjacent hashtags`, async ({page, browserName}) => { await focusEditor(page); await page.keyboard.type('#hello world'); @@ -280,7 +280,7 @@ test.describe('Hashtags', () => { }); }); - test('Hashtag inherits format', async ({ page, isPlainText }) => { + test('Hashtag inherits format', async ({page, isPlainText}) => { test.skip(isPlainText); await focusEditor(page); await page.keyboard.type('Hello '); diff --git a/demos/playground/src/__tests__/e2e/Headings.spec.mjs b/demos/playground/src/__tests__/e2e/Headings.spec.mjs index 58a5eeb2..00aa0cbf 100644 --- a/demos/playground/src/__tests__/e2e/Headings.spec.mjs +++ b/demos/playground/src/__tests__/e2e/Headings.spec.mjs @@ -6,7 +6,7 @@ * */ -import { moveRight, moveToEditorBeginning } from '../keyboardShortcuts/index.mjs'; +import {moveRight, moveToEditorBeginning} from '../keyboardShortcuts/index.mjs'; import { assertHTML, click, @@ -14,14 +14,14 @@ import { html, initialize, test, - IS_WINDOWS + IS_WINDOWS, } from '../utils/index.mjs'; test.describe('Headings', () => { - test.beforeEach(({ isPlainText, isCollab, browserName, page }) => { + test.beforeEach(({isPlainText, isCollab, browserName, page}) => { test.fixme(IS_WINDOWS && browserName === 'firefox' && isCollab); test.skip(isPlainText); - initialize({ isCollab, page }); + initialize({isCollab, page}); }); test('Stays as a heading when you backspace at the start of a heading with no previous sibling nodes present', async ({ @@ -113,7 +113,7 @@ test.describe('Headings', () => { test('Changes to a paragraph when you press enter at the end of a heading', async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); diff --git a/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs b/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs index c7b66bf2..a9ea3492 100644 --- a/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs +++ b/demos/playground/src/__tests__/e2e/HorizontalRule.spec.mjs @@ -27,7 +27,7 @@ import { } from '../utils/index.mjs'; test.describe('HorizontalRule', () => { - test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page })); + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); test('Can create a horizontal rule and move selection around it', async ({ page, isCollab, @@ -149,7 +149,6 @@ test.describe('HorizontalRule', () => { focusOffset: 0, focusPath: [], }); - }); test('Will add a horizontal rule at the end of a current TextNode and move selection to the new ParagraphNode.', async ({ @@ -270,7 +269,12 @@ test.describe('HorizontalRule', () => { }); }); - test('Can copy and paste a horizontal rule', async ({ page, isPlainText, browserName, isCollab }) => { + test('Can copy and paste a horizontal rule', async ({ + page, + isPlainText, + browserName, + isCollab, + }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); } diff --git a/demos/playground/src/__tests__/e2e/Keywords.spec.mjs b/demos/playground/src/__tests__/e2e/Keywords.spec.mjs index daeec862..01b5a024 100644 --- a/demos/playground/src/__tests__/e2e/Keywords.spec.mjs +++ b/demos/playground/src/__tests__/e2e/Keywords.spec.mjs @@ -22,7 +22,7 @@ import { } from '../utils/index.mjs'; test.describe('Keywords', () => { - test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page })); + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); test(`Can create a decorator and move selection around it`, async ({ page, browserName, @@ -199,7 +199,7 @@ test.describe('Keywords', () => { }); }); - test('Can type congrats[Team]!', async ({ page }) => { + test('Can type congrats[Team]!', async ({page}) => { await focusEditor(page); await page.keyboard.type('congrats[Team]!'); @@ -368,245 +368,245 @@ test.describe('Keywords', () => { } }); - test.fixme('Can type "Everyone congrats!" where "Everyone " and "!" are bold', async ({ - page, - isPlainText, - }) => { - test.skip(isPlainText); - await focusEditor(page); - - await toggleBold(page); - await page.keyboard.type('Everyone '); - - await assertHTML( - page, - html` -

- - Everyone - -

- `, - ); - await assertSelection(page, { - anchorOffset: 9, - anchorPath: [0, 0, 0], - focusOffset: 9, - focusPath: [0, 0, 0], - }); - - await toggleBold(page); - - await page.keyboard.type('congrats'); - - await assertHTML( - page, - html` -

- - Everyone - - - congrats - -

- `, - ); - await assertSelection(page, { - anchorOffset: 8, - anchorPath: [0, 1, 0], - focusOffset: 8, - focusPath: [0, 1, 0], - }); - - await page.keyboard.type('!'); - - await assertHTML( - page, - html` -

- - Everyone - - - congrats - - ! -

- `, - ); - await assertSelection(page, { - anchorOffset: 1, - anchorPath: [0, 2, 0], - focusOffset: 1, - focusPath: [0, 2, 0], - }); - - await page.keyboard.press('Backspace'); - - await assertHTML( - page, - html` -

- - Everyone - - - congrats - -

- `, - ); - await assertSelection(page, { - anchorOffset: 8, - anchorPath: [0, 1, 0], - focusOffset: 8, - focusPath: [0, 1, 0], - }); - - await toggleBold(page); - - await page.keyboard.type('!'); - - await assertHTML( - page, - html` -

- - Everyone - - - congrats - - - ! - -

- `, - ); - await assertSelection(page, { - anchorOffset: 1, - anchorPath: [0, 2, 0], - focusOffset: 1, - focusPath: [0, 2, 0], - }); + test.fixme( + 'Can type "Everyone congrats!" where "Everyone " and "!" are bold', + async ({page, isPlainText}) => { + test.skip(isPlainText); + await focusEditor(page); + + await toggleBold(page); + await page.keyboard.type('Everyone '); + + await assertHTML( + page, + html` +

+ + Everyone + +

+ `, + ); + await assertSelection(page, { + anchorOffset: 9, + anchorPath: [0, 0, 0], + focusOffset: 9, + focusPath: [0, 0, 0], + }); - await page.keyboard.press('Backspace'); + await toggleBold(page); + + await page.keyboard.type('congrats'); + + await assertHTML( + page, + html` +

+ + Everyone + + + congrats + +

+ `, + ); + await assertSelection(page, { + anchorOffset: 8, + anchorPath: [0, 1, 0], + focusOffset: 8, + focusPath: [0, 1, 0], + }); - await assertHTML( - page, - html` -

- - Everyone - - - congrats - -

- `, - ); - await assertSelection(page, { - anchorOffset: 8, - anchorPath: [0, 1, 0], - focusOffset: 8, - focusPath: [0, 1, 0], - }); + await page.keyboard.type('!'); + + await assertHTML( + page, + html` +

+ + Everyone + + + congrats + + ! +

+ `, + ); + await assertSelection(page, { + anchorOffset: 1, + anchorPath: [0, 2, 0], + focusOffset: 1, + focusPath: [0, 2, 0], + }); - await moveToPrevWord(page); + await page.keyboard.press('Backspace'); + + await assertHTML( + page, + html` +

+ + Everyone + + + congrats + +

+ `, + ); + await assertSelection(page, { + anchorOffset: 8, + anchorPath: [0, 1, 0], + focusOffset: 8, + focusPath: [0, 1, 0], + }); - await page.keyboard.press('Backspace'); + await toggleBold(page); + + await page.keyboard.type('!'); + + await assertHTML( + page, + html` +

+ + Everyone + + + congrats + + + ! + +

+ `, + ); + await assertSelection(page, { + anchorOffset: 1, + anchorPath: [0, 2, 0], + focusOffset: 1, + focusPath: [0, 2, 0], + }); - await assertHTML( - page, - html` -

- - Everyone - - congrats -

- `, - ); - await assertSelection(page, { - anchorOffset: 8, - anchorPath: [0, 0, 0], - focusOffset: 8, - focusPath: [0, 0, 0], - }); + await page.keyboard.press('Backspace'); + + await assertHTML( + page, + html` +

+ + Everyone + + + congrats + +

+ `, + ); + await assertSelection(page, { + anchorOffset: 8, + anchorPath: [0, 1, 0], + focusOffset: 8, + focusPath: [0, 1, 0], + }); - await page.keyboard.press('Space'); + await moveToPrevWord(page); + + await page.keyboard.press('Backspace'); + + await assertHTML( + page, + html` +

+ + Everyone + + congrats +

+ `, + ); + await assertSelection(page, { + anchorOffset: 8, + anchorPath: [0, 0, 0], + focusOffset: 8, + focusPath: [0, 0, 0], + }); - await assertHTML( - page, - html` -

- - Everyone - - - congrats - -

- `, - ); - await assertSelection(page, { - anchorOffset: 9, - anchorPath: [0, 0, 0], - focusOffset: 9, - focusPath: [0, 0, 0], - }); - }); + await page.keyboard.press('Space'); + + await assertHTML( + page, + html` +

+ + Everyone + + + congrats + +

+ `, + ); + await assertSelection(page, { + anchorOffset: 9, + anchorPath: [0, 0, 0], + focusOffset: 9, + focusPath: [0, 0, 0], + }); + }, + ); }); diff --git a/demos/playground/src/__tests__/e2e/List.spec.mjs b/demos/playground/src/__tests__/e2e/List.spec.mjs index 97707ef5..49f58dfd 100644 --- a/demos/playground/src/__tests__/e2e/List.spec.mjs +++ b/demos/playground/src/__tests__/e2e/List.spec.mjs @@ -6,7 +6,7 @@ * */ -import { expect } from '@playwright/test'; +import {expect} from '@playwright/test'; import { moveLeft, @@ -34,7 +34,7 @@ import { selectFromFormatDropdown, test, waitForSelector, - IS_WINDOWS + IS_WINDOWS, } from '../utils/index.mjs'; async function toggleBulletList(page) { @@ -64,13 +64,13 @@ async function clickOutdentButton(page, times = 1) { } } -test.beforeEach(({ isPlainText }) => { +test.beforeEach(({isPlainText}) => { test.skip(isPlainText); }); test.describe('Nested List', () => { - test.beforeEach(({ isCollab, page }) => initialize({ isCollab, page })); - test(`Can toggle an empty list on/off`, async ({ page }) => { + test.beforeEach(({isCollab, page}) => initialize({isCollab, page})); + test(`Can toggle an empty list on/off`, async ({page}) => { await focusEditor(page); await assertHTML( @@ -97,7 +97,7 @@ test.describe('Nested List', () => { ); }); - test.fixme(`Can create a list and indent/outdent it`, async ({ page }) => { + test.fixme(`Can create a list and indent/outdent it`, async ({page}) => { await focusEditor(page); await toggleBulletList(page); await assertHTML( @@ -208,7 +208,7 @@ test.describe('Nested List', () => { test('Should outdent if indented when the backspace key is pressed', async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -244,7 +244,7 @@ test.describe('Nested List', () => { test(`Can indent/outdent mutliple list nodes in a list with multiple levels of indentation`, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -374,7 +374,7 @@ test.describe('Nested List', () => { `, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); }); @@ -539,87 +539,88 @@ test.describe('Nested List', () => { ); }); - test.fixme(`Can create a list containing inline blocks and then toggle it back to original state.`, async ({ - page, - }) => { - await focusEditor(page); - - await assertHTML( - page, - html` -


- `, - ); - - await page.keyboard.type('One two three'); - - await assertHTML( - page, - html` -

- One two three -

- `, - ); - - await moveLeft(page, 6); - await selectCharacters(page, 'left', 3); - - // link - await click(page, '.link'); - - await assertHTML( - page, - html` -

- One - { + await focusEditor(page); + + await assertHTML( + page, + html` +


+ `, + ); + + await page.keyboard.type('One two three'); + + await assertHTML( + page, + html` +

- two - - three -

- `, - ); - - // move to end of paragraph to close the floating link bar - await moveToParagraphEnd(page); - - await toggleBulletList(page); - - await assertHTML( - page, - '', - ); - - await toggleBulletList(page); - - await assertHTML( - page, - html` -

- One - One two three +

+ `, + ); + + await moveLeft(page, 6); + await selectCharacters(page, 'left', 3); + + // link + await click(page, '.link'); + + await assertHTML( + page, + html` +

- two - - three -

- `, - ); - }); + One + + two + + three +

+ `, + ); + + // move to end of paragraph to close the floating link bar + await moveToParagraphEnd(page); + + await toggleBulletList(page); + + await assertHTML( + page, + '', + ); + + await toggleBulletList(page); + + await assertHTML( + page, + html` +

+ One + + two + + three +

+ `, + ); + }, + ); test(`Can create mutliple bullet lists and then toggle off the list.`, async ({ page, @@ -709,7 +710,7 @@ test.describe('Nested List', () => { test(`Can create an unordered list and convert it to an ordered list `, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -743,7 +744,7 @@ test.describe('Nested List', () => { test(`Can create a single item unordered list with text and convert it to an ordered list `, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -772,7 +773,7 @@ test.describe('Nested List', () => { test(`Can create a multi-line unordered list and convert it to an ordered list `, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -814,7 +815,7 @@ test.describe('Nested List', () => { test(`Can create a multi-line unordered list and convert it to an ordered list when no nodes are in the selection`, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -855,7 +856,7 @@ test.describe('Nested List', () => { test(`Can create an indented multi-line unordered list and convert it to an ordered list `, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -903,7 +904,7 @@ test.describe('Nested List', () => { test(`Can create an indented multi-line unordered list and convert individual lists in the nested structure to a numbered list. `, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -1055,7 +1056,7 @@ test.describe('Nested List', () => { test(`Should NOT merge selected nodes into existing list siblings of a different type when formatting to a list`, async ({ page, isCollab, - browserName + browserName, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -1106,38 +1107,42 @@ test.describe('Nested List', () => { ); }); - test.fixme(`Should create list with start number markdown`, async ({ - page, - isCollab, - }) => { - await focusEditor(page); - // Trigger markdown using 321 digits followed by "." and a trigger of " ". - await page.keyboard.type('321. '); - - // forward case is the normal case. - // undo case is when the user presses undo. + test.fixme( + `Should create list with start number markdown`, + async ({page, isCollab}) => { + await focusEditor(page); + // Trigger markdown using 321 digits followed by "." and a trigger of " ". + await page.keyboard.type('321. '); - const forwardHTML = - '

'; + // forward case is the normal case. + // undo case is when the user presses undo. - const undoHTML = html` -

- 321. -

- `; + const forwardHTML = + '

'; - await assertHTML(page, forwardHTML); - if (isCollab) { - // Collab uses its own undo/redo - return; - } - await undo(page); - await assertHTML(page, undoHTML); - await redo(page); - await assertHTML(page, forwardHTML); - }); - - test(`Should not process paragraph markdown inside list.`, async ({ page, browserName, isCollab }) => { + const undoHTML = html` +

+ 321. +

+ `; + + await assertHTML(page, forwardHTML); + if (isCollab) { + // Collab uses its own undo/redo + return; + } + await undo(page); + await assertHTML(page, undoHTML); + await redo(page); + await assertHTML(page, forwardHTML); + }, + ); + + test(`Should not process paragraph markdown inside list.`, async ({ + page, + browserName, + isCollab, + }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); } @@ -1154,7 +1159,7 @@ test.describe('Nested List', () => { test(`Un-indents list empty list items when the user presses enter`, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -1185,7 +1190,7 @@ test.describe('Nested List', () => { test(`Converts a List with one ListItem to a Paragraph when Normal is selected in the format menu`, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -1203,7 +1208,7 @@ test.describe('Nested List', () => { `, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); await selectFromFormatDropdown(page, '.paragraph'); await assertHTML( @@ -1212,14 +1217,14 @@ test.describe('Nested List', () => {

a

`, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); }); test(`Converts the last ListItem in a List with multiple ListItem to a Paragraph when Normal is selected in the format menu`, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -1242,7 +1247,7 @@ test.describe('Nested List', () => { `, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); await selectFromFormatDropdown(page, '.paragraph'); await assertHTML( @@ -1256,14 +1261,14 @@ test.describe('Nested List', () => {

b

`, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); }); test(`Converts the middle ListItem in a List with multiple ListItem to a Paragraph when Normal is selected in the format menu`, async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -1292,7 +1297,7 @@ test.describe('Nested List', () => { `, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); await selectFromFormatDropdown(page, '.paragraph'); await assertHTML( @@ -1311,14 +1316,14 @@ test.describe('Nested List', () => { `, undefined, - { ignoreClasses: true }, + {ignoreClasses: true}, ); }); test('Can create check list, toggle it to bullet-list and back', async ({ page, browserName, - isCollab + isCollab, }) => { if (IS_WINDOWS && browserName === 'firefox' && isCollab) { test.fixme(); @@ -1327,7 +1332,7 @@ test.describe('Nested List', () => { await toggleCheckList(page); await page.keyboard.type('a'); await click(page, '.PlaygroundEditorTheme__listItemUnchecked', { - position: { x: 10, y: 10 }, + position: {x: 10, y: 10}, }); await page.keyboard.press('Enter'); await page.keyboard.type('b'); @@ -1360,7 +1365,8 @@ test.describe('Nested List', () => {
  • -