User:Enterprisey/parsoid-round-trip.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

$( function () {
    if( mw.config.get( "wgPageName" ) === "Special:BlankPage/Parsoid_round_trip" ) {
        mw.loader.load( [ "mediawiki.diff.styles" ] );
        mw.loader.addStyleTag( "#go:not(:disabled) { cursor: pointer; }" );
        $( "#firstHeading" ).text( "Parsoid round trip" );
        var userAgent = "parsoid-round-trip.js (https://wiki.riteme.site/wiki/User:Enterprisey/parsoid-round-trip)";
        $( "#mw-content-text" ).empty().append(
            "<p>Wikitext:</p>",
            $( "<textarea>", { id: "wikitext", height: "6em" } ),
            $( "<button>", { id: "go" } )
                .css( { padding: "0.5em", margin: "0.5em 0" } )
                .text( "Round-trip from wikitext to HTML and back" )
                .click( function () {
                    $( "#go" ).prop( "disabled", true );
                    var originalWikitext = $( "#wikitext" ).val();
                    $.post( {
                        url: "https://wiki.riteme.site/api/rest_v1/transform/wikitext/to/html",
                        data: { wikitext: originalWikitext, body_only: true },
                        headers: { "User-Agent": userAgent }
                    } ).then( function ( html ) {
                        $.post( {
                            url: "https://wiki.riteme.site/api/rest_v1/transform/html/to/wikitext",
                            data: { html: html },
                            headers: { "User-Agent": userAgent }
                        } ).then( function ( wikitext ) {
                            $( "#result" ).text( wikitext );
                            $.get( {
                                url: "https://wiki.riteme.site/w/api.php?action=compare&prop=diff&format=json&formatversion=2&fromslots=main&fromcontentmodel-main=wikitext&fromtext-main=" +
                                    encodeURIComponent( originalWikitext ) +
                                    "&toslots=main&tocontentmodel-main=wikitext&totext-main=" +
                                    encodeURIComponent( wikitext ),
                                headers: { "User-Agent": userAgent }
                            } ).then( function ( data ) {
                                $( "#go" ).prop( "disabled", false );
                                var diffHtml = data.compare.body;
                                if( diffHtml ) {
                                    $( "#diff" ).empty().append( $( "<table>", { "class": "diff" } ).append( '<colgroup><col class="diff-marker"><col class="diff-content"><col class="diff-marker"><col class="diff-content"></colgroup>', diffHtml ) );
                                } else {
                                    $( "#diff" ).empty().text( "(no difference)" );
                                }
                            }, function () { $( "#go" ).prop( "disabled", false ); } );
                        }, function () { $( "#go" ).prop( "disabled", false ); } );
                    }, function () { $( "#go" ).prop( "disabled", false ); } );
                } ),
            $( "<div>", { id: "result" } ).css( {
                padding: "0.5em",
                border: "thin dashed gray",
                "font-family": "monospace",
                "white-space": "pre",
                overflow: "auto"
            } ),
            $( "<div>", { id: "diff" } )
        );
    }
} );