From 4d6a3731a3ba7f3e3ed35b3b56fed7510d5a4382 Mon Sep 17 00:00:00 2001 From: fundon Date: Mon, 19 May 2025 16:51:02 +0000 Subject: [PATCH] chore(editor): change edgeless-text default color to black (#12361) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes: [BS-3506](https://linear.app/affine-design/issue/BS-3506/edgeless-text-默认改为黑色) ### Dark Screenshot 2025-05-19 at 19 32 52 ### Light Screenshot 2025-05-19 at 19 33 05 ## Summary by CodeRabbit - **New Features** - Improved edgeless text block styling to support theme-based color, font, and alignment settings. - **Style** - Updated the default text color in edgeless text blocks to black, with support for separate dark and light mode colors. - **Bug Fixes** - Ensured the color picker and block rendering reflect the updated default color. - **Tests** - Adjusted tests and snapshots to expect the new default color and theme-based color structure. --- .../edgeless-text/src/edgeless-text-block.ts | 20 ++++++++++++++++++- .../gfx/text/src/edgeless-text-editor.ts | 4 ++-- blocksuite/affine/model/src/themes/default.ts | 2 +- .../src/__tests__/edgeless/last-props.spec.ts | 2 +- .../e2e/blocksuite/edgeless/text.spec.ts | 2 +- ...-limit-for-embed-block-add-linked-doc.json | 5 ++++- .../min-width-limit-for-embed-block-drag.json | 5 ++++- .../min-width-limit-for-embed-block-init.json | 5 ++++- ...or-embed-block-link-to-card-min-width.json | 5 ++++- ...th-limit-for-embed-block-link-to-card.json | 5 ++++- ...-line-when-edgeless-text-exist-finial.json | 5 ++++- ...e-when-edgeless-text-exist-note-empty.json | 5 ++++- ...en-edgeless-text-exist-note-not-empty.json | 5 ++++- 13 files changed, 56 insertions(+), 14 deletions(-) diff --git a/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts b/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts index 580a33db6..e6b0a467a 100644 --- a/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts +++ b/blocksuite/affine/blocks/edgeless-text/src/edgeless-text-block.ts @@ -26,6 +26,7 @@ import { GfxViewInteractionExtension, type SelectedContext, } from '@blocksuite/std/gfx'; +import { computed } from '@preact/signals-core'; import { css, html } from 'lit'; import { query, state } from 'lit/decorators.js'; import { type StyleInfo, styleMap } from 'lit/directives/style-map.js'; @@ -82,6 +83,23 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent { + const { + color$: { value: color }, + fontFamily$: { value: fontFamily }, + fontStyle$: { value: fontStyle }, + fontWeight$: { value: fontWeight }, + textAlign$: { value: textAlign }, + } = this.model.props; + return { + color, + fontFamily, + fontStyle, + fontWeight, + textAlign, + }; + }); + checkWidthOverflow(width: number) { let wValid = true; @@ -365,7 +383,7 @@ export class EdgelessTextBlockComponent extends GfxBlockComponent { throw new Error('id is not found'); } const text = service.crud.getElementById(id) as EdgelessTextBlockModel; - expect(text.props.color).toBe(DefaultTheme.textColor); + expect(text.props.color).toStrictEqual(DefaultTheme.textColor); expect(text.props.fontFamily).toBe(FontFamily.Inter); service.crud.updateElement(id, { color: DefaultTheme.StrokeColorShortMap.Green, diff --git a/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts b/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts index de1d29a46..fd2062587 100644 --- a/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts +++ b/tests/affine-local/e2e/blocksuite/edgeless/text.spec.ts @@ -61,7 +61,7 @@ test('should update color of edgeless text when switching theme', async ({ let pickedColor = await pickedColorButton.locator('svg').getAttribute('fill'); let textColor = await getEdgelessTextColor(text); - await expect(pickedColorButton.getByLabel('MediumBlue')).toHaveCount(1); + await expect(pickedColorButton.getByLabel('Black')).toHaveCount(1); expect(pickedColor).toBe(textColor); const blackColorButton = colorPicker diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json index d99f447b3..0c898f42a 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-add-linked-doc.json @@ -34,7 +34,10 @@ "flavour": "affine:edgeless-text", "id": "4", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json index 79859b4ba..33c9c5880 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-drag.json @@ -26,7 +26,10 @@ "flavour": "affine:edgeless-text", "id": "4", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json index 35da32c92..81fcf59e5 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-init.json @@ -25,7 +25,10 @@ "flavour": "affine:edgeless-text", "id": "4", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json index fff7c7a1a..36de1f9d7 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card-min-width.json @@ -26,7 +26,10 @@ "flavour": "affine:edgeless-text", "id": "4", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json index 687c3b243..4e63ac4d1 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/min-width-limit-for-embed-block-link-to-card.json @@ -26,7 +26,10 @@ "flavour": "affine:edgeless-text", "id": "4", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json index 1b12cbd30..eb59356f8 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-finial.json @@ -28,7 +28,10 @@ "flavour": "affine:edgeless-text", "id": "3", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json index 0b1c65a10..f025ab2fd 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-empty.json @@ -28,7 +28,10 @@ "flavour": "affine:edgeless-text", "id": "3", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400", diff --git a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json index c9c85985d..c2e6089a7 100644 --- a/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json +++ b/tests/blocksuite/snapshots/edgeless/edgeless-text.spec.ts/press-backspace-at-the-start-of-first-line-when-edgeless-text-exist-note-not-empty.json @@ -28,7 +28,10 @@ "flavour": "affine:edgeless-text", "id": "3", "props": { - "color": "#84cfff", + "color": { + "dark": "#ffffff", + "light": "#000000" + }, "fontFamily": "blocksuite:surface:Inter", "fontStyle": "normal", "fontWeight": "400",