Docs

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10,"_11":12},"actionData","errors","root",{"_229":-5,"_232":233,"_234":235},"routes/shell",{"_42":43,"_228":-5,"_229":-5,"_230":231},"routes/repo",{"_33":-7,"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":31,"_45":31,"_46":31,"_47":31,"_48":31,"_49":31,"_50":51,"_52":51,"_53":31,"_54":-7,"_55":-7,"_56":57,"_58":59,"_60":61,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70},"routes/repo.blob",{"_13":14,"_15":16,"_17":18,"_19":20,"_21":14,"_22":23,"_24":-5,"_25":26,"_27":28,"_28":29,"_30":31,"_32":14},"ref","1b9ccb5769ed3fc44db88da969401c6f8caee29f","path","e2e/toolbar.e2e.ts","oid","0564ed75ed9bdda270aa6d85de15b2cadffda944","size",24385,"commit","mounts",[],"source","plain",{"_13":14,"_15":16},"kind","text","/**\n * The two things that appear because of where the caret is.\n *\n * Both are placed by measurement against a live rectangle, so neither can be\n * covered by `bun test` — `bubble.test.ts` and `slash.test.ts` cover the\n * decisions those measurements feed, and stop at the point where a browser is\n * required. Everything here is on the other side of that line.\n */\n\nimport { authenticate, content, expect, openIsolatedRoom, roomPath, test, written } from \"./room\";\nimport { expectInsideViewport } from \"./responsive\";\nimport { installVisualViewport } from \"./visual-viewport\";\n\nimport type { Browser, Locator, Page } from \"@playwright/test\";\n\nlet MENU = { name: \"Insert block\" };\nlet BUBBLE = { name: \"Text formatting\" };\nlet LONG_EDITOR = Array.from({ length: 40 }, (_, index) => `Paragraph ${index + 1}.`).join(\"\\n\\n\");\n\nasync function emulatedVisualViewportPage(\n\tbrowser: Browser,\n\tbaseURL: string,\n\troom: string,\n): Promise<{ close: () => Promise; page: Page }> {\n\treturn openIsolatedRoom(browser, baseURL, room, \"ana\", {\n\t\thasTouch: true,\n\t\tisMobile: true,\n\t\tviewport: { width: 390, height: 844 },\n\t}, context =>\n\t\tinstallVisualViewport(context, {\n\t\t\theight: 640,\n\t\t\toffsetLeft: 0,\n\t\t\toffsetTop: 72,\n\t\t\tpageLeft: 0,\n\t\t\tpageTop: 0,\n\t\t\tscale: 1,\n\t\t\twidth: 390,\n\t\t}));\n}\n\nasync function expectSurfaceToFollowEditorScroll(\n\tpage: Page,\n\tsurface: Locator,\n): Promise {\n\t// The surface's passive effect owns the scroll listeners; wait one frame so\n\t// this exercise is about their geometry rather than React effect scheduling.\n\tawait page.waitForTimeout(32);\n\tlet scroller = page.locator(\"[data-plan-scroll]\");\n\tlet beforeScroll = await scroller.evaluate(element => element.scrollTop);\n\tlet beforeRange = await page.evaluate(() =>\n\t\tgetSelection()!.getRangeAt(0).getBoundingClientRect().top\n\t);\n\tlet beforeSurface = await surface.boundingBox();\n\tlet beforeSelection = await page.evaluate(() => {\n\t\tlet box = getSelection()!.getRangeAt(0).getBoundingClientRect();\n\t\treturn { bottom: box.bottom, top: box.top };\n\t});\n\texpect(beforeSurface).not.toBeNull();\n\tlet beforeDistance = Math.max(\n\t\tbeforeSurface!.y - beforeSelection.bottom,\n\t\tbeforeSelection.top - (beforeSurface!.y + beforeSurface!.height),\n\t);\n\texpect(beforeDistance).toBeGreaterThanOrEqual(0);\n\tlet beforeAboveSelection = beforeSurface!.y + beforeSurface!.height <= beforeSelection.top;\n\tawait scroller.evaluate(element => {\n\t\telement.scrollTop += 72;\n\t});\n\tawait expect.poll(() => scroller.evaluate(element => element.scrollTop))\n\t\t.toBeGreaterThan(beforeScroll + 50);\n\tawait expect.poll(() =>\n\t\tpage.evaluate(() => getSelection()!.getRangeAt(0).getBoundingClientRect().top)\n\t).toBeLessThan(beforeRange - 50);\n\t// Dispatch after the range has its post-scroll layout. This keeps the test\n\t// deterministic across Chromium's compositor and main-thread scroll paths.\n\tawait scroller.dispatchEvent(\"scroll\");\n\tawait expect.poll(async () => {\n\t\tlet box = await surface.boundingBox();\n\t\tif (!box) return false;\n\t\tlet range = await page.evaluate(() => {\n\t\t\tlet box = getSelection()!.getRangeAt(0).getBoundingClientRect();\n\t\t\treturn { bottom: box.bottom, top: box.top };\n\t\t});\n\t\tlet distance = Math.max(box.y - range.bottom, range.top - (box.y + box.height));\n\t\tlet movedWithSelection = beforeAboveSelection\n\t\t\t? box.y + box.height < beforeSurface!.y + beforeSurface!.height\n\t\t\t: box.y < beforeSurface!.y;\n\t\treturn movedWithSelection && distance >= 0 && distance <= beforeDistance;\n\t}).toBe(true);\n\tawait expectInsideViewport(surface);\n}\n\nasync function insertCallout(page: Page) {\n\tawait content(page).click();\n\tawait page.keyboard.type(\"/callout\");\n\tawait page.getByRole(\"listbox\", MENU).getByRole(\"option\", { name: \"Callout\" }).click();\n\treturn content(page).locator(\"aside[data-plan-type]\");\n}\n\ntest(\"filtering resets the option Enter will choose\", async ({ join }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"/\");\n\n\tlet menu = page.getByRole(\"listbox\", MENU);\n\tawait page.keyboard.press(\"ArrowDown\");\n\tawait page.keyboard.press(\"ArrowDown\");\n\tawait page.keyboard.press(\"ArrowDown\");\n\tawait page.keyboard.type(\"call\");\n\n\tawait expect(menu.getByRole(\"option\", { selected: true })).toHaveAccessibleName(\"Callout\");\n\tawait page.keyboard.press(\"Enter\");\n\tawait expect(page.getByRole(\"combobox\", { name: \"Change callout type: Note\" })).toBeVisible();\n});\n\ntest(\"slash menu Arrow navigation changes selection without colour transitions\", async ({ join, page }) => {\n\tawait page.emulateMedia({ reducedMotion: \"no-preference\" });\n\tawait join(\"ana\");\n\tawait content(page).click();\n\tawait page.keyboard.type(\"/\");\n\n\tlet menu = page.getByRole(\"listbox\", MENU);\n\tawait expect(menu).toBeVisible();\n\tlet selected = menu.getByRole(\"option\", { selected: true });\n\tlet initial = await selected.textContent();\n\tawait selected.evaluate(() =>\n\t\tnew Promise(resolve =>\n\t\t\trequestAnimationFrame(() => requestAnimationFrame(() => resolve()))\n\t\t)\n\t);\n\tawait page.evaluate(() => {\n\t\tlet record = { properties: [] as string[], starts: 0 };\n\t\tReflect.set(window, \"__immediateMenuTransitions\", record);\n\t\tdocument.addEventListener(\"transitionstart\", event => {\n\t\t\tif (\n\t\t\t\tevent instanceof TransitionEvent\n\t\t\t\t&& event.target instanceof Element\n\t\t\t\t&& event.target.matches(\".plan-menu-row, .plan-menu-cell\")\n\t\t\t) {\n\t\t\t\trecord.properties.push(event.propertyName);\n\t\t\t\tif ([\"background-color\", \"color\"].includes(event.propertyName)) record.starts++;\n\t\t\t}\n\t\t}, true);\n\t});\n\n\tawait page.keyboard.press(\"ArrowDown\");\n\tawait expect(selected).not.toHaveText(initial!);\n\tawait selected.evaluate(() =>\n\t\tnew Promise(resolve =>\n\t\t\trequestAnimationFrame(() => requestAnimationFrame(() => resolve()))\n\t\t)\n\t);\n\tlet transitions = await page.evaluate(() =>\n\t\tReflect.get(window, \"__immediateMenuTransitions\") as {\n\t\t\tproperties: string[];\n\t\t\tstarts: number;\n\t\t}\n\t);\n\texpect(transitions).toEqual({ properties: [], starts: 0 });\n});\n\ntest(\"a callout edits like prose and keeps its type controls out of the way\", async ({ join, room }) => {\n\tlet page = await join(\"ana\");\n\tlet callout = await insertCallout(page);\n\tawait expect(callout).toHaveAttribute(\"data-plan-type\", \"note\");\n\tlet title = callout.getByRole(\"textbox\", { name: \"Callout title\" });\n\tlet trigger = callout.getByRole(\"combobox\", { name: \"Change callout type: Note\" });\n\tawait expect(page.getByRole(\"listbox\", { name: \"Callout type\" })).toHaveCount(0);\n\tawait title.fill(\"Worth knowing\");\n\n\tawait trigger.click();\n\tlet types = page.getByRole(\"listbox\", { name: \"Callout type\" });\n\tawait expect(types).toBeVisible();\n\tawait types.getByRole(\"option\", { name: \"Warning\" }).click();\n\n\tawait expect(callout).toHaveAttribute(\"data-plan-type\", \"warning\");\n\tawait expect(title).toHaveText(\"Worth knowing\");\n\tawait written(page, room, /type=\"warning\" title=\"Worth knowing\"/);\n});\n\ntest(\"enter twice leaves a legacy callout at the end of the plan\", async ({ join, room, seedLegacyCallout }) => {\n\tawait seedLegacyCallout(\n\t\t`\\n\\nKeep this in the callout.\\n\\n`,\n\t);\n\tlet page = await join(\"ana\");\n\tlet callout = content(page).locator(\"aside[data-plan-type]\");\n\tlet body = callout.locator(\"[data-plan-body]\");\n\tawait expect(body.locator(\":scope > p\")).toHaveCount(1);\n\n\tawait expect(body.locator(\":scope > p\")).toHaveText(\"Keep this in the callout.\");\n\tawait body.locator(\":scope > p\").evaluate(element => {\n\t\tlet range = document.createRange();\n\t\trange.selectNodeContents(element);\n\t\trange.collapse(false);\n\t\tlet selection = getSelection()!;\n\t\tselection.removeAllRanges();\n\t\tselection.addRange(range);\n\t});\n\tawait page.keyboard.press(\"Enter\");\n\tawait expect(body.locator(\":scope > p\")).toHaveCount(2);\n\tawait page.keyboard.type(\"Still in it.\");\n\tawait page.keyboard.press(\"Enter\");\n\tawait expect(body.locator(\":scope > p\")).toHaveCount(3);\n\tawait expect(body.locator(\":scope > p\").last()).toBeEmpty();\n\n\tawait page.keyboard.press(\"Enter\");\n\tawait expect(body.locator(\":scope > p\")).toHaveCount(2);\n\tawait page.keyboard.type(\"Outside the callout.\");\n\n\tawait expect(body.locator(\":scope > p\")).toHaveCount(2);\n\tawait expect(callout).toContainText(\"Keep this in the callout.\");\n\tawait expect(callout).toContainText(\"Still in it.\");\n\tawait expect(callout).not.toContainText(\"Outside the callout.\");\n\tawait written(\n\t\tpage,\n\t\troom,\n\t\t/Keep this in the callout\\.[\\s\\S]*Still in it\\.[\\s\\S]*<\\/Callout>[\\s\\S]*Outside the callout\\./,\n\t);\n});\n\ntest(\"escape closes the menu and leaves what was typed\", async ({ join }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"/tab\");\n\tawait expect(page.getByRole(\"listbox\", MENU)).toBeVisible();\n\n\tawait page.keyboard.press(\"Escape\");\n\n\tawait expect(page.getByRole(\"listbox\", MENU)).toHaveCount(0);\n\tawait expect(content(page)).toContainText(\"/tab\");\n});\n\ntest(\"choosing a table inserts one, with a header\", async ({ join }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"/table\");\n\tawait page.getByRole(\"listbox\", MENU).getByRole(\"option\", { name: \"Table\" }).click();\n\n\tawait expect(content(page).locator(\"table\")).toHaveCount(1);\n\tawait expect(content(page).locator(\"th\")).toHaveCount(3);\n\tawait expect(content(page).locator(\"tr\")).toHaveCount(3);\n\n\t// The query that summoned it has to go: leaving \"/table\" above the table\n\t// is the menu writing its own invocation into the document.\n\tawait expect(content(page)).not.toContainText(\"/table\");\n});\n\ntest(\"a selection raises exactly one toolbar\", async ({ join }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"Pick a storage format.\");\n\tawait page.keyboard.press(\"Shift+Home\");\n\n\t// Two toolbars is the ported defect: one from the plugin list and one from\n\t// the surface, stacked, so the top one takes every click and the other is\n\t// only visible as a shadow slightly out of register.\n\tawait expect(page.getByRole(\"toolbar\", BUBBLE)).toHaveCount(1);\n});\n\ntest(\"a formatting glyph shows its label on hover\", async ({ join }) => {\n\tlet page = await join(\"ana\");\n\tawait content(page).click();\n\tawait page.keyboard.type(\"Pick a storage format.\");\n\tawait page.keyboard.press(\"Shift+Home\");\n\n\tlet bold = page.getByRole(\"toolbar\", BUBBLE).getByRole(\"button\", { name: \"Bold\" });\n\tawait bold.hover();\n\tlet tooltip = page.locator(\"[data-icon-tooltip]\");\n\tawait expect(tooltip).toBeVisible();\n\tawait expect(tooltip).toHaveText(\"Bold ⌘B\");\n\tawait page.mouse.move(0, 0);\n\tawait expect(tooltip).toBeHidden();\n});\n\ntest(\"the selection toolbar sits above the selection and never covers it\", async ({ join }) => {\n\tlet page = await join(\"ana\");\n\tawait content(page).click();\n\tawait page.keyboard.type(\"First line to leave room above.\");\n\tawait page.keyboard.press(\"Enter\");\n\tawait page.keyboard.type(\"Selected line.\");\n\tawait page.keyboard.press(\"Enter\");\n\tawait page.keyboard.type(\"Next line beneath.\");\n\tawait content(page).getByText(\"Selected line.\").selectText();\n\n\tlet bubble = page.getByRole(\"toolbar\", BUBBLE);\n\tawait expect(bubble).toBeVisible();\n\tlet toolbar = (await bubble.boundingBox())!;\n\tlet selected = (await content(page).getByText(\"Selected line.\").boundingBox())!;\n\texpect(toolbar.y + toolbar.height).toBeLessThanOrEqual(selected.y);\n\tawait expectInsideViewport(bubble);\n});\n\ntest(\"a mark from the toolbar reaches the file\", async ({ join, room }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"Pick a storage format.\");\n\tawait page.keyboard.press(\"Shift+Home\");\n\n\tlet bubble = page.getByRole(\"toolbar\", BUBBLE);\n\tawait expect(bubble.getByRole(\"button\", { name: \"Bold\" })).toHaveAttribute(\n\t\t\"aria-pressed\",\n\t\t\"false\",\n\t);\n\tawait bubble.getByRole(\"button\", { name: \"Bold\" }).click();\n\tawait expect(bubble.getByRole(\"button\", { name: \"Bold\" })).toHaveAttribute(\n\t\t\"aria-pressed\",\n\t\t\"true\",\n\t);\n\n\tawait written(page, room, /^\\*\\*Pick a storage format\\.\\*\\*$/m);\n});\n\ntest(\"the block type menu converts the block it names\", async ({ join, room }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"What we are building\");\n\tawait page.keyboard.press(\"Shift+Home\");\n\n\tlet bubble = page.getByRole(\"toolbar\", BUBBLE);\n\tawait bubble.getByRole(\"button\", { name: \"Block type: Text\" }).click();\n\n\t// The submenu replaces the toolbar's contents rather than opening beside\n\t// it, so there is never a second popup to decide between.\n\tawait expect(bubble.getByRole(\"button\", { name: \"Bold\" })).toHaveCount(0);\n\tawait bubble.getByRole(\"button\", { name: \"Heading 2\" }).click();\n\n\tawait expect(content(page).getByRole(\"heading\", { level: 2 })).toHaveText(\n\t\t\"What we are building\",\n\t);\n\tawait written(page, room, /^## What we are building$/m);\n});\n\ntest(\"escape lets go of a selection and keeps the caret in the editor\", async ({ join }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"Let this selection go.\");\n\tawait page.keyboard.press(\"Shift+Home\");\n\tawait expect(page.getByRole(\"toolbar\", BUBBLE)).toBeVisible();\n\n\tawait page.keyboard.press(\"Escape\");\n\n\tawait expect(page.getByRole(\"toolbar\", BUBBLE)).toHaveCount(0);\n\tawait expect(content(page)).toBeFocused();\n\texpect(await page.evaluate(() => getSelection()?.isCollapsed)).toBe(true);\n});\n\ntest(\"a link is added, edited and removed in place\", async ({ join, room }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"Read the docs.\");\n\tawait page.keyboard.press(\"Shift+Home\");\n\tawait page.getByRole(\"toolbar\", BUBBLE).getByRole(\"button\", { name: \"Add link\" }).click();\n\n\tlet adding = page.getByRole(\"form\", { name: \"Add link\" });\n\tlet field = adding.getByRole(\"textbox\", { name: \"Link URL\" });\n\tawait expect(field).toBeFocused();\n\tawait expect(page.getByRole(\"toolbar\", BUBBLE)).toHaveCount(0);\n\n\t// Tab cycles inside the popover instead of leaving it open behind focus.\n\tawait page.keyboard.press(\"Tab\");\n\tawait expect(adding.getByRole(\"button\", { name: \"Add link\" })).toBeFocused();\n\tawait page.keyboard.press(\"Tab\");\n\tawait expect(field).toBeFocused();\n\n\t/*\n\t * Refused where the field is, not where the document is. A URL the\n\t * dialect rejects applies locally, syncs, and is then refused by the\n\t * server — which cannot undo a Yjs transaction, so it rebuilds the room\n\t * under a fresh epoch and everybody in it loses their cursors.\n\t */\n\tawait field.fill(\"javascript:alert(1)\");\n\tawait page.keyboard.press(\"Enter\");\n\tawait expect(adding.getByRole(\"alert\")).toHaveText(\n\t\t\"Use an https:// or mailto: link, or a path in this repository.\",\n\t);\n\tawait expect(field).toHaveAttribute(\"aria-invalid\", \"true\");\n\tawait expect(content(page).locator(\"a\")).toHaveCount(0);\n\n\t// A bare domain is taken to mean the web, not a repository path.\n\tawait field.fill(\"example.com/docs\");\n\tawait page.keyboard.press(\"Enter\");\n\tawait expect(adding).toHaveCount(0);\n\tawait expect(content(page)).toBeFocused();\n\tlet link = content(page).getByRole(\"link\", { name: \"Read the docs.\" });\n\tawait expect(link).toHaveAttribute(\"href\", \"https://example.com/docs\");\n\tawait written(page, room, /^\\[Read the docs\\.\\]\$https:\\/\\/example\\.com\\/docs\$$/m);\n\n\t// The caret on a link is enough to show where it goes.\n\tawait link.click();\n\tlet preview = page.getByRole(\"dialog\", { name: \"Link\" });\n\tawait expect(preview).toContainText(\"https://example.com/docs\");\n\tawait expect(preview.getByRole(\"button\", { name: \"Open\" })).toBeVisible();\n\n\t// And the keyboard can follow it without reaching for the preview.\n\tawait page.context().route(\n\t\t\"https://example.com/**\",\n\t\troute => route.fulfill({ contentType: \"text/html\", body: \"Docs\" }),\n\t);\n\tlet popup = page.waitForEvent(\"popup\");\n\tawait page.keyboard.press(\"ControlOrMeta+Enter\");\n\tlet opened = await popup;\n\tawait expect(opened).toHaveURL(\"https://example.com/docs\");\n\tawait opened.close();\n\tawait expect(content(page).getByRole(\"link\")).toHaveCount(1);\n\tawait preview.getByRole(\"button\", { name: \"Edit\" }).click();\n\n\tlet editing = page.getByRole(\"form\", { name: \"Edit link\" });\n\tawait expect(editing.getByRole(\"textbox\", { name: \"Link URL\" })).toHaveValue(\n\t\t\"https://example.com/docs\",\n\t);\n\tawait expect(editing.getByRole(\"textbox\", { name: \"Link URL\" })).toBeFocused();\n\tawait page.keyboard.press(\"Escape\");\n\tawait expect(editing).toHaveCount(0);\n\tawait expect(content(page)).toBeFocused();\n\n\t// The shortcut opens the same editor from a caret inside the link.\n\tawait page.keyboard.press(\"ControlOrMeta+k\");\n\tawait editing.getByRole(\"textbox\", { name: \"Link URL\" }).fill(\"https://example.com/guide\");\n\tawait page.keyboard.press(\"Enter\");\n\tawait written(page, room, /^\\[Read the docs\\.\\]\$https:\\/\\/example\\.com\\/guide\$$/m);\n\n\tawait link.click();\n\tawait preview.getByRole(\"button\", { name: \"Edit\" }).click();\n\tawait editing.getByRole(\"button\", { name: \"Remove\" }).click();\n\tawait expect(content(page).locator(\"a\")).toHaveCount(0);\n\tawait expect(content(page)).toBeFocused();\n\tawait written(page, room, /^Read the docs\\.$/m);\n});\n\n/** Select a phrase by its text, as a person dragging across it would. */\nasync function selectText(page: Page, text: string): Promise {\n\tawait content(page).evaluate((root, target) => {\n\t\tlet walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);\n\t\tfor (let node = walker.nextNode(); node; node = walker.nextNode()) {\n\t\t\tlet index = node.textContent!.indexOf(target);\n\t\t\tif (index < 0) continue;\n\t\t\tlet range = document.createRange();\n\t\t\trange.setStart(node, index);\n\t\t\trange.setEnd(node, index + target.length);\n\t\t\tgetSelection()!.removeAllRanges();\n\t\t\tgetSelection()!.addRange(range);\n\t\t\treturn;\n\t\t}\n\t\tthrow new Error(`no text ${target}`);\n\t}, text);\n}\n\ntest(\"another writer's edit cannot move a new link onto other text\", async ({ join, room }) => {\n\tlet ana = await join(\"ana\");\n\tlet bo = await join(\"bo\");\n\n\tawait content(ana).click();\n\tawait ana.keyboard.type(\"Alpha Bravo Zeb Delta.\");\n\tawait expect(content(bo)).toContainText(\"Alpha Bravo Zeb Delta.\");\n\n\tawait selectText(ana, \"Zeb\");\n\tawait ana.keyboard.press(\"ControlOrMeta+k\");\n\tlet adding = ana.getByRole(\"form\", { name: \"Add link\" });\n\tawait adding.getByRole(\"textbox\", { name: \"Link URL\" }).fill(\"example.com/zeb\");\n\n\t// Text arrives earlier in the same paragraph while the field is open.\n\tawait selectText(bo, \"Alpha\");\n\tawait bo.keyboard.press(\"ArrowLeft\");\n\tawait bo.keyboard.type(\"123456789 \");\n\tawait expect(content(ana)).toContainText(\"123456789 Alpha\");\n\tawait expect(adding).toBeVisible();\n\n\tawait ana.keyboard.press(\"Enter\");\n\tawait expect(content(ana).getByRole(\"link\", { name: \"Zeb\", exact: true })).toHaveAttribute(\n\t\t\"href\",\n\t\t\"https://example.com/zeb\",\n\t);\n\tawait written(\n\t\tana,\n\t\troom,\n\t\t/^123456789 Alpha Bravo \\[Zeb\\]\$https:\\/\\/example\\.com\\/zeb\$ Delta\\.$/m,\n\t);\n\n\t// If the text itself is replaced, nothing is linked and the editor says why.\n\tawait selectText(ana, \"Delta\");\n\tawait ana.keyboard.press(\"ControlOrMeta+k\");\n\tawait adding.getByRole(\"textbox\", { name: \"Link URL\" }).fill(\"example.com/delta\");\n\tawait selectText(bo, \"Delta\");\n\tawait bo.keyboard.type(\"Echo\");\n\tawait expect(content(ana)).toContainText(\"Zeb Echo.\");\n\n\tawait ana.keyboard.press(\"Enter\");\n\tawait expect(adding.getByRole(\"status\")).toHaveText(\n\t\t\"Someone else changed this text. Select it again to add the link.\",\n\t);\n\tawait expect(content(ana).getByRole(\"link\")).toHaveCount(1);\n\tawait adding.getByRole(\"button\", { name: \"Close\" }).click();\n\tawait expect(adding).toHaveCount(0);\n\tawait written(\n\t\tana,\n\t\troom,\n\t\t/^123456789 Alpha Bravo \\[Zeb\\]\$https:\\/\\/example\\.com\\/zeb\$ Echo\\.$/m,\n\t);\n});\n\ntest(\"a pasted link the server would refuse arrives as plain text\", async ({ join, room }) => {\n\tlet page = await join(\"ana\");\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"Start.\");\n\t// A protocol-relative CDN address and a zero-width character: either would\n\t// sync, be refused by the server, and rebuild the room for everyone.\n\tawait content(page).evaluate(root => {\n\t\tlet data = new DataTransfer();\n\t\tlet hidden = `https://ex${String.fromCharCode(0x200b)}ample.com`;\n\t\tdata.setData(\n\t\t\t\"text/html\",\n\t\t\t`

