Fix scrolling

ctrl-escp · Jun 7, 2024 · b5ec836 · b5ec836
1 parent ff8bd7e
commit b5ec836
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 15 deletions.
diff --git 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
@@ -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');
   }