mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-12 04:18:54 +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 -->
91 lines
2.6 KiB
TypeScript
91 lines
2.6 KiB
TypeScript
import { test } from '@affine-test/kit/playwright';
|
|
import { openHomePage } from '@affine-test/kit/utils/load-page';
|
|
import { type, waitForEditorLoad } from '@affine-test/kit/utils/page-logic';
|
|
import { expect } from '@playwright/test';
|
|
|
|
import {
|
|
createNewPage,
|
|
gotoContentFromTitle,
|
|
initCodeBlockByOneStep,
|
|
} from './utils';
|
|
|
|
test.describe('Code Block Autocomplete Operations', () => {
|
|
test('angle brackets are not supported', async ({ page }) => {
|
|
// open the home page and insert the code block
|
|
await initCodeBlockByOneStep(page);
|
|
await page.keyboard.type('<');
|
|
const codeUnit = page.locator('affine-code-unit');
|
|
await expect(codeUnit).toHaveText('<');
|
|
});
|
|
});
|
|
|
|
test.describe('Code Block Preview', () => {
|
|
test('enable html preview', async ({ page }) => {
|
|
const code = page.locator('affine-code');
|
|
const htmlPreview = page.locator('html-preview');
|
|
|
|
await openHomePage(page);
|
|
await createNewPage(page);
|
|
await waitForEditorLoad(page);
|
|
await gotoContentFromTitle(page);
|
|
await type(page, '```html aaa');
|
|
await page.waitForTimeout(3000);
|
|
// web container can not load as expected at the first time in playwright, not sure why
|
|
await page.reload();
|
|
await code.hover({
|
|
position: {
|
|
x: 155,
|
|
y: 65,
|
|
},
|
|
});
|
|
await page.getByText('Preview').click();
|
|
|
|
await expect(
|
|
page
|
|
.locator('iframe[title="HTML Preview"]')
|
|
.contentFrame()
|
|
.getByText('aaa')
|
|
).toBeHidden();
|
|
await expect(htmlPreview).toHaveText('Rendering the code...');
|
|
await page.waitForTimeout(20000);
|
|
await expect(
|
|
page
|
|
.locator('iframe[title="HTML Preview"]')
|
|
.contentFrame()
|
|
.getByText('aaa')
|
|
).toBeVisible();
|
|
});
|
|
|
|
test('change lang without preview', async ({ page }) => {
|
|
const code = page.locator('affine-code');
|
|
const preview = page.locator('affine-code .affine-code-block-preview');
|
|
|
|
await openHomePage(page);
|
|
await createNewPage(page);
|
|
await waitForEditorLoad(page);
|
|
await gotoContentFromTitle(page);
|
|
await type(page, '```html aaa');
|
|
|
|
await code.hover({
|
|
position: {
|
|
x: 155,
|
|
y: 65,
|
|
},
|
|
});
|
|
await page.getByText('Preview').click();
|
|
await expect(preview).toBeVisible();
|
|
|
|
// change to lang without preview support
|
|
await page.getByTestId('lang-button').click();
|
|
await page.getByRole('button', { name: 'ABAP' }).click();
|
|
|
|
await expect(preview).toBeHidden();
|
|
|
|
// change back to html
|
|
await page.getByTestId('lang-button').click();
|
|
await page.getByRole('button', { name: 'HTML', exact: true }).click();
|
|
|
|
await expect(preview).toBeVisible();
|
|
});
|
|
});
|