In corrections, highlight significant texts

ui/src/lib/components/CorrectionResponseFooter.svelte

@@ -38,14 +38,37 @@
          for (const t of templates) {
              if (my_tpls[t.id] === undefined && cts[t.id.toString()]) {
                  my_tpls[t.id] = cts[t.id.toString()][response.id_user] !== undefined;
+
+                 // Hack to autocorrect only if this has already been checked previously
+                 if (autoCorrectionInProgress && cts[t.id.toString()][response.id_user] !== undefined) {
+                     autoCorrectionInProgress = false;
+                 }
              }
          }
      }
  }
+
+ let element = null;
+ let scrollY = 0;
+ let autoCorrectionInProgress = true;
+ $: {
+     if (element && scrollY > element.offsetParent.offsetTop - 500 && !my_correction) {
+         let tmp = false;
+         [tmp, autoCorrectionInProgress] = [autoCorrectionInProgress, true];
+         if (!tmp) {
+             autoCorrection(response.id_user, my_tpls).then((r) => {
+                 my_correction = r;
+                 autoCorrectionInProgress = false;
+             })
+         }
+     }
+ }
 </script>
 
+<svelte:window bind:scrollY={scrollY}/>
 <form
     class="row"
+    bind:this={element}
     on:submit|preventDefault={submitCorrection}
 >
     <div class="col-auto">
@@ -69,6 +92,7 @@
                     >
                     <label
                         class="form-check-label"
+                        class:fw-bold={template.regexp && (template.regexp[0] == "!" ? !response.value.match(new RegExp(template.regexp.substring(1))) : response.value.match(new RegExp(template.regexp)))}
                         for="r{response.id}t{template.id}"
                     >
                         {template.label}

ui/src/lib/components/CorrectionResponses.svelte

@@ -35,6 +35,24 @@
      filteredResponses = responses.filter((r) => (notCorrected || r.time_scored <= r.time_reported || !r.time_scored) && (!filter || ((filter[0] == '!' &&  !r.value.match(filter.substring(1))) || r.value.match(filter))));
  }
 
+ function escapeTags(htmlStr) {
+     return htmlStr.replace(/&/g, "&amp;")
+                   .replace(/</g, "&lt;")
+                   .replace(/>/g, "&gt;")
+                   .replace(/"/g, "&quot;")
+                   .replace(/'/g, "&#39;");
+ }
+
+ function hilightText(input, templates) {
+     for (const { regexp } of templates) {
+         if (regexp) {
+             input = input.replace(new RegExp(regexp, 'g'), '<ins class="fw-bold">$&</ins>')
+         }
+     }
+
+     return input;
+ }
+
  export async function applyCorrections() {
      for (const r of filteredResponses) {
          const my_correction = { };
@@ -96,7 +114,7 @@
                                 class="card-text"
                                 style="white-space: pre-line"
                             >
-                                {response.value}
+                                {@html hilightText(escapeTags(response.value), templates)}
                             </p>
                         {/if}
                         <ResponseCorrected