feat(editor): use code block html preview in make it real (#12418)

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

## Summary by CodeRabbit

- **New Features**
  - HTML code previews are now displayed as code blocks within notes when supported, offering improved readability and interaction.
- **Improvements**
  - Enhanced feature detection ensures HTML code block previews are only enabled in secure, compatible environments.
  - If the preview feature is unavailable, HTML content will continue to be embedded as before.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts

@@ -1,3 +1,4 @@
+import { CodeBlockPreviewIdentifier } from '@blocksuite/affine/blocks/code';
 import { addImages } from '@blocksuite/affine/blocks/image';
 import { getSurfaceBlock } from '@blocksuite/affine/blocks/surface';
 import { LightLoadingIcon } from '@blocksuite/affine/components/icons';
@@ -19,6 +20,7 @@ import {
 import { TelemetryProvider } from '@blocksuite/affine/shared/services';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { GfxControllerIdentifier } from '@blocksuite/affine/std/gfx';
+import { Text } from '@blocksuite/affine/store';
 import {
   AFFINE_TOOLBAR_WIDGET,
   type AffineToolbarWidget,
@@ -490,6 +492,24 @@ function responseToMakeItReal(host: EditorHost, ctx: AIContext) {
   aiPanel.hide();
 
   host.store.transact(() => {
+    const ifUseCodeBlock = host.std.getOptional(
+      CodeBlockPreviewIdentifier('html')
+    );
+
+    if (ifUseCodeBlock) {
+      const note = host.store.addBlock(
+        'affine:note',
+        {
+          xywh: bounds.serialize(),
+        },
+        host.store.root
+      );
+      host.store.addBlock(
+        'affine:code',
+        { text: new Text(html), language: 'html', preview: true },
+        note
+      );
+    } else {
       host.store.addBlock(
         'affine:embed-html',
         {
@@ -499,6 +519,7 @@ function responseToMakeItReal(host: EditorHost, ctx: AIContext) {
         },
         surface.id
       );
+    }
   });
 }
 

packages/frontend/core/src/blocksuite/ai/actions/page-response.ts

@@ -1,3 +1,4 @@
+import { CodeBlockPreviewIdentifier } from '@blocksuite/affine/blocks/code';
 import { addSiblingImageBlocks } from '@blocksuite/affine/blocks/image';
 import {
   getSurfaceBlock,
@@ -117,6 +118,25 @@ function responseToMakeItReal(host: EditorHost, ctx: AIContext, place: Place) {
   const htmlBound = new Bound(x, y + PADDING, width || 800, height || 600);
   const html = preprocessHtml(aiPanel.answer);
   host.store.transact(() => {
+    const ifUseCodeBlock = host.std.getOptional(
+      CodeBlockPreviewIdentifier('html')
+    );
+    if (ifUseCodeBlock) {
+      const note = host.store.addBlock(
+        'affine:note',
+        {
+          xywh: htmlBound.serialize(),
+        },
+        host.store.root
+      );
+      host.store.addBlock(
+        'affine:code',
+        { text: new Text(html), language: 'html', preview: true },
+        note
+      );
+      const frameBound = expandBound(htmlBound, PADDING);
+      addSurfaceRefBlock(host, frameBound, place);
+    } else {
       host.store.addBlock(
         'affine:embed-html',
         {
@@ -128,6 +148,7 @@ function responseToMakeItReal(host: EditorHost, ctx: AIContext, place: Place) {
       );
       const frameBound = expandBound(htmlBound, PADDING);
       addSurfaceRefBlock(host, frameBound, place);
+    }
   });
 }
 

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

@@ -38,6 +38,9 @@ export class CodeBlockPreviewViewExtension extends ViewExtensionProvider {
       framework.get(FeatureFlagService).flags.enable_code_block_html_preview.$
         .value;
     if (!flag) return;
+
+    if (!window.crossOriginIsolated) return;
+
     context.register(CodeBlockHtmlPreview);
   }
 }