Enso Docs: Proper indentation in HTML render of code block and copy button. (#1288)

This commit is contained in:
Maciej Mikołajek 2020-11-13 15:36:47 +01:00 committed by GitHub
parent a0f87b3611
commit 2c3f2014b2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -178,8 +178,8 @@ object Doc {
val uniqueIDBtn = Random.alphanumeric.take(8).mkString("") val uniqueIDBtn = Random.alphanumeric.take(8).mkString("")
val htmlIdCode = HTML.`id` := uniqueIDCode val htmlIdCode = HTML.`id` := uniqueIDCode
val htmlIdBtn = HTML.`id` := uniqueIDBtn val htmlIdBtn = HTML.`id` := uniqueIDBtn
val htmlStyle = HTML.`style` := "inline-block" val firstIndent = elems.head.indent
val elemsHTML = elems.toList.map(elem => elem.html) val elemsHTML = elems.toList.map(elem => elem.htmlOffset(firstIndent))
val btnAction = onclick := val btnAction = onclick :=
s"""var code = document.getElementById("$uniqueIDCode"); s"""var code = document.getElementById("$uniqueIDCode");
|var btn = document.getElementById("$uniqueIDBtn").firstChild; |var btn = document.getElementById("$uniqueIDBtn").firstChild;
@ -187,11 +187,34 @@ object Doc {
|code.style.display = code.style.display == |code.style.display = code.style.display ==
|"inline-block" ? "none" : "inline-block";""".stripMargin |"inline-block" ? "none" : "inline-block";""".stripMargin
.replaceAll("\n", "") .replaceAll("\n", "")
val copyAction = onclick :=
s"""var code = document.getElementById("$uniqueIDCode");
|var range = document.createRange();
|range.selectNode(code);
|window.getSelection().removeAllRanges();
|window.getSelection().addRange(range);
|document.execCommand("copy");
|window.getSelection().removeAllRanges();""".stripMargin
val btnStyle = HTML.`style` := "display: flex"
val btn = HTML.button(btnAction)(htmlIdBtn)("Show") val btn = HTML.button(btnAction)(htmlIdBtn)("Show")
val copyBtn = HTML.button(copyAction)(btnStyle)("Copy")
if (isInGui) { if (isInGui) {
Seq(HTML.div(htmlCls())(htmlStyle)(elemsHTML)) val htmlStyle = HTML.`style` := "display: block"
Seq(
HTML.div(
HTML.div(htmlCls())(htmlStyle)(htmlIdCode)(elemsHTML),
copyBtn
)
)
} else { } else {
Seq(HTML.div(btn, HTML.div(htmlCls())(htmlIdCode)(elemsHTML))) val htmlStyle = HTML.`style` := "display: none"
Seq(
HTML.div(
btn,
HTML.div(htmlCls())(htmlStyle)(htmlIdCode)(elemsHTML),
copyBtn
)
)
} }
} }
} }
@ -211,7 +234,9 @@ object Doc {
} }
final case class Line(indent: Int, elem: String) extends Elem { final case class Line(indent: Int, elem: String) extends Elem {
val repr: Repr.Builder = R + indent + elem val repr: Repr.Builder = R + indent + elem
val html: HTML = Seq(HTML.code(elem), HTML.br) val html: HTML = Seq(HTML.code(" " * indent + elem), HTML.br)
def htmlOffset(off: Int): HTML =
Seq(HTML.code(" " * (indent - off) + elem), HTML.br)
} }
} }