From d4d1653ac7a29c6d7389125485a97782cc7e16cb Mon Sep 17 00:00:00 2001
From: Mic <m@micz.it>
Date: Thu, 19 Jun 2025 00:33:00 +0200
Subject: [PATCH] Enhance word diff rendering by splitting segments on <br>
 tags and appending appropriate span elements for added, removed, and
 unchanged text.

---
 js/mzta-chatgpt.js | 39 +++++++++++++++++++++++----------------
 1 file changed, 23 insertions(+), 16 deletions(-)

diff --git a/js/mzta-chatgpt.js b/js/mzta-chatgpt.js
index c76f64a0..34f753f5 100644
--- a/js/mzta-chatgpt.js
+++ b/js/mzta-chatgpt.js
@@ -315,23 +315,30 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
             const response = getSelectedHtml();
             const wordDiff = Diff.diffWords(mztaOriginalText, response.replace(/<\\/?[^>]+(>|$)/g, ''));
             wordDiff.forEach(part => {
-                const diffElement = document.createElement('span');
-            
-                // Apply a different class depending on whether the word is added, removed, or unchanged
-                if (part.added) {
-                  diffElement.className = 'added';
-                  diffElement.textContent = part.value;
-                } else if (part.removed) {
-                  diffElement.className = 'removed';
-                  diffElement.textContent = part.value;
-                } else {
-                  diffElement.textContent = part.value;
+                // Split part.value by <br> (handling <br>, <br/>, <br />)
+                const brRegex = /(<br\s*\\/?>)/gi;
+                const segments = part.value.split(brRegex);
+
+                segments.forEach(segment => {
+                if (segment.match(brRegex)) {
+                    // It's a <br>, add a real <br> element
+                    diffContent.appendChild(document.createElement("br"));
+                } else if (segment.length > 0) {
+                    const diffElement = document.createElement("span");
+                    if (part.added) {
+                    diffElement.className = "added";
+                    diffElement.textContent = segment;
+                    } else if (part.removed) {
+                    diffElement.className = "removed";
+                    diffElement.textContent = segment;
+                    } else {
+                    diffElement.textContent = segment;
+                    }
+                    diffContent.appendChild(diffElement);
                 }
-            
-                // Add the element to the container
-                diffContent.appendChild(diffElement);
-                diffOverlay.style.display = 'block';
-              });
+                });
+            });
+            diffOverlay.style.display = 'block';
         };
         fixedDiv.appendChild(btn_diff);
     }