playground-plugin-codeblock-examples
Version:
Use markdown codeblocks to demo many code samples in the playground
151 lines (147 loc) • 7.26 kB
JavaScript
define(function () { 'use strict';
var makePlugin = function (utils) {
var codeblocks = [];
var selectedIndex = -1;
var next = function () { };
var style = document.styleSheets[0];
style.insertRule(".playground-plugin-container pre.clickable { border: 1px solid transparent !important; width: auto !important; }", style.cssRules.length);
style.insertRule(".playground-plugin-container pre.selected { border: 1px solid grey !important; }", style.cssRules.length);
style.insertRule(".playground-plugin-container pre.clickable:hover { border: 1px solid black !important; cursor: pointer; }", style.cssRules.length);
style.insertRule(".playground-plugin-container sub { background-color: var(--playground-pre-bg); font-weight: bold; padding: 0px 10px; margin-bottom: -3px; position: relative; bottom: -1px; }", style.cssRules.length);
var customPlugin = {
id: "code-samples",
displayName: "MD Blocks",
didMount: function (sandbox, container) {
// This is changed later once all the vars are set up
sandbox.editor.addAction({
id: "next-sample",
label: "Run the next sample",
keybindings: [sandbox.monaco.KeyMod.CtrlCmd | sandbox.monaco.KeyCode.KEY_G],
contextMenuGroupId: "run",
contextMenuOrder: 1.5,
run: function (ed) {
next();
},
});
var render = function () {
var ds = utils.createDesignSystem(container);
ds.clear();
if (codeblocks.length) {
ds.title("Code Samples");
var _loop_1 = function (block) {
var prefix = block.prefix.slice(0, 50);
if (prefix.length === 50)
prefix += "...";
ds.p(prefix);
var lang = document.createElement("sub");
lang.textContent = block.type;
lang.classList.add("title");
container.appendChild(lang);
var codeblock = ds.code(block.code);
codeblock.textContent = block.code;
var pre = codeblock.parentElement;
pre.classList.add("clickable");
pre.setAttribute("index", String(codeblocks.indexOf(block)));
pre.setAttribute("lang", block.type);
next = function () {
select(selectedIndex + 1);
};
// Handle selection by indexes so that cmd + g can work
var select = function (index, suppressScroll) {
selectedIndex = index;
var codeblockElem = document.querySelector("pre.clickable[index='" + index + "']");
if (!codeblockElem)
return;
document.querySelectorAll(".playground-plugin-container pre.clickable").forEach(function (e) { return e.classList.remove("selected"); });
codeblockElem.classList.add("selected");
sandbox.setText(codeblockElem.textContent);
if (!suppressScroll) {
var sidebar = document.querySelector(".playground-plugin-container");
sidebar.scroll({ top: codeblockElem.offsetTop - 90 });
}
var isTS = codeblockElem.getAttribute("lang").startsWith("ts");
sandbox.languageServiceDefaults.setDiagnosticsOptions({ noSemanticValidation: !isTS, noSyntaxValidation: !isTS });
};
codeblock.parentElement.onclick = function () {
var index = codeblocks.indexOf(block);
select(index, true);
};
};
// Show the codeblocks
for (var _i = 0, codeblocks_1 = codeblocks; _i < codeblocks_1.length; _i++) {
var block = codeblocks_1[_i];
_loop_1(block);
}
ds.button({ label: "Reset", onclick: function () {
codeblocks = [];
render();
} });
}
else {
// Show an intro
ds.title("Paste your markdown");
ds.subtitle("Markdown below will be converted into a set of clickable examples");
var startButton_1 = document.createElement("textarea");
startButton_1.style.boxSizing = "border-box";
startButton_1.style.webkitBoxSizing = "border-box";
startButton_1.style.width = "100%";
startButton_1.rows = 16;
container.appendChild(startButton_1);
ds.button({ label: "Parse Markdown", onclick: function () {
var code = startButton_1.value;
codeblocks = miniMDParser(code);
render();
} });
}
};
render();
if (selectedIndex !== -1) {
selectedIndex -= 1;
next();
}
},
};
return customPlugin;
};
var ParseState;
(function (ParseState) {
ParseState[ParseState["Text"] = 0] = "Text";
ParseState[ParseState["Code"] = 1] = "Code";
})(ParseState || (ParseState = {}));
var miniMDParser = function (code) {
var lines = code.split("\n");
var results = [];
var lastLineStart = "";
var codeState = "";
var lastType = "";
var state = ParseState.Text;
for (var _i = 0, lines_1 = lines; _i < lines_1.length; _i++) {
var line = lines_1[_i];
var isFence = line.trim().startsWith("```");
if (isFence) {
// Start of code block
if (state === ParseState.Text) {
lastType = line.split("```")[1].split(" ")[0];
state = ParseState.Code;
}
else {
// End of code block
state = ParseState.Text;
results.push({ code: codeState, prefix: lastLineStart, type: lastType });
codeState = "";
}
}
else {
if (state === ParseState.Code) {
codeState += line + "\n";
}
else {
if (line.trim().length > 1)
lastLineStart = line;
}
}
}
return results;
};
return makePlugin;
});