Multi line selection

dvd101x · Jan 8, 2025 · 540fa5a · 540fa5a
1 parent 6b93628
commit 540fa5a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
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 
+    },
+
   })
 )