Show error locations inside the editor itself (hedyorg#987)

* Show error locations inside the editor itself * Clear errors every time the code is changed * Uses empty message for the error annotation
aelhamah · Oct 19, 2021 · 7e7dbe2 · 7e7dbe2
1 parent 2a01a05
commit 7e7dbe2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 2 deletions.
diff --git a/app.py b/app.py
@@ -347,11 +347,13 @@ def parse_error_to_response(ex, translations):
         # If we find an invalid keyword, place it in the same location in the error message but without translating
         ex.character_found = ex.keyword_found
     error_message = translate_error(ex.error_code, translations, vars(ex))
-    return {"Error": error_message}
+    location = ex.location if hasattr(ex, "location") else None
+    return {"Error": error_message, "Location": location}
 
 def hedy_error_to_response(ex, translations):
     error_message = translate_error(ex.error_code, translations, ex.arguments)
-    return {"Error": error_message}
+    location = ex.location if hasattr(ex, "location") else None
+    return {"Error": error_message, "Location": location}
 
 def translate_error(code, translations, arguments):
     error_template = translations[code]

diff --git a/static/css/additional.css b/static/css/additional.css
@@ -15,6 +15,11 @@
   display: none;
 }
 
+.editor-error {
+  position: absolute;
+  background: red !important;
+}
+
 .bg-white.p-4.mb-8.shadow-md.turn-pre-into-ace {
   max-height: 20em;
   overflow: auto;

diff --git a/static/js/app.js b/static/js/app.js
@@ -34,6 +34,8 @@
     // We expose the editor globally so it's available to other functions for resizing
     var editor = window.editor = turnIntoAceEditor($editor.get(0), $editor.data('readonly'));
 
+    window.Range = ace.require('ace/range').Range // get reference to ace/range
+
     // Load existing code from session, if it exists
     const storage = window.sessionStorage;
     if (storage) {
@@ -56,6 +58,8 @@
         window.State.disable_run = false;
         $ ('#runit').css('background-color', '');
         window.State.unsaved_changes = true;
+
+        clearErrors(editor);
       });
     }
 
@@ -138,6 +142,13 @@ function reloadOnExpiredSession () {
    return true;
 }
 
+function clearErrors(editor) {
+  editor.session.clearAnnotations();
+  for (var marker in editor.session.getMarkers()) {
+    editor.session.removeMarker(marker);
+  }
+}
+
 function runit(level, lang, cb) {
   if (window.State.disable_run) return window.modal.alert (window.auth.texts.answer_question);
 
@@ -149,6 +160,8 @@ function runit(level, lang, cb) {
     var editor = ace.edit("editor");
     var code = editor.getValue();
 
+    clearErrors(editor);
+
     console.log('Original program:\n', code);
     $.ajax({
       type: 'POST',
@@ -169,6 +182,26 @@ function runit(level, lang, cb) {
       }
       if (response.Error) {
         error.show(ErrorMessages.Transpile_error, response.Error);
+        if (response.Location && response.Location[0] != "?") {
+          editor.session.setAnnotations([
+            {
+              row: response.Location[0] - 1,
+              column: response.Location[1] - 1,
+              text: "",
+              type: "error",
+            }
+          ]);
+          // FIXME change this to apply only to the error span once errors have an end location.
+          editor.session.addMarker(
+            new Range(
+                response.Location[0] - 1,
+                response.Location[1] - 1,
+                response.Location[0] - 1,
+                response.Location[1],
+            ),
+            "editor-error", "fullLine"
+          );
+        }
         return;
       }
       runPythonProgram(response.Code, response.has_turtle, cb).catch(function(err) {