feat(editor): add feature flag service (#9592)

2026-02-15 05:37:32 +00:00 · 2025-01-08 15:46:31 +00:00
parent fd26b72255
commit 3683297ccf
55 changed files with 283 additions and 188 deletions
--- a/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/auto-complete/auto-complete-panel.ts
@@ -26,6 +26,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
  EditPropsStore,
+  FeatureFlagService,
  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import { captureEventTarget } from '@blocksuite/affine-shared/utils';
@@ -249,9 +250,9 @@ export class EdgelessAutoCompletePanel extends WithDisposable(LitElement) {
    const { xywh, position } = target;
    const bound = Bound.fromXYWH(xywh);

-    const textFlag = this.edgeless.doc.awarenessStore.getFlag(
-      'enable_edgeless_text'
-    );
+    const textFlag = this.edgeless.doc
+      .get(FeatureFlagService)
+      .getFlag('enable_edgeless_text');
    if (textFlag) {
      const { textId } = this.edgeless.std.command.exec('insertEdgelessText', {
        x: bound.x,
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/brush/brush-menu.ts
@@ -1,6 +1,7 @@
 import { DefaultTheme } from '@blocksuite/affine-model';
 import {
  EditPropsStore,
+  FeatureFlagService,
  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
@@ -65,9 +66,9 @@ export class EdgelessBrushMenu extends EdgelessToolbarToolMixin(
            .value=${this._props$.value.color}
            .theme=${this._theme$.value}
            .palettes=${DefaultTheme.StrokeColorPalettes}
-            .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
-              'enable_color_picker'
-            )}
+            .hasTransparent=${!this.edgeless.doc
+              .get(FeatureFlagService)
+              .getFlag('enable_color_picker')}
            @select=${(e: ColorEvent) =>
              this.onChange({ color: e.detail.value })}
          ></edgeless-color-panel>
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/connector/connector-menu.ts
@@ -6,6 +6,7 @@ import {
 import { ConnectorMode, DefaultTheme } from '@blocksuite/affine-model';
 import {
  EditPropsStore,
+  FeatureFlagService,
  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
@@ -130,9 +131,9 @@ export class EdgelessConnectorMenu extends EdgelessToolbarToolMixin(
            .value=${stroke}
            .theme=${this._theme$.value}
            .palettes=${DefaultTheme.StrokeColorPalettes}
-            .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
-              'enable_color_picker'
-            )}
+            .hasTransparent=${!this.edgeless.doc
+              .get(FeatureFlagService)
+              .getFlag('enable_color_picker')}
            @select=${(e: ColorEvent) =>
              this.onChange({ stroke: e.detail.value })}
          ></edgeless-color-panel>
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/basket-elements.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/basket-elements.ts
@@ -1,6 +1,9 @@
 import { CanvasElementType } from '@blocksuite/affine-block-surface';
 import { type MindmapStyle, TextElementModel } from '@blocksuite/affine-model';
-import { TelemetryProvider } from '@blocksuite/affine-shared/services';
+import {
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import { assertInstanceOf, Bound } from '@blocksuite/global/utils';
 import type { TemplateResult } from 'lit';
 import * as Y from 'yjs';
@@ -103,7 +106,9 @@ export const textRender: DraggableTool['render'] = (
  const w = 100;
  const h = 32;

-  const flag = edgeless.doc.awarenessStore.getFlag('enable_edgeless_text');
+  const flag = edgeless.doc
+    .get(FeatureFlagService)
+    .getFlag('enable_edgeless_text');
  let id: string;
  if (flag) {
    const { textId } = edgeless.std.command.exec('insertEdgelessText', {
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/mindmap-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/mindmap/mindmap-menu.ts
@@ -2,6 +2,7 @@ import { toast } from '@blocksuite/affine-components/toast';
 import type { MindmapStyle } from '@blocksuite/affine-model';
 import {
  EditPropsStore,
+  FeatureFlagService,
  TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
 import type { BlockStdScope } from '@blocksuite/block-std';
@@ -316,7 +317,7 @@ export class EdgelessMindmapMenu extends EdgelessToolbarToolMixin(
            </div>
          `;
        })}
-        ${this.std.doc.awarenessStore.getFlag('enable_mind_map_import')
+        ${this.std.doc.get(FeatureFlagService).getFlag('enable_mind_map_import')
          ? this._importMindMapEntry()
          : nothing}
      </div>
--- a/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/components/toolbar/shape/shape-menu.ts
@@ -12,6 +12,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
  EditPropsStore,
+  FeatureFlagService,
  ThemeProvider,
 } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
@@ -173,9 +174,9 @@ export class EdgelessShapeMenu extends SignalWatcher(
            .value=${fillColor}
            .theme=${this._theme$.value}
            .palettes=${DefaultTheme.FillColorPalettes}
-            .hasTransparent=${!this.edgeless.doc.awarenessStore.getFlag(
-              'enable_color_picker'
-            )}
+            .hasTransparent=${!this.edgeless.doc
+              .get(FeatureFlagService)
+              .getFlag('enable_color_picker')}
            @select=${(e: ColorEvent) => this._setFillColor(e.detail)}
          ></edgeless-color-panel>
        </div>
--- a/blocksuite/blocks/src/root-block/edgeless/edgeless-keyboard.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/edgeless-keyboard.ts
@@ -12,6 +12,7 @@ import {
 } from '@blocksuite/affine-model';
 import {
  EditPropsStore,
+  FeatureFlagService,
  TelemetryProvider,
 } from '@blocksuite/affine-shared/services';
 import { LassoMode } from '@blocksuite/affine-shared/types';
@@ -72,7 +73,11 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
          this._setEdgelessTool('connector', { mode });
        },
        l: () => {
-          if (!rootComponent.doc.awarenessStore.getFlag('enable_lasso_tool')) {
+          if (
+            !rootComponent.doc
+              .get(FeatureFlagService)
+              .getFlag('enable_lasso_tool')
+          ) {
            return;
          }

@@ -81,7 +86,11 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
          });
        },
        'Shift-l': () => {
-          if (!rootComponent.doc.awarenessStore.getFlag('enable_lasso_tool')) {
+          if (
+            !rootComponent.doc
+              .get(FeatureFlagService)
+              .getFlag('enable_lasso_tool')
+          ) {
            return;
          }
          // toggle between lasso modes
--- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/default-tool.ts
@@ -15,7 +15,10 @@ import {
  ShapeElementModel,
  TextElementModel,
 } from '@blocksuite/affine-model';
-import { TelemetryProvider } from '@blocksuite/affine-shared/services';
+import {
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import {
  clamp,
  handleNativeRangeAtPoint,
@@ -783,7 +786,9 @@ export class DefaultTool extends BaseTool {
    }

    if (!selected) {
-      const textFlag = this.doc.awarenessStore.getFlag('enable_edgeless_text');
+      const textFlag = this.doc
+        .get(FeatureFlagService)
+        .getFlag('enable_edgeless_text');

      if (textFlag) {
        const [x, y] = this.gfx.viewport.toModelCoord(e.x, e.y);
--- a/blocksuite/blocks/src/root-block/edgeless/gfx-tool/text-tool.ts
+++ b/blocksuite/blocks/src/root-block/edgeless/gfx-tool/text-tool.ts
@@ -1,5 +1,8 @@
 import type { TextElementModel } from '@blocksuite/affine-model';
-import { TelemetryProvider } from '@blocksuite/affine-shared/services';
+import {
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import type { PointerEventState } from '@blocksuite/block-std';
 import { BaseTool, type GfxController } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/utils';
@@ -38,9 +41,9 @@ export class TextTool extends BaseTool {
  static override toolName: string = 'text';

  override click(e: PointerEventState): void {
-    const textFlag = this.gfx.doc.awarenessStore.getFlag(
-      'enable_edgeless_text'
-    );
+    const textFlag = this.gfx.doc
+      .get(FeatureFlagService)
+      .getFlag('enable_edgeless_text');

    if (textFlag) {
      const [x, y] = this.gfx.viewport.toModelCoord(e.x, e.y);
--- a/blocksuite/blocks/src/root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.ts
+++ b/blocksuite/blocks/src/root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.ts
@@ -12,6 +12,7 @@ import {
  type RootBlockModel,
  type SurfaceRefBlockModel,
 } from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import {
  matchFlavours,
  stopPropagation,
@@ -555,9 +556,9 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
  }

  override render() {
-    const advancedVisibilityEnabled = this.doc.awarenessStore.getFlag(
-      'enable_advanced_block_visibility'
-    );
+    const advancedVisibilityEnabled = this.doc
+      .get(FeatureFlagService)
+      .getFlag('enable_advanced_block_visibility');

    if (!this._show || this._dragging || !advancedVisibilityEnabled) {
      return nothing;
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-brush-button.ts
@@ -17,6 +17,7 @@ import {
  LineWidth,
  resolveColor,
 } from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing } from 'lit';
@@ -120,7 +121,9 @@ export class EdgelessChangeBrushButton extends WithDisposable(LitElement) {
      <editor-toolbar-separator></editor-toolbar-separator>

      ${when(
-        this.edgeless.doc.awarenessStore.getFlag('enable_color_picker'),
+        this.edgeless.doc
+          .get(FeatureFlagService)
+          .getFlag('enable_color_picker'),
        () => {
          const { type, colors } = packColorsWithColorScheme(
            colorScheme,
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-connector-button.ts
@@ -42,6 +42,7 @@ import {
  resolveColor,
  StrokeStyle,
 } from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { html, LitElement, nothing, type TemplateResult } from 'lit';
@@ -361,7 +362,9 @@ export class EdgelessChangeConnectorButton extends WithDisposable(LitElement) {
    return join(
      [
        when(
-          this.edgeless.doc.awarenessStore.getFlag('enable_color_picker'),
+          this.edgeless.doc
+            .get(FeatureFlagService)
+            .getFlag('enable_color_picker'),
          () => {
            const { type, colors } = packColorsWithColorScheme(
              colorScheme,
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-embed-card-button.ts
@@ -40,6 +40,7 @@ import {
 import {
  EmbedOptionProvider,
  type EmbedOptions,
+  FeatureFlagService,
  GenerateDocUrlProvider,
  type GenerateDocUrlService,
  type LinkEventType,
@@ -390,9 +391,9 @@ export class EdgelessChangeEmbedCardButton extends WithDisposable(LitElement) {

    // synced doc entry controlled by awareness flag
    if (!!block && isEmbedLinkedDocBlock(block.model)) {
-      const isSyncedDocEnabled = block.doc.awarenessStore.getFlag(
-        'enable_synced_doc_block'
-      );
+      const isSyncedDocEnabled = block.doc
+        .get(FeatureFlagService)
+        .getFlag('enable_synced_doc_block');
      if (!isSyncedDocEnabled) {
        return false;
      }
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-frame-button.ts
@@ -22,6 +22,7 @@ import {
  NoteDisplayMode,
  resolveColor,
 } from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import { GfxExtensionIdentifier } from '@blocksuite/block-std/gfx';
@@ -190,7 +191,9 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
        `,

        when(
-          this.edgeless.doc.awarenessStore.getFlag('enable_color_picker'),
+          this.edgeless.doc
+            .get(FeatureFlagService)
+            .getFlag('enable_color_picker'),
          () => {
            const { type, colors } = packColorsWithColorScheme(
              colorScheme,
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-note-button.ts
@@ -28,7 +28,10 @@ import {
  resolveColor,
  type StrokeStyle,
 } from '@blocksuite/affine-model';
-import { ThemeProvider } from '@blocksuite/affine-shared/services';
+import {
+  FeatureFlagService,
+  ThemeProvider,
+} from '@blocksuite/affine-shared/services';
 import { matchFlavours } from '@blocksuite/affine-shared/utils';
 import {
  assertExists,
@@ -133,7 +136,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
  };

  private get _advancedVisibilityEnabled() {
-    return this.doc.awarenessStore.getFlag('enable_advanced_block_visibility');
+    return this.doc
+      .get(FeatureFlagService)
+      .getFlag('enable_advanced_block_visibility');
  }

  private get doc() {
@@ -301,7 +306,9 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
      isDocOnly
        ? nothing
        : when(
-            this.edgeless.doc.awarenessStore.getFlag('enable_color_picker'),
+            this.edgeless.doc
+              .get(FeatureFlagService)
+              .getFlag('enable_color_picker'),
            () => {
              const { type, colors } = packColorsWithColorScheme(
                colorScheme,
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-shape-button.ts
@@ -34,6 +34,7 @@ import {
  ShapeStyle,
  StrokeStyle,
 } from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { countBy, maxBy, WithDisposable } from '@blocksuite/global/utils';
 import { css, html, LitElement, nothing, type TemplateResult } from 'lit';
@@ -317,7 +318,9 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
        `,

        when(
-          this.edgeless.doc.awarenessStore.getFlag('enable_color_picker'),
+          this.edgeless.doc
+            .get(FeatureFlagService)
+            .getFlag('enable_color_picker'),
          () => {
            const { type, colors } = packColorsWithColorScheme(
              colorScheme,
@@ -367,7 +370,9 @@ export class EdgelessChangeShapeButton extends WithDisposable(LitElement) {
        ),

        when(
-          this.edgeless.doc.awarenessStore.getFlag('enable_color_picker'),
+          this.edgeless.doc
+            .get(FeatureFlagService)
+            .getFlag('enable_color_picker'),
          () => {
            const { type, colors } = packColorsWithColorScheme(
              colorScheme,
--- a/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
+++ b/blocksuite/blocks/src/root-block/widgets/element-toolbar/change-text-menu.ts
@@ -33,6 +33,7 @@ import {
  TextElementModel,
  type TextStyleProps,
 } from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import {
  Bound,
@@ -372,7 +373,9 @@ export class EdgelessChangeTextMenu extends WithDisposable(LitElement) {
        `,

        when(
-          this.edgeless.doc.awarenessStore.getFlag('enable_color_picker'),
+          this.edgeless.doc
+            .get(FeatureFlagService)
+            .getFlag('enable_color_picker'),
          () => {
            const { type, colors } = packColorsWithColorScheme(
              colorScheme,
--- a/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts
+++ b/blocksuite/blocks/src/root-block/widgets/embed-card-toolbar/embed-card-toolbar.ts
@@ -44,6 +44,7 @@ import {
 import {
  EmbedOptionProvider,
  type EmbedOptions,
+  FeatureFlagService,
  GenerateDocUrlProvider,
  type GenerateDocUrlService,
  type LinkEventType,
@@ -203,9 +204,9 @@ export class EmbedCardToolbar extends WidgetComponent<
  private get _canConvertToEmbedView() {
    // synced doc entry controlled by awareness flag
    if (this.focusModel && isEmbedLinkedDocBlock(this.focusModel)) {
-      const isSyncedDocEnabled = this.doc.awarenessStore.getFlag(
-        'enable_synced_doc_block'
-      );
+      const isSyncedDocEnabled = this.doc
+        .get(FeatureFlagService)
+        .getFlag('enable_synced_doc_block');
      if (!isSyncedDocEnabled) {
        return false;
      }
--- a/blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/index.ts
+++ b/blocksuite/blocks/src/root-block/widgets/keyboard-toolbar/index.ts
@@ -1,4 +1,5 @@
 import type { RootBlockModel } from '@blocksuite/affine-model';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { WidgetComponent } from '@blocksuite/block-std';
 import { IS_MOBILE } from '@blocksuite/global/env';
 import { assertType } from '@blocksuite/global/utils';
@@ -71,7 +72,9 @@ export class AffineKeyboardToolbarWidget extends WidgetComponent<
    if (
      this.doc.readonly ||
      !IS_MOBILE ||
-      !this.doc.awarenessStore.getFlag('enable_mobile_keyboard_toolbar')
+      !this.doc
+        .get(FeatureFlagService)
+        .getFlag('enable_mobile_keyboard_toolbar')
    )
      return nothing;

--- a/blocksuite/blocks/src/root-block/widgets/linked-doc/index.ts
+++ b/blocksuite/blocks/src/root-block/widgets/linked-doc/index.ts
@@ -3,6 +3,7 @@ import {
  getRangeRects,
  type SelectionRect,
 } from '@blocksuite/affine-shared/commands';
+import { FeatureFlagService } from '@blocksuite/affine-shared/services';
 import { getViewportElement } from '@blocksuite/affine-shared/utils';
 import type { BlockComponent } from '@blocksuite/block-std';
 import { BLOCK_ID_ATTR, WidgetComponent } from '@blocksuite/block-std';
@@ -256,9 +257,9 @@ export class AffineLinkedDocWidget extends WidgetComponent<
      },
    };

-    const enableMobile = this.doc.awarenessStore.getFlag(
-      'enable_mobile_linked_doc_menu'
-    );
+    const enableMobile = this.doc
+      .get(FeatureFlagService)
+      .getFlag('enable_mobile_linked_doc_menu');
    this._mode$.value = enableMobile ? mode : 'desktop';
  }

--- a/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts
+++ b/blocksuite/blocks/src/root-block/widgets/slash-menu/config.ts
@@ -39,7 +39,10 @@ import type {
  ParagraphBlockModel,
 } from '@blocksuite/affine-model';
 import { REFERENCE_NODE } from '@blocksuite/affine-shared/consts';
-import { TelemetryProvider } from '@blocksuite/affine-shared/services';
+import {
+  FeatureFlagService,
+  TelemetryProvider,
+} from '@blocksuite/affine-shared/services';
 import {
  createDefaultDoc,
  openFileOrFiles,
@@ -574,7 +577,7 @@ export const defaultSlashMenuConfig: SlashMenuConfig = {
      showWhen: ({ model }) =>
        model.doc.schema.flavourSchemaMap.has('affine:database') &&
        !insideEdgelessText(model) &&
-        !!model.doc.awarenessStore.getFlag('enable_block_query'),
+        !!model.doc.get(FeatureFlagService).getFlag('enable_block_query'),

      action: ({ model, rootComponent }) => {
        const parent = rootComponent.doc.getParent(model);