mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-17 18:16:15 +08:00
chore(editor): change edgeless-text default color to black (#12361)
Closes: [BS-3506](https://linear.app/affine-design/issue/BS-3506/edgeless-text-默认改为黑色) ### Dark <img width="691" alt="Screenshot 2025-05-19 at 19 32 52" src="https://github.com/user-attachments/assets/2927d13b-0300-4293-8f8f-7891fd87a680" /> ### Light <img width="639" alt="Screenshot 2025-05-19 at 19 33 05" src="https://github.com/user-attachments/assets/4429f6f9-b374-4b17-87f4-ae09204f1538" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## 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. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
fundon
@@ -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<EdgelessTextBl
|
||||
});
|
||||
}
|
||||
|
||||
private readonly _style$ = computed(() => {
|
||||
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<EdgelessTextBl
|
||||
|
||||
override renderPageContent() {
|
||||
const { color, fontFamily, fontStyle, fontWeight, textAlign } =
|
||||
this.model.props;
|
||||
this._style$.value;
|
||||
const themeProvider = this.std.get(ThemeProvider);
|
||||
const textColor = themeProvider.generateColorProperty(
|
||||
color,
|
||||
|
||||
@@ -6,7 +6,7 @@ import {
|
||||
type IModelCoord,
|
||||
TextUtils,
|
||||
} from '@blocksuite/affine-block-surface';
|
||||
import { TextElementModel } from '@blocksuite/affine-model';
|
||||
import { DefaultTheme, TextElementModel } from '@blocksuite/affine-model';
|
||||
import type { RichText } from '@blocksuite/affine-rich-text';
|
||||
import { ThemeProvider } from '@blocksuite/affine-shared/services';
|
||||
import { getSelectedRect } from '@blocksuite/affine-shared/utils';
|
||||
@@ -432,7 +432,7 @@ export class EdgelessTextEditor extends WithDisposable(ShadowlessElement) {
|
||||
const isEmpty = !text.length && !this._isComposition;
|
||||
const color = this.std
|
||||
.get(ThemeProvider)
|
||||
.generateColorProperty(this.element.color, '#000000');
|
||||
.generateColorProperty(this.element.color, DefaultTheme.textColor);
|
||||
|
||||
return html`<div
|
||||
style=${styleMap({
|
||||
|
||||
@@ -115,7 +115,7 @@ export const DefaultTheme: Theme = {
|
||||
black: Black,
|
||||
white: White,
|
||||
transparent: Transparent,
|
||||
textColor: Medium.Blue,
|
||||
textColor: Black,
|
||||
shapeTextColor: pureBlack,
|
||||
shapeStrokeColor: Medium.Yellow,
|
||||
shapeFillColor: Medium.Yellow,
|
||||
|
||||
@@ -232,7 +232,7 @@ describe('apply last props', () => {
|
||||
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,
|
||||
|
||||
@@ -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
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
+4
-1
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user