chore(editor): add edgeless scribbled style feature flag (#11127)

Closes: [BS-2805](https://linear.app/affine-design/issue/BS-2805/下掉线条样式切换功能，需添加-feature-flag)

blocksuite/affine/gfx/connector/src/toolbar/config.ts

@@ -209,8 +209,7 @@ export const connectorToolbarConfig = {
     },
     {
       id: 'b.style',
-      // TODO(@fundon): should add a feature flag
-      when: false,
+      when: ctx => ctx.features.getFlag('enable_edgeless_scribbled_style'),
       content(ctx) {
         const models = ctx.getSurfaceModelsByType(ConnectorElementModel);
         if (!models.length) return null;

blocksuite/affine/gfx/shape/src/toolbar/config.ts

@@ -112,6 +112,12 @@ export const shapeToolbarConfig = {
         const models = ctx.getSurfaceModelsByType(ShapeElementModel);
         if (!models.length) return null;
 
+        const shapeStyle = ctx.features.getFlag(
+          'enable_edgeless_scribbled_style'
+        )
+          ? (getMostCommonValue(models, 'shapeStyle') ?? ShapeStyle.General)
+          : ShapeStyle.General;
+
         const shapeName =
           getMostCommonValue<ShapeToolOption, 'shapeName'>(
             models.map(model => ({
@@ -139,8 +145,10 @@ export const shapeToolbarConfig = {
           items: ShapeComponentConfig.map(item => ({
             key: item.tooltip,
             value: item.name,
-            // TODO(@fundon): should add a feature flag to switch style
-            icon: item.generalIcon,
+            icon:
+              shapeStyle === ShapeStyle.General
+                ? item.generalIcon
+                : item.scribbledIcon,
             disabled: item.disabled,
           })),
           currentValue: shapeName,
@@ -150,8 +158,7 @@ export const shapeToolbarConfig = {
     },
     {
       id: 'd.style',
-      // TODO(@fundon): should add a feature flag
-      when: false,
+      when: ctx => ctx.features.getFlag('enable_edgeless_scribbled_style'),
       content(ctx) {
         const models = ctx.getSurfaceModelsByType(ShapeElementModel);
         if (!models.length) return null;

blocksuite/affine/shared/src/services/feature-flag-service.ts

@@ -19,6 +19,7 @@ export interface BlockSuiteFlags {
   enable_block_meta: boolean;
   enable_callout: boolean;
   enable_embed_iframe_block: boolean;
+  enable_edgeless_scribbled_style: boolean;
 }
 
 export class FeatureFlagService extends StoreExtension {
@@ -42,6 +43,7 @@ export class FeatureFlagService extends StoreExtension {
     enable_block_meta: false,
     enable_callout: false,
     enable_embed_iframe_block: false,
+    enable_edgeless_scribbled_style: false,
   });
 
   setFlag(key: keyof BlockSuiteFlags, value: boolean) {

packages/frontend/core/src/modules/feature-flag/constant.ts

@@ -264,6 +264,16 @@ export const AFFINE_FLAGS = {
     configurable: isCanaryBuild,
     defaultState: false,
   },
+  enable_edgeless_scribbled_style: {
+    category: 'blocksuite',
+    bsFlag: 'enable_edgeless_scribbled_style',
+    displayName:
+      'com.affine.settings.workspace.experimental-features.enable-edgeless-scribbled-style.name',
+    description:
+      'com.affine.settings.workspace.experimental-features.enable-edgeless-scribbled-style.description',
+    configurable: isCanaryBuild,
+    defaultState: false,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 // oxlint-disable-next-line no-redeclare

packages/frontend/i18n/src/i18n.gen.ts

@@ -5583,6 +5583,14 @@ export function useAFFiNEI18N(): {
       * `Once enabled, the editor will be displayed in RTL mode.`
       */
     ["com.affine.settings.workspace.experimental-features.enable-editor-rtl.description"](): string;
+    /**
+      * `Edgeless scribbled style`
+      */
+    ["com.affine.settings.workspace.experimental-features.enable-edgeless-scribbled-style.name"](): string;
+    /**
+      * `Once enabled, you can use scribbled style in edgeless mode.`
+      */
+    ["com.affine.settings.workspace.experimental-features.enable-edgeless-scribbled-style.description"](): string;
     /**
       * `Only an owner can edit the workspace avatar and name. Changes will be shown for everyone.`
       */

packages/frontend/i18n/src/resources/en.json

@@ -1392,6 +1392,8 @@
   "com.affine.settings.workspace.experimental-features.enable-audio-block.description": "Audio block allows you to play audio files globally and add notes to them.",
   "com.affine.settings.workspace.experimental-features.enable-editor-rtl.name": "Editor RTL",
   "com.affine.settings.workspace.experimental-features.enable-editor-rtl.description": "Once enabled, the editor will be displayed in RTL mode.",
+  "com.affine.settings.workspace.experimental-features.enable-edgeless-scribbled-style.name": "Edgeless scribbled style",
+  "com.affine.settings.workspace.experimental-features.enable-edgeless-scribbled-style.description": "Once enabled, you can use scribbled style in edgeless mode.",
   "com.affine.settings.workspace.not-owner": "Only an owner can edit the workspace avatar and name. Changes will be shown for everyone.",
   "com.affine.settings.workspace.preferences": "Preference",
   "com.affine.settings.workspace.billing": "Team's Billing",