Start playing with ChipDrawable to show Pills

app/src/main/java/im/vector/riotredesign/core/di/AppModule.kt

@@ -22,7 +22,6 @@ import im.vector.riotredesign.core.resources.ColorProvider
 import im.vector.riotredesign.core.resources.LocaleProvider
 import im.vector.riotredesign.core.resources.StringProvider
 import im.vector.riotredesign.features.home.room.list.RoomSelectionRepository
-import im.vector.riotredesign.features.markdown.HtmlRenderer
 import org.koin.dsl.module.module
 
 class AppModule(private val context: Context) {
@@ -49,9 +48,5 @@ class AppModule(private val context: Context) {
             RoomSelectionRepository(get())
         }
 
-        single {
-            HtmlRenderer(context)
-        }
-
     }
 }

app/src/main/java/im/vector/riotredesign/features/home/HomeActivity.kt

@@ -45,7 +45,7 @@ class HomeActivity : RiotActivity(), ToolbarConfigurable {
     private val homeNavigator by inject<HomeNavigator>()
 
     override fun onCreate(savedInstanceState: Bundle?) {
-        loadKoinModules(listOf(HomeModule().definition))
+        loadKoinModules(listOf(HomeModule(this).definition))
         homeNavigator.activity = this
         super.onCreate(savedInstanceState)
         setContentView(R.layout.activity_home)

app/src/main/java/im/vector/riotredesign/features/home/HomeModule.kt

@@ -22,9 +22,10 @@ import im.vector.riotredesign.features.home.room.detail.timeline.*
 import im.vector.riotredesign.features.home.room.detail.timeline.helper.TimelineMediaSizeProvider
 import im.vector.riotredesign.features.home.room.list.RoomSummaryComparator
 import im.vector.riotredesign.features.home.room.list.RoomSummaryController
+import im.vector.riotredesign.features.markdown.EventHtmlRenderer
 import org.koin.dsl.module.module
 
-class HomeModule {
+class HomeModule(homeActivity: HomeActivity) {
 
     val definition = module(override = true) {
 
@@ -32,6 +33,10 @@ class HomeModule {
             TimelineDateFormatter(get())
         }
 
+        single {
+            EventHtmlRenderer(homeActivity)
+        }
+
         single {
             MessageItemFactory(get(), get(), get(), get())
         }

app/src/main/java/im/vector/riotredesign/features/home/room/detail/timeline/MessageItemFactory.kt

@@ -29,14 +29,14 @@ import im.vector.riotredesign.core.epoxy.RiotEpoxyModel
 import im.vector.riotredesign.core.extensions.localDateTime
 import im.vector.riotredesign.core.resources.ColorProvider
 import im.vector.riotredesign.features.home.room.detail.timeline.helper.TimelineMediaSizeProvider
-import im.vector.riotredesign.features.markdown.HtmlRenderer
+import im.vector.riotredesign.features.markdown.EventHtmlRenderer
 import im.vector.riotredesign.features.media.MediaContentRenderer
 import me.gujun.android.span.span
 
 class MessageItemFactory(private val colorProvider: ColorProvider,
                          private val timelineMediaSizeProvider: TimelineMediaSizeProvider,
                          private val timelineDateFormatter: TimelineDateFormatter,
-                         private val htmlRenderer: HtmlRenderer) {
+                         private val htmlRenderer: EventHtmlRenderer) {
 
     private val messagesDisplayedWithInformation = HashSet<String?>()
 

app/src/main/java/im/vector/riotredesign/features/markdown/EventHtmlRenderer.kt

@@ -19,6 +19,11 @@
 package im.vector.riotredesign.features.markdown
 
 import android.content.Context
+import android.text.style.ImageSpan
+import com.google.android.material.chip.ChipDrawable
+import im.vector.matrix.android.api.permalinks.PermalinkData
+import im.vector.matrix.android.api.permalinks.PermalinkParser
+import im.vector.riotredesign.R
 import org.commonmark.node.BlockQuote
 import org.commonmark.node.HtmlBlock
 import org.commonmark.node.HtmlInline
@@ -45,10 +50,10 @@ import ru.noties.markwon.html.tag.SuperScriptHandler
 import ru.noties.markwon.html.tag.UnderlineHandler
 import java.util.Arrays.asList
 
-class HtmlRenderer(private val context: Context) {
+class EventHtmlRenderer(private val context: Context) {
 
     private val markwon = Markwon.builder(context)
-            .usePlugin(MatrixPlugin.create())
+            .usePlugin(MatrixPlugin.create(context))
             .build()
 
     fun render(text: String): CharSequence {
@@ -57,7 +62,7 @@ class HtmlRenderer(private val context: Context) {
 
 }
 
-private class MatrixPlugin private constructor() : AbstractMarkwonPlugin() {
+private class MatrixPlugin private constructor(private val context: Context) : AbstractMarkwonPlugin() {
 
     override fun configureConfiguration(builder: MarkwonConfiguration.Builder) {
         builder.htmlParser(MarkwonHtmlParserImpl.create())
@@ -70,7 +75,7 @@ private class MatrixPlugin private constructor() : AbstractMarkwonPlugin() {
                         ImageHandler.create())
                 .addHandler(
                         "a",
-                        LinkHandler())
+                        MxLinkHandler(context))
                 .addHandler(
                         "blockquote",
                         BlockquoteHandler())
@@ -122,12 +127,44 @@ private class MatrixPlugin private constructor() : AbstractMarkwonPlugin() {
 
     companion object {
 
-        fun create(): MatrixPlugin {
-            return MatrixPlugin()
+        fun create(context: Context): MatrixPlugin {
+            return MatrixPlugin(context)
         }
     }
 }
 
+private class MxLinkHandler(private val context: Context) : TagHandler() {
+
+    private val linkHandler = LinkHandler()
+
+    override fun handle(visitor: MarkwonVisitor, renderer: MarkwonHtmlRenderer, tag: HtmlTag) {
+        val link = tag.attributes()["href"]
+        if (link != null) {
+            val permalinkData = PermalinkParser.parse(link)
+            when (permalinkData) {
+                is PermalinkData.UserLink -> {
+                    val chipDrawable = ChipDrawable.createFromResource(context, R.xml.pill_view)
+                    chipDrawable.setText(permalinkData.userId)
+                    chipDrawable.textEndPadding = 8f
+                    chipDrawable.textStartPadding = 8f
+                    chipDrawable.setBounds(0, 0, chipDrawable.intrinsicWidth, (chipDrawable.intrinsicHeight / 1.5f).toInt())
+                    val span = ImageSpan(chipDrawable)
+                    SpannableBuilder.setSpans(
+                            visitor.builder(),
+                            span,
+                            tag.start(),
+                            tag.end()
+                    )
+                }
+                else                      -> linkHandler.handle(visitor, renderer, tag)
+            }
+        } else {
+            linkHandler.handle(visitor, renderer, tag)
+        }
+    }
+
+}
+
 private class MxReplyTagHandler : TagHandler() {
 
     override fun handle(visitor: MarkwonVisitor, renderer: MarkwonHtmlRenderer, tag: HtmlTag) {

app/src/main/res/values/colors.xml

@@ -17,4 +17,9 @@
     <color name="pale_grey_two">#ebedf8</color>
     <color name="brown_grey">#a5a5a5</color>
     <color name="grey_lynch">#61708B</color>
+
+    <color name="vector_silver_color">#FFC7C7C7</color>
+    <color name="vector_dark_grey_color">#FF999999</color>
+    <color name="vector_fuchsia_color">#FFF56679</color>
+
 </resources>

app/src/main/res/values/themes_base.xml

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
 
-    <style name="Base.V1.Theme.Riot" parent="Theme.AppCompat.Light.NoActionBar">
+    <style name="Base.V1.Theme.Riot" parent="Theme.MaterialComponents.Light.NoActionBar.Bridge">
         <item name="colorPrimary">@color/dark</item>
         <item name="colorPrimaryDark">@color/dark</item>
         <item name="colorAccent">@color/pale_teal</item>
@@ -11,5 +11,4 @@
     <style name="Base.Theme.Riot" parent="Base.V1.Theme.Riot" />
 
 
-
 </resources>

app/src/main/res/xml/pill_view.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<chip xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    style="@style/Widget.MaterialComponents.Chip.Entry"
+    android:checkable="false"
+    app:closeIcon="@null" />