MediaWiki:Common.js

Opmerking: na het publiceren moet je misschien je browsercache legen om de veranderingen te zien.

• Firefox / Safari: houd Shift ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5 of Ctrl-R (⌘-Shift-R op een Mac)
• Google Chrome: druk op Ctrl-Shift-R (⌘-Shift-R op een Mac)
• Edge: houd Ctrl ingedrukt terwijl u:je op Vernieuwen klikt of druk op Ctrl-F5.

/* Any JavaScript here will be loaded for all users on every page load. */
/* Wacht tot de VisualEditor-kernen geladen zijn */
mw.loader.using( [ 'oojs-ui', 'ext.visualEditor.core' ] ).then( function () {

    // 1. Definieer de tool
    function MyCodeTool() {
        MyCodeTool.super.apply( this, arguments );
    }
    OO.inheritClass( MyCodeTool, ve.ui.Tool );

    MyCodeTool.static.name = 'customHighlightJsCode';
    MyCodeTool.static.group = 'style'; // Staat in het 'Style text' menu
    MyCodeTool.static.icon = 'code';   // </> icoon
    MyCodeTool.static.title = 'Codeblok (Highlight.js)';

    // 2. Wat gebeurt er bij een klik
    MyCodeTool.prototype.onSelect = function () {
        var surfaceModel = this.toolbar.getSurface().getModel();
        var fragment = surfaceModel.getFragment();
        
        var selectedText = fragment.getText() || 'Plaats hier uw code';
        var htmlContent
= '<pre class="code2highlight" typeof="mw:Extension/syntaxhighlight" contenteditable="false" data-mw=\'{"name":"syntaxhighlight","attrs":{"lang":""},"body":{"extsrc":'
+ JSON.stringify(selectedText).replaceAll("'", "&#39;")
+ '}}\'>'
+ ve.escapeHtml( selectedText )
+ '</pre>';

        fragment.insertHtml( htmlContent ).collapseToEnd().select();
    };

    // 3. Zorg ervoor dat de knop NIET disabled is
    MyCodeTool.prototype.onUpdateState = function () {
        MyCodeTool.super.prototype.onUpdateState.apply( this, arguments );
        
        // Forceer dat de knop bruikbaar is in de editor
        this.setDisabled( false ); 
    };

    // 4. Registreer de tool in de fabriek
    ve.ui.toolFactory.register( MyCodeTool );

    // 5. Forceer de sneltoetsregistratie
    mw.hook( 've.loadModules' ).add( function () {
        ve.ui.triggerRegistry.register(
            'customHighlightJsCodeTrigger',
            new ve.ui.Trigger( 'ctrl+shift+c' )
        );
    } );
} );