fix(editor): text highlighting (#9708)

2026-07-31 17:19:56 +08:00 · 2025-01-15 10:57:27 +00:00
parent 7002289c58
commit 0b2d11e6b1
2 changed files with 96 additions and 9 deletions
@@ -0,0 +1,91 @@
+import { test } from '@affine-test/kit/playwright';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  waitForEmptyEditor,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await clickNewPageButton(page);
+  await waitForEmptyEditor(page);
+});
+
+test.describe('Format bar', () => {
+  test('should change text color', async ({ page }) => {
+    await page.keyboard.press('Enter');
+
+    await page.keyboard.type('hello world');
+    await page.keyboard.press('Shift+ArrowLeft');
+    await page.keyboard.press('Shift+ArrowLeft');
+    await page.keyboard.press('Shift+ArrowLeft');
+
+    const formatBar = page.locator('.affine-format-bar-widget');
+    await formatBar.locator('.highlight-icon').hover();
+    const fgGreenButton = formatBar.locator(
+      '[data-testid="var(--affine-text-highlight-foreground-green)"]'
+    );
+    await fgGreenButton.click();
+    const fgColor1 = await fgGreenButton
+      .locator('span')
+      .evaluate(e => window.getComputedStyle(e).getPropertyValue('color'));
+
+    const paragraph = page.locator('affine-paragraph');
+    const textSpan = paragraph.getByText('rld');
+    await expect(textSpan).toBeVisible();
+    const fgColor2 = await textSpan.evaluate(e =>
+      window.getComputedStyle(e).getPropertyValue('color')
+    );
+
+    expect(fgColor1).toBe(fgColor2);
+  });
+
+  test('should change text background color', async ({ page }) => {
+    await page.keyboard.press('Enter');
+
+    await page.keyboard.type('hello world');
+    await page.keyboard.press('Shift+ArrowLeft');
+    await page.keyboard.press('Shift+ArrowLeft');
+    await page.keyboard.press('Shift+ArrowLeft');
+
+    const formatBar = page.locator('.affine-format-bar-widget');
+    await formatBar.locator('.highlight-icon').hover();
+
+    const fgGreenButton = formatBar.locator(
+      '[data-testid="var(--affine-text-highlight-foreground-green)"]'
+    );
+    await fgGreenButton.click();
+    const fgColor1 = await fgGreenButton
+      .locator('span')
+      .evaluate(e => window.getComputedStyle(e).getPropertyValue('color'));
+
+    const paragraph = page.locator('affine-paragraph');
+    const text1Span = paragraph.getByText('rld');
+    const fgColor2 = await text1Span.evaluate(e =>
+      window.getComputedStyle(e).getPropertyValue('color')
+    );
+
+    expect(fgColor1).toBe(fgColor2);
+
+    await page.keyboard.press('Shift+ArrowLeft');
+    await page.keyboard.press('Shift+ArrowLeft');
+
+    await formatBar.locator('.highlight-icon').hover();
+
+    const bgYellowButton = formatBar.locator(
+      '[data-testid="var(--affine-text-highlight-yellow)"]'
+    );
+    await bgYellowButton.click();
+    const bgColor1 = await bgYellowButton
+      .locator('span')
+      .evaluate(e => window.getComputedStyle(e).getPropertyValue('background'));
+
+    const text2Span = paragraph.getByText('world');
+    const bgColor2 = await text2Span.evaluate(e =>
+      window.getComputedStyle(e).getPropertyValue('background')
+    );
+
+    expect(bgColor1).toBe(bgColor2);
+  });
+});