diff --git a/packages/frontend/core/src/blocksuite/extensions/code-block-preview/html-preview.ts b/packages/frontend/core/src/blocksuite/extensions/code-block-preview/html-preview.ts index a374543528..0279804187 100644 --- a/packages/frontend/core/src/blocksuite/extensions/code-block-preview/html-preview.ts +++ b/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. `, ], + [ + 'fallback', + () => + html`
+ This feature is not supported in your browser. Please download + the AFFiNE Desktop App to use it. +
`, + ], ])}