mediawiki-extensions-Syntax.../modules/pygments.copy.js
Siddharth VP 55630cc5ea Implement copy buttons for code blocks
<syntaxhighlight> blocks with a boolean "copy" param will now have a
button next to them for copying the code to the clipboard. Not
applicable for inline code blocks.

Adapted from the mediawiki.org gadget written by Krinkle.

Bug: T40932
Change-Id: Ic8ef030514c3b6dd2cb9b137f032588869ab3762
2024-09-11 01:31:14 +05:30

36 lines
1.1 KiB
JavaScript

/**
* Adapted from https://www.mediawiki.org/wiki/MediaWiki:Gadget-site-tpl-copy.js
* Original author: Krinkle
*/
// eslint-disable-next-line compat/compat
const hasFeature = navigator.clipboard && 'writeText' in navigator.clipboard;
if ( hasFeature ) {
// Add type=button to avoid form submission in preview
const $btn = $( '<button>' )
.attr( 'type', 'button' )
.text( mw.msg( 'syntaxhighlight-button-copy' ) )
.on( 'click', function () {
const btn = this;
const wrapper = btn.closest( '.mw-highlight-copy' );
const preNode = wrapper && wrapper.querySelector( 'pre' );
const content = preNode && preNode.textContent.trim();
try {
navigator.clipboard.writeText( content );
} catch ( e ) {
return;
}
const prevLabel = btn.textContent;
btn.textContent = mw.msg( 'syntaxhighlight-button-copied' );
setTimeout( () => {
btn.textContent = prevLabel;
}, 5000 );
} );
mw.hook( 'wikipage.content' ).add( ( $content ) => {
$content.find( '.mw-highlight-copy:not(.mw-highlight-copy--bound)' )
.append( $btn.clone( true ) )
.addClass( 'mw-highlight-copy--bound' );
} );
}