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

## 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.
2026-08-21 20:11:43 +08:00 · 2026-03-20 04:04:40 +08:00
parent 16a8f17717
commit 7ac8b14b65
85 changed files with 4926 additions and 835 deletions
@@ -19,6 +19,7 @@ import app.affine.pro.plugin.AFFiNEThemePlugin
 import app.affine.pro.plugin.AuthPlugin
 import app.affine.pro.plugin.HashCashPlugin
 import app.affine.pro.plugin.NbStorePlugin
+import app.affine.pro.plugin.PreviewPlugin
 import app.affine.pro.service.GraphQLService
 import app.affine.pro.service.SSEService
 import app.affine.pro.service.WebService
@@ -52,6 +53,7 @@ class MainActivity : BridgeActivity(), AIButtonPlugin.Callback, AFFiNEThemePlugi
                AuthPlugin::class.java,
                HashCashPlugin::class.java,
                NbStorePlugin::class.java,
+                PreviewPlugin::class.java,
            )
        )
    }
@@ -1,8 +1,6 @@
 package app.affine.pro.ai.chat

-import com.affine.pro.graphql.GetCopilotHistoriesQuery
 import com.affine.pro.graphql.fragment.CopilotChatHistory
-import com.affine.pro.graphql.fragment.CopilotChatMessage
 import kotlinx.datetime.Clock
 import kotlinx.datetime.Instant

@@ -53,7 +51,7 @@ data class ChatMessage(
            createAt = Clock.System.now(),
        )

