Рендеринг Markdown в Compose Web

Question

У меня есть веб-приложение Compose. Как я могу отобразить на нем Markdown?

Answer 1

Я нашел довольно простое решение, используя библиотеку .

Сначала нам нужно импортировать скрипт md-block. Мы можем либо добавить его как зависимость npm, либо просто загрузить модуль по URL-адресу, вот так.

      <!-- Put this in your index.html -->
<script type="module" src="https://md-block.verou.me/md-block.js"></script>

И затем в Котлине:

      // In your view html dsl:
var mdText: String? by mutableStateOf(null)

Button(attrs = {
    onClick {
        scope.launch {
            mdText = null // Reset value for md-block re-rendering
            mdText = viewModel.fetchContent()
        }
    }
}) {
    Text("Fetch data!")
}

mdText?.let {
    MarkDown(it)
}

      // In some shared file:
@Composable
fun MarkDown(
    mdText: String,
    attrs: AttrBuilderContext<HTMLElement>? = null,
) {
    TagElement(
        elementBuilder = {
            document.createElement("md-block").cloneNode() as HTMLElement
        },
        applyAttrs = attrs,
    ) {     
        Text(mdText)
    }
}

Обратите внимание, что md-блок устроен так, что он не будет повторно отображаться при рекомпозиции, даже если значение состояния изменится (подробности см. В md-blockдокументации ). Вот почему мы должны обнулить mdText перед установкой нового значения, чтобы он был полностью удален и добавлен заново.

Есть ли способ лучше?