From 540fa5abff51db32903db014b961ac6ff5bdcb61 Mon Sep 17 00:00:00 2001
From: David Contreras <dvd.cnt@gmail.com>
Date: Wed, 8 Jan 2025 09:28:17 -0600
Subject: [PATCH] Multi line selection

---
 index.html |  6 ++++--
 main.js    | 10 +++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
index 5f2a3b2..c0fb0a0 100644
--- 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
index 26f52b0..315cefd 100644
--- 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 
+    },
+
   })
 )
 
