fix(editor): add fallback tip when no cross-origin isolated (#12204)

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

## Summary by CodeRabbit

- **New Features**
  - Added a user-facing message in the HTML preview component to inform users when their browser does not support required features, with a suggestion to download the AFFiNE Desktop App.

- **Style**
  - Updated styles to ensure fallback and error messages share a consistent appearance.

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

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

@@ -30,7 +30,8 @@ export class HTMLPreview extends SignalWatcher(WithDisposable(LitElement)) {
       line-height: normal;
     }
 
-    .html-preview-error {
+    .html-preview-error,
+    .html-preview-fallback {
       color: ${unsafeCSSVarV2('button/error')};
       font-feature-settings:
         'liga' off,
@@ -49,7 +50,7 @@ export class HTMLPreview extends SignalWatcher(WithDisposable(LitElement)) {
   accessor model!: CodeBlockModel;
 
   @state()
-  accessor state: 'loading' | 'error' | 'finish' = 'loading';
+  accessor state: 'loading' | 'error' | 'finish' | 'fallback' = 'loading';
 
   @query('iframe')
   accessor iframe!: HTMLIFrameElement;
@@ -57,6 +58,11 @@ export class HTMLPreview extends SignalWatcher(WithDisposable(LitElement)) {
   override firstUpdated(_changedProperties: PropertyValues): void {
     const result = super.firstUpdated(_changedProperties);
 
+    if (!window.crossOriginIsolated) {
+      this.state = 'fallback';
+      return;
+    }
+
     this._link();
 
     this.disposables.add(
@@ -99,6 +105,14 @@ export class HTMLPreview extends SignalWatcher(WithDisposable(LitElement)) {
                 errors.
               </div>`,
           ],
+          [
+            'fallback',
+            () =>
+              html`<div class="html-preview-fallback">
+                This feature is not supported in your browser. Please download
+                the AFFiNE Desktop App to use it.
+              </div>`,
+          ],
         ])}
         <iframe
           class="html-preview-iframe"

packages/frontend/core/src/blocksuite/manager/code-block-preview.ts

@@ -14,16 +14,12 @@ export class CodeBlockPreviewViewExtension extends ViewExtensionProvider {
   override effect() {
     super.effect();
 
-    if (window.crossOriginIsolated) {
+    htmlPreviewEffects();
-      htmlPreviewEffects();
-    }
   }
 
   override setup(context: ViewExtensionContext) {
     super.setup(context);
 
-    if (window.crossOriginIsolated) {
+    context.register(CodeBlockHtmlPreview);
-      context.register(CodeBlockHtmlPreview);
-    }
   }
 }