Multi line selection

dvd101x · dvd101x · commit 540fa5abff51 · 2025-01-08T09:28:17.000-06:00
diff --git a/index.html b/index.html
@@ -9,12 +9,14 @@
   <body>
     <main x-data="app">
       <div id="editor" @doc-changed.camel.debounce="calcExpressions"
-      @selection-changed.camel="getCurrentLine"
+      @selection-changed.camel="getSelection"
       ></div>
       <article id="output" class="markdown-body">
         <template x-for="expression in expressions">
           <div class="results"
-            :class=" (currentLine >= expression.from) && (currentLine <= expression.to) ? 'highligted' : ''"
+            :class="
+            ((expression.from >= currentLineFrom) && (expression.from <= currentLineTo) ||
+             (expression.to >= currentLineFrom) && (expression.to <= currentLineTo)) ? 'highligted' : ''"
             x-html="expression.outputs" x-show="expression.visible"
             x-effect="if((currentLine >= expression.from) && (currentLine <= expression.to)) $el.scrollIntoView({ block: 'nearest', inline: 'start'})">
         </div>
diff --git a/main.js b/main.js
@@ -75,11 +75,15 @@ Alpine.data(
     get calcExpressions() {
       this.expressions = makeDoc(editor.state.doc.toString())
     },
-    get getCurrentLine() {
-      this.currentLine = editor.state.doc.lineAt(
+    get getSelection() {
+      this.currentLineFrom = editor.state.doc.lineAt(
         editor.state.selection.ranges[editor.state.selection.mainIndex].from
       ).number - 1
-    }
+      this.currentLineTo = editor.state.doc.lineAt(
+        editor.state.selection.ranges[editor.state.selection.mainIndex].to
+      ).number - 1 
+    },
+
   })
 )
 
