From 7253684c0238b08cb7436b0380147f00d4d8436e Mon Sep 17 00:00:00 2001
From: Jonatan Heyman <jonatan@heyman.info>
Date: Mon, 9 Jun 2025 12:37:31 +0200
Subject: [PATCH] Improve debug syntax tree

* Fix indentation CSS styling that wasn't working
* Highlight the current node
---
 src/components/Editor.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 09b7461..b5056a1 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -81,11 +81,16 @@
             // if debugSyntaxTree prop is set, display syntax tree for debugging
             if (this.debugSyntaxTree) {
                 setInterval(() => {
+                    const cursorPos = this.editor.view.state.selection.main.head
                     function render(tree) {
                         let lists = ''
                         tree.iterate({
                             enter(type) {
-                                lists += `<ul><li>${type.name} (${type.from},${type.to})`
+                                let className = ""
+                                if (type.from !== 0 && cursorPos > type.from && cursorPos <= type.to) {
+                                    className = "active"
+                                }
+                                lists += `<ul><li class="${className}">${type.name} (${type.from},${type.to})`
                             },
                             leave() {
                                 lists += '</ul>'
@@ -191,7 +196,7 @@
     </div>
 </template>
 
-<style lang="sass" scoped>
+<style lang="sass">
     .debug-syntax-tree
         position: absolute
         top: 0
@@ -205,6 +210,9 @@
         padding: 10px
         overflow: auto
 
+        li.active
+            background-color: rgba(255, 255, 0, 0.5)
+
         ul
             padding-left: 20px
         > ul