User:Polygnotus/Scripts/DiffCompare.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

$.ajax('https://cdn.jsdelivr.net/gh/google/diff-match-patch@master/javascript/diff_match_patch.js', {
    dataType: 'script',
    cache: true
}).then(function () {
	
    const DEBUG = false;

    function debug(...args) {
        if (DEBUG) {
            debug('[DiffCompare]', ...args);
        }
    }

	
    debug('diff_match_patch library loaded successfully');

    if (typeof diff_match_patch === 'undefined') {
        console.error('diff_match_patch is undefined after loading');
        return;
    }

    function showDiff(text1, text2) {
        debug('showDiff called with:', { text1, text2 });

        const dmp = new diff_match_patch();
        debug('diff_match_patch instance created');

        const diffs = dmp.diff_main(text1, text2);
        debug('diffs created:', diffs);

        dmp.diff_cleanupSemantic(diffs);
        debug('diffs after cleanup:', diffs);

        let html = '';
        for (let i = 0; i < diffs.length; i++) {
            debug(`Processing diff ${i}:`, diffs[i]);
            const op = diffs[i][0];
            const data = diffs[i][1];
            switch (op) {
                case -1: // DIFF_DELETE
                    html += '<del style="background-color: #ffe6e6;">' + escapeHtml(data) + '</del>';
                    break;
                case 1: // DIFF_INSERT
                    html += '<ins style="background-color: #e6ffe6;">' + escapeHtml(data) + '</ins>';
                    break;
                case 0: // DIFF_EQUAL
                    html += '<span>' + escapeHtml(data) + '</span>';
                    break;
                default:
                    console.error(`Unknown diff operation: ${op}`);
            }
        }
        debug('Final HTML:', html);
        return html;
    }

    function escapeHtml(unsafe) {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    const oldText = "The quick brown fox jumps over the lazy dog.";
    const newText = "The fast brown fox leaps over the lazy cat.";

    try {
        debug('Attempting to generate diff');
        const diffHtml = showDiff(oldText, newText);
        debug('Diff generation successful');
        debug('Diff result:', diffHtml);

        const diffContainer = $('<div>')
            .attr('id', 'diff-output')
            .css({
                'border': '1px solid #a2a9b1',
                'padding': '10px',
                'margin-bottom': '20px',
                'background-color': '#f8f9fa'
            })
            .html('<strong>Diff Result:</strong><br>' + diffHtml);

        $('#bodyContent').prepend(diffContainer);

    } catch (error) {
        console.error('Error generating diff:', error);
    }
}).catch(function(error) {
    console.error('Error loading diff_match_patch library:', error);
});