Files
AFFiNE-Mirror/blocksuite/affine/blocks/code/src/code-preview-extension.ts
Flrande f79dfe837f 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 -->
2025-05-06 09:14:12 +00:00

28 lines
761 B
TypeScript

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 });
},
};
}