feat: integrate typst preview & fix mermaid style (#14168)

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

* **New Features**
* Typst code block preview with interactive rendering controls (zoom,
pan, reset) and user-friendly error messages

* **Style**
  * Centered Mermaid diagram rendering for improved layout

* **Tests**
  * Added end-to-end preview validation tests for Typst and Mermaid

* **Chores**
* Added WebAssembly type declarations and updated frontend packages;
removed a build debug configuration entry

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
DarkSky
2025-12-28 04:55:22 +08:00
committed by GitHub
parent 1b532d5c6c
commit 4f1d57ade5
10 changed files with 608 additions and 2 deletions
@@ -43,6 +43,44 @@ test.describe('Code Block Preview', () => {
).toBeVisible();
});
test('enable mermaid preview', async ({ page }) => {
const code = page.locator('affine-code');
const mermaidSvg = page.locator('mermaid-preview .mermaid-preview-svg svg');
await openHomePage(page);
await createNewPage(page);
await waitForEditorLoad(page);
await gotoContentFromTitle(page);
await type(page, '```mermaid graph TD;A-->B');
await code.hover({
position: {
x: 155,
y: 65,
},
});
await page.getByText('Preview').click();
await expect(mermaidSvg).toBeVisible();
});
test('enable typst preview', async ({ page }) => {
const code = page.locator('affine-code');
const typstPreview = page.locator('typst-preview');
await openHomePage(page);
await createNewPage(page);
await waitForEditorLoad(page);
await gotoContentFromTitle(page);
await type(page, '```typst = Title');
await code.hover({
position: {
x: 155,
y: 65,
},
});
await page.getByText('Preview').click();
await expect(typstPreview).toBeVisible();
});
test('change lang without preview', async ({ page }) => {
const code = page.locator('affine-code');
const preview = page.locator('affine-code .affine-code-block-preview');