Port over monarch playground

website/monarch/monarch.css

@@ -0,0 +1,219 @@
+
+
+/* common extra token classes */
+.monaco-editor .token.invalid     { border-bottom: red dotted 1px }
+.monaco-editor .token.identifier  { }
+.monaco-editor .token.comment.doc { font-style: normal; }
+
+.monaco-editor .token.type            { color: teal; }
+.monaco-editor .token.type.delimiter  { color: teal; }
+.monaco-editor .token.predefined      { color: navy; }
+.monaco-editor .token.namespace       { color: navy; }
+.monaco-editor .token.constructor     { color: purple; }
+
+/* theme all the new token classes */
+
+.monaco-editor.vs-dark .token.type                     { color: darkcyan;}
+.monaco-editor.vs-dark .token.predefined               { color: darkorchid;}
+.monaco-editor.vs-dark .token.namespace                { color: lightsteelblue; }
+.monaco-editor.vs-dark .token.constructor              { color: palegoldenrod; }
+
+.monaco-editor.high-contrast-black .token.type         { color: darkcyan;}
+.monaco-editor.high-contrast-black .token.predefined   { color: aquamarine;}
+.monaco-editor.high-contrast-black .token.namespace    { color: lightsteelblue; }
+.monaco-editor.high-contrast-black .token.constructor  { color: palegoldenrod; }
+
+/* specials for functional languages */
+.token.keyword.dot                { color: black; }
+.token.typeparam                  { color: #555;  }
+.token.typevar                    { font-style: italic; }
+
+
+
+
+
+
+
+
+.monaco-editor .current-line,
+.monaco-editor.vs .current-line,
+.monaco-editor.monaco .current-line { border: none; }
+.monaco-editor.vs .key.js           { color: navy;}
+
+.monaco-editor.vs .token.string.escape,
+.token.regexp.escape                { color: dimgray; }
+.token.regexp.escape.control        { color: black; }
+
+.token.emphasis         { font-style: italic;}
+.token.strong           { font-weight: bold; }
+.token.header           { color: navy ;}
+
+/* -------------------------------------------
+    Workbench UI style
+--------------------------------------------*/
+#editor, #langPane {
+  height: 60ex;
+  border: 1px solid #ccc
+}
+
+#langPane {
+  height: 72ex;
+}
+
+#main {
+  font-family: "Segoe UI Light", "Segoe UI", Arial, "HelveticaNeue-Light", sans-serif;
+  font-size: 12pt;
+  width: 94%;
+  padding: 0pt;
+  margin: 1% 3% 5ex 3%;
+}
+
+#leftPane {
+  float: left;
+  width: 58%;
+  margin: 0pt;
+  margin-bottom: 2ex;
+}
+
+#rightPane {
+  width: 40%;
+  float: right;
+  margin: 0pt;
+}
+
+#header, #footer {
+  clear: both;
+  font-size: 18pt;
+  margin-bottom: 1ex;
+}
+
+#logo {
+  margin: 0pt 0pt 5pt -17px;
+  padding: 0pt;
+  width: 17px;
+}
+
+#commandbar {
+  margin-top: 4px;
+  height: 90%;
+}
+
+
+#monarchConsole {
+  color: black;
+  overflow: auto;
+  height: 100px;
+  border: lightgray 1px solid;
+  padding-left: 1ex;
+  margin-top: 10px;
+  white-space: pre-wrap;
+}
+
+#sampleselect {
+  width: 15ex;
+}
+#themeselect, #sampleselect {
+  padding: 0;
+  margin: 0;
+  height: auto;
+}
+
+.paneheader {
+  margin-bottom: 0.5ex;
+  font-size: 14pt;
+}
+
+.selectbox {
+  float: right;
+  font-size: smaller;
+}
+
+.button {
+  border: 1px solid lightgray;
+  cursor: pointer;
+  padding: 0ex 0.5ex 0ex 0.5ex;
+}
+
+.button:hover {
+  background-color: lightgray;
+  border-color: dimgray;
+}
+
+.touchbutton:hover {
+  background-color: #F8F8F8;
+}
+
+.touchbutton {
+  border: 1px solid;
+  border-radius: 1000px; /* circle */
+  height: 3ex;
+  width: 3ex;            /* needed for safari */
+  cursor: pointer;
+}
+
+.touchbutton:hover {
+  background-color: #F8F8F8;
+}
+
+.arrowdown {
+  font-size: 10pt;
+}
+
+/*-------------------------------------------------------------------
+   documentation style
+-------------------------------------------------------------------*/
+  #documentation {
+  clear: both;
+  border: lightgray 1px solid;
+  padding: 1ex 4ex 1ex 3ex;
+  font-family: "Segoe UI", Arial, "HelveticaNeue-Light", sans-serif;
+}
+
+#documentation a {
+  color: navy;
+  text-decoration: none;
+  border-bottom: 1px dotted;
+}
+
+#documentation .monaco-editor.monaco .current-line,
+#documentation .monaco-editor     { background-color: #fafafa }
+#documentation .string.escape     { color: dimgray;}
+
+h1,h2,h3,h4
+      { font-weight: normal;
+        margin-top: 0pt;
+        margin-left: -1.5ex;
+        margin-bottom: 0pt;
+      }
+
+h2    { font-size: 16pt;}
+h3    { font-size: 120%;}
+
+ul    { padding-left: 1.5em
+      ; margin-left: 0pt
+      }
+
+.options,
+pre   { border: 1px solid #888
+      ; padding: 1ex
+      ; background: #F8F8F8
+      ; font-size: 10pt;
+      }
+
+
+code, pre,dt { font-family: Consolas }
+
+strong    { color: black }
+
+td      { vertical-align: top }
+img     { margin: 2ex }
+
+
+dt    { color: navy; margin-top: 2ex; padding: 2px;}
+.dt   { color: navy }
+.adv  { color: maroon; }
+
+dl dl dt { margin-top: 1ex;}
+
+#documentation .keyword  { color: blue; }
+#documentation .tag      { color: navy; }