See cdn, hidden and `\n\t\t\t\t+ `ok.

`,\n\t\t);\n\t\tdata.setData(\"text/plain\", \" See cdn, hidden and ok.\");\n\t\troot.dispatchEvent(new ClipboardEvent(\"paste\", { clipboardData: data, bubbles: true }));\n\t});\n\n\tawait expect(content(page)).toContainText(\"cdn, hidden and ok.\");\n\tawait expect(content(page).locator(\"a\")).toHaveCount(1);\n\tawait expect(content(page).getByRole(\"link\", { name: \"ok\" })).toHaveAttribute(\n\t\t\"href\",\n\t\t\"https://example.com/ok\",\n\t);\n\tawait written(page, room, /cdn, hidden and \\[ok\\]\$https:\\/\\/example\\.com\\/ok\$\\./);\n});\n\ntest(\"a reader can open a link but not edit it\", async ({ baseURL, browser, room, seed }) => {\n\tawait seed(\"Read [the docs](https://example.com/docs).\\n\");\n\tlet context = await browser.newContext({ baseURL });\n\tawait context.route(\n\t\t\"https://example.com/**\",\n\t\troute => route.fulfill({ contentType: \"text/html\", body: \"Docs\" }),\n\t);\n\tlet page = await context.newPage();\n\tawait authenticate(page, \"readonly\", baseURL!);\n\tawait page.goto(roomPath(room));\n\tawait expect(content(page)).toHaveAttribute(\"contenteditable\", \"false\", { timeout: 20_000 });\n\n\tawait content(page).getByRole(\"link\", { name: \"the docs\" }).click();\n\tlet preview = page.getByRole(\"dialog\", { name: \"Link\" });\n\tawait expect(preview).toContainText(\"https://example.com/docs\");\n\tawait expect(preview.getByRole(\"button\", { name: \"Edit\" })).toHaveCount(0);\n\n\tlet popup = page.waitForEvent(\"popup\");\n\tawait preview.getByRole(\"button\", { name: \"Open\" }).click();\n\tlet opened = await popup;\n\tawait expect(opened).toHaveURL(\"https://example.com/docs\");\n\texpect(await opened.evaluate(() => opener === null)).toBe(true);\n\tawait opened.close();\n\n\tawait page.keyboard.press(\"Escape\");\n\tawait expect(preview).toHaveCount(0);\n\tawait context.close();\n});\n\ntest(\"touch editor menus use reachable targets and stay inside the viewport\", async ({ join }) => {\n\tlet page = await join(\"ana\", {\n\t\thasTouch: true,\n\t\tisMobile: true,\n\t\tviewport: { width: 390, height: 844 },\n\t});\n\n\tawait content(page).click();\n\tawait page.keyboard.type(\"/\");\n\tlet menu = page.getByRole(\"listbox\", MENU);\n\tawait expect(menu).toBeVisible();\n\tlet rowHeights = await menu.getByRole(\"option\").evaluateAll(options =>\n\t\toptions.map(option => option.getBoundingClientRect().height)\n\t);\n\texpect(rowHeights.every(height => height >= 44)).toBe(true);\n\tawait expectInsideViewport(menu);\n\n\tawait page.keyboard.press(\"Escape\");\n\tawait content(page).click();\n\tawait page.keyboard.type(\"Format this selection.\");\n\tawait page.keyboard.press(\"Shift+Home\");\n\tlet bubble = page.getByRole(\"toolbar\", BUBBLE);\n\tawait expect(bubble).toBeVisible();\n\tlet targets = await bubble.getByRole(\"button\").evaluateAll(buttons =>\n\t\tbuttons.map(button => {\n\t\t\tlet box = button.getBoundingClientRect();\n\t\t\treturn { height: box.height, width: box.width };\n\t\t})\n\t);\n\texpect(targets.every(target => target.height >= 44 && target.width >= 44)).toBe(true);\n\tawait expectInsideViewport(bubble);\n});\n\ntest(\"an open slash menu follows its caret while the editor scrolls\", async ({ baseURL, browser, room, seed }) => {\n\tawait seed(LONG_EDITOR);\n\tlet emulation = await emulatedVisualViewportPage(browser, baseURL!, room);\n\ttry {\n\t\tlet block = content(emulation.page).getByText(\"Paragraph 9.\", { exact: true });\n\t\tawait block.scrollIntoViewIfNeeded();\n\t\tawait block.selectText();\n\t\tawait emulation.page.keyboard.type(\"/\");\n\t\tlet menu = emulation.page.getByRole(\"listbox\", MENU);\n\t\tawait expect(menu).toBeVisible();\n\n\t\tawait expectSurfaceToFollowEditorScroll(emulation.page, menu);\n\t} finally {\n\t\tawait emulation.close();\n\t}\n});\n\ntest(\"an open selection toolbar follows its range while the editor scrolls\", async ({ baseURL, browser, room, seed }) => {\n\tawait seed(LONG_EDITOR);\n\tlet emulation = await emulatedVisualViewportPage(browser, baseURL!, room);\n\ttry {\n\t\tlet block = content(emulation.page).getByText(\"Paragraph 9.\", { exact: true });\n\t\tawait block.scrollIntoViewIfNeeded();\n\t\tawait block.selectText();\n\t\tlet bubble = emulation.page.getByRole(\"toolbar\", BUBBLE);\n\t\tawait expect(bubble).toBeVisible();\n\n\t\tawait expectSurfaceToFollowEditorScroll(emulation.page, bubble);\n\t} finally {\n\t\tawait emulation.close();\n\t}\n});\n","editable",false,"branch","documentNavigation","repo","githubnext/chopin","repoId","7d1a8ac3-35b0-4dea-85d4-06a980f3bada","ownerId","org:89615882","organization",true,"site","nexthub","private","admin","settings","maintainer","triage","starred","stars",0,"watchers","watching","pinned","notify","views",[184,185,186,187,188,189,190,191,192,193,194,195,196],"navigation",{"_56":57,"_141":142,"_143":144,"_145":146,"_147":148,"_149":150,"_151":152},"sources",[],"viewer","meta",{"_133":134,"_135":136,"_137":138,"_44":31,"_139":128,"_140":31,"_50":51,"_52":51},"branches",[75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132],"tags",[71,72,73,74],"cloneUrl","https://git.nexthub.sh/githubnext/chopin.git","color-controls-slice-1","color-controls-slice-2","color-controls-slice-3","color-controls-slice-4","Krzysztof-Cieslak-patch-1","Krzysztof-Cieslak-patch-2","Maggie/app-preview-toolkit","Maggie/ci-playwright-install-timeout","Maggie/collaborative-visual-decision","Maggie/design-audit","Maggie/generic-visual-decision-runtime","Maggie/impeccable-chopin-metadata","Maggie/jev-chat-product","Maggie/jev-composed-assessment","Maggie/native-document-layouts","Maggie/openui-composition-product","Maggie/openui-composition-trial","Maggie/planner-visual-authoring","Maggie/planner-visual-requests","Maggie/visual-selection-eval","artifacts/pr-419-live-preview-20261009","automation/pr-maintenance-state","automation/use-effect/callout-disabled-picker-8cf9e49ba5c09471","automation/use-effect/collaboration-options-ref-4e3a5a08a879a5ae","automation/use-effect/room-workspace-effective-access-a57d40866c71bed0","chore/bun-1.4.2","color-controls","color-controls-plan","comments","design-pr-assets","design/archived-decisions-badge","design/channel-route-remount","design/chat-decision-entry","design/conversation-analysis-markers","design/decision-evidence","design/settled-line-icon","dev/integration","diagram-step-controls","feat/liveapp-frontend-pilot","feat/local-experiments","feat/local-launcher-tracer","fix/autolink-mdx-crash","github-pills/2-pills","github-pills/3-hover-card","maggie/app-preview-toolkit","maggie/ci-playwright-install-timeout","maggie/collaborative-visual-decision","maggie/design-audit","maggie/generic-visual-decision-runtime","maggie/impeccable-chopin-metadata","maggie/jev-composed-assessment","maggie/native-document-layouts","maggie/openui-composition-product","maggie/openui-composition-trial","maggie/planner-visual-authoring","maggie/planner-visual-requests","maggie/visual-selection-eval","main","plain-text-fence-chrome","tokens/09-copy","wireframes/2-renderer","wireframes/3-planner","description","Let's compose rich plans together","owner","githubnext","section","","head","empty","pins",[167,168,169],"documents",{"_162":163,"_164":165},"code",{"_158":159,"_160":161},"automations",{"_155":156,"_157":-5},"delivery",{"_153":51,"_154":-5},"tag","04zvKQ8QOrDUF8TO1Ovz0Zy8_TT","releases","applications","workflows",3,"deployments","commits",1000,"changes",13,"counts",{"_166":165},"total",11,"issue",{"_170":160,"_172":182,"_15":160,"_174":183,"_54":41,"_176":31,"_177":41,"_178":161},{"_170":179,"_172":180,"_15":179,"_174":181,"_54":41,"_176":31,"_177":41,"_178":51},{"_170":171,"_172":173,"_15":171,"_174":175,"_54":41,"_176":31,"_177":41,"_178":165},"id","issues","name","Issues","filters",{},"saved","pinnable","count","tasks","Tasks",{},"Changes",{},{"_170":160,"_172":182,"_15":160,"_174":227,"_54":41,"_176":31,"_177":41},{"_170":179,"_172":180,"_15":179,"_174":226,"_54":41,"_176":31,"_177":41},{"_170":171,"_172":173,"_15":171,"_174":225,"_54":41,"_176":31,"_177":41},{"_170":222,"_172":223,"_15":222,"_174":224,"_54":31,"_176":31,"_177":41},{"_170":219,"_172":220,"_15":219,"_174":221,"_54":31,"_176":31,"_177":41},{"_170":155,"_172":217,"_15":147,"_174":218,"_54":31,"_176":31,"_177":41},{"_170":157,"_172":214,"_15":215,"_174":216,"_54":31,"_176":31,"_177":41},{"_170":153,"_172":212,"_15":153,"_174":213,"_54":31,"_176":31,"_177":41},{"_170":208,"_172":209,"_15":210,"_174":211,"_54":31,"_176":31,"_177":41},{"_170":143,"_172":206,"_15":143,"_174":207,"_54":31,"_176":31,"_177":31},{"_170":203,"_172":204,"_15":203,"_174":205,"_54":31,"_176":31,"_177":31},{"_170":200,"_172":201,"_15":200,"_174":202,"_54":31,"_176":31,"_177":31},{"_170":197,"_172":198,"_15":197,"_174":199,"_54":31,"_176":31,"_177":31},"decisions","Decisions",{},"changelog","Changelog",{},"roadmap","Roadmap",{},"Documents",{},"activity","Activity","insights",{},"Releases",{},"Deployments","automations/deployments",{},"Workflows",{},"discussions","Discussions",{},"goals","Goals",{},{},{},{},"groups","user","agents",[],"now",1794651776871,"sidebar","expanded"]