restore highlighting on tab switch

src/web/waiters/HighlighterWaiter.mjs

@@ -302,6 +302,13 @@ class HighlighterWaiter {
         }
     }
 
+    /**
+     * Resets mouse variable to up position.
+     * Used on tab change.
+     */
+    mouseUp(){
+        this.mouseButtonDown = false;
+    }
 
     /**
      * Given start and end offsets, writes the HTML for the selection info element with the correct
@@ -376,9 +383,10 @@ class HighlighterWaiter {
      * @param {string} direction
      */
     displayHighlights(pos, direction) {
-        if (!pos) return;
+        if (!pos || pos.length === 0) return;
 
-        if (this.manager.tabs.getActiveInputTab() !== this.manager.tabs.getActiveOutputTab()) return;
+        const inputNum = this.manager.tabs.getActiveInputTab();
+        if (inputNum !== this.manager.tabs.getActiveOutputTab()) return;
 
         const io = direction === "forward" ? "output" : "input";
 
@@ -387,6 +395,13 @@ class HighlighterWaiter {
             document.getElementById(io + "-text"),
             document.getElementById(io + "-highlighter"),
             pos);
+
+        if (direction === "forward"){
+            this.highlightInput(pos);
+        }
+        else{
+            this.manager.input.updateInputHighlight(inputNum, pos)
+        }
     }
 
 

src/web/waiters/InputWaiter.mjs

@@ -328,6 +328,7 @@ class InputWaiter {
      * @param {object} inputData - Object containing the input and its metadata
      * @param {number} inputData.inputNum - The unique inputNum for the selected input
      * @param {string | object} inputData.input - The actual input data
+     * @param {object} inputData.pos - The highlight object for the selected tab
      * @param {string} inputData.name - The name of the input file
      * @param {number} inputData.size - The size in bytes of the input file
      * @param {string} inputData.type - The MIME type of the input file
@@ -372,6 +373,10 @@ class InputWaiter {
                     });
                 }
 
+                //Restore highlighting
+                this.updateInputHighlight(inputData.inputNum, inputData.pos);
+                this.restoreHighlighting();
+
                 if (!silent) window.dispatchEvent(this.manager.statechange);
             } else {
                 this.setFile(inputData, silent);
@@ -554,6 +559,23 @@ class InputWaiter {
         }, transferable);
     }
 
+    /**
+     * Updates the saved highlight property for the specified inputNum
+     * Used for restoring highlight on tab switch
+     *
+     * @param {number} inputNum
+     * @param {Object} pos - The position object for the highlight.
+     */
+    updateInputHighlight(inputNum, pos) {
+        this.inputWorker.postMessage({
+            action: "updateInputHighlight",
+            data: {
+                inputNum: inputNum,
+                pos: pos
+            }
+        });
+    }
+
     /**
      * Updates the .data property for the input of the specified inputNum.
      * Used for switching the output into the input
@@ -845,6 +867,16 @@ class InputWaiter {
         }
     }
 
+    /**
+     * Restore the highlighting of the active tabs from the saved highlight data
+     */
+    async restoreHighlighting() {
+        const activeTab = this.manager.tabs.getActiveInputTab();
+        const tabObj = await this.getInputObj(activeTab);
+
+        this.manager.highlighter.highlightOutput(tabObj.highlight);
+    }
+
     /**
      * Checks if an input contains carriage returns.
      * If a CR is detected, checks if the preserve CR option has been set,
@@ -1013,6 +1045,7 @@ class InputWaiter {
                     silent: true
                 }
             });
+            this.manager.highlighter.mouseUp();
         } else {
             const minNum = Math.min(...this.manager.tabs.getInputTabList());
             let direction = "right";

src/web/waiters/OutputWaiter.mjs

@@ -1292,6 +1292,7 @@ class OutputWaiter {
     inputSwitch(switchData) {
         this.switchOrigData = switchData;
         document.getElementById("undo-switch").disabled = false;
+        this.manager.highlighter.removeHighlights();
 
         this.resetSwitchButton();
 

src/web/workers/InputWorker.mjs

@@ -53,6 +53,9 @@ self.addEventListener("message", function(e) {
         case "updateInputValue":
             self.updateInputValue(r.data);
             break;
+        case "updateInputHighlight":
+            self.updateInputHighlight(r.data);
+            break;
         case "updateInputObj":
             self.updateInputObj(r.data);
             break;
@@ -451,9 +454,11 @@ self.setInput = function(inputData) {
     if (input === undefined || input === null) return;
 
     let inputVal = input.data;
+    let highlight = input.highlight;
     const inputObj = {
         inputNum: inputNum,
-        input: inputVal
+        input: inputVal,
+        pos: highlight
     };
     if (typeof inputVal !== "string") {
         inputObj.name = inputVal.name;
@@ -579,6 +584,21 @@ self.updateInputValue = function(inputData) {
     }
 };
 
+/**
+ * Update the stored highlight object of an input.
+ *
+ * @param {object} inputData
+ * @param {number} inputData.inputNum - The input that's having its value updated
+ * @param {Object} inputData.pos - The position object for the highlight.
+ */
+self.updateInputHighlight = function(inputData) {
+    const inputNum = inputData.inputNum;
+    const pos = inputData.pos;
+
+    if (inputNum < 1) return;
+    self.inputs[inputNum].highlight = pos;
+}
+
 /**
  * Update the stored data object for an input.
  * Used if we need to change a string to an ArrayBuffer
@@ -825,6 +845,7 @@ self.addInput = function(
             newInputObj.data = "";
             newInputObj.status = "loaded";
             newInputObj.progress = 100;
+            newInputObj.highlight = [{"start":0,"end":0}];
             break;
         case "file":
             newInputObj.data = {