MediaWiki:Common.js

mw.hook('ve.loadModules').add(function (addPlugin) {
    addPlugin(function () {
        // 1. Define a custom annotation for highlighting
        ve.dm.HighlightAnnotation = function VeDmHighlightAnnotation() {
            ve.dm.HighlightAnnotation.super.apply(this, arguments);
        };
        OO.inheritClass(ve.dm.HighlightAnnotation, ve.dm.TextStyleAnnotation);
        ve.dm.HighlightAnnotation.static.name = 'textStyle/highlight';
        ve.dm.HighlightAnnotation.static.matchTagNames = ['mark'];
        ve.dm.annotationFactory.register(ve.dm.HighlightAnnotation);

        // 2. Define the contentEditable view for the annotation
        ve.ce.HighlightAnnotation = function VeCeHighlightAnnotation() {
            ve.ce.HighlightAnnotation.super.apply(this, arguments);
        };
        OO.inheritClass(ve.ce.HighlightAnnotation, ve.ce.TextStyleAnnotation);
        ve.ce.HighlightAnnotation.static.name = 'textStyle/highlight';
        ve.ce.HighlightAnnotation.static.tagName = 'mark';
        ve.ce.annotationFactory.register(ve.ce.HighlightAnnotation);

        // 3. Register the command to toggle the highlight
        ve.ui.commandRegistry.register(
            new ve.ui.Command(
                'insertHighlight', 
                'annotation', 
                'toggle',
                { 
                    args: ['textStyle/highlight'], 
                    supportedSelections: ['linear', 'table'] 
                }
            )
        );

        // 4. Register the tool (now inherits from AnnotationTool)
        ve.ui.HighlightTool = function VeUiHighlightTool(toolGroup, config) {
            ve.ui.HighlightTool.super.call(this, toolGroup, config);
        };
        OO.inheritClass(ve.ui.HighlightTool, ve.ui.AnnotationTool);
        ve.ui.HighlightTool.static.name = 'highlight';
        ve.ui.HighlightTool.static.group = 'style'; // Can now go in style group!
        ve.ui.HighlightTool.static.icon = 'highlight';
        ve.ui.HighlightTool.static.title = 'Highlight text';
        ve.ui.HighlightTool.static.annotation = { name: 'textStyle/highlight' };
        ve.ui.HighlightTool.static.commandName = 'insertHighlight';
        ve.ui.toolFactory.register(ve.ui.HighlightTool);

        console.log('Highlight tool registered with custom annotation.');
    });
});