User:Lens0021/Sandbox.js

mw.loader .using(['oojs-ui-core', 'oojs-ui.styles.icons-media']) .done(function {    var examples = document.querySelectorAll('.dpl3-example');    var api = new mw.Api;

examples.forEach(function (example) {     var pre = example.querySelector('pre')      var code = pre.textContent;

var textarea = new OO.ui.MultilineTextInputWidget({       autosize: true,        value: code      });

textarea.$element.css('min-height', pre.clientHeight);

var runButton = new OO.ui.ButtonWidget({       icon: 'play',        label: 'Run',        invisibleLabel: true,        title: 'Run this code',        classes: ['run-button'],        flags: ['progressive']      }); var result; runButton.onClick = function { if (!result) { result = document.createElement('div'); result.className = 'result'; example.appendChild(result); } else { possibleModifiedCode = textarea.value; if (possibleModifiedCode == code) { return; }         code = possibleModifiedCode; }       result.innerHTML = 'Running...';

api .get({           action: 'parse',            contentmodel: 'wikitext',            text: code,            format: 'json'          }) .done((data) => {           var html = data.parse.text['*'];            console.log(html);            result.innerHTML = html;          }) .fail(function (error) {           result.innerHTML = 'Error: ' + error;          }); };     runButton.connect(runButton, {        click: 'onClick'      });

$(pre).replaceWith(textarea.$element); $(example).append(runButton.$element); }); });