From b5ec836d14bd615659a3683105966eb536154a39 Mon Sep 17 00:00:00 2001
From: Ben Baryo <19845603+ctrl-escp@users.noreply.github.com>
Date: Sat, 8 Jun 2024 01:57:24 +0300
Subject: [PATCH] Fix scrolling

---
 src/components/CodeEditor.vue | 13 +++++--------
 src/components/NodesList.vue  | 17 ++++++++++-------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/CodeEditor.vue b/src/components/CodeEditor.vue
index a25c15e..2287d75 100644
--- a/src/components/CodeEditor.vue
+++ b/src/components/CodeEditor.vue
@@ -68,7 +68,6 @@ const highlightRangeExt = StateField.define({
 });
 
 const highlight_decoration = Decoration.mark({
-  // attributes: {style: "background-color: red"}
   class: 'highlighted-code',
 });
 
@@ -81,17 +80,15 @@ function highlightRange(start, end) {
       effects: highlightEffect.of([highlight_decoration.range(start, end)]),
     });
     const lineNumber = this.state.doc.lineAt(start).number;
-    const line = document.querySelectorAll('.cm-line')[lineNumber];
-    if (line) line.scrollIntoView({
-      behavior: 'smooth',
-      block: 'center',
-      inline: 'center',
+    const linePos = this.state.doc.line(lineNumber).from;
+    store.getEditor(store.editorIds.inputCodeEditor).dispatch({
+      effects: EditorView.scrollIntoView(linePos, {
+        y: 'center',
+      })
     });
   }
 }
 
-// function scrollToLine(lineNo) {}
-
 onMounted(() => {
   // noinspection JSCheckFunctionSignatures
   const ed = new EditorView({
diff --git a/src/components/NodesList.vue b/src/components/NodesList.vue
index ffaa08a..28e4592 100644
--- a/src/components/NodesList.vue
+++ b/src/components/NodesList.vue
@@ -1,20 +1,23 @@
 <script setup>
 import {store} from '../store.js';
-import {computed, onMounted} from 'vue';
+import {computed, onMounted, reactive} from 'vue';
+
+const state = reactive({
+  highlightedNodeId: -1,
+});
 
-let highlightedNodeId = null;
 
 function highlightCode(node) {
   const editor = store.getEditor(store.editorIds.inputCodeEditor);
-  if (highlightedNodeId !== null) {
-    const previouslyHighlighted = document.querySelector(`div[data-nodeId="${highlightedNodeId}"]`);
+  if (state.highlightedNodeId > -1) {
+    const previouslyHighlighted = document.querySelector(`.highlight-node`);
     if (previouslyHighlighted) previouslyHighlighted.classList.remove('highlight-node');
   }
-  if (node.nodeId === highlightedNodeId) {
-    highlightedNodeId = null;
+  if (node.nodeId === state.highlightedNodeId) {
+    state.highlightedNodeId = -1;
     editor.highlightRange();
   } else {
-    highlightedNodeId = node.nodeId;
+    state.highlightedNodeId = node.nodeId;
     editor.highlightRange(node.range[0], node.range[1]);
     document.querySelector(`div[data-nodeid="${node.nodeId}"]`).classList.add('highlight-node');
   }