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 -->

tests/affine-local/e2e/blocksuite/code/crud.spec.ts

@@ -1,7 +1,13 @@
 import { test } from '@affine-test/kit/playwright';
+import { openHomePage } from '@affine-test/kit/utils/load-page';
+import { type, waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
 import { expect } from '@playwright/test';
 
-import { initCodeBlockByOneStep } from './utils';
+import {
+  createNewPage,
+  gotoContentFromTitle,
+  initCodeBlockByOneStep,
+} from './utils';
 
 test.describe('Code Block Autocomplete Operations', () => {
   test('angle brackets are not supported', async ({ page }) => {
@@ -12,3 +18,73 @@ test.describe('Code Block Autocomplete Operations', () => {
     await expect(codeUnit).toHaveText('<');
   });
 });
+
+test.describe('Code Block Preview', () => {
+  test('enable html preview', async ({ page }) => {
+    const code = page.locator('affine-code');
+    const htmlPreview = page.locator('html-preview');
+
+    await openHomePage(page);
+    await createNewPage(page);
+    await waitForEditorLoad(page);
+    await gotoContentFromTitle(page);
+    await type(page, '```html aaa');
+    await page.waitForTimeout(3000);
+    // web container can not load as expected at the first time in playwright, not sure why
+    await page.reload();
+    await code.hover({
+      position: {
+        x: 155,
+        y: 65,
+      },
+    });
+    await page.getByText('Preview').click();
+
+    await expect(
+      page
+        .locator('iframe[title="HTML Preview"]')
+        .contentFrame()
+        .getByText('aaa')
+    ).toBeHidden();
+    await expect(htmlPreview).toHaveText('Rendering the code...');
+    await page.waitForTimeout(20000);
+    await expect(
+      page
+        .locator('iframe[title="HTML Preview"]')
+        .contentFrame()
+        .getByText('aaa')
+    ).toBeVisible();
+  });
+
+  test('change lang without preview', async ({ page }) => {
+    const code = page.locator('affine-code');
+    const preview = page.locator('affine-code .affine-code-block-preview');
+
+    await openHomePage(page);
+    await createNewPage(page);
+    await waitForEditorLoad(page);
+    await gotoContentFromTitle(page);
+    await type(page, '```html aaa');
+
+    await code.hover({
+      position: {
+        x: 155,
+        y: 65,
+      },
+    });
+    await page.getByText('Preview').click();
+    await expect(preview).toBeVisible();
+
+    // change to lang without preview support
+    await page.getByTestId('lang-button').click();
+    await page.getByRole('button', { name: 'ABAP' }).click();
+
+    await expect(preview).toBeHidden();
+
+    // change back to html
+    await page.getByTestId('lang-button').click();
+    await page.getByRole('button', { name: 'HTML', exact: true }).click();
+
+    await expect(preview).toBeVisible();
+  });
+});