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