feat(editor): support preview mode in code block (#11805)

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

- **New Features**
  - Introduced a preview mode for code blocks, allowing users to toggle between code and rendered previews (e.g., HTML output) directly within the editor.
  - Added a preview toggle button to the code block toolbar for supported languages.
  - Enabled dynamic rendering of code block previews using a shared WebContainer, allowing live HTML previews in an embedded iframe.
  - Added HTML preview support with loading and error states for enhanced user feedback.
  - Integrated the preview feature as a view extension provider for seamless framework support.

- **Bug Fixes**
  - Improved toolbar layout and button alignment for a cleaner user interface.

- **Tests**
  - Added end-to-end tests to verify the new code block preview functionality and language switching behavior.

- **Chores**
  - Updated development server configuration to include enhanced security headers.
  - Added a new runtime dependency for WebContainer support.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/blocks/code/src/code-block.ts

@@ -26,11 +26,13 @@ import { computed, effect, type Signal, signal } from '@preact/signals-core';
 import { html, nothing, type TemplateResult } from 'lit';
 import { query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 import { bundledLanguagesInfo, type ThemedToken } from 'shiki';
 
 import { CodeBlockConfigExtension } from './code-block-config.js';
 import { CodeBlockInlineManagerExtension } from './code-block-inline.js';
 import { CodeBlockHighlighter } from './code-block-service.js';
+import { CodeBlockPreviewIdentifier } from './code-preview-extension.js';
 import { codeBlockStyles } from './styles.js';
 
 export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel> {
@@ -384,6 +386,12 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
       this.std.getOptional(CodeBlockConfigExtension.identifier)
         ?.showLineNumbers ?? true;
 
+    const preview = !!this.model.props.preview;
+    const previewContext = this.std.getOptional(
+      CodeBlockPreviewIdentifier(this.model.props.language ?? '')
+    );
+    const shouldRenderPreview = preview && previewContext;
+
     return html`
       <div
         class=${classMap({
@@ -393,6 +401,9 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
         })}
       >
         <rich-text
+          style=${styleMap({
+            display: shouldRenderPreview ? 'none' : undefined,
+          })}
           .yText=${this.model.props.text.yText}
           .inlineEventSource=${this.topContenteditableElement ?? nothing}
           .undoManager=${this.doc.history}
@@ -416,7 +427,15 @@ export class CodeBlockComponent extends CaptionedBlockComponent<CodeBlockModel>
             : undefined}
         >
         </rich-text>
-
+        <div
+          style=${styleMap({
+            display: shouldRenderPreview ? undefined : 'none',
+          })}
+          contenteditable="false"
+          class="affine-code-block-preview"
+        >
+          ${previewContext?.renderer(this.model)}
+        </div>
         ${this.renderChildren(this.model)} ${Object.values(this.widgets)}
       </div>
     `;

blocksuite/affine/blocks/code/src/code-preview-extension.ts

@@ -0,0 +1,27 @@
+import type { CodeBlockModel } from '@blocksuite/affine-model';
+import { createIdentifier } from '@blocksuite/global/di';
+import type { ExtensionType } from '@blocksuite/store';
+import type { HTMLTemplateResult } from 'lit';
+
+export type CodeBlockPreviewRenderer = (
+  model: CodeBlockModel
+) => HTMLTemplateResult | null;
+
+export type CodeBlockPreviewContext = {
+  renderer: CodeBlockPreviewRenderer;
+  lang: string;
+};
+
+export const CodeBlockPreviewIdentifier =
+  createIdentifier<CodeBlockPreviewContext>('CodeBlockPreview');
+
+export function CodeBlockPreviewExtension(
+  lang: string,
+  renderer: CodeBlockPreviewRenderer
+): ExtensionType {
+  return {
+    setup: di => {
+      di.addImpl(CodeBlockPreviewIdentifier(lang), { renderer, lang });
+    },
+  };
+}

blocksuite/affine/blocks/code/src/code-toolbar/components/code-toolbar.ts

@@ -30,7 +30,6 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
       padding: 4px;
       margin: 0;
       display: flex;
-      justify-content: flex-end;
     }
 
     .code-toolbar-button {
@@ -39,6 +38,10 @@ export class AffineCodeToolbar extends WithDisposable(LitElement) {
       box-shadow: var(--affine-shadow-1);
       border-radius: 4px;
     }
+
+    .copy-code {
+      margin-left: auto;
+    }
   `;
 
   private _currentOpenMenu: AbortController | null = null;

blocksuite/affine/blocks/code/src/code-toolbar/components/lang-button.ts

@@ -18,10 +18,6 @@ export class LanguageListButton extends WithDisposable(
   SignalWatcher(LitElement)
 ) {
   static override styles = css`
-    :host {
-      margin-right: auto;
-    }
-
     .lang-button {
       background-color: var(--affine-background-primary-color);
       box-shadow: var(--affine-shadow-1);

blocksuite/affine/blocks/code/src/code-toolbar/components/preview-button.ts

@@ -0,0 +1,97 @@
+import { unsafeCSSVarV2 } from '@blocksuite/affine-shared/theme';
+import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
+import { css, html, LitElement, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+
+import type { CodeBlockComponent } from '../../code-block';
+import { CodeBlockPreviewIdentifier } from '../../code-preview-extension';
+
+export class PreviewButton extends WithDisposable(SignalWatcher(LitElement)) {
+  static override styles = css`
+    .preview-toggle-container {
+      display: flex;
+      padding: 2px;
+      align-items: flex-start;
+      gap: 4px;
+      border-radius: 4px;
+      background: ${unsafeCSSVarV2('segment/background')};
+    }
+
+    .toggle-button {
+      display: flex;
+      padding: 0px 4px;
+      justify-content: center;
+      align-items: center;
+      gap: 4px;
+      border-radius: 4px;
+      color: ${unsafeCSSVarV2('text/primary')};
+      font-family: Inter;
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 500;
+      line-height: 20px;
+    }
+
+    .toggle-button:hover {
+      background: ${unsafeCSSVarV2('layer/background/hoverOverlay')};
+    }
+
+    .toggle-button.active {
+      background: ${unsafeCSSVarV2('segment/button')};
+      box-shadow:
+        var(--Shadow-buttonShadow-1-x, 0px) var(--Shadow-buttonShadow-1-y, 0px)
+          var(--Shadow-buttonShadow-1-blur, 1px) 0px
+          var(--Shadow-buttonShadow-1-color, rgba(0, 0, 0, 0.12)),
+        var(--Shadow-buttonShadow-2-x, 0px) var(--Shadow-buttonShadow-2-y, 1px)
+          var(--Shadow-buttonShadow-2-blur, 5px) 0px
+          var(--Shadow-buttonShadow-2-color, rgba(0, 0, 0, 0.12));
+    }
+  `;
+
+  private readonly _toggle = (value: boolean) => {
+    if (this.blockComponent.doc.readonly) return;
+
+    this.blockComponent.doc.updateBlock(this.blockComponent.model, {
+      preview: value,
+    });
+  };
+
+  get preview() {
+    return !!this.blockComponent.model.props.preview$.value;
+  }
+
+  override render() {
+    const lang = this.blockComponent.model.props.language$.value ?? '';
+    const previewContext = this.blockComponent.std.getOptional(
+      CodeBlockPreviewIdentifier(lang)
+    );
+    if (!previewContext) return nothing;
+
+    return html`
+      <div class="preview-toggle-container">
+        <div
+          class=${classMap({
+            'toggle-button': true,
+            active: !this.preview,
+          })}
+          @click=${() => this._toggle(false)}
+        >
+          Code
+        </div>
+        <div
+          class=${classMap({
+            'toggle-button': true,
+            active: this.preview,
+          })}
+          @click=${() => this._toggle(true)}
+        >
+          Preview
+        </div>
+      </div>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor blockComponent!: CodeBlockComponent;
+}

blocksuite/affine/blocks/code/src/code-toolbar/config.ts

@@ -42,6 +42,18 @@ export const PRIMARY_GROUPS: MenuItemGroup<CodeBlockToolbarContext>[] = [
           };
         },
       },
+      {
+        type: 'preview',
+        generate: ({ blockComponent }) => {
+          return {
+            action: noop,
+            render: () => html`
+              <preview-button .blockComponent=${blockComponent}>
+              </preview-button>
+            `,
+          };
+        },
+      },
       {
         type: 'copy-code',
         label: 'Copy code',

blocksuite/affine/blocks/code/src/effects.ts

@@ -5,6 +5,7 @@ import {
 } from './code-toolbar';
 import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar';
 import { LanguageListButton } from './code-toolbar/components/lang-button';
+import { PreviewButton } from './code-toolbar/components/preview-button';
 import { AffineCodeUnit } from './highlight/affine-code-unit';
 
 export function effects() {
@@ -13,12 +14,14 @@ export function effects() {
   customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
   customElements.define('affine-code-unit', AffineCodeUnit);
   customElements.define('affine-code', CodeBlockComponent);
+  customElements.define('preview-button', PreviewButton);
 }
 
 declare global {
   interface HTMLElementTagNameMap {
     'language-list-button': LanguageListButton;
     'affine-code-toolbar': AffineCodeToolbar;
+    'preview-button': PreviewButton;
     [AFFINE_CODE_TOOLBAR_WIDGET]: AffineCodeToolbarWidget;
   }
 }

blocksuite/affine/blocks/code/src/index.ts

@@ -3,6 +3,7 @@ export * from './clipboard';
 export * from './code-block';
 export * from './code-block-config';
 export * from './code-block-spec';
+export * from './code-preview-extension';
 export * from './code-toolbar';
 export * from './turbo/code-layout-handler';
 export * from './turbo/code-painter.worker';

blocksuite/affine/blocks/code/src/styles.ts

@@ -49,4 +49,8 @@ export const codeBlockStyles = css`
     box-sizing: border-box;
     user-select: none;
   }
+
+  affine-code .affine-code-block-preview {
+    padding: 12px;
+  }
 `;