Monaco Editor

HTML

<script src="https://unpkg.com/monaco-editor@0.50.0/min/vs/loader.js"></script>
<div id='parent'>
  <div id="container"></div>
  <div id='status'></div>
</div>

CSS

#parent {
position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
  display:grid;
  grid-template-rows: 1fr 1.25em;
}
#container {
}
#status {
  background: darkgray;
  min-height: 1.25em;
  font-family: monospace;
}

#status span span input {
  font-family: monospace;
  border: none;
  background: none;
  outline: none;
}

Babel + JSX

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@0.50.0/min/vs'}});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

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

require(["vs/editor/editor.main"], function () {
	const container = document.getElementById('container');
	const editor = monaco.editor.create(container, {
		value: [
			'function x() {',
			'\tconsole.log("Hello world!");',
			'}'
		].join('\n'),
		language: 'javascript',
		theme: 'vs-dark'
	});
  
  window.addEventListener('resize', (evt) => {
  	editor.layout({
    	width: container.offsetWidth,
      height: container.offsetHeight,
    });
  });
  
  require(['https://unpkg.com/vim-monaco@1.0.1/dist/vim-monaco.umd.js'], (vim) => {
  	const parent = document.getElementById('status');
    statusbar = vim.makeDomStatusBar(parent, () => editor.focus());
    const vimMode = new vim.VimMode(editor, statusbar);
    statusbar.toggleVisibility(true);
    vimMode.enable();
  })
});