|
| 1 | +import type { Page } from '@playwright/test'; |
| 2 | +import process from 'node:process'; |
| 3 | +import { expect, test } from '../fixtures/muya'; |
| 4 | +import { getMarkdown } from '../helpers/api'; |
| 5 | +import { loadMarkdown } from '../helpers/keyboard'; |
| 6 | + |
| 7 | +// #5415: muya cut a cross-block selection only from its `keydown` handler, and |
| 8 | +// that handler skipped every chord carrying Cmd or Ctrl. Several of those |
| 9 | +// chords are editing commands, and text committed without a key press at all |
| 10 | +// (emoji picker, dictation) never reached the handler either. The browser then |
| 11 | +// deleted across the block elements itself: the second block vanished from the |
| 12 | +// screen but stayed in the block tree with a detached DOM node and in the |
| 13 | +// saved markdown, and the next structural edit near it threw "Failed to |
| 14 | +// execute 'insertBefore' on 'Node'". |
| 15 | + |
| 16 | +const DOC = '- one\n- two\n\ntext\n'; |
| 17 | + |
| 18 | +// Playwright forwards the AppKit editing commands a real keyboard produces |
| 19 | +// (`deleteToBeginningOfLine:`, `deleteToEndOfLine:`, `yank:`, …) only when the |
| 20 | +// host is macOS, so the chords that depend on them are gated here. Ctrl+ |
| 21 | +// Backspace needs no such command — it is Chromium's own delete-word binding |
| 22 | +// on every platform — and is what covers this fix on CI. |
| 23 | +const isMac = process.platform === 'darwin'; |
| 24 | + |
| 25 | +function collectPageErrors(page: Page): string[] { |
| 26 | + const errors: string[] = []; |
| 27 | + page.on('pageerror', err => errors.push(String(err?.message ?? err))); |
| 28 | + return errors; |
| 29 | +} |
| 30 | + |
| 31 | +async function nextFrames(page: Page): Promise<void> { |
| 32 | + await page.evaluate(() => new Promise<void>((resolve) => { |
| 33 | + requestAnimationFrame(() => requestAnimationFrame(() => resolve())); |
| 34 | + })); |
| 35 | +} |
| 36 | + |
| 37 | +async function detachedBlocks(page: Page): Promise<string[]> { |
| 38 | + return page.evaluate(() => { |
| 39 | + const detached: string[] = []; |
| 40 | + window.muya!.editor.scrollPage!.depthFirstTraverse((block) => { |
| 41 | + if (!block.domNode?.isConnected) |
| 42 | + detached.push(block.blockName); |
| 43 | + }); |
| 44 | + return detached; |
| 45 | + }); |
| 46 | +} |
| 47 | + |
| 48 | +async function expectTreeMatchesJson(page: Page): Promise<void> { |
| 49 | + await nextFrames(page); |
| 50 | + const { tree, json } = await page.evaluate(() => { |
| 51 | + const muya = window.muya!; |
| 52 | + const blocks: unknown[] = []; |
| 53 | + muya.editor.scrollPage!.forEach((block) => { |
| 54 | + if (block.isParent()) |
| 55 | + blocks.push(block.getState()); |
| 56 | + }); |
| 57 | + return { tree: blocks, json: muya.getState() }; |
| 58 | + }); |
| 59 | + expect(json).toEqual(tree); |
| 60 | +} |
| 61 | + |
| 62 | +// Viewport coordinates of the caret position `offset` characters into the |
| 63 | +// first text node of the `nth` match of `selector`. |
| 64 | +async function caretAt(page: Page, selector: string, nth: number, offset: number) { |
| 65 | + return page.evaluate(({ selector, nth, offset }) => { |
| 66 | + const el = document.querySelectorAll(selector)[nth] as HTMLElement; |
| 67 | + const text = document.createTreeWalker(el, NodeFilter.SHOW_TEXT).nextNode()!; |
| 68 | + const range = document.createRange(); |
| 69 | + range.setStart(text, offset); |
| 70 | + range.setEnd(text, offset); |
| 71 | + const rect = range.getBoundingClientRect(); |
| 72 | + return { x: rect.left, y: rect.top + rect.height / 2 }; |
| 73 | + }, { selector, nth, offset }); |
| 74 | +} |
| 75 | + |
| 76 | +const BULLET_TEXT = '.mu-list-item .mu-paragraph-content'; |
| 77 | +const PARAGRAPH_TEXT = '.mu-paragraph:not(.mu-list-item .mu-paragraph) .mu-paragraph-content'; |
| 78 | + |
| 79 | +// Click between `tw` and `o` in the second bullet, then shift-click between |
| 80 | +// `te` and `xt` in the paragraph below the list. |
| 81 | +async function selectFromBulletIntoParagraph(page: Page): Promise<void> { |
| 82 | + const start = await caretAt(page, BULLET_TEXT, 1, 2); |
| 83 | + const end = await caretAt(page, PARAGRAPH_TEXT, 0, 2); |
| 84 | + |
| 85 | + await page.mouse.click(start.x, start.y); |
| 86 | + await page.keyboard.down('Shift'); |
| 87 | + await page.mouse.click(end.x, end.y); |
| 88 | + await page.keyboard.up('Shift'); |
| 89 | + await nextFrames(page); |
| 90 | +} |
| 91 | + |
| 92 | +// Enter, Enter at the end of the bullet list — the edit that used to throw |
| 93 | +// once a detached paragraph was still sitting in the tree. |
| 94 | +async function enterTwiceAtEndOfList(page: Page): Promise<void> { |
| 95 | + await page.evaluate(() => { |
| 96 | + let block = window.muya!.editor.scrollPage!.firstContentInDescendant(); |
| 97 | + let lastInList = block; |
| 98 | + while (block) { |
| 99 | + if (block.closestBlock('list-item')) |
| 100 | + lastInList = block; |
| 101 | + block = block.nextContentInContext() ?? null; |
| 102 | + } |
| 103 | + const end = lastInList!.text.length; |
| 104 | + lastInList!.setCursor(end, end, true); |
| 105 | + }); |
| 106 | + await page.keyboard.press('Enter'); |
| 107 | + await nextFrames(page); |
| 108 | + await page.keyboard.press('Enter'); |
| 109 | + await nextFrames(page); |
| 110 | +} |
| 111 | + |
| 112 | +async function expectClean(page: Page, errors: string[], markdown: string): Promise<void> { |
| 113 | + expect.soft(await detachedBlocks(page)).toEqual([]); |
| 114 | + await expect.soft.poll(() => getMarkdown(page)).toBe(markdown); |
| 115 | + |
| 116 | + await enterTwiceAtEndOfList(page); |
| 117 | + |
| 118 | + expect(errors).toEqual([]); |
| 119 | + expect(await detachedBlocks(page)).toEqual([]); |
| 120 | + await expectTreeMatchesJson(page); |
| 121 | +} |
| 122 | + |
| 123 | +// Chromium's own delete-word binding — no AppKit command behind it, so this is |
| 124 | +// the platform-independent form of the bug. Plain Backspace and Delete are not |
| 125 | +// here: carrying no modifier, they were always taken over by the keydown |
| 126 | +// handler. |
| 127 | +const DELETE_CHORDS = [ |
| 128 | + 'Control+Backspace', |
| 129 | + // macOS only: ⌘⌫ deleteToBeginningOfLine, ⌃K deleteToEndOfLine, |
| 130 | + // ⌃D deleteForward, ⌃H deleteBackward. |
| 131 | + ...(isMac ? ['Meta+Backspace', 'Control+k', 'Control+d', 'Control+h'] : []), |
| 132 | +]; |
| 133 | + |
| 134 | +for (const chord of DELETE_CHORDS) { |
| 135 | + test(`${chord} over a selection spanning two blocks deletes it from the document (#5415)`, async ({ page }) => { |
| 136 | + const errors = collectPageErrors(page); |
| 137 | + await loadMarkdown(page, DOC); |
| 138 | + await nextFrames(page); |
| 139 | + await selectFromBulletIntoParagraph(page); |
| 140 | + |
| 141 | + await page.keyboard.press(chord); |
| 142 | + await nextFrames(page); |
| 143 | + |
| 144 | + await expectClean(page, errors, '- one\n- twxt\n'); |
| 145 | + }); |
| 146 | +} |
| 147 | + |
| 148 | +// Ctrl+Y is the one insertion route reachable from a keyboard alone, so it |
| 149 | +// stands in for the rest of the family (`insertText` from the emoji picker or |
| 150 | +// dictation, `insertReplacementText` from autocorrect), which arrive the same |
| 151 | +// way but cannot be produced from a test. |
| 152 | +test('Ctrl+Y over a selection spanning two blocks replaces it with the yanked text (#5415)', async ({ page }) => { |
| 153 | + test.skip(!isMac, 'yank: is a macOS-only editing command'); |
| 154 | + |
| 155 | + const errors = collectPageErrors(page); |
| 156 | + await loadMarkdown(page, DOC); |
| 157 | + await nextFrames(page); |
| 158 | + |
| 159 | + // Fill the kill ring: Ctrl+K from the start of the paragraph takes `text`. |
| 160 | + const paragraphStart = await caretAt(page, PARAGRAPH_TEXT, 0, 0); |
| 161 | + await page.mouse.click(paragraphStart.x, paragraphStart.y); |
| 162 | + await page.keyboard.press('Control+k'); |
| 163 | + await nextFrames(page); |
| 164 | + |
| 165 | + await loadMarkdown(page, DOC); |
| 166 | + await nextFrames(page); |
| 167 | + await selectFromBulletIntoParagraph(page); |
| 168 | + |
| 169 | + await page.keyboard.press('Control+y'); |
| 170 | + await nextFrames(page); |
| 171 | + |
| 172 | + await expectClean(page, errors, '- one\n- twtextxt\n'); |
| 173 | +}); |
| 174 | + |
| 175 | +test('Ctrl+C over a selection spanning two blocks still does not delete it (#3491)', async ({ page }) => { |
| 176 | + await loadMarkdown(page, DOC); |
| 177 | + await nextFrames(page); |
| 178 | + await selectFromBulletIntoParagraph(page); |
| 179 | + |
| 180 | + await page.keyboard.press('Control+c'); |
| 181 | + await nextFrames(page); |
| 182 | + |
| 183 | + await expect.poll(() => getMarkdown(page)).toBe(DOC); |
| 184 | +}); |
| 185 | + |
| 186 | +test('typing a printable character over a selection spanning two blocks replaces it', async ({ page }) => { |
| 187 | + await loadMarkdown(page, DOC); |
| 188 | + await nextFrames(page); |
| 189 | + await selectFromBulletIntoParagraph(page); |
| 190 | + |
| 191 | + await page.keyboard.press('z'); |
| 192 | + await nextFrames(page); |
| 193 | + |
| 194 | + expect(await detachedBlocks(page)).toEqual([]); |
| 195 | + await expect.poll(() => getMarkdown(page)).toBe('- one\n- twzxt\n'); |
| 196 | +}); |
0 commit comments