feat(editor): migrate typst mermaid to native (#14499)

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

* **New Features**
* Native/WASM Mermaid and Typst SVG preview rendering on desktop and
mobile, plus cross-platform Preview plugin integrations.

* **Improvements**
* Centralized, sanitized rendering bridge with automatic Typst
font-directory handling and configurable native renderer selection.
* More consistent and robust error serialization and worker-backed
preview flows for improved stability and performance.

* **Tests**
* Extensive unit and integration tests for preview rendering, font
discovery, sanitization, and error serialization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/apps/android/src/app.tsx

@@ -15,6 +15,7 @@ import {
   ServersService,
   ValidatorProvider,
 } from '@affine/core/modules/cloud';
+import { registerNativePreviewHandlers } from '@affine/core/modules/code-block-preview-renderer';
 import { DocsService } from '@affine/core/modules/doc';
 import { GlobalContextService } from '@affine/core/modules/global-context';
 import { I18nProvider } from '@affine/core/modules/i18n';
@@ -54,6 +55,7 @@ import { AIButton } from './plugins/ai-button';
 import { Auth } from './plugins/auth';
 import { HashCash } from './plugins/hashcash';
 import { NbStoreNativeDBApis } from './plugins/nbstore';
+import { Preview } from './plugins/preview';
 import { writeEndpointToken } from './proxy';
 
 const storeManagerClient = createStoreManagerClient();
@@ -85,6 +87,11 @@ framework.impl(NbstoreProvider, {
 });
 const frameworkProvider = framework.provider();
 
+registerNativePreviewHandlers({
+  renderMermaidSvg: request => Preview.renderMermaidSvg(request),
+  renderTypstSvg: request => Preview.renderTypstSvg(request),
+});
+
 framework.impl(PopupWindowProvider, {
   open: (url: string) => {
     InAppBrowser.open({

packages/frontend/apps/android/src/plugins/preview/definitions.ts

@@ -0,0 +1,16 @@
+export interface PreviewPlugin {
+  renderMermaidSvg(options: {
+    code: string;
+    options?: {
+      theme?: string;
+      fontFamily?: string;
+      fontSize?: number;
+    };
+  }): Promise<{ svg: string }>;
+  renderTypstSvg(options: {
+    code: string;
+    options?: {
+      fontUrls?: string[];
+    };
+  }): Promise<{ svg: string }>;
+}

packages/frontend/apps/android/src/plugins/preview/index.ts

@@ -0,0 +1,8 @@
+import { registerPlugin } from '@capacitor/core';
+
+import type { PreviewPlugin } from './definitions';
+
+const Preview = registerPlugin<PreviewPlugin>('Preview');
+
+export * from './definitions';
+export { Preview };