Monaco Editor Partial View

Only show part of a document in Monaco Editor

by Renato Del Castillo

HTML

<script src="https://unpkg.com/monaco-editor@0.8.3/min/vs/loader.js"></script>
<body>
<div id="container"></div>
</body>

CSS

body {
  background: #222;
  height: 700px;
}
#container {
	position: absolute;
	left: 0;
	top: 0;
	width: 80%;
	height: 1000px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

Babel + JSX

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

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

require(["vs/editor/editor.main"], function () {
	let value = `function capitalizeFirstLetter(string) {
\treturn string.charAt(0).toUpperCase() + string.slice(1);
}

$(function() {
\tlet word = "script";
\tlet result = capitalizeFirstLetter(word);
\tconsole.log(result);
});
  `
  let linesToDisable = [1,2,3];
	let editor = monaco.editor.create(document.getElementById('container'), {
		value,
		language: 'javascript',
		theme: 'vs-dark',
    scrollbar: {
      vertical: "hidden",
      handleMouseWheel: false
    },
    scrollBeyondLastLine: false
	});
	
  // onLoad event for Monaco Editor: https://github.com/Microsoft/monaco-editor/issues/115
  let didScrollChangeDisposable = editor.onDidScrollChange(function() {
    didScrollChangeDisposable.dispose();
    setTimeout(function() {
      $(".monaco-editor .view-lines > div").each(function(i) {
        if(linesToDisable.includes(i+1)) {
          $(this).css("display","none");
          $(this).css("pointer-events","none");
        }
      });
    },1000);
  }); 
  editor.onKeyDown(function(e) {
  	console.log(e);
  });
});