Migrate diff to Monaco editor

Author: nygrenh

app/views/submissions/difference_with_solution.html.erb

@@ -12,32 +12,65 @@
     <div class="card-body">
     <h2><%= file[:path] %></h2>
     <div class="code-pair" data-path="<%= file[:path] %>">
-      <div class="submission-code"><%= file[:submission_contents] %></div>
-      <div class="model-code"><%= file[:model_contents] %></div>
+      <pre class="submission-code"><%= file[:submission_contents] %></pre>
+      <pre class="model-code"><%= file[:model_contents] %></pre>
     </div>
     </div>
   </div>
   <br>
 <% end %>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/diff_match_patch/20121119/diff_match_patch.js" integrity="sha256-qsdlWiFdhEjZXZhx6NikCsPZqvONgasszEPBzSZ7j6M=" crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.1/min/vs/loader.js" integrity="sha256-PwMxLuduSzsT9fefu+Nz/M8z0sYHV9Pp77VxsOxk1Pc=" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.1/min/vs/editor/editor.main.css" integrity="sha256-2HiLV16hBsfTgFEvAitDCQkXtBIyBROeLVntVZrKBJg=" crossorigin="anonymous" />
 
 <script>
-  var dmp = new diff_match_patch();
-  document.querySelectorAll('.code-pair').forEach(function (pairElement) {
-    var path = pairElement.dataset.path;
-    var submissionCode = pairElement.querySelector('.submission-code').innerHTML;
-    var modelCode = pairElement.querySelector('.model-code').innerHTML;
-    var diff = dmp.diff_main(modelCode, submissionCode);
-    var outputHtml = dmp.diff_prettyHtml(diff).replace(/&para;/g, '');
-    pairElement.innerHTML = outputHtml;
-  });
+	require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.1/min/vs/' }});
+
+	// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
+	// the default worker url location (used when creating WebWorkers). The problem here is that
+	// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
+	// a web worker through a same-domain script
+	window.MonacoEnvironment = {
+		getWorkerUrl: function(workerId, label) {
+			return '/monaco-editor-worker-loader-proxy.js';
+		}
+	};
+
+	require(["vs/editor/editor.main"], function () {
+    document.querySelectorAll('.code-pair').forEach(function (pairElement) {
+
+      var path = pairElement.dataset.path;
+      var submissionElement = pairElement.querySelector('.submission-code');
+      var submissionCode = submissionElement.innerHTML;
+      var modelElement = pairElement.querySelector('.model-code');
+      var modelCode = modelElement.innerHTML;
+
+      var submissionHeight = submissionElement.clientHeight;
+      var modelHeight = modelElement.clientHeight;
+
+      var height;
+      if (submissionHeight > modelHeight) {
+        height = submissionHeight;
+      } else {
+        height = modelHeight;
+      }
+      pairElement.style.height = height + "px";
+
+
+      pairElement.innerHTML = "";
+      var diffEditor = monaco.editor.createDiffEditor(pairElement, {
+        enableSplitViewResizing: true,
+        scrollBeyondLastLine: false,
+        readOnly: true,
+        renderSideBySide: false,
+        language: 'java', // TODO: detect from file extension
+      });
+      diffEditor.setModel({
+        original: monaco.editor.createModel(modelCode, "text/plain"),
+        modified: monaco.editor.createModel(submissionCode, "text/plain"),
+      });
+    });
+	});
 </script>
 
-<style>
-  ins, .code-pair span {
-    font-family: monospace;
-    white-space: pre;
-    text-decoration: none;
-  }
-</style>
+

public/monaco-editor-worker-loader-proxy.js

@@ -0,0 +1,4 @@
+self.MonacoEnvironment = {
+  baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.1/min/'
+};
+importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.10.1/min/vs/base/worker/workerMain.js');