Make images in markdown open in imageviewer

app/src/main/java/com/jerboa/MainActivity.kt

@@ -164,7 +164,7 @@ class MainActivity : AppCompatActivity() {
                 val serverVersionOutdatedViewed = remember { mutableStateOf(false) }
 
                 MarkdownHelper.init(
-                    appState.navController,
+                    appState,
                     appSettings.useCustomTabs,
                     appSettings.usePrivateTabs,
                 )

app/src/main/java/com/jerboa/ui/components/common/MarkdownHelper.kt

@@ -28,8 +28,8 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.content.res.ResourcesCompat
-import androidx.navigation.NavController
 import coil.ImageLoader
+import com.jerboa.JerboaAppState
 import com.jerboa.R
 import com.jerboa.convertSpToPx
 import com.jerboa.openLink
@@ -44,7 +44,7 @@ import io.noties.markwon.ext.tables.TablePlugin
 import io.noties.markwon.html.HtmlPlugin
 import io.noties.markwon.html.TagHandlerNoOp
 import io.noties.markwon.image.AsyncDrawableSpan
-import io.noties.markwon.image.coil.CoilImagesPlugin
+import io.noties.markwon.image.coil.ClickableCoilImagesPlugin
 import io.noties.markwon.linkify.LinkifyPlugin
 import io.noties.markwon.movement.MovementMethodPlugin
 import java.util.regex.Pattern
@@ -81,8 +81,8 @@ object MarkdownHelper {
     private var markwon: Markwon? = null
     private var previewMarkwon: Markwon? = null
 
-    fun init(navController: NavController, useCustomTabs: Boolean, usePrivateTabs: Boolean) {
-        val context = navController.context
+    fun init(appState: JerboaAppState, useCustomTabs: Boolean, usePrivateTabs: Boolean) {
+        val context = appState.navController.context
         val loader = ImageLoader.Builder(context)
             .crossfade(true)
             .placeholder(R.drawable.ic_launcher_foreground)
@@ -95,7 +95,7 @@ object MarkdownHelper {
             .usePlugin(MarkwonLemmyLinkPlugin())
             .usePlugin(StrikethroughPlugin.create())
             .usePlugin(TablePlugin.create(context))
-            .usePlugin(CoilImagesPlugin.create(context, loader))
+            .usePlugin(ClickableCoilImagesPlugin.create(context, loader, appState))
             .usePlugin(HtmlPlugin.create())
             // use TableAwareLinkMovementMethod to handle clicks inside tables,
             // wraps LinkMovementMethod internally
@@ -104,7 +104,7 @@ object MarkdownHelper {
             .usePlugin(object : AbstractMarkwonPlugin() {
                 override fun configureConfiguration(builder: MarkwonConfiguration.Builder) {
                     builder.linkResolver { _, link ->
-                        openLink(link, navController, useCustomTabs, usePrivateTabs)
+                        appState.openLink(link, useCustomTabs, usePrivateTabs)
                     }
                 }
             })

app/src/main/java/com/jerboa/util/ClickableCoilImagesPlugin.kt

@@ -0,0 +1,71 @@
+// CoilImagesPlugin has package private constructor, so this is a work around.
+package io.noties.markwon.image.coil
+
+import android.content.Context
+import android.text.style.ClickableSpan
+import android.view.View
+import coil.ImageLoader
+import coil.request.Disposable
+import coil.request.ImageRequest
+import com.jerboa.JerboaAppState
+import io.noties.markwon.MarkwonConfiguration
+import io.noties.markwon.MarkwonSpansFactory
+import io.noties.markwon.RenderProps
+import io.noties.markwon.image.AsyncDrawable
+import io.noties.markwon.image.AsyncDrawableSpan
+import io.noties.markwon.image.ImageSpanFactory
+import org.commonmark.node.Image
+
+class ClickableCoilImagesPlugin(coil: CoilStore, imageLoader: ImageLoader, private val appState: JerboaAppState) : CoilImagesPlugin(coil, imageLoader) {
+
+    companion object {
+        fun create(
+            context: Context,
+            imageLoader: ImageLoader,
+            appState: JerboaAppState,
+        ): ClickableCoilImagesPlugin {
+            return create(
+                object : CoilStore {
+                    override fun load(drawable: AsyncDrawable): ImageRequest {
+                        return ImageRequest.Builder(context)
+                            .data(drawable.destination)
+                            .build()
+                    }
+
+                    override fun cancel(disposable: Disposable) {
+                        disposable.dispose()
+                    }
+                },
+                imageLoader,
+                appState,
+            )
+        }
+
+        fun create(
+            coilStore: CoilStore,
+            imageLoader: ImageLoader,
+            appState: JerboaAppState,
+        ): ClickableCoilImagesPlugin {
+            return ClickableCoilImagesPlugin(coilStore, imageLoader, appState)
+        }
+    }
+
+    override fun configureSpansFactory(builder: MarkwonSpansFactory.Builder) {
+        builder.setFactory(Image::class.java, ClickableImageFactory(appState))
+    }
+}
+
+class ClickableImageFactory(val appState: JerboaAppState) : ImageSpanFactory() {
+
+    override fun getSpans(configuration: MarkwonConfiguration, props: RenderProps): Any {
+        val image = super.getSpans(configuration, props) as AsyncDrawableSpan
+        val clickSpan = object : ClickableSpan() {
+            override fun onClick(view: View) {
+                view.cancelPendingInputEvents()
+                appState.toView(image.drawable.destination)
+            }
+        }
+
+        return arrayOf(image, clickSpan)
+    }
+}