Replace roll-your-own basic WebIDE with Ace Editor

README.md

@@ -11,6 +11,7 @@ downloaded from the following locations:
 * [Popper.js](https://github.com/FezVrasta/popper.js#installation)
 * [Highlight.js](https://highlightjs.org/download/)
 * [Showdown](https://github.com/showdownjs/showdown/releases)
+* [ace](https://github.com/ajaxorg/ace-builds/releases)
 
 ## Building and running with Docker
 

src/app/static/ws_listener.js

@@ -1,6 +1,11 @@
 let ws = new WebSocket('ws://' + document.location.host + '/ws');
 
 let converter = new showdown.Converter();
+// TODO: don't hardcode anchor id
+let editor = ace.edit('anchor_webide');
+editor.setTheme('ace/theme/monokai');
+editor.getSession().setMode('ace/mode/python');
+editor.$blockScrolling = Infinity;
 
 $('#container').on('click', '.anchor', ( function (event) {
     let anchorName = $(this).attr('id').replace('_event', '');
@@ -42,8 +47,7 @@ ws.onmessage = function (messageEvent) {
     console.log(message);
     let $anchor = $('#' + message['anchor']);
     if (message['anchor'] === 'anchor_webide') {
-        let code = hljs.highlightAuto(message['data']);
+        editor.setValue(message['data'], -1);
-        $anchor.html(code.value);
     }
     else {
         let formatted_message = converter.makeHtml(message['data']);

src/app/templates/index.html

@@ -42,6 +42,7 @@
     <script src="{{ static_url('vendor/js/bootstrap.min.js') }}" defer></script>
     <script src="{{ static_url('vendor/js/highlight.min.js') }} defer"></script>
     <script src="{{ static_url('vendor/js/showdown.min.js') }} defer"></script>
+    <script src="{{ static_url('vendor/js/ace/ace.js') }} defer"></script>
     <script src="{{ static_url('ws_listener.js') }}" defer></script>
 </body>
 </html>

src/app/templates/module-webide.html

@@ -1,9 +1,6 @@
 <h1>Source code</h1>
-<pre>
+<div  id="{{ anchor_id }}" class="mt-3 mb-3">
-    <code id="{{ anchor_id }}">
+</div>
-        &nbsp;
-    </code>
-</pre>
 <button type="button" class="btn btn-outline-primary anchor" id="{{ anchor_id }}_event">
     Next
 </button>