Monaco Editor

by agraebe

HTML

<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
<div id="container"></div>
<div id="validation"></div>

CSS

html, body {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

#container {
  height: 80%;
}

#validation {
  height: 20%;
}

Babel + JSX

require.config({ paths: { 'vs': 'https://unpkg.com/[email protected]/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/[email protected]/min/'
	};
	importScripts('https://unpkg.com/[email protected]/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
	let editor = monaco.editor.create(document.getElementById('container'), {
		value: [
			'{',
  '\t"device_id": "00112233-4455-6677-8899-AABBCCDDEEFF",',
  '\t"destination": {',
    '\t\t"geometry": {',
     '\t\t\t"type": "Point",',
      '\t\t\t"coordinates": [-122.3980960195712, 37.7930386903944]',
    '\t\t},',
    '\t\t"scheduled_at": "2019-05-03T06:25:51.238000Z"',
  '\t},',
  '\t"metadata": {',
    '\t\t"customer_id": "ABC123"',
  '\t}',
'}'
		].join('\n'),
		language: 'json',
		theme: 'vs-dark'
	});
	
	editor.addListener('didType', () => {
		console.log(editor.getValue());
	});
});