https://kotlinlang.org logo
Join Slack
Powered by
Hi, is there a simple way to insert an element int...
# compose-web
a
Hi, is there a simple way to insert an element into a Text() ? Like 
${Br()}
into a raw string ? For now it just prints the result of the method which is 
kotlin.Unit
h
What do you mean? What do you want to have?
a
Copy code
Text("my text blah blah ${InsertBRTag} then blah blah")
So I don't have to do this
Copy code
Text("my text blah blah ")
Br()
Text(" then blah blah")
For links it's even more verbose :)
b
println("${'$'}{Br()}")
Note the dollar escape
Oh, nvm. I see what you're trying to do. CfW does not support rich html strings
i.e. not possible without external libs
h
So you could just overload the Text and parse it and split it by yourself
Or, dont know if it is a little bit overkill but I would write my own dsl 😄
a
Ah, I'll try then
h
eg:
Copy code
@Composable
fun Text(text: String) {
    val components = text.split("<br>")
    for ((index, component) in components.withIndex()) {
        org.jetbrains.compose.web.dom.Text(component)
        if (index != component.lastIndex) {
            Br()
        }
    }
}
a
Maybe do you know any Markdown library for Compose ?
h
I don't know of any, but I didn't search :)
a
It seems that there are none for CfW
h
Sounds like a new project 😄
a
For me I only need searching for links and br :)
h
Hm, never mind 😄
Copy code
val regex = """<([^>]*)>""".toRegex()
fun String.getTokens(): Sequence<Pair<String, MatchResult?>> = sequence {
    var last = 0
    for (match in regex.findAll(this@getTokens)) {
        yield(this@getTokens.substring(last until match.range.first) to null)
        last = match.range.last + 1
        yield(this@getTokens.substring(match.range) to match)
    }
    if (last != this@getTokens.length) {
        yield(this@getTokens.substring(last) to null)
    }
}
parsing the href tag is a little bit ugly
Okay, this works for href and br only, but is ugly... Using a real bnf grammar would be better than hacking with regex...
Copy code
package app.softwork.markdowncompose

import androidx.compose.runtime.*
import org.jetbrains.compose.web.attributes.*
import org.jetbrains.compose.web.dom.*

@Composable
public fun renderMarkdown(markdown: String) {
    val iterator = markdown.getTokens().iterator()
    while (iterator.hasNext()) {
        val (rawText, htmlTag) = iterator.next()
        val htmlValue = htmlTag?.groups?.get(1)?.value
        val markdownLink = htmlTag?.groups?.get(2)?.value
        when {
            markdownLink != null -> renderLink(markdownLink)
            htmlValue == null -> Text(rawText)
            htmlValue == "br" -> Br()
            htmlValue.startsWith("a") -> renderA(htmlValue, iterator)
        }
    }
}

private const val markdownLink = """!\[([^\]]*)\]\(([^\)*])\)"""
private val markdownLinkRegex = markdownLink.toRegex()
private val regex = """<([^>]*)>|($markdownLink)""".toRegex()

private fun String.getTokens(): Sequence<Pair<String, MatchResult?>> = sequence {
    var last = 0
    for (match in regex.findAll(this@getTokens)) {
        yield(substring(last until match.range.first) to null)
        last = match.range.last + 1
        yield(substring(match.range) to match)
    }
    if (last != length) {
        yield(substring(last) to null)
    }
}

@Composable
private fun renderA(htmlValue: String, iterator: Iterator<Pair<String, MatchResult?>>) {
    val attrs = htmlValue.split(" ")
    val content = iterator.next()
    A(
        attrs = {
            for (attr in attrs) {
                when {
                    attr.startsWith("href") -> href(attr.removePrefix("href=\"").dropLast(1))
                }
            }
        }) {
        Text(content.first)
    }
    iterator.next()
}

@Composable
private fun renderLink(markdown: String) {
    val link = markdownLinkRegex.matchEntire(markdown)!!.groups
    val content = link[1]!!.value
    val href = link[2]!!.value
    A(href = href) {
        Text(content)
    }
}
Why do you want to do this in the browser? For static converter it would be better to convert it locally instead dynamically in the browser
a
I mean I want it any way :)
h
If you want to convert it only statically, I would do it locally and use/write a proper library. If you expect to update your view dynamically, eg based on user input, the latter would be better with highlighting etc. 😄 I would use only this hack, if you get the markdown from an api limited only to br and links
m
a
Sadly your links are only for Compose Desktop and Android
44 Views
Open in Slack
PreviousNext
Powered by