tecitheme 1.1.1 → 1.1.2

package/dist/components/Search/SearchModal.svelte

@@ -16,7 +16,12 @@
 
   const { searchClient, setMeiliSearchParams } = instantMeiliSearch (
     "https://ms-6689ffd3d866-29089.nyc.meilisearch.io",
-    "d9f20886cbbbe171f3933dc93a1ec38e365d53f072854e5d9f92a9b130fa1f7d"
+    "d9f20886cbbbe171f3933dc93a1ec38e365d53f072854e5d9f92a9b130fa1f7d",
+    {
+      meiliSearchParams: {
+        showMatchesPosition: true
+      }
+    }
   )
 
   onMount(() => {

package/dist/components/Search/TeciSearchHits.svelte

@@ -90,7 +90,106 @@
     }
   }
 
+  function tokenizeHTML(html) {
+    const tokens = [];
+    let buffer = "";
+    let insideTag = false;
+
+    for (let i = 0; i < html.length; i++) {
+      const c = html[i];
+
+      if (c === "<") {
+        // flush text buffer
+        if (buffer) tokens.push({ type: "text", value: buffer });
+        buffer = "<";
+        insideTag = true;
+      } else if (c === ">" && insideTag) {
+        buffer += ">";
+        tokens.push({ type: "tag", value: buffer });
+        buffer = "";
+        insideTag = false;
+      } else {
+        buffer += c;
+      }
+    }
+
+    if (buffer) {
+      tokens.push({ type: insideTag ? "tag" : "text", value: buffer });
+    }
+
+    return tokens;
+  }
+
+  function buildOffsetMap(tokens) {
+    let global = 0;
+
+    return tokens.map(t => {
+      const start = global;
+      const end = start + t.value.length;
+
+      global = end;
+
+      return {
+        ...t,
+        globalStart: start,
+        globalEnd: end
+      };
+    });
+  }
+
+  function applyHighlights(tokens, matches) {
+    // Process matches from last → first to prevent index shifting
+    matches.sort((a, b) => b.start - a.start);
+
+    matches.forEach(({ start, length }) => {
+      const end = start + length;
+
+      tokens.forEach(token => {
+        if (token.type === "tag") return;
 
+        // skip if match does not touch this token
+        if (end <= token.globalStart || start >= token.globalEnd) return;
+
+        // ----- compute localStart -----
+        let localStart;
+        if (start < token.globalStart) {
+          localStart = 0;
+        } else {
+          localStart = start - token.globalStart;
+        }
+
+        // ----- compute localEnd -----
+        let localEnd;
+        const tokenLength = token.value.length;
+
+        if (end > token.globalEnd) {
+          localEnd = tokenLength;
+        } else {
+          localEnd = end - token.globalStart;
+        }
+
+        // apply the highlight
+        const text = token.value;
+
+        token.value =
+          text.slice(0, localStart) +
+          "<mark>" +
+          text.slice(localStart, localEnd) +
+          "</mark>" +
+          text.slice(localEnd);
+      });
+    });
+
+    return tokens.map(t => t.value).join("");
+  }
+
+  function highlightHTMLWithMatches(html, matches) {
+    if (!matches || matches.length === 0) return html
+
+    const tokens = tokenizeHTML(html);
+    const mapped = buildOffsetMap(tokens);
+    return applyHighlights(mapped, matches);
+  }
 </script>
 
 <svelte:window on:keydown={(e) => handleKeyPress(e)} />
@@ -209,7 +308,7 @@
           <!-- Content Preview -->
           <div class="flex flex-col">
             <h4 class="text-lg font-bold text-black uppercase">Preview</h4>
-            <p class="line-clamp-4 mb-4"><Highlight {hit} attribute="content" /></p>
+            <p class="highlightedSearchContent line-clamp-4 mb-4">{@html highlightHTMLWithMatches(hit.content, hit._matchesPosition.content)}</p>
           </div>
 
           <!-- On This Page headings -->

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tecitheme",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "license": "MIT",
   "scripts": {
     "dev": "vite dev",