MediaWiki:Common.js

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.

/* Any JavaScript here will be loaded for all users on every page load. */
/* Add STICKY copy icon to syntaxhighlight blocks */
mw.hook('wikipage.content').add(function($content) {
    var copyIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>';
    var checkIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#28a745" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>';

    $content.find('.mw-highlight').each(function() {
        var $block = $(this);
        if ($block.find('.copy-button').length > 0) return;

        var $button = $('<button>')
            .addClass('copy-button')
            .html(copyIcon)
            .attr('title', 'Copy to clipboard')
            .on('click', function() {
                var code = $block.find('pre').text();
                navigator.clipboard.writeText(code).then(function() {
                    $button.html(checkIcon);
                    setTimeout(function() { $button.html(copyIcon); }, 2000);
                });
            });

        // Prepend the button so it sits at the top of the container
        $block.prepend($button);
    });
});