ktxt2 block editors are monaco

This commit is contained in:
2021-10-29 11:25:07 -04:00
parent c8cdd229aa
commit b0f3ac031e
2 changed files with 26 additions and 46 deletions

View File

@@ -54,6 +54,7 @@
lineNumbers "on" lineNumbers "on"
scrollBeyondLastLine false scrollBeyondLastLine false
theme "vs-dark" theme "vs-dark"
minimap (object enabled false)
] ]
language language
readOnly)) readOnly))
@@ -68,39 +69,30 @@
e)) e))
(function commentElements [text idx] (function commentElements [text idx]
(let [p (document.createElement "div") // keeping variable name the same, but it's a div not a <p> element (let [//p (document.createElement "div") // keeping variable name the same, but it's a div not a <p> element
blockLinkBefore (document.createElement "a") blockLinkBefore (document.createElement "a")
blockLinkAfter (document.createElement "a")] /*blockLinkAfter (document.createElement "a")*/]
// Links that allow inserting a block between existing blocks: // Links that allow inserting a block between existing blocks:
(set blockLinkBefore.innerHTML "+") (set blockLinkBefore.innerHTML "+")
(blockLinkBefore.addEventListener "click" (blockLinkBefore.addEventListener "click"
->(insertBlockBeforeComment (nth ktxt2Elements idx))) ->(insertBlockBeforeComment (nth ktxt2Elements idx)))
(set blockLinkAfter.innerHTML "+") /*(set blockLinkAfter.innerHTML "+")
(blockLinkAfter.addEventListener "click" (blockLinkAfter.addEventListener "click"
->(insertBlockAfterComment (nth ktxt2Elements idx))) ->(insertBlockAfterComment (nth ktxt2Elements idx)))*/
// Paragraph displaying and allowing editing the comment
//(set p.value text)
//(set p.rows .length (text.split "\n"))
//(p.setAttribute "class" "block")
(content.appendChild blockLinkBefore) (content.appendChild blockLinkBefore)
(content.appendChild p) //(content.appendChild p)
(content.appendChild blockLinkAfter) //(content.appendChild blockLinkAfter)
(monacoEditor p "width: 90%;" text "txt" false /*(monacoEditor p "width: 90%;" text "txt" false
->editor (addEditTimeout idx ->{ ->editor (addEditTimeout idx ->{
/*(p.blur)*/ (replaceComment (nth ktxt2Elements idx) (editor.getValue))
(replaceComment (nth ktxt2Elements idx) (editor.getValue)) }))*/))
}))))
// This used to turn HTML to plaintext, but with textareas it's no longer needed:
(function toPlaintext [:String text]
text)
(function replaceComment [element newText] (function replaceComment [element newText]
(case element (case element
((Comment (object text text start start end end)) ((Comment (object text text start start end end))
(vscode.postMessage (object type "replace" text (toPlaintext newText) start start end end))) (vscode.postMessage (object type "replace" text newText start start end end)))
(otherwise (throw "element $element is not a comment")))) (otherwise (throw "element $element is not a comment"))))
(function insertBlockBeforeComment [element] (function insertBlockBeforeComment [element]
@@ -118,13 +110,13 @@
(function replaceSourceBlock [element newText] (function replaceSourceBlock [element newText]
(case element (case element
((Block (object source text sourceStart start sourceEnd end)) ((Block (object source text sourceStart start sourceEnd end))
(vscode.postMessage (object type "replace" text (toPlaintext newText) start start end end))) (vscode.postMessage (object type "replace" text newText start start end end)))
(otherwise (throw "element $element is not a block")))) (otherwise (throw "element $element is not a block"))))
(function replaceOutputBlock [element newText] (function replaceOutputBlock [element newText]
(case element (case element
((Block (object output text outputStart start outputEnd end)) ((Block (object output text outputStart start outputEnd end))
(vscode.postMessage (object type "replace" text (toPlaintext newText) start start end end))) (vscode.postMessage (object type "replace" text newText start start end end)))
(otherwise (throw "element $element is not a block")))) (otherwise (throw "element $element is not a block"))))
(function deleteEntireBlock [element] (function deleteEntireBlock [element]
@@ -147,26 +139,24 @@
(function blockElements [source output locked idx] (function blockElements [source output locked idx]
(let [outerDiv (document.createElement "div") (let [outerDiv (document.createElement "div")
:TextAreaElement sourceDiv (cast (document.createElement "textarea")) // leaving variable names the same, but these are not divs :js.html.Element sourceDiv (cast (document.createElement "div"))
:TextAreaElement outputDiv (cast (document.createElement "textarea")) :js.html.Element outputDiv (cast (document.createElement "div"))
convertLink (document.createElement "a") convertLink (document.createElement "a")
xLink (document.createElement "a") xLink (document.createElement "a")
lockLink (document.createElement "a") lockLink (document.createElement "a")
exportLink (document.createElement "a")] exportLink (document.createElement "a")]
(outerDiv.setAttribute "class" "container") (outerDiv.setAttribute "class" "container")
(outerDiv.setAttribute "style" "display: flex;") (outerDiv.setAttribute "style" "display: flex;")
(sourceDiv.setAttribute "style" "width: 50%;")
(sourceDiv.setAttribute "class" "block") (monacoEditor sourceDiv "width: 50%;" source /* TODO get the real extension of the source file: */ "txt" locked
(sourceDiv.addEventListener "input" ->editor (addEditTimeout idx ->{
->(addEditTimeout idx ->{(sourceDiv.blur)(replaceSourceBlock (nth ktxt2Elements idx) sourceDiv.value)})) (replaceSourceBlock (nth ktxt2Elements idx) (editor.getValue))
(set sourceDiv.value source) }))
(set sourceDiv.rows .length (source.split "\n"))
(outputDiv.setAttribute "style" "flex-grow: 1;") (monacoEditor outputDiv "flex-grow: 1;" output /* TODO get the real extension of the output file: */ "txt" locked
(outputDiv.setAttribute "class" "block") ->editor (addEditTimeout idx ->{
(outputDiv.addEventListener "input" (replaceOutputBlock (nth ktxt2Elements idx) (editor.getValue))
->(addEditTimeout idx ->{(outputDiv.blur)(replaceOutputBlock (nth ktxt2Elements idx) outputDiv.value)})) }))
(set outputDiv.value output)
(set outputDiv.rows .length (output.split "\n"))
// Link that will delete the whole block: // Link that will delete the whole block:
(set xLink.innerHTML "x") (set xLink.innerHTML "x")
@@ -180,12 +170,10 @@
// Link that attempts automatic conversion of the source in a block: // Link that attempts automatic conversion of the source in a block:
(unless locked (unless locked
(set convertLink.innerHTML "->") (set convertLink.innerHTML "->")
(convertLink.setAttribute "style" "width: 2ch;")
(convertLink.addEventListener "click" (convertLink.addEventListener "click"
->(tryAutoConvert (nth ktxt2Elements idx))) ->(tryAutoConvert (nth ktxt2Elements idx)))
(outerDiv.appendChild convertLink)) (outerDiv.appendChild convertLink))
(when locked
(set sourceDiv.disabled true)
(set outputDiv.disabled true))
(outerDiv.appendChild outputDiv) (outerDiv.appendChild outputDiv)

View File

@@ -87,14 +87,6 @@
rel=\"stylesheet\" rel=\"stylesheet\"
data-name=\"vs/editor/editor.main\" data-name=\"vs/editor/editor.main\"
href=\"${cssUri}\" /> href=\"${cssUri}\" />
<title>KTxt2</title>
<style>
.block {
border: 1px solid white;
background-color: #222222;
color: #eeeeee;
}
</style>
</head> </head>
<body> <body>
<script src=\"${ktxt2EditorScriptUri}\"></script> <script src=\"${ktxt2EditorScriptUri}\"></script>