feat: markdown rendering

composeApp/build.gradle.kts

@@ -71,6 +71,10 @@ kotlin {
             implementation(libs.ktor.client.content.negotiation)
             implementation(libs.ktor.serialization.kotlinx.json)
             implementation(libs.okio)
+            implementation(libs.multiplatform.markdown.renderer.m3)
+            implementation(libs.multiplatform.markdown.renderer.coil3)
+            implementation(libs.coil.compose)
+            implementation(libs.coil.network.ktor)
         }
 
         val nonWebMain by creating {

composeApp/src/commonMain/kotlin/io/github/smiling_pixel/App.kt

@@ -39,6 +39,7 @@ import io.github.smiling_pixel.database.InMemoryFileMetadataDao
 import io.github.smiling_pixel.client.GoogleWeatherClient
 import io.github.smiling_pixel.client.WeatherClient
 import io.github.smiling_pixel.preference.getSettingsRepository
+import coil3.compose.setSingletonImageLoaderFactory
 
 @Serializable
 sealed interface AppRoute
@@ -64,6 +65,10 @@ fun App(
     providedRepo: io.github.smiling_pixel.database.DiaryRepository? = null,
     providedFileRepo: FileRepository? = null
 ) {
+    setSingletonImageLoaderFactory { context ->
+        getAsyncImageLoader(context)
+    }
+
     MaterialTheme {
         val repo = providedRepo ?: remember { DiaryRepository(InMemoryDiaryDao()) }
         val fileRepo = providedFileRepo ?: remember { 

composeApp/src/commonMain/kotlin/io/github/smiling_pixel/EntryDetailsScreen.kt

@@ -3,14 +3,16 @@ package io.github.smiling_pixel
 import io.github.smiling_pixel.model.DiaryEntry
 import io.github.smiling_pixel.client.WeatherClient
 import io.github.smiling_pixel.model.Location
+import com.mikepenz.markdown.m3.Markdown
+import com.mikepenz.markdown.coil3.Coil3ImageTransformerImpl
 import kotlin.time.Clock
+import kotlin.time.Instant
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toLocalDateTime
 import kotlinx.datetime.LocalDateTime
 import kotlinx.datetime.LocalTime
 import kotlinx.datetime.toInstant
 import kotlinx.datetime.atStartOfDayIn
-import kotlinx.datetime.Instant
 import kotlinx.coroutines.launch
 
 import androidx.compose.foundation.clickable
@@ -173,6 +175,7 @@ fun EntryDetailsScreen(
                 value = title,
                 onValueChange = { title = it },
                 label = { Text("Title") },
+                placeholder = { Text("Enter title...") },
                 modifier = Modifier.fillMaxWidth(),
                 textStyle = MaterialTheme.typography.headlineMedium
             )
@@ -269,6 +272,7 @@ fun EntryDetailsScreen(
                 value = content,
                 onValueChange = { content = it },
                 label = { Text("Content") },
+                placeholder = { Text("Type anything... Markdown is supported.") },
                 modifier = Modifier.fillMaxSize()
             )
         } else {
@@ -314,9 +318,9 @@ fun EntryDetailsScreen(
 
             Spacer(modifier = Modifier.height(12.dp))
 
-            Text(
-                text = entry.content,
-                style = MaterialTheme.typography.bodyMedium,
+            Markdown(
+                content = entry.content,
+                imageTransformer = Coil3ImageTransformerImpl,
             )
         }
     }

composeApp/src/commonMain/kotlin/io/github/smiling_pixel/ImageLoader.kt

@@ -0,0 +1,18 @@
+package io.github.smiling_pixel
+
+import coil3.ImageLoader
+import coil3.PlatformContext
+import coil3.network.ktor3.KtorNetworkFetcherFactory
+import coil3.request.crossfade
+import io.github.smiling_pixel.filesystem.LocalFileFetcher
+import io.github.smiling_pixel.filesystem.fileManager
+
+fun getAsyncImageLoader(context: PlatformContext): ImageLoader {
+    return ImageLoader.Builder(context)
+        .components {
+            add(LocalFileFetcher.Factory(fileManager)) // use localfile scheme, e.g., `localfile://myimage.jpg`, see LocalFileFetcher implementation for details
+            add(KtorNetworkFetcherFactory())
+        }
+        .crossfade(true)
+        .build()
+}

composeApp/src/commonMain/kotlin/io/github/smiling_pixel/MomentsScreen.kt

@@ -40,7 +40,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
 import io.github.smiling_pixel.filesystem.FileRepository
 import io.github.smiling_pixel.model.FileMetadata
-import kotlinx.datetime.Instant
+import kotlin.time.Instant
 import kotlinx.datetime.TimeZone
 import kotlinx.datetime.toLocalDateTime
 

composeApp/src/commonMain/kotlin/io/github/smiling_pixel/filesystem/LocalFileFetcher.kt

@@ -0,0 +1,76 @@
+package io.github.smiling_pixel.filesystem
+
+import coil3.ImageLoader
+import coil3.Uri
+import coil3.decode.DataSource
+import coil3.decode.ImageSource
+import coil3.fetch.Fetcher
+import coil3.fetch.FetchResult
+import coil3.fetch.SourceFetchResult
+import coil3.request.Options
+import okio.Buffer
+import okio.FileSystem
+import okio.Path
+import okio.IOException
+
+class LocalFileFetcher(
+    private val fileName: String,
+    private val fileManager: FileManager
+) : Fetcher {
+
+    override suspend fun fetch(): FetchResult? {
+        val bytes = fileManager.read(fileName) ?: return null
+        val buffer = Buffer().write(bytes)
+
+        return SourceFetchResult(
+            source = ImageSource(buffer, EmptyFileSystem),
+            mimeType = null,
+            dataSource = DataSource.DISK
+        )
+    }
+
+    /**
+     * Factory for creating [LocalFileFetcher] instances for URIs with the `localfile` scheme.
+     *
+     * Expected formats include:
+     * - `localfile:image.jpg`
+     * - `localfile:/image.jpg`
+     * - `localfile:///image.jpg`
+     *
+     * In all cases, [Uri.path] is used and any leading '/' characters are trimmed before
+     * being passed to [FileManager]. Only the `localfile` scheme is recognized here.
+     */
+    class Factory(private val fileManager: FileManager) : Fetcher.Factory<Uri> {
+        override fun create(data: Uri, options: Options, imageLoader: ImageLoader): Fetcher? {
+            if (data.scheme == "localfile") {
+                // data.path might start with /, e.g. /image.jpg
+                val fileName = data.path?.trimStart('/') ?: return null
+                return LocalFileFetcher(fileName, fileManager)
+            }
+            return null
+        }
+    }
+}
+
+/**
+ * A dummy [FileSystem] implementation used for [ImageSource] when the data is already buffered in memory.
+ * 
+ * Since we load the file content into an Okio [Buffer] using [FileManager] and pass that buffer to [ImageSource],
+ * Coil does not need to read from the file system directly for this source. 
+ * This implementation safely returns null or throws strict exceptions to ensure no unintended file system usage occurs.
+ */
+object EmptyFileSystem : FileSystem() {
+    override fun canonicalize(path: Path) = path
+    override fun metadataOrNull(path: Path) = null
+    override fun list(dir: Path) = throw IOException("Not supported")
+    override fun listOrNull(dir: Path): List<Path>? = null
+    override fun openReadOnly(file: Path) = throw IOException("Not supported")
+    override fun openReadWrite(file: Path, mustCreate: Boolean, mustExist: Boolean) = throw IOException("Not supported")
+    override fun source(file: Path) = throw IOException("Not supported")
+    override fun sink(file: Path, mustCreate: Boolean) = throw IOException("Not supported")
+    override fun appendingSink(file: Path, mustExist: Boolean) = throw IOException("Not supported")
+    override fun createDirectory(dir: Path, mustCreate: Boolean) = throw IOException("Not supported")
+    override fun atomicMove(source: Path, target: Path) = throw IOException("Not supported")
+    override fun delete(path: Path, mustExist: Boolean) = throw IOException("Not supported")
+    override fun createSymlink(source: Path, target: Path) = throw IOException("Not supported")
+}

gradle/libs.versions.toml

@@ -20,6 +20,8 @@ okio = "3.16.2"
 room = "2.8.4"
 ksp = "2.3.3"
 sqlite = "2.6.2"
+markdown-renderer = "0.27.0"
+coil = "3.0.4"
 
 [libraries]
 kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinx-coroutines" }
@@ -47,6 +49,10 @@ okio = { module = "com.squareup.okio:okio", version.ref = "okio" }
 androidx-room-runtime = { module = "androidx.room:room-runtime", version.ref = "room" }
 androidx-room-compiler = { module = "androidx.room:room-compiler", version.ref = "room" }
 sqlite-bundled = { module = "androidx.sqlite:sqlite-bundled", version.ref = "sqlite" }
+multiplatform-markdown-renderer-m3 = { module = "com.mikepenz:multiplatform-markdown-renderer-m3", version.ref = "markdown-renderer" }
+multiplatform-markdown-renderer-coil3 = { module = "com.mikepenz:multiplatform-markdown-renderer-coil3", version.ref = "markdown-renderer" }
+coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil" }
+coil-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor3", version.ref = "coil" }
 
 [plugins]
 androidApplication = { id = "com.android.application", version.ref = "agp" }