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 debugSyntaxTree prop is set, display syntax tree for debugging
if (this.debugSyntaxTree) { if (this.debugSyntaxTree) {
setInterval(() => { setInterval(() => {
const cursorPos = this.editor.view.state.selection.main.head
function render(tree) { function render(tree) {
let lists = '' let lists = ''
tree.iterate({ tree.iterate({
enter(type) { 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() { leave() {
lists += '</ul>' lists += '</ul>'
@ -191,7 +196,7 @@
</div> </div>
</template> </template>
<style lang="sass" scoped> <style lang="sass">
.debug-syntax-tree .debug-syntax-tree
position: absolute position: absolute
top: 0 top: 0
@ -205,6 +210,9 @@
padding: 10px padding: 10px
overflow: auto overflow: auto
li.active
background-color: rgba(255, 255, 0, 0.5)
ul ul
padding-left: 20px padding-left: 20px
> ul > ul