feat(core): move blocksuite flags to experimental features (#6113)

packages/frontend/core/.webpack/runtime-config.ts

@@ -1,16 +1,10 @@
-import type { BlockSuiteFeatureFlags, RuntimeConfig } from '@affine/env/global';
+import type { RuntimeConfig } from '@affine/env/global';
 import type { BuildFlags } from '@affine/cli/config';
 import { createRequire } from 'node:module';
 
 const require = createRequire(import.meta.url);
 const packageJson = require('../package.json');
 
-const editorFlags: BlockSuiteFeatureFlags = {
-  enable_synced_doc_block: true,
-  enable_expand_database_block: false,
-  enable_bultin_ledits: false,
-};
-
 export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
   const buildPreset: Record<BuildFlags['channel'], RuntimeConfig> = {
     stable: {
@@ -35,7 +29,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enablePageHistory: true,
       allowLocalWorkspace: false,
       serverUrlPrefix: 'https://app.affine.pro',
-      editorFlags,
       appVersion: packageJson.version,
       editorVersion: packageJson.dependencies['@blocksuite/presets'],
       appBuildType: 'stable',
@@ -78,7 +71,6 @@ export function getRuntimeConfig(buildFlags: BuildFlags): RuntimeConfig {
       enablePageHistory: true,
       allowLocalWorkspace: false,
       serverUrlPrefix: 'https://affine.fail',
-      editorFlags,
       appVersion: packageJson.version,
       editorVersion: packageJson.dependencies['@blocksuite/presets'],
       appBuildType: 'canary',

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.css.ts

@@ -39,6 +39,13 @@ export const promptDisclaimer = style({
   marginBottom: 32,
   gap: 4,
 });
+
+export const settingsContainer = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 24,
+});
+
 export const promptDisclaimerConfirm = style({
   display: 'flex',
   justifyContent: 'center',
@@ -47,9 +54,13 @@ export const switchRow = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  marginBottom: 32,
 });
 export const switchDisabled = style({
   opacity: 0.5,
   pointerEvents: 'none',
 });
+export const subHeader = style({
+  fontWeight: '600',
+  color: cssVar('textSecondaryColor'),
+  marginBottom: 8,
+});

packages/frontend/core/src/components/affine/setting-modal/workspace-setting/experimental-features/index.tsx

@@ -168,6 +168,43 @@ const SplitViewSettingRow = () => {
   );
 };
 
+// feature flag -> display name
+const blocksuiteFeatureFlags: Partial<Record<keyof BlockSuiteFlags, string>> = {
+  enable_synced_doc_block: 'Enable Synced Doc Block',
+  enable_expand_database_block: 'Enable Expand Database Block',
+  enable_bultin_ledits: 'Edit with LEDITS',
+};
+
+const BlocksuiteFeatureFlagSettings = () => {
+  const { appSettings, updateSettings } = useAppSettingHelper();
+  const toggleSetting = useCallback(
+    (flag: keyof BlockSuiteFlags, checked: boolean) => {
+      updateSettings('editorFlags', {
+        ...appSettings.editorFlags,
+        [flag]: checked,
+      });
+    },
+    [appSettings.editorFlags, updateSettings]
+  );
+
+  type EditorFlag = keyof typeof appSettings.editorFlags;
+
+  return (
+    <>
+      {Object.entries(blocksuiteFeatureFlags).map(([flag, displayName]) => (
+        <ExperimentalFeaturesItem
+          key={flag}
+          title={'Block Suite: ' + displayName}
+          checked={!!appSettings.editorFlags?.[flag as EditorFlag]}
+          onChange={checked =>
+            toggleSetting(flag as keyof BlockSuiteFlags, checked)
+          }
+        />
+      ))}
+    </>
+  );
+};
+
 const ExperimentalFeaturesMain = ({
   workspaceMetadata,
 }: {
@@ -182,8 +219,11 @@ const ExperimentalFeaturesMain = ({
           'com.affine.settings.workspace.experimental-features.header.plugins'
         ]()}
       />
-      <CopilotSettingRow workspaceMetadata={workspaceMetadata} />
-      <SplitViewSettingRow />
+      <div className={styles.settingsContainer}>
+        <CopilotSettingRow workspaceMetadata={workspaceMetadata} />
+        <SplitViewSettingRow />
+        <BlocksuiteFeatureFlagSettings />
+      </div>
     </>
   );
 };