feat(editor): add feature flag for code block html preview (#12397)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced an experimental "Code block HTML preview" feature, allowing users to preview HTML within code blocks when enabled.
- **Settings**
  - Added a toggle in experimental features to enable or disable the code block HTML preview.
- **Localization**
  - Added English translations for the new code block HTML preview feature and its description in workspace settings.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx

@@ -171,7 +171,8 @@ const usePreviewExtensions = () => {
       .database(framework)
       .linkedDoc(framework)
       .paragraph(enableAI)
-      .linkPreview(framework).value;
+      .linkPreview(framework)
+      .codeBlockHtmlPreview(framework).value;
     const specs = manager.get('preview-page');
     return [...specs, patchReferenceRenderer(reactToLit, referenceRenderer)];
   }, [reactToLit, referenceRenderer, framework, enableAI]);

packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx

@@ -102,7 +102,8 @@ const usePatchSpecs = (mode: DocMode) => {
       .paragraph(enableAI)
       .mobile(framework)
       .electron(framework)
-      .linkPreview(framework).value;
+      .linkPreview(framework)
+      .codeBlockHtmlPreview(framework).value;
 
     if (BUILD_CONFIG.isMobileEdition) {
       if (mode === 'page') {

packages/frontend/core/src/blocksuite/manager/view.ts

@@ -55,6 +55,7 @@ type Configure = {
   ai: (enable?: boolean, framework?: FrameworkProvider) => Configure;
   electron: (framework?: FrameworkProvider) => Configure;
   linkPreview: (framework?: FrameworkProvider) => Configure;
+  codeBlockHtmlPreview: (framework?: FrameworkProvider) => Configure;
 
   value: ViewExtensionManager;
 };
@@ -114,6 +115,7 @@ class ViewProvider {
       ai: this._configureAI,
       electron: this._configureElectron,
       linkPreview: this._configureLinkPreview,
+      codeBlockHtmlPreview: this._configureCodeBlockHtmlPreview,
       value: this._manager,
     };
   }
@@ -134,7 +136,8 @@ class ViewProvider {
       .mobile()
       .ai()
       .electron()
-      .linkPreview();
+      .linkPreview()
+      .codeBlockHtmlPreview();
 
     return this.config;
   };
@@ -313,6 +316,13 @@ class ViewProvider {
     this._manager.configure(AffineLinkPreviewExtension, { framework });
     return this.config;
   };
+
+  private readonly _configureCodeBlockHtmlPreview = (
+    framework?: FrameworkProvider
+  ) => {
+    this._manager.configure(CodeBlockPreviewViewExtension, { framework });
+    return this.config;
+  };
 }
 
 export function getViewManager() {

packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/index.ts

@@ -1,25 +1,43 @@
+import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import {
   type ViewExtensionContext,
   ViewExtensionProvider,
 } from '@blocksuite/affine/ext-loader';
+import { FrameworkProvider } from '@toeverything/infra';
+import { z } from 'zod';
 
 import {
   CodeBlockHtmlPreview,
   effects as htmlPreviewEffects,
 } from './html-preview';
 
+const optionsSchema = z.object({
+  framework: z.instanceof(FrameworkProvider).optional(),
+});
+
 export class CodeBlockPreviewViewExtension extends ViewExtensionProvider {
   override name = 'code-block-preview';
 
+  override schema = optionsSchema;
+
   override effect() {
     super.effect();
 
     htmlPreviewEffects();
   }
 
-  override setup(context: ViewExtensionContext) {
+  override setup(
-    super.setup(context);
+    context: ViewExtensionContext,
+    options?: z.infer<typeof optionsSchema>
+  ) {
+    super.setup(context, options);
 
+    const framework = options?.framework;
+    if (!framework) return;
+    const flag =
+      framework.get(FeatureFlagService).flags.enable_code_block_html_preview.$
+        .value;
+    if (!flag) return;
     context.register(CodeBlockHtmlPreview);
   }
 }

packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx

@@ -61,7 +61,8 @@ export const EdgelessSnapshot = (props: Props) => {
       .foundation(framework)
       .theme(framework)
       .database(framework)
-      .linkedDoc(framework).value;
+      .linkedDoc(framework)
+      .codeBlockHtmlPreview(framework).value;
     return manager
       .get('preview-edgeless')
       .concat([ViewportElementExtension('.ref-viewport')]);

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

@@ -325,6 +325,15 @@ export const AFFINE_FLAGS = {
     configurable: isBetaBuild || isCanaryBuild,
     defaultState: false,
   },
+  enable_code_block_html_preview: {
+    category: 'affine',
+    displayName:
+      'com.affine.settings.workspace.experimental-features.enable-code-block-html-preview.name',
+    description:
+      'com.affine.settings.workspace.experimental-features.enable-code-block-html-preview.description',
+    configurable: isCanaryBuild,
+    defaultState: true,
+  },
 } satisfies { [key in string]: FlagInfo };
 
 // oxlint-disable-next-line no-redeclare

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

@@ -5882,6 +5882,14 @@ export function useAFFiNEI18N(): {
       * `Once enabled, switch table view to virtual scroll mode in Database Block.`
       */
     ["com.affine.settings.workspace.experimental-features.enable-table-virtual-scroll.description"](): string;
+    /**
+      * `Code block HTML preview`
+      */
+    ["com.affine.settings.workspace.experimental-features.enable-code-block-html-preview.name"](): string;
+    /**
+      * `Once enabled, you can preview HTML in code block.`
+      */
+    ["com.affine.settings.workspace.experimental-features.enable-code-block-html-preview.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

@@ -1469,6 +1469,8 @@
   "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.experimental-features.enable-table-virtual-scroll.name": "Database block table view virtual scroll",
   "com.affine.settings.workspace.experimental-features.enable-table-virtual-scroll.description": "Once enabled, switch table view to virtual scroll mode in Database Block.",
+  "com.affine.settings.workspace.experimental-features.enable-code-block-html-preview.name": "Code block HTML preview",
+  "com.affine.settings.workspace.experimental-features.enable-code-block-html-preview.description": "Once enabled, you can preview HTML in code block.",
   "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",