From cae7db07eea1091062ad1ec3c3f10033922fe6da Mon Sep 17 00:00:00 2001
From: fundon <fundon@pindash.io>
Date: Mon, 19 May 2025 16:36:50 +0000
Subject: [PATCH] fix(editor): text color on toolbar when connector is selected
 (#12360)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes: [BS-3511](https://linear.app/affine-design/issue/BS-3511/当选中-connector-时，toolbar-上文字颜色选项颜色显示不正确)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

- **Tests**
  - Added end-to-end tests for the edgeless connector feature, verifying toolbar text color functionality and theme-based color changes.
- **Refactor**
  - Improved performance of text toolbar actions by optimizing internal data handling for font and color selection. No changes to visible behavior.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../affine/gfx/text/src/toolbar/actions.ts    | 18 ++---
 .../e2e/blocksuite/edgeless/connector.spec.ts | 65 +++++++++++++++++++
 2 files changed, 75 insertions(+), 8 deletions(-)
 create mode 100644 tests/affine-local/e2e/blocksuite/edgeless/connector.spec.ts

diff --git a/blocksuite/affine/gfx/text/src/toolbar/actions.ts b/blocksuite/affine/gfx/text/src/toolbar/actions.ts
index 67adebcb44..9a9d50218b 100644
--- a/blocksuite/affine/gfx/text/src/toolbar/actions.ts
+++ b/blocksuite/affine/gfx/text/src/toolbar/actions.ts
@@ -127,18 +127,18 @@ export function createTextActions<
         );
         if (!allowed) return null;
 
+        const mappedModels = models.map(mapInto);
+
         const fontFamily =
-          getMostCommonValue(models.map(mapInto), 'fontFamily') ??
-          FontFamily.Inter;
+          getMostCommonValue(mappedModels, 'fontFamily') ?? FontFamily.Inter;
         const styleInfo = { fontFamily: TextUtils.wrapFontFamily(fontFamily) };
 
         const onPick = (fontFamily: FontFamily) => {
           let fontWeight =
-            getMostCommonValue(models.map(mapInto), 'fontWeight') ??
+            getMostCommonValue(mappedModels, 'fontWeight') ??
             FontWeight.Regular;
           let fontStyle =
-            getMostCommonValue(models.map(mapInto), 'fontStyle') ??
-            FontStyle.Normal;
+            getMostCommonValue(mappedModels, 'fontStyle') ?? FontStyle.Normal;
 
           if (!isFontWeightSupported(fontFamily, fontWeight)) {
             fontWeight = FontWeight.Regular;
@@ -199,11 +199,13 @@ export function createTextActions<
             ? DefaultTheme.shapeTextColor
             : DefaultTheme.textColor;
 
+        const mappedModels = models.map(mapInto);
+
         const field = 'color';
-        const firstModel = models[0];
-        const originalColor = mapInto(firstModel)[field];
+        const firstModel = mappedModels[0];
+        const originalColor = firstModel[field];
         const color =
-          getMostCommonResolvedValue(models, field, color =>
+          getMostCommonResolvedValue(mappedModels, field, color =>
             resolveColor(color, theme)
           ) ?? resolveColor(defaultColor, theme);
 
diff --git a/tests/affine-local/e2e/blocksuite/edgeless/connector.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/connector.spec.ts
new file mode 100644
index 0000000000..fa828afff1
--- /dev/null
+++ b/tests/affine-local/e2e/blocksuite/edgeless/connector.spec.ts
@@ -0,0 +1,65 @@
+import { test } from '@affine-test/kit/playwright';
+import {
+  clickEdgelessModeButton,
+  clickView,
+  dblclickView,
+  dragView,
+  locateEditorContainer,
+  locateToolbar,
+  setEdgelessTool,
+} from '@affine-test/kit/utils/editor';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import {
+  clickNewPageButton,
+  switchEdgelessTheme,
+  waitForEditorLoad,
+} from '@affine-test/kit/utils/page-logic';
+import { expect } from '@playwright/test';
+
+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 correct text color on toolbar', async ({ page }) => {
+  await setEdgelessTool(page, 'connector');
+  await dragView(page, [100, 300], [200, 400]);
+  await dblclickView(page, [150, 350]);
+
+  await expect(
+    page.locator('edgeless-connector-label-editor rich-text')
+  ).toBeVisible();
+  await page.keyboard.type('label');
+  await page.keyboard.press('Escape');
+
+  const toolbar = locateToolbar(page);
+  const textColorContainer = toolbar.locator(
+    'edgeless-color-picker-button.text-color'
+  );
+  const textColorBtn = textColorContainer.getByLabel('Text color');
+  const blackBtn = textColorContainer
+    .locator('edgeless-color-button[active]')
+    .getByLabel('Black');
+
+  await expect(textColorContainer).toBeVisible();
+
+  await textColorBtn.click();
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor).toBe('#000000');
+
+  await switchEdgelessTheme(page, 'dark');
+
+  await clickView(page, [150, 350]);
+  await textColorBtn.click();
+
+  await expect(blackBtn).toHaveCount(1);
+
+  const svgFillColor2 = await blackBtn.locator('svg').getAttribute('fill');
+  expect(svgFillColor2).toBe('#ffffff');
+});