-        fun from(message: CopilotChatMessage) = ChatMessage(
+        fun from(message: CopilotChatHistory.Message) = ChatMessage(
            id = message.id,
            role = Role.fromValue(message.role),
            content = message.content,
@@ -0,0 +1,106 @@
+package app.affine.pro.plugin
+
+import android.net.Uri
+import com.getcapacitor.JSObject
+import com.getcapacitor.Plugin
+import com.getcapacitor.PluginCall
+import com.getcapacitor.PluginMethod
+import com.getcapacitor.annotation.CapacitorPlugin
+import kotlinx.coroutines.Dispatchers
+import timber.log.Timber
+import uniffi.affine_mobile_native.renderMermaidPreviewSvg
+import uniffi.affine_mobile_native.renderTypstPreviewSvg
+import java.io.File
+
+private fun JSObject.getOptionalString(key: String): String? {
+    return if (has(key) && !isNull(key)) getString(key) else null
+}
+
+private fun JSObject.getOptionalDouble(key: String): Double? {
+    return if (has(key) && !isNull(key)) getDouble(key) else null
+}
+
+private fun resolveLocalFontDir(fontUrl: String): String? {
+    val uri = Uri.parse(fontUrl)
+    val path = when {
+        uri.scheme == null -> {
+            val file = File(fontUrl)
+            if (!file.isAbsolute) {
+                return null
+            }
+            file.path
+        }
+        uri.scheme == "file" -> uri.path
+        else -> null
+    } ?: return null
+
+    val file = File(path)
+    val directory = if (file.isDirectory) file else file.parentFile ?: return null
+    return directory.absolutePath
+}
+
+private fun JSObject.resolveTypstFontDirs(): List<String>? {
+    if (!has("fontUrls") || isNull("fontUrls")) {
+        return null
+    }
+
+    val fontUrls = optJSONArray("fontUrls")
+        ?: throw IllegalArgumentException("Typst preview fontUrls must be an array of strings.")
+    val fontDirs = buildList(fontUrls.length()) {
+        repeat(fontUrls.length()) { index ->
+            val fontUrl = fontUrls.optString(index, null)
+                ?: throw IllegalArgumentException("Typst preview fontUrls must be strings.")
+            val fontDir = resolveLocalFontDir(fontUrl)
+                ?: throw IllegalArgumentException("Typst preview on mobile only supports local font file URLs or absolute font directories.")
+            add(fontDir)
+        }
+    }
+    return fontDirs.distinct()
+}
+
+@CapacitorPlugin(name = "Preview")
+class PreviewPlugin : Plugin() {
+
+    @PluginMethod
+    fun renderMermaidSvg(call: PluginCall) {
+        launch(Dispatchers.IO) {
+            try {
+                val code = call.getStringEnsure("code")
+                val options = call.getObject("options")
+                val svg = renderMermaidPreviewSvg(
+                    code = code,
+                    theme = options?.getOptionalString("theme"),
+                    fontFamily = options?.getOptionalString("fontFamily"),
+                    fontSize = options?.getOptionalDouble("fontSize"),
+                )
+                call.resolve(JSObject().apply {
+                    put("svg", svg)
+                })
+            } catch (e: Exception) {
+                Timber.e(e, "Failed to render Mermaid preview.")
+                call.reject("Failed to render Mermaid preview.", null, e)
+            }
+        }
+    }
+
+    @PluginMethod
+    fun renderTypstSvg(call: PluginCall) {
+        launch(Dispatchers.IO) {
+            try {
+                val code = call.getStringEnsure("code")
+                val options = call.getObject("options")
+                val svg = renderTypstPreviewSvg(
+                    code = code,
+                    fontDirs = options?.resolveTypstFontDirs(),
+                    cacheDir = context.cacheDir.absolutePath,
+                )
+                call.resolve(JSObject().apply {
+                    put("svg", svg)
+                })
+            } catch (e: Exception) {
+                Timber.e(e, "Failed to render Typst preview.")
+                call.reject("Failed to render Typst preview.", null, e)
+            }
+        }
+    }
+}
@@ -72,7 +72,7 @@ class GraphQLService @Inject constructor() {
    ).mapCatching { data ->
        data.currentUser?.copilot?.chats?.paginatedCopilotChats?.edges?.map { item -> item.node.copilotChatHistory }?.firstOrNull { history ->
          history.sessionId == sessionId
-        }?.messages?.map { msg -> msg.copilotChatMessage } ?: emptyList()
+        }?.messages ?: emptyList()
    }

    suspend fun getCopilotHistoryIds(
@@ -792,6 +792,10 @@ internal interface UniffiForeignFutureCompleteVoid : com.sun.jna.Callback {



+
+
+
+



@@ -816,6 +820,10 @@ internal interface IntegrityCheckingUniffiLib : Library {
 ): Short
 fun uniffi_affine_mobile_native_checksum_func_new_doc_storage_pool(
 ): Short
+fun uniffi_affine_mobile_native_checksum_func_render_mermaid_preview_svg(
+): Short
+fun uniffi_affine_mobile_native_checksum_func_render_typst_preview_svg(
+): Short
 fun uniffi_affine_mobile_native_checksum_method_docstoragepool_clear_clocks(
 ): Short
 fun uniffi_affine_mobile_native_checksum_method_docstoragepool_connect(
@@ -1017,6 +1025,10 @@ fun uniffi_affine_mobile_native_fn_func_hashcash_mint(`resource`: RustBuffer.ByV
 ): RustBuffer.ByValue
 fun uniffi_affine_mobile_native_fn_func_new_doc_storage_pool(uniffi_out_err: UniffiRustCallStatus, 
 ): Pointer
+fun uniffi_affine_mobile_native_fn_func_render_mermaid_preview_svg(`code`: RustBuffer.ByValue,`theme`: RustBuffer.ByValue,`fontFamily`: RustBuffer.ByValue,`fontSize`: RustBuffer.ByValue,uniffi_out_err: UniffiRustCallStatus, 
+): RustBuffer.ByValue
+fun uniffi_affine_mobile_native_fn_func_render_typst_preview_svg(`code`: RustBuffer.ByValue,`fontDirs`: RustBuffer.ByValue,`cacheDir`: RustBuffer.ByValue,uniffi_out_err: UniffiRustCallStatus, 
+): RustBuffer.ByValue
 fun ffi_affine_mobile_native_rustbuffer_alloc(`size`: Long,uniffi_out_err: UniffiRustCallStatus, 
 ): RustBuffer.ByValue
 fun ffi_affine_mobile_native_rustbuffer_from_bytes(`bytes`: ForeignBytes.ByValue,uniffi_out_err: UniffiRustCallStatus, 
@@ -1149,6 +1161,12 @@ private fun uniffiCheckApiChecksums(lib: IntegrityCheckingUniffiLib) {
    if (lib.uniffi_affine_mobile_native_checksum_func_new_doc_storage_pool() != 32882.toShort()) {
        throw RuntimeException("UniFFI API checksum mismatch: try cleaning and rebuilding your project")
    }
+    if (lib.uniffi_affine_mobile_native_checksum_func_render_mermaid_preview_svg() != 54334.toShort()) {
+        throw RuntimeException("UniFFI API checksum mismatch: try cleaning and rebuilding your project")
+    }
+    if (lib.uniffi_affine_mobile_native_checksum_func_render_typst_preview_svg() != 42796.toShort()) {
+        throw RuntimeException("UniFFI API checksum mismatch: try cleaning and rebuilding your project")
+    }
    if (lib.uniffi_affine_mobile_native_checksum_method_docstoragepool_clear_clocks() != 51151.toShort()) {
        throw RuntimeException("UniFFI API checksum mismatch: try cleaning and rebuilding your project")
    }
@@ -3178,6 +3196,38 @@ public object FfiConverterOptionalLong: FfiConverterRustBuffer<kotlin.Long?> {



+/**
+ * @suppress
+ */
+public object FfiConverterOptionalDouble: FfiConverterRustBuffer<kotlin.Double?> {
+    override fun read(buf: ByteBuffer): kotlin.Double? {
+        if (buf.get().toInt() == 0) {
+            return null
+        }
+        return FfiConverterDouble.read(buf)
+    }
+
+    override fun allocationSize(value: kotlin.Double?): ULong {
+        if (value == null) {
+            return 1UL
+        } else {
+            return 1UL + FfiConverterDouble.allocationSize(value)
+        }
+    }
+
+    override fun write(value: kotlin.Double?, buf: ByteBuffer) {
+        if (value == null) {
+            buf.put(0)
+        } else {
+            buf.put(1)
+            FfiConverterDouble.write(value, buf)
+        }
+    }
+}
+
+
+
+
 /**
 * @suppress
 */
@@ -3584,4 +3634,24 @@ public object FfiConverterSequenceTypeSearchHit: FfiConverterRustBuffer<List<Sea
    }
    

+    @Throws(UniffiException::class) fun `renderMermaidPreviewSvg`(`code`: kotlin.String, `theme`: kotlin.String?, `fontFamily`: kotlin.String?, `fontSize`: kotlin.Double?): kotlin.String {
+            return FfiConverterString.lift(
+    uniffiRustCallWithError(UniffiException) { _status ->
+    UniffiLib.INSTANCE.uniffi_affine_mobile_native_fn_func_render_mermaid_preview_svg(
+        FfiConverterString.lower(`code`),FfiConverterOptionalString.lower(`theme`),FfiConverterOptionalString.lower(`fontFamily`),FfiConverterOptionalDouble.lower(`fontSize`),_status)
+}
+    )
+    }
+    
+
+    @Throws(UniffiException::class) fun `renderTypstPreviewSvg`(`code`: kotlin.String, `fontDirs`: List<kotlin.String>?, `cacheDir`: kotlin.String?): kotlin.String {
+            return FfiConverterString.lift(
+    uniffiRustCallWithError(UniffiException) { _status ->
+    UniffiLib.INSTANCE.uniffi_affine_mobile_native_fn_func_render_typst_preview_svg(
+        FfiConverterString.lower(`code`),FfiConverterOptionalSequenceString.lower(`fontDirs`),FfiConverterOptionalString.lower(`cacheDir`),_status)
+}
+    )
+    }
+    
+

@@ -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({
@@ -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 }>;
+}
@@ -0,0 +1,8 @@
+import { registerPlugin } from '@capacitor/core';
+
+import type { PreviewPlugin } from './definitions';
+
+const Preview = registerPlugin<PreviewPlugin>('Preview');
+
+export * from './definitions';
+export { Preview };
@@ -1,5 +1,6 @@
 import { dialogHandlers } from './dialog';
 import { dbEventsV1, dbHandlersV1, nbstoreHandlers } from './nbstore';
+import { previewHandlers } from './preview';
 import { provideExposed } from './provide';
 import { workspaceEvents, workspaceHandlers } from './workspace';

@@ -8,6 +9,7 @@ export const handlers = {
  nbstore: nbstoreHandlers,
  workspace: workspaceHandlers,
  dialog: dialogHandlers,
+  preview: previewHandlers,
 };

 export const events = {
@@ -0,0 +1,69 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import {
+  type MermaidRenderRequest,
+  type MermaidRenderResult,
+  renderMermaidSvg,
+  renderTypstSvg,
+  type TypstRenderRequest,
+  type TypstRenderResult,
+} from '@affine/native';
+
+const TYPST_FONT_DIRS_ENV = 'AFFINE_TYPST_FONT_DIRS';
+
+function parseTypstFontDirsFromEnv() {
+  const value = process.env[TYPST_FONT_DIRS_ENV];
+  if (!value) {
+    return [];
+  }
+
+  return value
+    .split(path.delimiter)
+    .map(dir => dir.trim())
+    .filter(Boolean);
+}
+
+function getTypstFontDirCandidates() {
+  const resourcesPath = process.resourcesPath ?? '';
+
+  return [
+    ...parseTypstFontDirsFromEnv(),
+    path.join(resourcesPath, 'fonts'),
+    path.join(resourcesPath, 'js', 'fonts'),
+    path.join(resourcesPath, 'app.asar.unpacked', 'fonts'),
+    path.join(resourcesPath, 'app.asar.unpacked', 'js', 'fonts'),
+  ];
+}
+
+function resolveTypstFontDirs() {
+  return Array.from(
+    new Set(getTypstFontDirCandidates().map(dir => path.resolve(dir)))
+  ).filter(dir => fs.statSync(dir, { throwIfNoEntry: false })?.isDirectory());
+}
+
+function withTypstFontDirs(
+  request: TypstRenderRequest,
+  fontDirs: string[]
+): TypstRenderRequest {
+  const nextOptions = request.options ? { ...request.options } : {};
+  if (!nextOptions.fontDirs?.length) {
+    nextOptions.fontDirs = fontDirs;
+  }
+  return { ...request, options: nextOptions };
+}
+
+const typstFontDirs = resolveTypstFontDirs();
+
+export const previewHandlers = {
+  renderMermaidSvg: async (
+    request: MermaidRenderRequest
+  ): Promise<MermaidRenderResult> => {
+    return renderMermaidSvg(request);
+  },
+  renderTypstSvg: async (
+    request: TypstRenderRequest
+  ): Promise<TypstRenderResult> => {
+    return renderTypstSvg(withTypstFontDirs(request, typstFontDirs));
+  },
+};
@@ -0,0 +1,85 @@
+import path from 'node:path';
+
+import fs from 'fs-extra';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+
+const { native } = vi.hoisted(() => ({
+  native: {
+    renderMermaidSvg: vi.fn(),
+    renderTypstSvg: vi.fn(),
+  },
+}));
+
+vi.mock('@affine/native', () => native);
+
+const tmpDir = path.join(__dirname, 'tmp');
+const typstFontDirA = path.join(tmpDir, 'fonts-a');
+const typstFontDirB = path.join(tmpDir, 'fonts-b');
+
+async function loadPreviewHandlers() {
+  vi.resetModules();
+  const module = await import('../../src/helper/preview');
+  return module.previewHandlers;
+}
+
+describe('helper preview handlers', () => {
+  beforeEach(async () => {
+    await fs.ensureDir(typstFontDirA);
+    await fs.ensureDir(typstFontDirB);
+    process.env.AFFINE_TYPST_FONT_DIRS = [
+      typstFontDirA,
+      typstFontDirB,
+      path.join(tmpDir, 'missing'),
+    ].join(path.delimiter);
+    native.renderMermaidSvg.mockReset();
+    native.renderTypstSvg.mockReset();
+    native.renderMermaidSvg.mockReturnValue({
+      svg: '<svg><text>mermaid</text></svg>',
+    });
+    native.renderTypstSvg.mockReturnValue({
+      svg: '<svg><text>typst</text></svg>',
+    });
+  });
+
+  afterEach(async () => {
+    delete process.env.AFFINE_TYPST_FONT_DIRS;
+    await fs.remove(tmpDir);
+  });
+
+  test('passes mermaid request to native renderer', async () => {
+    const previewHandlers = await loadPreviewHandlers();
+    const request = { code: 'flowchart TD; A-->B' };
+
+    await previewHandlers.renderMermaidSvg(request);
+
+    expect(native.renderMermaidSvg).toHaveBeenCalledWith(request);
+  });
+
+  test('injects resolved fontDirs into typst requests', async () => {
+    const previewHandlers = await loadPreviewHandlers();
+
+    await previewHandlers.renderTypstSvg({ code: '= hello' });
+
+    const [request] = native.renderTypstSvg.mock.calls[0];
+    expect(request.options?.fontDirs).toEqual(
+      expect.arrayContaining([
+        path.resolve(typstFontDirA),
+        path.resolve(typstFontDirB),
+      ])
+    );
+  });
+
+  test('keeps explicit typst fontDirs', async () => {
+    const previewHandlers = await loadPreviewHandlers();
+    const request = {
+      code: '= hello',
+      options: {
+        fontDirs: ['/tmp/custom-fonts'],
+      },
+    };
+
+    await previewHandlers.renderTypstSvg(request);
+
+    expect(native.renderTypstSvg).toHaveBeenCalledWith(request);
+  });
+});
@@ -14,8 +14,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/Recouse/EventSource",
      "state" : {
-        "revision" : "7b2f4f585d3927876bd76eaede9fdff779eff102",
-        "version" : "0.1.5"
+        "revision" : "713f8c0a0270a80a968c007ddc0d6067e80a5393",
+        "version" : "0.1.7"
      }
    },
    {
@@ -41,8 +41,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/Lakr233/Litext",
      "state" : {
-        "revision" : "c7e83f2f580ce34a102ca9ba9d2bb24e507dccd9",
-        "version" : "0.5.6"
+        "revision" : "a2ed9b63ae623a20591effc72f9db7d04e41a64c",
+        "version" : "1.2.1"
      }
    },
    {
@@ -77,8 +77,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/RevenueCat/purchases-ios-spm.git",
      "state" : {
-        "revision" : "8f5df97653eb361a2097119479332afccf0aa816",
-        "version" : "5.58.0"
+        "revision" : "2913a336eb37dc06795cdbaa5b5de330b6707669",
+        "version" : "5.65.0"
      }
    },
    {
@@ -34,6 +34,7 @@ class AFFiNEViewController: CAPBridgeViewController {
      NavigationGesturePlugin(),
      NbStorePlugin(),
      PayWallPlugin(associatedController: self),
+      PreviewPlugin(),
    ]
    plugins.forEach { bridge?.registerPluginInstance($0) }
  }
@@ -0,0 +1,119 @@
+import Foundation
+import Capacitor
+
+private func resolveLocalFontDir(from fontURL: String) -> String? {
+  let path: String
+  if fontURL.hasPrefix("file://") {
+    guard let url = URL(string: fontURL), url.isFileURL else {
+      return nil
+    }
+    path = url.path
+  } else {
+    let candidate = (fontURL as NSString).standardizingPath
+    guard candidate.hasPrefix("/") else {
+      return nil
+    }
+    path = candidate
+  }
+
+  var isDirectory: ObjCBool = false
+  if FileManager.default.fileExists(atPath: path, isDirectory: &isDirectory),
+     isDirectory.boolValue
+  {
+    return path
+  }
+
+  let directory = (path as NSString).deletingLastPathComponent
+  return directory.isEmpty ? nil : directory
+}
+
+private func resolveTypstFontDirs(from options: [AnyHashable: Any]?) throws -> [String]? {
+  guard let rawFontUrls = options?["fontUrls"] else {
+    return nil
+  }
+
+  guard let fontUrls = rawFontUrls as? [Any] else {
+    throw NSError(
+      domain: "PreviewPlugin",
+      code: 1,
+      userInfo: [
+        NSLocalizedDescriptionKey: "Typst preview fontUrls must be an array of strings."
+      ]
+    )
+  }
+
+  var seenFontDirs = Set<String>()
+  var orderedFontDirs = [String]()
+  orderedFontDirs.reserveCapacity(fontUrls.count)
+
+  for fontUrl in fontUrls {
+    guard let fontURL = fontUrl as? String else {
+      throw NSError(
+        domain: "PreviewPlugin",
+        code: 1,
+        userInfo: [
+          NSLocalizedDescriptionKey: "Typst preview fontUrls must be strings."
+        ]
+      )
+    }
+
+    guard let fontDir = resolveLocalFontDir(from: fontURL) else {
+      throw NSError(
+        domain: "PreviewPlugin",
+        code: 1,
+        userInfo: [
+          NSLocalizedDescriptionKey: "Typst preview on mobile only supports local font file URLs or absolute font directories."
+        ]
+      )
+    }
+
+    if seenFontDirs.insert(fontDir).inserted {
+      orderedFontDirs.append(fontDir)
+    }
+  }
+
+  return orderedFontDirs
+}
+
+@objc(PreviewPlugin)
+public class PreviewPlugin: CAPPlugin, CAPBridgedPlugin {
+  public let identifier = "PreviewPlugin"
+  public let jsName = "Preview"
+  public let pluginMethods: [CAPPluginMethod] = [
+    CAPPluginMethod(name: "renderMermaidSvg", returnType: CAPPluginReturnPromise),
+    CAPPluginMethod(name: "renderTypstSvg", returnType: CAPPluginReturnPromise),
+  ]
+
+  @objc func renderMermaidSvg(_ call: CAPPluginCall) {
+    DispatchQueue.global(qos: .userInitiated).async {
+      do {
+        let code = try call.getStringEnsure("code")
+        let options = call.getObject("options")
+        let svg = try renderMermaidPreviewSvg(
+          code: code,
+          theme: options?["theme"] as? String,
+          fontFamily: options?["fontFamily"] as? String,
+          fontSize: (options?["fontSize"] as? NSNumber)?.doubleValue
+        )
+        call.resolve(["svg": svg])
+      } catch {
+        call.reject("Failed to render Mermaid preview, \(error)", nil, error)
+      }
+    }
+  }
+
+  @objc func renderTypstSvg(_ call: CAPPluginCall) {
+    DispatchQueue.global(qos: .userInitiated).async {
+      do {
+        let code = try call.getStringEnsure("code")
+        let options = call.getObject("options")
+        let cacheDir = FileManager.default.urls(for: .cachesDirectory, in: .userDomainMask).first?.path
+        let fontDirs = try resolveTypstFontDirs(from: options)
+        let svg = try renderTypstPreviewSvg(code: code, fontDirs: fontDirs, cacheDir: cacheDir)
+        call.resolve(["svg": svg])
+      } catch {
+        call.reject("Failed to render Typst preview, \(error)", nil, error)
+      }
+    }
+  }
+}
@@ -2265,6 +2265,30 @@ fileprivate struct FfiConverterOptionInt64: FfiConverterRustBuffer {
    }
 }

+#if swift(>=5.8)
+@_documentation(visibility: private)
+#endif
+fileprivate struct FfiConverterOptionDouble: FfiConverterRustBuffer {
+    typealias SwiftType = Double?
+
+    public static func write(_ value: SwiftType, into buf: inout [UInt8]) {
+        guard let value = value else {
+            writeInt(&buf, Int8(0))
+            return
+        }
+        writeInt(&buf, Int8(1))
+        FfiConverterDouble.write(value, into: &buf)
+    }
+
+    public static func read(from buf: inout (data: Data, offset: Data.Index)) throws -> SwiftType {
+        switch try readInt(&buf) as Int8 {
+        case 0: return nil
+        case 1: return try FfiConverterDouble.read(from: &buf)
+        default: throw UniffiInternalError.unexpectedOptionalTag
+        }
+    }
+}
+
 #if swift(>=5.8)
@_documentation(visibility: private)
 #endif
@@ -2644,6 +2668,25 @@ public func newDocStoragePool() -> DocStoragePool  {
    )
 })
 }
+public func renderMermaidPreviewSvg(code: String, theme: String?, fontFamily: String?, fontSize: Double?)throws  -> String  {
+    return try  FfiConverterString.lift(try rustCallWithError(FfiConverterTypeUniffiError_lift) {
+    uniffi_affine_mobile_native_fn_func_render_mermaid_preview_svg(
+        FfiConverterString.lower(code),
+        FfiConverterOptionString.lower(theme),
+        FfiConverterOptionString.lower(fontFamily),
+        FfiConverterOptionDouble.lower(fontSize),$0
+    )
+})
+}
+public func renderTypstPreviewSvg(code: String, fontDirs: [String]?, cacheDir: String?)throws  -> String  {
+    return try  FfiConverterString.lift(try rustCallWithError(FfiConverterTypeUniffiError_lift) {
+    uniffi_affine_mobile_native_fn_func_render_typst_preview_svg(
+        FfiConverterString.lower(code),
+        FfiConverterOptionSequenceString.lower(fontDirs),
+        FfiConverterOptionString.lower(cacheDir),$0
+    )
+})
+}

 private enum InitializationResult {
    case ok
@@ -2666,6 +2709,12 @@ private let initializationResult: InitializationResult = {
    if (uniffi_affine_mobile_native_checksum_func_new_doc_storage_pool() != 32882) {
        return InitializationResult.apiChecksumMismatch
    }
+    if (uniffi_affine_mobile_native_checksum_func_render_mermaid_preview_svg() != 54334) {
+        return InitializationResult.apiChecksumMismatch
+    }
+    if (uniffi_affine_mobile_native_checksum_func_render_typst_preview_svg() != 42796) {
+        return InitializationResult.apiChecksumMismatch
+    }
    if (uniffi_affine_mobile_native_checksum_method_docstoragepool_clear_clocks() != 51151) {
        return InitializationResult.apiChecksumMismatch
    }
@@ -450,6 +450,16 @@ RustBuffer uniffi_affine_mobile_native_fn_func_hashcash_mint(RustBuffer resource
 #define UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_FN_FUNC_NEW_DOC_STORAGE_POOL
 void*_Nonnull uniffi_affine_mobile_native_fn_func_new_doc_storage_pool(RustCallStatus *_Nonnull out_status
    
+);
+#endif
+#ifndef UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_FN_FUNC_RENDER_MERMAID_PREVIEW_SVG
+#define UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_FN_FUNC_RENDER_MERMAID_PREVIEW_SVG
+RustBuffer uniffi_affine_mobile_native_fn_func_render_mermaid_preview_svg(RustBuffer code, RustBuffer theme, RustBuffer font_family, RustBuffer font_size, RustCallStatus *_Nonnull out_status
+);
+#endif
+#ifndef UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_FN_FUNC_RENDER_TYPST_PREVIEW_SVG
+#define UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_FN_FUNC_RENDER_TYPST_PREVIEW_SVG
+RustBuffer uniffi_affine_mobile_native_fn_func_render_typst_preview_svg(RustBuffer code, RustBuffer font_dirs, RustBuffer cache_dir, RustCallStatus *_Nonnull out_status
 );
 #endif
 #ifndef UNIFFI_FFIDEF_FFI_AFFINE_MOBILE_NATIVE_RUSTBUFFER_ALLOC
@@ -742,6 +752,18 @@ uint16_t uniffi_affine_mobile_native_checksum_func_hashcash_mint(void
 #define UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_CHECKSUM_FUNC_NEW_DOC_STORAGE_POOL
 uint16_t uniffi_affine_mobile_native_checksum_func_new_doc_storage_pool(void
    
+);
+#endif
+#ifndef UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_CHECKSUM_FUNC_RENDER_MERMAID_PREVIEW_SVG
+#define UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_CHECKSUM_FUNC_RENDER_MERMAID_PREVIEW_SVG
+uint16_t uniffi_affine_mobile_native_checksum_func_render_mermaid_preview_svg(void
+    
+);
+#endif
+#ifndef UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_CHECKSUM_FUNC_RENDER_TYPST_PREVIEW_SVG
+#define UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_CHECKSUM_FUNC_RENDER_TYPST_PREVIEW_SVG
+uint16_t uniffi_affine_mobile_native_checksum_func_render_typst_preview_svg(void
+    
 );
 #endif
 #ifndef UNIFFI_FFIDEF_UNIFFI_AFFINE_MOBILE_NATIVE_CHECKSUM_METHOD_DOCSTORAGEPOOL_CLEAR_CLOCKS
@@ -8,4 +8,18 @@
 import ApolloAPI

 /// The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
-public typealias JSON = String
+public struct JSON: CustomScalarType, Hashable, ExpressibleByDictionaryLiteral {
+  public let value: JSONValue
+
+  public init(_jsonValue value: JSONValue) throws {
+    self.value = value
+  }
+
+  public init(dictionaryLiteral elements: (String, JSONValue)...) {
+    value = ApolloAPI.JSONObject(uniqueKeysWithValues: elements) as JSONValue
+  }
+
+  public var _jsonValue: JSONValue {
+    value
+  }
+}
@@ -8,4 +8,22 @@
 import ApolloAPI

 /// The `JSONObject` scalar type represents JSON objects as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
-public typealias JSONObject = String
+public struct JSONObject: CustomScalarType, Hashable, ExpressibleByDictionaryLiteral {
+  public let object: ApolloAPI.JSONObject
+
+  public init(_jsonValue value: JSONValue) throws {
+    object = try ApolloAPI.JSONObject(_jsonValue: value)
+  }
+
+  public init(_ object: ApolloAPI.JSONObject) {
+    self.object = object
+  }
+
+  public init(dictionaryLiteral elements: (String, JSONValue)...) {
+    object = ApolloAPI.JSONObject(uniqueKeysWithValues: elements)
+  }
+
+  public var _jsonValue: JSONValue {
+    object
+  }
+}
@@ -26,6 +26,7 @@ private extension InputBoxData {
 }

 public extension ChatManager {
+  @MainActor
  func startUserRequest(editorData: InputBoxData, sessionId: String) {
    append(sessionId: sessionId, UserMessageCellViewModel(
      id: .init(),
@@ -163,7 +164,7 @@ private extension ChatManager {
    assert(!Thread.isMainThread)
    print("[+] starting copilot response for session: \(sessionId)")

-    let messageParameters: [String: AnyHashable] = [
+    let messageParameters: AffineGraphQL.JSON = [
      // packages/frontend/core/src/blocksuite/ai/provider/setup-provider.tsx
      "docs": editorData.documentAttachments.map(\.documentID), // affine doc
      "files": [String](), // attachment in context, keep nil for now
@@ -193,18 +194,14 @@ private extension ChatManager {
      },
    ].flatMap(\.self)
    assert(uploadableAttachments.allSatisfy { !($0.data?.isEmpty ?? true) })
-    guard let input = try? CreateChatMessageInput(
+    let input = CreateChatMessageInput(
      attachments: [],
      blob: attachmentCount == 1 ? "" : .none,
      blobs: attachmentCount > 1 && attachmentCount != 0 ? .some([]) : .none,
      content: .some(contextSnippet.isEmpty ? editorData.text : "\(contextSnippet)\n\(editorData.text)"),
-      params: .some(AffineGraphQL.JSON(_jsonValue: messageParameters)),
+      params: .some(messageParameters),
      sessionId: sessionId
-    ) else {
-      report(sessionId, ChatError.unknownError)
-      assertionFailure() // very unlikely to happen
-      return
-    }
+    )
    let mutation = CreateCopilotMessageMutation(options: input)
    QLService.shared.client.upload(operation: mutation, files: uploadableAttachments) { result in
      print("[*] createCopilotMessage result: \(result)")
@@ -277,7 +274,7 @@ private extension ChatManager {
      let eventSource = EventSource()
      let dataTask = eventSource.dataTask(for: request)
      var document = ""
-      self.writeMarkdownContent(document + loadingIndicator, sessionId: sessionId, vmId: vmId)
+      await self.writeMarkdownContent(document + loadingIndicator, sessionId: sessionId, vmId: vmId)
      for await event in dataTask.events() {
        switch event {
        case .open:
@@ -287,7 +284,7 @@ private extension ChatManager {
        case let .event(event):
          guard let data = event.data else { continue }
          document += data
-          self.writeMarkdownContent(
+          await self.writeMarkdownContent(
            document + loadingIndicator,
            sessionId: sessionId,
            vmId: vmId
@@ -297,13 +294,13 @@ private extension ChatManager {
          print("[*] connection closed")
        }
      }
-      self.writeMarkdownContent(document, sessionId: sessionId, vmId: vmId)
+      await self.writeMarkdownContent(document, sessionId: sessionId, vmId: vmId)
      self.closeAll()
    }))
    self.closable.append(closable)
  }

-  private func writeMarkdownContent(
+  @MainActor private func writeMarkdownContent(
    _ document: String,
    sessionId: SessionID,
    vmId: UUID
@@ -9,7 +9,7 @@ import Foundation
 import MarkdownView

 extension IntelligentContext {
-  func prepareMarkdownViewThemes() {
+  @MainActor func prepareMarkdownViewThemes() {
    MarkdownTheme.default.colors.body = .affineTextPrimary
    MarkdownTheme.default.colors.highlight = .affineTextLink
  }
@@ -40,7 +40,7 @@ struct AssistantMessageCellViewModel: ChatCellViewModel {

  var preprocessedContent: MarkdownTextView.PreprocessedContent

-  init(
+  @MainActor init(
    id: UUID,
    content: String,
    timestamp: Date,
@@ -45,13 +45,13 @@ EXTERNAL SOURCES:
    :path: "../../../../../node_modules/capacitor-plugin-app-tracking-transparency"

 SPEC CHECKSUMS:
-  Capacitor: 12914e6f1b7835e161a74ebd19cb361efa37a7dd
-  CapacitorApp: 63b237168fc869e758481dba283315a85743ee78
-  CapacitorBrowser: b98aa3db018a2ce4c68242d27e596c344f3b81b3
+  Capacitor: a5bf59e09f9dd82694fdcca4d107b4d215ac470f
+  CapacitorApp: 3ddbd30ac18c321531c3da5e707b60873d89dd60
+  CapacitorBrowser: 66aa8ff09cdca2a327ce464b113b470e6f667753
  CapacitorCordova: 31bbe4466000c6b86d9b7f1181ee286cff0205aa
-  CapacitorHaptics: ce15be8f287fa2c61c7d2d9e958885b90cf0bebc
-  CapacitorKeyboard: 5660c760113bfa48962817a785879373cf5339c3
-  CapacitorPluginAppTrackingTransparency: 92ae9c1cfb5cf477753db9269689332a686f675a
+  CapacitorHaptics: d17da7dd984cae34111b3f097ccd3e21f9feec62
+  CapacitorKeyboard: 45cae3956a6f4fb1753f9a4df3e884aeaed8fe82
+  CapacitorPluginAppTrackingTransparency: 2a2792623a5a72795f2e8f9ab3f1147573732fd8
  CryptoSwift: 967f37cea5a3294d9cce358f78861652155be483

 PODFILE CHECKSUM: 2c1e4be82121f2d9724ecf7e31dd14e165aeb082
@@ -17,6 +17,7 @@ import {
  SubscriptionService,
  ValidatorProvider,
 } from '@affine/core/modules/cloud';
+import { registerNativePreviewHandlers } from '@affine/core/modules/code-block-preview-renderer';
 import { DocsService } from '@affine/core/modules/doc';
 import { FeatureFlagService } from '@affine/core/modules/feature-flag';
 import { GlobalContextService } from '@affine/core/modules/global-context';
@@ -71,6 +72,7 @@ import { Auth } from './plugins/auth';
 import { Hashcash } from './plugins/hashcash';
 import { NbStoreNativeDBApis } from './plugins/nbstore';
 import { PayWall } from './plugins/paywall';
+import { Preview } from './plugins/preview';
 import { writeEndpointToken } from './proxy';
 import { enableNavigationGesture$ } from './web-navigation-control';

@@ -215,6 +217,11 @@ framework.impl(NativePaywallProvider, {

 const frameworkProvider = framework.provider();

+registerNativePreviewHandlers({
+  renderMermaidSvg: request => Preview.renderMermaidSvg(request),
+  renderTypstSvg: request => Preview.renderTypstSvg(request),
+});
+
 // ------ some apis for native ------
 (window as any).getCurrentServerBaseUrl = () => {
  const globalContextService = frameworkProvider.get(GlobalContextService);
@@ -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 }>;
+}
@@ -0,0 +1,8 @@
+import { registerPlugin } from '@capacitor/core';
+
+import type { PreviewPlugin } from './definitions';
+
+const Preview = registerPlugin<PreviewPlugin>('Preview');
+
+export * from './definitions';
+export { Preview };