refactor: move webmarkdown template to file

Signed-off-by: Infi <wingit@geist.ga>
This commit is contained in:
Infi 2023-09-08 01:28:51 +02:00
parent 0418a3614f
commit 3a5098ecf1
2 changed files with 111 additions and 102 deletions

View File

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
@font-face {
font-family: "Inter";
src: url("/_android_res/font/inter_regular.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Inter";
src: url("/_android_res/font/inter_bold.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/_android_res/font/jetbrainsmono_regular.ttf");
font-weight: 400;
font-style: normal;
}
body, html {
font-family: "Inter", sans-serif;
margin: 0;
padding: 0;
color: {content};
}
a:link, a:visited {
color: {primary};
text-decoration: none;
}
pre, code {
font-family: "JetBrains Mono", monospace;
}
#markdown {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
max-width: 100vw;
overflow-x: hidden;
}
#markdown img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div id="markdown"></div>
<script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
<script>
window.addEventListener("load", () => {
const style = document.querySelector("style")
style.innerHTML = style.innerHTML
.replaceAll("{content}", Bridge.getContentColour())
.replaceAll("{primary}", Bridge.getPrimaryColour())
const converter = new showdown.Converter()
converter.setFlavor("github")
converter.setOption("tables", true)
converter.setOption("emoji", true)
converter.setOption("disableForced4SpacesIndentedSublists", true)
converter.setOption("noHeaderId", true)
converter.setOption("simpleLineBreaks", true)
converter.setOption("strikethrough", true)
converter.setOption("tasklists", true)
const markdown = document.querySelector("#markdown")
const html = converter.makeHtml(Bridge.getMarkdown())
markdown.innerHTML = DOMPurify.sanitize(html)
Bridge.onLoaded()
})
</script>
</body>
</html>

View File

@ -31,91 +31,6 @@ import androidx.compose.ui.viewinterop.AndroidView
import androidx.webkit.WebViewAssetLoader
import chat.revolt.activities.InviteActivity
import chat.revolt.api.REVOLT_APP
import org.intellij.lang.annotations.Language
// TODO: Obvious placeholder.
@Language("HTML")
private const val HTML_TEMPLATE = """
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<style>
@font-face {
font-family: "Inter";
src: url("/_android_res/font/inter_regular.ttf");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Inter";
src: url("/_android_res/font/inter_bold.ttf");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "JetBrains Mono";
src: url("/_android_res/font/jetbrainsmono_regular.ttf");
font-weight: 400;
font-style: normal;
}
body, html {
font-family: "Inter", sans-serif;
margin: 0;
padding: 0;
color: %s;
}
a:link, a:visited {
color: %s;
text-decoration: none;
}
pre, code {
font-family: "JetBrains Mono", monospace;
}
#markdown {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
hyphens: auto;
max-width: 100vw;
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="markdown">%s</div>
<script src="https://cdn.jsdelivr.net/npm/showdown@2.1.0/dist/showdown.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.5/dist/purify.min.js"></script>
<script>
window.addEventListener("load", () => {
const converter = new showdown.Converter()
converter.setFlavor("github")
converter.setOption("tables", true)
converter.setOption("emoji", true)
converter.setOption("disableForced4SpacesIndentedSublists", true)
converter.setOption("noHeaderId", true)
converter.setOption("simpleLineBreaks", true)
converter.setOption("strikethrough", true)
converter.setOption("tasklists", true)
const markdown = document.querySelector("#markdown")
const html = converter.makeHtml(markdown.innerHTML)
markdown.innerHTML = DOMPurify.sanitize(html)
Android.onLoaded()
})
</script>
</body>
</html>
"""
private fun argbAsCssColour(argb: Int): String {
val alpha = (argb shr 24 and 0xff) / 255.0f
@ -154,16 +69,6 @@ fun WebMarkdown(
modifier = modifier,
factory = { context ->
WebView(context).apply {
val cssContentColour = argbAsCssColour(contentColour.toArgb())
val cssPrimaryColour = argbAsCssColour(materialColourScheme.primary.toArgb())
val html = String.format(
HTML_TEMPLATE,
cssContentColour,
cssPrimaryColour,
text.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
)
val assetLoader = WebViewAssetLoader.Builder()
.setDomain(Uri.parse(REVOLT_APP).host!!)
.addPathHandler(
@ -222,12 +127,8 @@ fun WebMarkdown(
}
}
loadDataWithBaseURL(
REVOLT_APP,
html,
"text/html; charset=utf-8",
"UTF-8",
null
loadUrl(
"https://app.revolt.chat/_android_assets/webmarkdown/renderer.html",
)
settings.apply {
@ -245,8 +146,26 @@ fun WebMarkdown(
fun onLoaded() {
finishedLoading = true
}
@JavascriptInterface
fun getMarkdown(): String {
return text
.replace("&", "&amp;")
.replace("<", "&lt;")
.replace(">", "&gt;")
}
@JavascriptInterface
fun getContentColour(): String {
return argbAsCssColour(contentColour.toArgb())
}
@JavascriptInterface
fun getPrimaryColour(): String {
return argbAsCssColour(materialColourScheme.primary.toArgb())
}
},
"Android"
"Bridge"
)
setBackgroundColor(android.graphics.Color.TRANSPARENT)