website/monarch/monarch.js

@@ -0,0 +1,182 @@
+/// <reference path="../../release/monaco.d.ts" />
+
+"use strict";
+
+/*-----------------------------------------
+   General helpers
+------------------------------------------*/
+function clearInnerText(elem) {
+	elem.innerHTML = "";
+}
+
+function getInnerText(elem) {
+	var text = elem.innerText;
+	if (!text) text = elem.textContent;
+	return text;
+}
+
+function escapeToHTML(text) {
+	return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+
+function appendInnerText(elem, txt) {
+	txt = escapeToHTML(txt);
+	elem.innerHTML += txt;
+}
+
+function setInnerText(elem, txt) {
+	clearInnerText(elem);
+	appendInnerText(elem, txt);
+}
+
+function getTextFromId(id) {
+	var elem = document.getElementById(id);
+	if (elem == null) return null;
+	return getInnerText(elem);
+}
+
+
+/* -----------------------------------------
+   The main loader for the workbench UI
+------------------------------------------*/
+
+var outputPane = document.getElementById("monarchConsole");
+
+var isDirty = false;
+window.onbeforeunload = function (ev) {
+	if (isDirty) {
+		return "If you leave this page any unsaved work will be lost.";
+	}
+};
+
+function createLangModel(languageId, text) {
+	monaco.languages.register({ id: languageId });
+
+	var langModel = monaco.editor.createModel(text, 'javascript');
+	var update = function() {
+		var def = null;
+		try {
+			def = eval("(function(){ " + langModel.getValue() + "; })()");
+		} catch (err) {
+			setInnerText(outputPane, err + '\n');
+			return;
+		}
+		monaco.languages.setMonarchTokensProvider(languageId, def);
+		setInnerText(outputPane, 'up-to-date\n');
+	};
+	langModel.onDidChangeContent(function() {
+		isDirty = true;
+		update();
+	});
+	update();
+
+	return langModel;
+}
+
+function readSamples(sampleSelect) {
+	var samples = {};
+
+	for (var i = 0; i < sampleSelect.options.length; i++) {
+		var id = sampleSelect.options[i].value;
+		if (!id || sampleSelect.options[i].disabled) {
+			continue;
+		}
+
+		var languageId = 'monarch-language-' + id;
+
+		// monaco.languages.register({ id: languageId });
+
+		// var langModel = monaco.editor.createModel(getTextFromId(id), 'javascript');
+		// var update = function() {
+		// 	console.log()
+		// };
+		// langModel.onDidChangeContent(update);
+
+		var sampleText = getTextFromId(id + "-sample");
+
+		samples[id] = {
+			languageId: languageId,
+			langModel: createLangModel(languageId, getTextFromId(id)),
+			langViewState: null,
+			sampleModel: monaco.editor.createModel(sampleText, languageId),
+			sampleViewState: null,
+		};
+	}
+
+	return samples;
+}
+
+require(["vs/editor/editor.main"], function () {
+	var sampleSelect = document.getElementById("sampleselect");
+	var langPane = document.getElementById("langPane");
+	var editorPane = document.getElementById("editor");
+
+	// Adjust height of editors
+	var screenHeight = window.innerHeight;
+	if (screenHeight) {
+		var paneHeight = 0.76 * screenHeight;
+		langPane.style.height = paneHeight + "px";
+		editorPane.style.height = (paneHeight - 112) + "px"; // 100px + margin 10px + borders 2px
+	}
+
+	var SAMPLES = readSamples(sampleSelect);
+	var CURRENT_SAMPLE = null;
+
+	var langEditor = monaco.editor.create(langPane, {
+		model: null,
+		scrollBeyondLastLine: false
+	});
+
+	var sampleEditor = monaco.editor.create(editorPane, {
+		model: null,
+		scrollBeyondLastLine: false
+	});
+
+	var select = document.getElementById("themeselect");
+	var currentTheme = "vs";
+	select.onchange = function () {
+		currentTheme = select.options[select.selectedIndex].value;
+		sampleEditor.updateOptions({ theme: currentTheme });
+	};
+
+	// on resize
+	function refreshLayout() {
+		langEditor.layout();
+		sampleEditor.layout();
+	};
+	window.onresize = refreshLayout;
+
+	// Switch to another sample
+	function setEditorState(name) {
+		if (!name || CURRENT_SAMPLE === name || !SAMPLES[name]) {
+			return;
+		}
+
+		// Save previous sample's view state
+		if (CURRENT_SAMPLE) {
+			SAMPLES[CURRENT_SAMPLE].langViewState = langEditor.saveViewState();
+			SAMPLES[CURRENT_SAMPLE].sampleViewState = sampleEditor.saveViewState();
+		}
+
+		CURRENT_SAMPLE = name;
+
+		// Apply new sample
+		langEditor.setModel(SAMPLES[CURRENT_SAMPLE].langModel);
+		if (SAMPLES[CURRENT_SAMPLE].langViewState) {
+			langEditor.restoreViewState(SAMPLES[CURRENT_SAMPLE].langViewState);
+		}
+		sampleEditor.setModel(SAMPLES[CURRENT_SAMPLE].sampleModel);
+		if (SAMPLES[CURRENT_SAMPLE].sampleViewState) {
+			sampleEditor.restoreViewState(SAMPLES[CURRENT_SAMPLE].sampleViewState);
+		}
+	}
+
+	// Refresh the sample text
+	function refreshSample() {
+		var name = sampleSelect.options[sampleSelect.selectedIndex].value;
+		setEditorState(name);
+	}
+	sampleSelect.onchange = refreshSample;
+	refreshSample(); // initialize initial text
+
+}); // require