refactor: move webmarkdown template to file
Signed-off-by: Infi <wingit@geist.ga>
This commit is contained in:
parent
0418a3614f
commit
3a5098ecf1
|
|
@ -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>
|
||||
|
|
@ -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("&", "&").replace("<", "<").replace(">", ">")
|
||||
)
|
||||
|
||||
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("&", "&")
|
||||
.replace("<", "<")
|
||||
.replace(">", ">")
|
||||
}
|
||||
|
||||
@JavascriptInterface
|
||||
fun getContentColour(): String {
|
||||
return argbAsCssColour(contentColour.toArgb())
|
||||
}
|
||||
|
||||
@JavascriptInterface
|
||||
fun getPrimaryColour(): String {
|
||||
return argbAsCssColour(materialColourScheme.primary.toArgb())
|
||||
}
|
||||
},
|
||||
"Android"
|
||||
"Bridge"
|
||||
)
|
||||
|
||||
setBackgroundColor(android.graphics.Color.TRANSPARENT)
|
||||
|
|
|
|||
Loading…
Reference in New Issue