1
import type { Locator, Page } from "@playwright/test";
2
import { test, expect, createTestPage } from "../fixtures/bland-test";
3
 
4
async function expectHighlightedCodeBlock(page: Page) {
5
  await expect
6
    .poll(async () => {
7
      return await page.locator(".tiptap-code-block-content span[class*='hljs-']").count();
8
    })
9
    .toBeGreaterThan(0);
10
}
11
 
12
async function expectHighlightedKeyword(page: Page, keyword: string) {
13
  await expect
14
    .poll(async () => {
15
      return await page
16
        .locator(".tiptap-code-block-content .hljs-keyword")
17
        .evaluateAll((nodes) => nodes.map((node) => node.textContent ?? "").join(" "));
18
    })
19
    .toContain(keyword);
20
}
21
 
22
async function openBlockActionsMenu(page: Page, block: Locator) {
23
  await block.hover();
24
  const toggle = page.locator(".tiptap-drag-handle-toggle");
25
  await expect(toggle).toBeVisible({ timeout: 5_000 });
26
  await toggle.click();
27
 
28
  const menu = page.getByRole("menu", { name: "Block actions" });
29
  await expect(menu).toBeVisible({ timeout: 5_000 });
30
  return menu;
31
}
32
 
33
async function moveBlock(page: Page, block: Locator, label: "Move up" | "Move down") {
34
  const menu = await openBlockActionsMenu(page, block);
35
  await menu.getByRole("menuitem", { name: label }).click();
36
}
37
 
38
async function expectCodeBlockAbove(codeBlock: Locator, paragraph: Locator) {
39
  await expect
40
    .poll(async () => {
41
      const [codeBox, paragraphBox] = await Promise.all([codeBlock.boundingBox(), paragraph.boundingBox()]);
42
      if (!codeBox || !paragraphBox) return false;
43
      return codeBox.y < paragraphBox.y;
44
    })
45
    .toBe(true);
46
}
47
 
48
async function expectCodeBlockBelow(codeBlock: Locator, paragraph: Locator) {
49
  await expect
50
    .poll(async () => {
51
      const [codeBox, paragraphBox] = await Promise.all([codeBlock.boundingBox(), paragraph.boundingBox()]);
52
      if (!codeBox || !paragraphBox) return false;
53
      return codeBox.y > paragraphBox.y;
54
    })
55
    .toBe(true);
56
}
57
 
58
async function selectEntireCodeBlockText(page: Page) {
59
  const success = await page.evaluate(() => {
60
    const editor = document.querySelector(".tiptap");
61
    const codeBlock = document.querySelector(".tiptap-code-block-content");
62
    if (!(editor instanceof HTMLElement) || !(codeBlock instanceof HTMLElement)) {
63
      return false;
64
    }
65
 
66
    const walker = document.createTreeWalker(codeBlock, NodeFilter.SHOW_TEXT);
67
    const textNodes: Text[] = [];
68
 
69
    while (walker.nextNode()) {
70
      if (walker.currentNode instanceof Text && (walker.currentNode.textContent ?? "").length > 0) {
71
        textNodes.push(walker.currentNode);
72
      }
73
    }
74
 
75
    if (textNodes.length === 0) {
76
      return false;
77
    }
78
 
79
    const range = document.createRange();
80
    range.setStart(textNodes[0], 0);
81
 
82
    const lastTextNode = textNodes[textNodes.length - 1];
83
    range.setEnd(lastTextNode, lastTextNode.textContent?.length ?? 0);
84
 
85
    const selection = window.getSelection();
86
    selection?.removeAllRanges();
87
    selection?.addRange(range);
88
    editor.focus();
89
    document.dispatchEvent(new Event("selectionchange"));
90
 
91
    return selection?.toString() === codeBlock.textContent;
92
  });
93
 
94
  expect(success).toBe(true);
95
}
96
 
97
test.describe("drag handle block reordering", () => {
98
  test("retains code block syntax highlighting when moving via block actions", async ({
99
    authenticatedPage: { page, accessToken },
100
    e2eWorkspace,
101
  }) => {
102
    const testPage = await createTestPage(page, accessToken, "Drag Handle Reorder Test", e2eWorkspace);
103
    await page.goto(`/${testPage.workspaceSlug}/${testPage.pageId}`);
104
 
105
    const editor = page.locator(".tiptap[contenteditable='true']");
106
    await editor.waitFor({ timeout: 30_000 });
107
    await editor.click();
108
    await page.keyboard.type("Before");
109
    await page.keyboard.press("Enter");
110
    await page.keyboard.type("```ts ");
111
    await page.keyboard.type("const count = 1");
112
 
113
    await expect(editor).toContainText("Before");
114
    await expect(editor).toContainText("const count = 1");
115
    await expect(page.getByText("Connected")).toBeVisible({ timeout: 15_000 });
116
    await expectHighlightedCodeBlock(page);
117
 
118
    const codeBlock = page.locator(".tiptap-code-block-wrapper");
119
    const paragraph = page.locator(".tiptap p").filter({ hasText: "Before" });
120
 
121
    await moveBlock(page, codeBlock, "Move up");
122
    await expectCodeBlockAbove(codeBlock, paragraph);
123
    await expectHighlightedCodeBlock(page);
124
 
125
    await moveBlock(page, codeBlock, "Move down");
126
    await expectCodeBlockBelow(codeBlock, paragraph);
127
    await expectHighlightedCodeBlock(page);
128
  });
129
 
130
  test("refreshes syntax highlighting after collaborative code edits while the observer cursor stays outside the block", async ({
131
    authenticatedPage: { page, accessToken },
132
    e2eWorkspace,
133
  }) => {
134
    const testPage = await createTestPage(page, accessToken, "Collaborative Highlight Refresh Test", e2eWorkspace);
135
    await page.goto(`/${testPage.workspaceSlug}/${testPage.pageId}`);
136
 
137
    const editor = page.locator(".tiptap[contenteditable='true']");
138
    await editor.waitFor({ timeout: 30_000 });
139
    await editor.click();
140
    await page.keyboard.type("Before");
141
    await page.keyboard.press("Enter");
142
    await page.keyboard.type("```ts ");
143
    await page.keyboard.type("const count = 1");
144
 
145
    await expect(editor).toContainText("Before");
146
    await expect(editor).toContainText("const count = 1");
147
    await expect(page.getByText("Connected")).toBeVisible({ timeout: 15_000 });
148
    await expectHighlightedCodeBlock(page);
149
 
150
    const collaborator = await page.context().newPage();
151
    try {
152
      await collaborator.goto(`/${testPage.workspaceSlug}/${testPage.pageId}`);
153
      const collaboratorEditor = collaborator.locator(".tiptap[contenteditable='true']");
154
      await collaboratorEditor.waitFor({ timeout: 30_000 });
155
      await expect(collaboratorEditor).toContainText("const count = 1");
156
      await expect(collaborator.getByText("Connected")).toBeVisible({ timeout: 15_000 });
157
      await expectHighlightedCodeBlock(collaborator);
158
 
159
      await page.locator(".tiptap p").filter({ hasText: "Before" }).click();
160
 
161
      await selectEntireCodeBlockText(collaborator);
162
      await collaborator.keyboard.type("while (true) {}");
163
 
164
      await expect(collaboratorEditor).toContainText("while (true) {}");
165
      await expect(editor).toContainText("while (true) {}");
166
      await expectHighlightedKeyword(page, "while");
167
    } finally {
168
      await collaborator.close();
169
    }
170
  });
171
});