From 2de15e267783ad305a012f4ad871bedffa8f2258 Mon Sep 17 00:00:00 2001 From: Flrande <1978616327@qq.com> Date: Wed, 21 May 2025 07:52:24 +0000 Subject: [PATCH] feat(editor): add feature flag for code block html preview (#12397) ## 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. --- .../bi-directional-link-panel.tsx | 3 ++- .../block-suite-editor/lit-adaper.tsx | 3 ++- .../core/src/blocksuite/manager/view.ts | 12 +++++++++- .../code-block-preview/index.ts | 22 +++++++++++++++++-- .../editor/edgeless/snapshot.tsx | 3 ++- .../core/src/modules/feature-flag/constant.ts | 9 ++++++++ packages/frontend/i18n/src/i18n.gen.ts | 8 +++++++ packages/frontend/i18n/src/resources/en.json | 2 ++ 8 files changed, 56 insertions(+), 6 deletions(-) diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx b/packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx index eb502801ba..9ca233714a 100644 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/bi-directional-link-panel.tsx +++ b/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]); diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx b/packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx index 145befc9a6..a68b8369da 100644 --- a/packages/frontend/core/src/blocksuite/block-suite-editor/lit-adaper.tsx +++ b/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') { diff --git a/packages/frontend/core/src/blocksuite/manager/view.ts b/packages/frontend/core/src/blocksuite/manager/view.ts index 6dd0e19d09..463cd3564c 100644 --- a/packages/frontend/core/src/blocksuite/manager/view.ts +++ b/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() { diff --git a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/index.ts b/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/index.ts index e46c8951fc..3aa70aea2f 100644 --- a/packages/frontend/core/src/blocksuite/view-extensions/code-block-preview/index.ts +++ b/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) { - super.setup(context); + override setup( + context: ViewExtensionContext, + options?: z.infer + ) { + 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); } } diff --git a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx b/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx index 425e7ab478..1ed588ccef 100644 --- a/packages/frontend/core/src/desktop/dialogs/setting/general-setting/editor/edgeless/snapshot.tsx +++ b/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')]); diff --git a/packages/frontend/core/src/modules/feature-flag/constant.ts b/packages/frontend/core/src/modules/feature-flag/constant.ts index 2623c3c6df..cb05f54240 100644 --- a/packages/frontend/core/src/modules/feature-flag/constant.ts +++ b/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 diff --git a/packages/frontend/i18n/src/i18n.gen.ts b/packages/frontend/i18n/src/i18n.gen.ts index 464c505763..fab53cb5db 100644 --- a/packages/frontend/i18n/src/i18n.gen.ts +++ b/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.` */ diff --git a/packages/frontend/i18n/src/resources/en.json b/packages/frontend/i18n/src/resources/en.json index 803993d6d0..cb431f1d96 100644 --- a/packages/frontend/i18n/src/resources/en.json +++ b/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",