aboutsummaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
authorAkshay <[email protected]>2021-06-12 18:03:20 +0100
committerAkshay <[email protected]>2021-06-12 18:03:20 +0100
commit422872e00e86eea9d45783d12645717f1cfd0344 (patch)
tree667855964913e29136d4933af5f48985ccff9a7f /www
parent6be61101caeb6c46ac74cb9944106e18727b1e77 (diff)
fix scrolling, reset highlight on text transaction
Diffstat (limited to 'www')
-rw-r--r--www/index.html14
-rw-r--r--www/index.js10
2 files changed, 17 insertions, 7 deletions
diff --git a/www/index.html b/www/index.html
index 1404993..55127df 100644
--- a/www/index.html
+++ b/www/index.html
@@ -6,17 +6,25 @@
6 </head> 6 </head>
7 <style> 7 <style>
8.grid-container { 8.grid-container {
9 width: 100%;
9 display: grid; 10 display: grid;
10 grid-template-columns: 1fr 1fr; 11 grid-template-columns: 1fr 1fr;
11 grid-gap: 20px;
12} 12}
13.syntax-node { 13.syntax-node {
14 padding: 0px; 14 padding-left: 5px;
15 padding-left: 20px; 15 margin-left: 20px;
16 border-left: 2px solid white;
17}
18.syntax-node:hover {
19 border-left: 2px solid #ccc;
16} 20}
17.syntax-err { 21.syntax-err {
18 color: red; 22 color: red;
19} 23}
24#cst, #source-code {
25 height: 100vh;
26 overflow: scroll;
27}
20pre { 28pre {
21 padding: 0px; 29 padding: 0px;
22 margin: 0px 30 margin: 0px
diff --git a/www/index.js b/www/index.js
index 52253c0..f870e92 100644
--- a/www/index.js
+++ b/www/index.js
@@ -32,6 +32,7 @@ const highlightField = StateField.define({
32 add: [hlMark.range(e.value.from, e.value.to)] 32 add: [hlMark.range(e.value.from, e.value.to)]
33 }); 33 });
34 } 34 }
35 return Decoration.none;
35 }, 36 },
36 provide: f => EditorView.decorations.from(f) 37 provide: f => EditorView.decorations.from(f)
37}) 38})
@@ -39,7 +40,9 @@ const highlightField = StateField.define({
39const hlMark = Decoration.mark({class: "cm-highlight"}) 40const hlMark = Decoration.mark({class: "cm-highlight"})
40 41
41const hlTheme = EditorView.baseTheme({ 42const hlTheme = EditorView.baseTheme({
42 ".cm-highlight": { textDecoration: "underline 3px red" } 43 ".cm-highlight": {
44 backgroundColor: "#ff3299aa"
45 }
43}) 46})
44 47
45function highlightArea(view, textRange) { 48function highlightArea(view, textRange) {
@@ -54,9 +57,8 @@ function render_cst(synRoot) {
54 let nodeDiv = document.createElement("div"); 57 let nodeDiv = document.createElement("div");
55 nodeDiv.className = "syntax-node"; 58 nodeDiv.className = "syntax-node";
56 let r = synRoot.range(); 59 let r = synRoot.range();
57 let synText = wrap(synRoot.text() + synRoot.range().to_string(), "pre"); 60 let synText = wrap(synRoot.kind() + " @ " + r.to_string() + " " +synRoot.text(), "pre");
58 synText.onmouseover = () => { 61 synText.onmouseover = () => {
59 console.log(r.to_string());
60 highlightArea(view, r); 62 highlightArea(view, r);
61 } 63 }
62 nodeDiv.appendChild(synText); 64 nodeDiv.appendChild(synText);
@@ -79,7 +81,7 @@ function render_err(errorList) {
79 errDiv.className = "syntax-err"; 81 errDiv.className = "syntax-err";
80 errorList.forEach(err => { 82 errorList.forEach(err => {
81 errDiv.appendChild(wrap(err.to_string(), "pre")); 83 errDiv.appendChild(wrap(err.to_string(), "pre"));
82 highlightArea(view, err.range()); 84 // highlightArea(view, err.range());
83 }); 85 });
84 return errDiv; 86 return errDiv;
85} 87}