Enhance word diff rendering by splitting segments on <br> tags and appending appropriate span elements for added, removed, and unchanged text.

This commit is contained in:
Mic 2025-06-19 00:33:00 +02:00
parent abfd8268cb
commit d4d1653ac7

View file

@ -315,23 +315,30 @@ function addCustomDiv(prompt_action,tabId,mailMessageId) {
const response = getSelectedHtml(); const response = getSelectedHtml();
const wordDiff = Diff.diffWords(mztaOriginalText, response.replace(/<\\/?[^>]+(>|$)/g, '')); const wordDiff = Diff.diffWords(mztaOriginalText, response.replace(/<\\/?[^>]+(>|$)/g, ''));
wordDiff.forEach(part => { wordDiff.forEach(part => {
const diffElement = document.createElement('span'); // Split part.value by <br> (handling <br>, <br/>, <br />)
const brRegex = /(<br\s*\\/?>)/gi;
// Apply a different class depending on whether the word is added, removed, or unchanged const segments = part.value.split(brRegex);
if (part.added) {
diffElement.className = 'added'; segments.forEach(segment => {
diffElement.textContent = part.value; if (segment.match(brRegex)) {
} else if (part.removed) { // It's a <br>, add a real <br> element
diffElement.className = 'removed'; diffContent.appendChild(document.createElement("br"));
diffElement.textContent = part.value; } else if (segment.length > 0) {
} else { const diffElement = document.createElement("span");
diffElement.textContent = part.value; 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); fixedDiv.appendChild(btn_diff);
} }