fix(editor): should update color of edgeless text when switching theme (#11853)

Closes: [BS-3258](https://linear.app/affine-design/issue/BS-3258/edgeless-text-颜色不符合预期)

blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts

@@ -1,6 +1,7 @@
 import { TextUtils } from '@blocksuite/affine-block-surface';
 import { formatBlockCommand } from '@blocksuite/affine-inline-preset';
 import {
+  DefaultTheme,
   EDGELESS_TEXT_BLOCK_MIN_HEIGHT,
   EDGELESS_TEXT_BLOCK_MIN_WIDTH,
   type EdgelessTextBlockModel,
@@ -359,13 +360,17 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent<EdgelessTextBl
   }
 
   override renderPageContent() {
-    const { fontFamily, fontStyle, fontWeight, textAlign } = this.model.props;
+    const { color, fontFamily, fontStyle, fontWeight, textAlign } =
-    const color = this.std
+      this.model.props;
-      .get(ThemeProvider)
+    const themeProvider = this.std.get(ThemeProvider);
-      .generateColorProperty(this.model.props.color, '#000000');
+    const textColor = themeProvider.generateColorProperty(
+      color,
+      DefaultTheme.textColor,
+      themeProvider.theme$.value
+    );
 
     const style = styleMap({
-      '--edgeless-text-color': color,
+      '--edgeless-text-color': textColor,
       '--edgeless-text-font-family': TextUtils.wrapFontFamily(fontFamily),
       '--edgeless-text-font-style': fontStyle,
       '--edgeless-text-font-weight': fontWeight,

blocksuite/affine/model/src/blocks/edgeless-text/edgeless-text-model.ts

@@ -20,9 +20,9 @@ import {
   TextAlign,
   TextAlignSchema,
   type TextStyleProps,
-} from '../../consts/index.js';
+} from '../../consts/index';
-import { ColorSchema } from '../../themes/color.js';
+import { ColorSchema } from '../../themes/color';
-import { DefaultTheme } from '../../themes/default.js';
+import { DefaultTheme } from '../../themes/default';
 
 type EdgelessTextProps = {
   hasMaxWidth: boolean;
@@ -33,15 +33,15 @@ export const EdgelessTextZodSchema = z
   .object({
     color: ColorSchema,
     fontFamily: FontFamilySchema,
-    fontWeight: FontWeightSchema,
     fontStyle: FontStyleSchema,
+    fontWeight: FontWeightSchema,
     textAlign: TextAlignSchema,
   })
   .default({
     color: DefaultTheme.textColor,
     fontFamily: FontFamily.Inter,
-    fontWeight: FontWeight.Regular,
     fontStyle: FontStyle.Normal,
+    fontWeight: FontWeight.Regular,
     textAlign: TextAlign.Left,
   });
 
@@ -51,14 +51,10 @@ export const EdgelessTextBlockSchema = defineBlockSchema({
     xywh: '[0,0,16,16]',
     index: 'a0',
     lockedBySelf: false,
-    color: '#000000',
-    fontFamily: FontFamily.Inter,
-    fontStyle: FontStyle.Normal,
-    fontWeight: FontWeight.Regular,
-    textAlign: TextAlign.Left,
     scale: 1,
     rotate: 0,
     hasMaxWidth: false,
+    ...EdgelessTextZodSchema.parse(undefined),
   }),
   metadata: {
     version: 1,
@@ -75,9 +71,7 @@ export const EdgelessTextBlockSchema = defineBlockSchema({
       'affine:latex',
     ],
   },
-  toModel: () => {
+  toModel: () => new EdgelessTextBlockModel(),
-    return new EdgelessTextBlockModel();
-  },
 });
 
 export const EdgelessTextBlockSchemaExtension = BlockSchemaExtension(

tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts

@@ -0,0 +1,102 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  locateEditorContainer,
+  locateToolbar,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  type,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect, type Locator } from '@playwright/test';
+
+function getEdgelessTextColor(text: Locator) {
+  return text
+    .locator('.affine-block-children-container')
+    .first()
+    .evaluate(e => e.style.getPropertyValue('--edgeless-text-color'));
+}
+
+test.beforeEach(async ({ page }) => {
+  await openHomePage(page);
+  await waitForEditorLoad(page);
+  await clickNewPageButton(page);
+  await clickEdgelessModeButton(page);
+  const container = locateEditorContainer(page);
+  await container.click();
+});
+
+test('should update color of edgeless text when switching theme', async ({
+  page,
+}) => {
+  const container = locateEditorContainer(page);
+  await container.dblclick();
+
+  await page.waitForSelector('affine-edgeless-text');
+
+  await type(page, 'text color');
+
+  await page.keyboard.press('Escape');
+  await page.keyboard.press('Escape');
+
+  const text = page.locator('affine-edgeless-text');
+
+  await text.click();
+
+  const toolbar = locateToolbar(page);
+
+  await expect(toolbar).toBeVisible();
+
+  const colorPicker = toolbar.locator('edgeless-color-picker-button');
+  const colorButton = toolbar.getByLabel('Text color');
+
+  await colorButton.click();
+
+  const pickedColorButton = colorPicker.locator(
+    'edgeless-color-button[active]'
+  );
+
+  let pickedColor = await pickedColorButton.locator('svg').getAttribute('fill');
+  let textColor = await getEdgelessTextColor(text);
+
+  await expect(pickedColorButton.getByLabel('MediumBlue')).toHaveCount(1);
+  expect(pickedColor).toBe(textColor);
+
+  const blackColorButton = colorPicker
+    .locator('edgeless-color-button')
+    .filter({
+      has: page.locator('.color-unit'),
+    })
+    .filter({
+      has: page.getByLabel('Black'),
+    });
+  await blackColorButton.click();
+
+  pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
+  textColor = await getEdgelessTextColor(text);
+
+  expect(pickedColor).toBe(textColor);
+  expect(pickedColor).toBe('#000000');
+
+  await page.getByTestId('header-info-button').click();
+
+  await page
+    .locator('[data-info-id="edgelessTheme"]')
+    .locator('[data-property-value="true"]')
+    .locator('button[value="dark"]')
+    .click();
+
+  await page.keyboard.press('Escape');
+
+  await expect(page.getByTestId('property-collapsible-section')).toBeHidden();
+
+  await colorButton.click();
+
+  pickedColor = await blackColorButton.locator('svg').getAttribute('fill');
+  textColor = await getEdgelessTextColor(text);
+
+  expect(pickedColor).toBe(textColor);
+  expect(pickedColor).toBe('#ffffff');
+});