fix(editor): text highlighting (#9708)

blocksuite/blocks/src/root-block/widgets/format-bar/components/highlight/highlight-button.ts

@@ -16,8 +16,8 @@ import type { AffineFormatBarWidget } from '../../format-bar.js';
 import { backgroundConfig, foregroundConfig } from './consts.js';
 
 enum HighlightType {
-  Foreground,
+  Color = 'color',
-  Background,
+  Background = 'background',
 }
 
 let lastUsedColor: string | null = null;
@@ -35,8 +35,7 @@ const updateHighlight = (
     styles: AffineTextAttributes;
   } = {
     styles: {
-      color: highlightType === HighlightType.Foreground ? color : null,
+      [`${highlightType}`]: color,
-      background: highlightType === HighlightType.Background ? color : null,
     },
   };
   host.std.command
@@ -63,11 +62,7 @@ const HighlightPanel = (
             <editor-menu-action
               data-testid="${color ?? 'unset'}"
               @click="${() => {
-                updateHighlight(
+                updateHighlight(formatBar.host, color, HighlightType.Color);
-                  formatBar.host,
-                  color,
-                  HighlightType.Foreground
-                );
                 formatBar.requestUpdate();
               }}"
             >
@@ -84,6 +79,7 @@ const HighlightPanel = (
         ${backgroundConfig.map(
           ({ name, color }) => html`
             <editor-menu-action
+              data-testid="${color ?? 'transparent'}"
               @click="${() => {
                 updateHighlight(
                   formatBar.host,

tests/affine-local/e2e/blocksuite/toolbar.spec.ts

@@ -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);
+  });
+});