From a7acd5c5b1a2b07af54e86a8d782bc56a83b9eb8 Mon Sep 17 00:00:00 2001 From: fundon Date: Thu, 20 Mar 2025 02:08:20 +0000 Subject: [PATCH] refactor(editor): fix edgeless toolbar theme (#10897) --- .../blocks/block-note/src/configs/toolbar.ts | 21 +++++------------- .../src/edgeless/configs/toolbar/brush.ts | 11 +++------- .../src/edgeless/configs/toolbar/connector.ts | 15 +++++-------- .../src/edgeless/configs/toolbar/frame.ts | 7 ++---- .../src/edgeless/configs/toolbar/shape.ts | 13 +++++------ .../edgeless/configs/toolbar/text-common.ts | 13 +++++------ .../card-style-dropdown-menu/dropdown-menu.ts | 4 +--- .../src/services/toolbar-service/context.ts | 11 +++++----- .../widgets/widget-toolbar/src/toolbar.ts | 22 +++++++++++++++++-- 9 files changed, 54 insertions(+), 63 deletions(-) diff --git a/blocksuite/affine/blocks/block-note/src/configs/toolbar.ts b/blocksuite/affine/blocks/block-note/src/configs/toolbar.ts index da530b70a4..53700cc490 100644 --- a/blocksuite/affine/blocks/block-note/src/configs/toolbar.ts +++ b/blocksuite/affine/blocks/block-note/src/configs/toolbar.ts @@ -15,7 +15,6 @@ import { resolveColor, } from '@blocksuite/affine-model'; import { - FeatureFlagService, NotificationProvider, SidebarExtensionIdentifier, type ToolbarAction, @@ -64,9 +63,7 @@ const builtinSurfaceToolbarConfig = { when(ctx) { return ( ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 && - ctx.std - .get(FeatureFlagService) - .getFlag('enable_advanced_block_visibility') + ctx.features.getFlag('enable_advanced_block_visibility') ); }, content(ctx) { @@ -98,9 +95,7 @@ const builtinSurfaceToolbarConfig = { return ( elements.length === 1 && !elements[0].isPageBlock() && - !ctx.std - .get(FeatureFlagService) - .getFlag('enable_advanced_block_visibility') + !ctx.features.getFlag('enable_advanced_block_visibility') ); }, generate(ctx) { @@ -153,10 +148,8 @@ const builtinSurfaceToolbarConfig = { const models = ctx.getSurfaceModelsByType(NoteBlockModel); if (!models.length) return null; - const enableCustomColor = ctx.std - .get(FeatureFlagService) - .getFlag('enable_color_picker'); - const theme = ctx.themeProvider.edgelessTheme; + const enableCustomColor = ctx.features.getFlag('enable_color_picker'); + const theme = ctx.theme.edgeless$.value; const firstModel = models[0]; const background = @@ -216,7 +209,7 @@ const builtinSurfaceToolbarConfig = { const models = ctx.getSurfaceModelsByType(NoteBlockModel); if (!models.length) return null; - const theme = ctx.themeProvider.edgelessTheme; + const theme = ctx.theme.edgeless$.value; const firstModel = models[0]; const { shadowType } = firstModel.props.edgeless.style; @@ -367,9 +360,7 @@ const builtinSurfaceToolbarConfig = { when(ctx) { return ( ctx.getSurfaceModelsByType(NoteBlockModel).length === 1 && - ctx.std - .get(FeatureFlagService) - .getFlag('enable_advanced_block_visibility') + ctx.features.getFlag('enable_advanced_block_visibility') ); }, run(ctx) { diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts index 8200bccd04..b82691e858 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/brush.ts @@ -9,10 +9,7 @@ import { LineWidth, resolveColor, } from '@blocksuite/affine-model'; -import { - FeatureFlagService, - type ToolbarModuleConfig, -} from '@blocksuite/affine-shared/services'; +import { type ToolbarModuleConfig } from '@blocksuite/affine-shared/services'; import { getMostCommonResolvedValue, getMostCommonValue, @@ -58,10 +55,8 @@ export const builtinBrushToolbarConfig = { const models = ctx.getSurfaceModelsByType(BrushElementModel); if (!models.length) return null; - const enableCustomColor = ctx.std - .get(FeatureFlagService) - .getFlag('enable_color_picker'); - const theme = ctx.themeProvider.edgelessTheme; + const enableCustomColor = ctx.features.getFlag('enable_color_picker'); + const theme = ctx.theme.edgeless$.value; const field = 'color'; const firstModel = models[0]; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts index 88abbcebfa..610ca3ea43 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/connector.ts @@ -21,11 +21,10 @@ import { resolveColor, StrokeStyle, } from '@blocksuite/affine-model'; -import { - FeatureFlagService, - type ToolbarContext, - type ToolbarGenericAction, - type ToolbarModuleConfig, +import type { + ToolbarContext, + ToolbarGenericAction, + ToolbarModuleConfig, } from '@blocksuite/affine-shared/services'; import { getMostCommonResolvedValue, @@ -129,10 +128,8 @@ export const builtinConnectorToolbarConfig = { const models = ctx.getSurfaceModelsByType(ConnectorElementModel); if (!models.length) return null; - const enableCustomColor = ctx.std - .get(FeatureFlagService) - .getFlag('enable_color_picker'); - const theme = ctx.themeProvider.edgelessTheme; + const enableCustomColor = ctx.features.getFlag('enable_color_picker'); + const theme = ctx.theme.edgeless$.value; const field = 'stroke'; const firstModel = models[0]; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts index 94d4f81592..6c46ebd00b 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/frame.ts @@ -16,7 +16,6 @@ import { SurfaceRefBlockSchema, } from '@blocksuite/affine-model'; import { - FeatureFlagService, type ToolbarModuleConfig, ToolbarModuleExtension, } from '@blocksuite/affine-shared/services'; @@ -125,10 +124,8 @@ const builtinSurfaceToolbarConfig = { const models = ctx.getSurfaceModelsByType(FrameBlockModel); if (!models.length) return null; - const theme = ctx.themeProvider.edgelessTheme; - const enableCustomColor = ctx.std - .get(FeatureFlagService) - .getFlag('enable_color_picker'); + const enableCustomColor = ctx.features.getFlag('enable_color_picker'); + const theme = ctx.theme.edgeless$.value; const field = 'background'; const firstModel = models[0]; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts index f8453b5f84..1623d70afb 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/shape.ts @@ -24,10 +24,9 @@ import { ShapeType, StrokeStyle, } from '@blocksuite/affine-model'; -import { - FeatureFlagService, - type ToolbarGenericAction, - type ToolbarModuleConfig, +import type { + ToolbarGenericAction, + ToolbarModuleConfig, } from '@blocksuite/affine-shared/services'; import { getMostCommonValue } from '@blocksuite/affine-shared/utils'; import { Bound } from '@blocksuite/global/gfx'; @@ -184,10 +183,8 @@ export const builtinShapeToolbarConfig = { const models = ctx.getSurfaceModelsByType(ShapeElementModel); if (!models.length) return null; - const enableCustomColor = ctx.std - .get(FeatureFlagService) - .getFlag('enable_color_picker'); - const theme = ctx.themeProvider.edgelessTheme; + const enableCustomColor = ctx.features.getFlag('enable_color_picker'); + const theme = ctx.theme.edgeless$.value; const firstModel = models[0]; const originalFillColor = firstModel.fillColor; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts index 50a584f5ce..2264958f23 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/configs/toolbar/text-common.ts @@ -16,10 +16,9 @@ import { TextAlign, type TextStyleProps, } from '@blocksuite/affine-model'; -import { - FeatureFlagService, - type ToolbarActions, - type ToolbarContext, +import type { + ToolbarActions, + ToolbarContext, } from '@blocksuite/affine-shared/services'; import { getMostCommonResolvedValue, @@ -180,10 +179,8 @@ export function createTextActions< ); if (!allowed) return null; - const enableCustomColor = ctx.std - .get(FeatureFlagService) - .getFlag('enable_color_picker'); - const theme = ctx.themeProvider.edgelessTheme; + const enableCustomColor = ctx.features.getFlag('enable_color_picker'); + const theme = ctx.theme.edgeless$.value; const palettes = type === 'shape' diff --git a/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts b/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts index b470e178cd..fb37d49478 100644 --- a/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts +++ b/blocksuite/affine/components/src/card-style-dropdown-menu/dropdown-menu.ts @@ -62,9 +62,7 @@ export class CardStyleDropdownMenu extends SignalWatcher(LitElement) { @property({ attribute: false }) accessor style$!: Signal | ReadonlySignal; - icons$ = computed( - () => cardStyleMap[this.context.themeProvider.theme$.value] - ); + icons$ = computed(() => cardStyleMap[this.context.theme.theme$.value]); override render() { const { diff --git a/blocksuite/affine/shared/src/services/toolbar-service/context.ts b/blocksuite/affine/shared/src/services/toolbar-service/context.ts index 617c1c13ac..b4d0723e0b 100644 --- a/blocksuite/affine/shared/src/services/toolbar-service/context.ts +++ b/blocksuite/affine/shared/src/services/toolbar-service/context.ts @@ -18,6 +18,7 @@ import type { import { DocModeProvider } from '../doc-mode-service'; import { EditPropsStore } from '../edit-props-store'; +import { FeatureFlagService } from '../feature-flag-service'; import { TelemetryProvider, type TelemetryService } from '../telemetry-service'; import { ThemeProvider } from '../theme-service'; import { ToolbarRegistryIdentifier } from './registry'; @@ -98,18 +99,18 @@ abstract class ToolbarContextBase { return this.std.get(GfxControllerIdentifier); } - get themeProvider() { - return this.std.get(ThemeProvider); - } - get theme() { - return this.themeProvider.theme; + return this.std.get(ThemeProvider); } get settings() { return this.std.get(EditPropsStore); } + get features() { + return this.std.get(FeatureFlagService); + } + get toolbarRegistry() { return this.std.get(ToolbarRegistryIdentifier); } diff --git a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts index 181dcc5643..c6ccc2d161 100644 --- a/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts +++ b/blocksuite/affine/widgets/widget-toolbar/src/toolbar.ts @@ -1,7 +1,11 @@ import { DatabaseSelection } from '@blocksuite/affine-block-database'; import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { TableSelection } from '@blocksuite/affine-block-table'; -import { EditorToolbar } from '@blocksuite/affine-components/toolbar'; +import { + darkToolbarStyles, + EditorToolbar, + lightToolbarStyles, +} from '@blocksuite/affine-components/toolbar'; import { CodeBlockModel, ImageBlockModel, @@ -34,7 +38,7 @@ import { import { nextTick } from '@blocksuite/global/utils'; import type { Placement, ReferenceElement, SideObject } from '@floating-ui/dom'; import { batch, effect, signal } from '@preact/signals-core'; -import { css } from 'lit'; +import { css, unsafeCSS } from 'lit'; import groupBy from 'lodash-es/groupBy'; import throttle from 'lodash-es/throttle'; import toPairs from 'lodash-es/toPairs'; @@ -71,6 +75,13 @@ export class AffineToolbarWidget extends WidgetComponent { opacity: 0; } } + + editor-toolbar[data-app-theme='dark'] { + ${unsafeCSS(darkToolbarStyles.join('\n'))} + } + editor-toolbar[data-app-theme='light'] { + ${unsafeCSS(lightToolbarStyles.join('\n'))} + } `; placement$ = signal('top'); @@ -564,6 +575,13 @@ export class AffineToolbarWidget extends WidgetComponent { }) ); + // Updates toolbar theme when `app-theme` changing + disposables.add( + context.theme.app$.subscribe(theme => { + toolbar.dataset.appTheme = theme; + }) + ); + disposables.add( effect(() => { const value = flags.value$.value;