mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-14 21:27:20 +00:00
f79dfe837f
<!-- 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 -->
28 lines
1.1 KiB
TypeScript
28 lines
1.1 KiB
TypeScript
import { CodeBlockComponent } from './code-block';
|
|
import {
|
|
AFFINE_CODE_TOOLBAR_WIDGET,
|
|
AffineCodeToolbarWidget,
|
|
} from './code-toolbar';
|
|
import { AffineCodeToolbar } from './code-toolbar/components/code-toolbar';
|
|
import { LanguageListButton } from './code-toolbar/components/lang-button';
|
|
import { PreviewButton } from './code-toolbar/components/preview-button';
|
|
import { AffineCodeUnit } from './highlight/affine-code-unit';
|
|
|
|
export function effects() {
|
|
customElements.define('language-list-button', LanguageListButton);
|
|
customElements.define('affine-code-toolbar', AffineCodeToolbar);
|
|
customElements.define(AFFINE_CODE_TOOLBAR_WIDGET, AffineCodeToolbarWidget);
|
|
customElements.define('affine-code-unit', AffineCodeUnit);
|
|
customElements.define('affine-code', CodeBlockComponent);
|
|
customElements.define('preview-button', PreviewButton);
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'language-list-button': LanguageListButton;
|
|
'affine-code-toolbar': AffineCodeToolbar;
|
|
'preview-button': PreviewButton;
|
|
[AFFINE_CODE_TOOLBAR_WIDGET]: AffineCodeToolbarWidget;
|
|
}
|
|
}
|