Feature Idea: Inline diff for Outdated strings

[PstasDev]

Wouldn't it be so much help if we could spot differences so much faster with applying inline diffs?

Design plan

[PstasDev]

I wrote a quick client-side, vanilla JS implementation of the feature, this current version looks for word-by-word for differences.

function generateDiff(oldText, newText) {
    const oldWords = oldText.split(/\s+/);
    const newWords = newText.split(/\s+/);
    const diff = [];
    let i = 0, j = 0;

    while (i < oldWords.length || j < newWords.length) {
        if (i < oldWords.length && j < newWords.length && oldWords[i] === newWords[j]) {
            diff.push({ value: oldWords[i], added: false, removed: false });
            i++;
            j++;
        } else {
            if (i < oldWords.length) {
                diff.push({ value: oldWords[i], added: false, removed: true });
                i++;
            }
            if (j < newWords.length) {
                diff.push({ value: newWords[j], added: true, removed: false });
                j++;
            }
        }
    }

    return diff;
}

function highlightTextDifferences(oldTextId, newTextId) {
    const oldText = document.getElementById(oldTextId).textContent;
    const newText = document.getElementById(newTextId).textContent;
    const diff = generateDiff(oldText, newText);
    let oldResult = '';
    let newResult = '';

    let wordsRemoved = 0;
    let wordsAdded = 0;

    diff.forEach(part => {
        const color = part.added ? 'rgba(0,255,0,0.3)' : part.removed ? 'rgba(255,0,0,0.3)' : 'inherit';
        if (part.removed) {
            oldResult += `<span style="background-color: ${color}">${part.value} </span>`;
            wordsRemoved++;
        } else if (part.added) {
            newResult += `<span style="background-color: ${color}">${part.value} </span>`;
            wordsAdded++;
        } else {
            oldResult += part.value + ' ';
            newResult += part.value + ' ';
        }
    });
    document.getElementById(oldTextId).innerHTML = oldResult;
    document.getElementById(newTextId).innerHTML = newResult;

    return "Words removed: " + wordsRemoved + ", Words added: " + wordsAdded;
}
// string_form.tpl uses these extra variables
highlightTextDifferences('old_base_{{tc.case}}', 'base_{{tc.case}}');