From 36508d600a1e0e5dacbf1cbdc4e76f874726135c Mon Sep 17 00:00:00 2001
From: Gigi <dergigi@pm.me>
Date: Tue, 14 Oct 2025 00:34:55 +0200
Subject: [PATCH] fix(highlights): remove existing highlight marks before
 applying new ones

- Strip all existing mark elements from HTML before re-highlighting
- Prevents old broken highlights from persisting in the DOM
- Ensures clean text is used as the base for new highlight application
- Fixes 'We b' spacing issue caused by corrupted marks from previous buggy renders
- Remove debug logging now that position mapping is working correctly
---
 src/utils/highlightMatching/domUtils.ts     | 12 ------------
 src/utils/highlightMatching/htmlMatching.ts | 11 +++++++++++
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/utils/highlightMatching/domUtils.ts b/src/utils/highlightMatching/domUtils.ts
index 03288d52..6d84cdf8 100644
--- a/src/utils/highlightMatching/domUtils.ts
+++ b/src/utils/highlightMatching/domUtils.ts
@@ -173,18 +173,6 @@ function tryMultiNodeMatch(
     }
     endIndex = posMap[endPos]
     
-    // Debug logging
-    console.log('Position mapping:', {
-      searchText: searchText.substring(0, 50),
-      searchFor: searchFor.substring(0, 50),
-      matchIndex,
-      endPos,
-      startIndex,
-      endIndex,
-      extractedText: combinedText.substring(startIndex, endIndex),
-      combinedTextSample: combinedText.substring(Math.max(0, startIndex - 10), Math.min(combinedText.length, endIndex + 10))
-    })
-    
     // Validate we got valid positions
     if (startIndex < 0 || endIndex <= startIndex || endIndex > combinedText.length) {
       console.warn('Could not map normalized positions:', { 
diff --git a/src/utils/highlightMatching/htmlMatching.ts b/src/utils/highlightMatching/htmlMatching.ts
index 467d6d79..1da62f1c 100644
--- a/src/utils/highlightMatching/htmlMatching.ts
+++ b/src/utils/highlightMatching/htmlMatching.ts
@@ -22,6 +22,17 @@ export function applyHighlightsToHTML(
   const tempDiv = document.createElement('div')
   tempDiv.innerHTML = html
   
+  // CRITICAL: Remove any existing highlight marks to start with clean HTML
+  // This prevents old broken highlights from corrupting the new rendering
+  const existingMarks = tempDiv.querySelectorAll('mark[data-highlight-id]')
+  existingMarks.forEach(mark => {
+    // Replace the mark with its text content
+    const textNode = document.createTextNode(mark.textContent || '')
+    mark.parentNode?.replaceChild(textNode, mark)
+  })
+  
+  console.log('🧹 Removed', existingMarks.length, 'existing highlight marks')
+  
   let appliedCount = 0
   
   for (const highlight of highlights) {