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/App/app/src/main/java/app/affine/pro/MainActivity.kt

@@ -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,
             )
         )
     }

packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/ai/chat/ChatUiState.kt

@@ -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,

packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/plugin/PreviewPlugin.kt

@@ -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)
+            }
+        }
+    }
+}

packages/frontend/apps/android/App/app/src/main/java/app/affine/pro/service/GraphQLService.kt

@@ -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(

packages/frontend/apps/android/App/app/src/main/java/uniffi/affine_mobile_native/affine_mobile_native.kt

@@ -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)
+}
+    )
+    }
+    
+