Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
// Word, character and byte counter for the wiki editor
$(function() {
    // 1. Detect only the source editor using the recommended hook
    mw.hook('wikipage.editform').add(function($editForm) {
        if ($('#wpTextbox1').length === 0) return;

        // 2. Create the counter
        var counter = $(`
            <div id="mw-edit-counter" style="
                position: fixed;
                bottom: 20px;
                right: 20px;
                padding: 12px 16px;
                background: #20232a;
                color: #61dafb;
                border-radius: 8px;
                font-family: system-ui, sans-serif;
                font-size: 14px;
                box-shadow: 0 4px 12px rgba(0,0,0,0.25);
                z-index: 1100;
                opacity: 0.95;
                transition: background 0.3s;
            ">
                <div style="display: flex; gap: 15px;">
                    <div><b>Words:</b> <span id="edit-words">0</span></div>
                    <div><b>Characters:</b> <span id="edit-chars">0</span></div>
                    <div><b>Bytes:</b> <span id="edit-bytes">0</span></div>
                </div>
            </div>
        `);

        $('body').append(counter);

        // 3. Optimized counting function with text cleaning
        function updateCounter() {
            try {
                var text = $('#wpTextbox1').val();
                
                // Text cleaning for more accurate counting
                var cleanText = text
                    .replace(/\[\[.*?\]\]/g, '')    // Remove wiki links
                    .replace(/\{\{.*?\}\}/g, '')    // Remove templates
                    .replace(/<[^>]+>/g, '')         // Remove HTML tags
                    .replace(/={2,}.*?={2,}/g, '')  // Remove headers
                    .replace(/[\[\]\{\}\|\*\#\:;]/g, '') // Other wiki characters
                    .replace(/\s+/g, ' ')            // Multiple spaces -> single
                    .trim();
                
                // Calculations using cleaned text
                var words = cleanText === '' ? 0 : cleanText.split(/\s+/).length;
                var chars = cleanText.length;
                
                // Bytes calculation with original text (uncleaned)
                var bytes = new Blob([text]).size;
                
                // Update DOM
                $('#edit-words').text(words);
                $('#edit-chars').text(chars);
                $('#edit-bytes').text(bytes);
                
                // Change background color if exceeding 1000 words
                $('#mw-edit-counter').css(
                    'background', 
                    words > 1000 ? '#4a1a1a' : '#20232a' // Dark red / Dark blue
                );
                
            } catch (e) {
                console.error('Error in updateCounter:', e);
            }
        }

        // 4. Events and additional features
        $('#wpTextbox1').on('input change keyup paste', updateCounter);
        updateCounter(); // Initialize
        
        // Make counter draggable (requires jquery.ui)
        $('#mw-edit-counter').draggable({
            handle: 'div',
            containment: 'window'
        });
    });
});