Make the editor fill the viewport

6 years ago · 8ad95c907a
3 changed files with 14 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -8,6 +8,8 @@
 </head>
 <body>
 	
+	<textarea id="editor"></textarea>
+
 	<script src="codemirror/codemirror.js"></script>
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
 	<script src="main.js"></script>
--- a/main.css
+++ b/main.css
@ -5,4 +5,10 @@

 .incomplete {
 	color: gray !important;
-}
+}
+
+#editor {
+	display: none;
+	width: 100%;
+	height: 100%;
+}
--- a/main.js
+++ b/main.js
@ -29,8 +29,9 @@ $.get({

 // setup
 function setup(data, mode) {
-	editor = new CodeMirror(document.body, {
-		value: data,
+	let el = document.getElementById("editor");
+	el.value = data;
+	editor = CodeMirror.fromTextArea(el, {
 		mode: mode,
 		readOnly: true,
 		autofocus: true,
@ -42,6 +43,8 @@ function setup(data, mode) {
 		}
 	});

+	editor.setSize("100%", "100%");
+
 	incompleteMark = editor.doc.markText({ line: 0, ch: 0 }, getEndPos(), {
 		className: "incomplete"
 	});