User:Lockal/rawedit.js

function cleanJson(x) {
    var r = /\\u([\d\w]{4})/gi;
    x = x.replace(r, function (match, grp) { return String.fromCharCode(parseInt(grp, 16)); } );
    x = unescape(x);
    return x;
}

function formatJson(x) {
    var r = '';
    var noformat = false;
    var spaces = 0;
    for (var i = 0; i < x.length; i++) {
        if (x[i] === '\\') { r += x[i]; i++; r += x[i]; }
        else if (x[i] === '"') { noformat = !noformat; r += x[i]; }
        else if (noformat) { r += x[i]; }
        else if (x[i] === '{') { spaces++; r += '\n' + Array(spaces).join("  ") + x[i]; }
        else if (x[i] === '}' && x[i+1] === ',') { spaces--; r += x[i] + x[i+1] + '\n' + Array(spaces).join("  "); i++; }
        else if (x[i] === '}') { spaces--; r += x[i] + '\n' + Array(spaces).join("  "); }
        else if (x[i] === ':' || x[i] === ',' ) { r += x[i] + ' '; }
        else { r += x[i]; }
    }
    return r;
}

// cleanJson(mw.config.get('wbEntity'));

function rawEditSetup() {
	importStylesheet( 'User:Lockal/jsoneditor.min.css' );
	// mw.loader.load( 'https://cdn.rawgit.com/josdejong/jsoneditor/master/dist/jsoneditor.min.css', 'text/css' ); // we need svg with icons :(
	
	var js, fjs = document.getElementsByTagName('script')[0];
	if (document.getElementById('jsoneditor-minimalist')){ return; }
	js = document.createElement('script'); js.id = 'jsoneditor-minimalist';
	js.onload = rawEdit;
	js.src = "https://www.wikidata.org/w/index.php?title=User:Lockal/jsoneditor-minimalist.min.js&action=raw&ctype=text/javascript";
	fjs.parentNode.insertBefore(js, fjs);
}

function rawEdit() {
    if ($(".articlepreview")) { $(".articlepreview").remove(); }
	
    var $editbox = $('<textarea wrap="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="#wpTextbox1" accesskey="," cols="80" rows="25" style=""></textarea>');
	
    var $jsonbox = $('<div style="width: 500px;"></div>');
	
	var editor = new JSONEditor($jsonbox[0], {});
	
	var $betweenbox = $('<div style="align-self: center;"></div>');
	var $text2json = $('<button style="display: block; margin: 2px 4px;">&gt;</button>').click(function(){ editor.set(JSON.parse($editbox.val())); });
	var $json2text = $('<button style="display: block; margin: 2px 4px;">&lt;</button>').click(function(){ $editbox.val(formatJson(JSON.stringify(editor.get()))); });
	$betweenbox.append($text2json).append($betweenbox).append($json2text);
	
    var $editwrapper = $('<div style="display: flex; width: 100%;"></div>').append($editbox).append($betweenbox).append($jsonbox);
    // $editbox.val(formatJson(cleanJson(mw.config.get('wbEntity'))));

    $.ajax({
            type: 'GET',
            url: mw.util.wikiScript('api'),
            data: {
                'format': 'json',
                'formatversion': 2,
                'action': 'query',
                'prop': 'revisions',
                'rvprop': 'content',
                'titles': mw.config.get('wgPageName'),
            }
        })
        .done(function(data) {
            var content = data.query.pages[Object.keys(data.query.pages)[0]].revisions[0].content;
			var cleaned = formatJson(cleanJson(content));
            $editbox.val(cleaned);
			editor.set(JSON.parse(cleaned));
        })
        .fail(function(data) {
            console.error(data);
        });

    var $summary = $('<div class="oo-ui-widget oo-ui-widget-enabled oo-ui-inputWidget oo-ui-textInputWidget oo-ui-textInputWidget-type-text"><input class="mw-summary" id="wpSummary" maxlength="255" tabindex="1" size="60" spellcheck="true" accesskey="b"></div>');

    var $save = $('<span class="oo-ui-widget oo-ui-widget-enabled oo-ui-flaggedElement-constructive oo-ui-flaggedElement-primary oo-ui-inputWidget oo-ui-buttonElement oo-ui-buttonElement-framed oo-ui-labelElement oo-ui-buttonInputWidget"><input type="button" class="oo-ui-inputWidget-input oo-ui-buttonElement-button" value="Save" /></span>').click(function() {
        var summary = $summary.find('input').val();
        if (summary.length) summary += ' ';
        summary += '#rawedit';

        $.ajax({
                type: 'POST',
                url: mw.util.wikiScript('api'),
                data: {
                    'format': 'json',
                    'action': 'wbeditentity',
                    'clear': 1,
                    'id': mw.config.get('wbEntityId'),
                    'token': mw.user.tokens.get('csrfToken'),
                    'data': $editbox.val(),
                    'summary': summary,
                    'baserevid': mw.config.get('wgRevisionId'),
                    // 'exclude': 'pageid|ns|title|lastrevid|touched'
                }
            })
            .done(function(data) {
                if (data.success == 1) {
                    console.log(data);
                    location.reload();
                } else {
                    console.error(data);
                }
            })
            .fail(function(data) {
                console.error(data);
            });
    });

    $('#bodyContent').empty().append($editwrapper).append(
        $('<div class="editOptions" />')
        .append($summary)
        .append(
            $('<div class="editButtons" />').append($save)
        )
    );
}

$(function(){
    if ((mw.config.get('wgNamespaceNumber') === 0 || mw.config.get('wgNamespaceNumber') === 120) &&
        (mw.config.get('wgPageContentModel') === 'wikibase-item' || mw.config.get('wgPageContentModel') === 'wikibase-property') &&
        mw.config.get('wgAction') === 'view' &&
        mw.config.get('wgPageName')) {
        mw.util.addPortletLink('p-cactions', '#', 'Raw Edit', 'rawedit');
        document.getElementById('rawedit').setAttribute('onclick', 'rawEditSetup()');
    }
});