Improve debug syntax tree

* Fix indentation CSS styling that wasn't working
* Highlight the current node
This commit is contained in:
Jonatan Heyman 2025-06-09 12:37:31 +02:00
parent 362cca8193
commit 7253684c02

View File

@ -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