fuzzywrap: avoid svelte html tag

Author: yagebu

frontend/src/AutocompleteInput.svelte

@@ -19,7 +19,7 @@
 <script lang="ts">
   import type { KeySpec } from "./keyboard-shortcuts";
   import { keyboardShortcut } from "./keyboard-shortcuts";
-  import { fuzzyfilter, fuzzywrap } from "./lib/fuzzy";
+  import { fuzzyfilter, fuzzywrap, type FuzzyWrappedText } from "./lib/fuzzy";
 
   interface Props {
     /** The currently entered value (bindable). */
@@ -79,18 +79,20 @@
   let extractedValue = $derived(
     input && valueExtractor ? valueExtractor(value, input) : value,
   );
-  let filteredSuggestions: { suggestion: string; innerHTML: string }[] =
-    $derived.by(() => {
-      const filtered = fuzzyfilter(extractedValue, suggestions)
-        .slice(0, 30)
-        .map((suggestion) => ({
-          suggestion,
-          innerHTML: fuzzywrap(extractedValue, suggestion),
-        }));
-      return filtered.length === 1 && filtered[0]?.suggestion === extractedValue
-        ? []
-        : filtered;
-    });
+  let filteredSuggestions: {
+    suggestion: string;
+    fuzzywrapped: FuzzyWrappedText;
+  }[] = $derived.by(() => {
+    const filtered = fuzzyfilter(extractedValue, suggestions)
+      .slice(0, 30)
+      .map((suggestion) => ({
+        suggestion,
+        fuzzywrapped: fuzzywrap(extractedValue, suggestion),
+      }));
+    return filtered.length === 1 && filtered[0]?.suggestion === extractedValue
+      ? []
+      : filtered;
+  });
 
   $effect(() => {
     const msg = checkValidity ? checkValidity(value) : "";
@@ -189,7 +191,7 @@
   {/if}
   {#if filteredSuggestions.length}
     <ul {hidden} role="listbox" id={autocomple_id}>
-      {#each filteredSuggestions as { innerHTML, suggestion }, i}
+      {#each filteredSuggestions as { fuzzywrapped, suggestion }, i}
         <li
           role="option"
           aria-selected={i === index}
@@ -198,8 +200,13 @@
             mousedown(ev, suggestion);
           }}
         >
-          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
-          {@html innerHTML}
+          {#each fuzzywrapped as [type, text]}
+            {#if type === "text"}
+              {text}
+            {:else}
+              <span>{text}</span>
+            {/if}
+          {/each}
         </li>
       {/each}
     </ul>
@@ -251,7 +258,7 @@
     background: transparent;
   }
 
-  li :global(span) {
+  li span {
     height: 1.2em;
     padding: 0 0.05em;
     margin: 0 -0.05em;

frontend/src/lib/fuzzy.ts

@@ -48,25 +48,19 @@ export function fuzzyfilter(
     .sort((a, b) => b[1] - a[1])
     .map(([s]) => s);
 }
-const escapeChars: Record<string, string> = {
-  '"': "&quot;",
-  "'": "&#39;",
-  "&": "&amp;",
-  "<": "&lt;",
-  ">": "&gt;",
-};
-const e = (text: string) =>
-  text.replace(/["'&<>]/g, (m) => escapeChars[m] ?? m);
+
+export type FuzzyWrappedText = ["text" | "match", string][];
 
 /**
  * Wrap fuzzy matched characters.
  *
  * Wrap all occurences of characters of `pattern` (in order) in `string` in
- * <span> tags.
+ * tuples with a "match" marker (and the others as plain "text") to allow for
+ * the matches to be wrapped in markers to highlight them in the HTML.
  */
-export function fuzzywrap(pattern: string, text: string): string {
+export function fuzzywrap(pattern: string, text: string): FuzzyWrappedText {
   if (!pattern) {
-    return e(text);
+    return [["text", text]];
   }
   const casesensitive = pattern === pattern.toLowerCase();
   const exact = casesensitive
@@ -76,33 +70,50 @@ export function fuzzywrap(pattern: string, text: string): string {
     const before = text.slice(0, exact);
     const match = text.slice(exact, exact + pattern.length);
     const after = text.slice(exact + pattern.length);
-    return `${e(before)}<span>${e(match)}</span>${e(after)}`;
+    const result: FuzzyWrappedText = [];
+    if (before) {
+      result.push(["text", before]);
+    }
+    result.push(["match", match]);
+    if (after) {
+      result.push(["text", after]);
+    }
+    return result;
   }
+  // current index into the pattern
   let pindex = 0;
-  let inMatch = false;
-  const result = [];
+  // current unmatched string
+  let plain: string | null = null;
+  // current matched string
+  let match: string | null = null;
+  const result: FuzzyWrappedText = [];
   for (const char of text) {
     const search = pattern[pindex];
     if (char === search || char.toLowerCase() === search) {
-      if (!inMatch) {
-        result.push("<span>");
-        inMatch = true;
+      match = match != null ? match + char : char;
+      if (plain != null) {
+        result.push(["text", plain]);
+        plain = null;
       }
-      result.push(e(char));
       pindex += 1;
     } else {
-      if (inMatch) {
-        result.push("</span>");
-        inMatch = false;
+      plain = plain != null ? plain + char : char;
+      if (match != null) {
+        result.push(["match", match]);
+        match = null;
       }
-      result.push(e(char));
     }
   }
   if (pindex < pattern.length) {
-    return e(text);
+    return [["text", text]];
+  }
+  if (plain != null) {
+    result.push(["text", plain]);
+    plain = null;
   }
-  if (inMatch) {
-    result.push("</span>");
+  if (match != null) {
+    result.push(["match", match]);
+    match = null;
   }
-  return result.join("");
+  return result;
 }

frontend/test/fuzzy.test.ts

@@ -37,21 +37,47 @@ test("fuzzy filter", () => {
 });
 
 test("fuzzy wap", () => {
-  assert.is(fuzzywrap("", "tenotest"), "tenotest");
-  assert.is(fuzzywrap("", "<>tenotest"), "&lt;&gt;tenotest");
+  assert.equal(fuzzywrap("", "tenotest"), [["text", "tenotest"]]);
+  assert.equal(fuzzywrap("", "<>tenotest"), [["text", "<>tenotest"]]);
 
-  assert.is(fuzzywrap("test", "tenotest"), "teno<span>test</span>");
+  assert.equal(fuzzywrap("test", "tenotest"), [
+    ["text", "teno"],
+    ["match", "test"],
+  ]);
   // no match for case sensitive pattern:
-  assert.is(fuzzywrap("tesT", "test"), "test");
-  assert.is(fuzzywrap("sdf", "nomatch"), "nomatch");
-  assert.is(fuzzywrap("test", "tetest"), "te<span>test</span>");
-  assert.is(fuzzywrap("test", "teTEST"), "te<span>TEST</span>");
-  assert.is(fuzzywrap("a", "asdfasdf"), "<span>a</span>sdfasdf");
-  assert.is(fuzzywrap("as", "asdfasdf"), "<span>as</span>dfasdf");
-  assert.is(fuzzywrap("as", "as"), "<span>as</span>");
-  assert.is(fuzzywrap("te", "tae"), "<span>t</span>a<span>e</span>");
-  assert.is(fuzzywrap("te", "ta<e"), "<span>t</span>a&lt;<span>e</span>");
-  assert.is(fuzzywrap("as", "<span>as"), "&lt;span&gt;<span>as</span>");
+  assert.equal(fuzzywrap("tesT", "test"), [["text", "test"]]);
+  assert.equal(fuzzywrap("sdf", "nomatch"), [["text", "nomatch"]]);
+  assert.equal(fuzzywrap("test", "tetest"), [
+    ["text", "te"],
+    ["match", "test"],
+  ]);
+  assert.equal(fuzzywrap("test", "teTEST"), [
+    ["text", "te"],
+    ["match", "TEST"],
+  ]);
+  assert.equal(fuzzywrap("a", "asdfasdf"), [
+    ["match", "a"],
+    ["text", "sdfasdf"],
+  ]);
+  assert.equal(fuzzywrap("as", "asdfasdf"), [
+    ["match", "as"],
+    ["text", "dfasdf"],
+  ]);
+  assert.equal(fuzzywrap("as", "as"), [["match", "as"]]);
+  assert.equal(fuzzywrap("te", "tae"), [
+    ["match", "t"],
+    ["text", "a"],
+    ["match", "e"],
+  ]);
+  assert.equal(fuzzywrap("te", "ta<e"), [
+    ["match", "t"],
+    ["text", "a<"],
+    ["match", "e"],
+  ]);
+  assert.equal(fuzzywrap("as", "<span>as"), [
+    ["text", "<span>"],
+    ["match", "as"],
+  ]);
 });
 
 test.run();