autocomplete + error highlight

Author: Jean-Baptiste Doderlein

src/css/index.css

@@ -490,6 +490,9 @@ code, kbd, pre, samp {
     background: var(--editor-selection-bg-color);
 }
 
+.CodeMirror .syntax-error {
+    text-decoration: underline red wavy;
+}
 /* Track */
 
 ::-webkit-scrollbar-track {

src/index.html

@@ -35,6 +35,7 @@
     <script src="js/codemirror/show-hint.js"></script>
     <script src="js/codemirror/annotatescrollbar.js"></script>
     <script src="js/codemirror/matchesonscrollbar.js"></script>
+    <script src="js/codemirror/python-hint.js"></script>
     <script async src="js/resizer.js"></script>
     <script async defer src="js/buttons.js"></script>
 
@@ -277,12 +278,15 @@ <h4>Graphics main window</h4>
             <script id="toplevel-terminal" type="mpy" terminal worker name="toplevel" env="main">
                 import code
                 import asyncio
-                # Import pyscript event handler to create file in filesystem
+                import sys
                 from pyscript import window
                 def _execute_current():
                     current = int(window.current_editor())
                     value = window.editors[current].getValue()
-                    exec(value)
+                    try:
+                        exec(value)
+                    except Exception as e:
+                        sys.print_exception(e)
 
                 code.interact()
             </script>
@@ -399,7 +403,7 @@ <h4>Graphics main window</h4>
 
 
     const Parser = window.TreeSitter;
-    let parser,query;
+    let parser,query,error_quey;
     Parser.init().then(() => { 
         parser = new Parser;
         Parser.Language.load('js/tree-sitter/tree-sitter-python.wasm').then((language) => {
@@ -412,36 +416,11 @@ <h4>Graphics main window</h4>
             (try_statement)@bloc
             (import_statement)@expr
             (expression_statement)@expr`);
+            error_query = language.query(`
+            (ERROR)@error`);
         });
     });
 
-    // Sélectionner l'élément à surveiller
-    const elementToObserve = document.querySelector('#toplevel-terminal');
-
-    // Créer une fonction de callback qui sera exécutée lorsque des mutations sont observées
-    const callback = (mutationsList, observer) => {
-        for (const mutation of mutationsList) {
-            if (mutation.type === 'attributes' && mutation.attributeName === 'terminal') {
-                const newValue = elementToObserve.getAttribute('terminal');
-                if (newValue !== undefined) {
-                    console.log('L\'attribut terminal a changé et n\'est plus undefined:', newValue);
-                    // Exécutez votre code ici
-                }
-            }
-        }
-    };
-
-    // Créer une instance de MutationObserver et passer la fonction de callback
-    const observer = new MutationObserver(callback);
-
-    // Configurer les options d'observation
-    const config = { attributes: true };
-
-    // Commencer à observer l'élément
-    observer.observe(elementToObserve, config);
-    
-    //change_font_size("toplevel",0);
-
 </script>
 
 

src/js/codemirror/python-hint.js

@@ -0,0 +1,94 @@
+(function () {
+    function forEach(arr, f) {
+      for (var i = 0, e = arr.length; i < e; ++i) f(arr[i]);
+    }
+  
+    function arrayContains(arr, item) {
+      if (!Array.prototype.indexOf) {
+        var i = arr.length;
+        while (i--) {
+          if (arr[i] === item) {
+            return true;
+          }
+        }
+        return false;
+      }
+      return arr.indexOf(item) != -1;
+    }
+  
+    function scriptHint(editor, _keywords, getToken) {
+      // Find the token at the cursor
+      var cur = editor.getCursor(), token = getToken(editor, cur), tprop = token;
+      // If it's not a 'word-style' token, ignore the token.
+  
+      if (!/^[\w$_]*$/.test(token.string)) {
+          token = tprop = {start: cur.ch, end: cur.ch, string: "", state: token.state,
+                           className: token.string == ":" ? "python-type" : null};
+      }
+  
+      if (!context) var context = [];
+      context.push(tprop);
+  
+      var completionList = getCompletions(token, context);
+      completionList = completionList.sort();
+      //prevent autocomplete for last word, instead show dropdown with one word
+      if(completionList.length == 1) {
+        completionList.push(" ");
+      }
+  
+      return {list: completionList,
+              from: CodeMirror.Pos(cur.line, token.start),
+              to: CodeMirror.Pos(cur.line, token.end)};
+    }
+  
+    CodeMirror.pythonHint = function(editor) {
+      return scriptHint(editor, pythonKeywordsU, function (e, cur) {return e.getTokenAt(cur);});
+    };
+  
+    var pythonKeywords = "and del from not while as elif global or with assert else if pass yield"
+  + "break except import print class exec in raise continue finally is return def for lambda try";
+    var pythonKeywordsL = pythonKeywords.split(" ");
+    var pythonKeywordsU = pythonKeywords.toUpperCase().split(" ");
+  
+    var pythonBuiltins = "abs divmod input open staticmethod all enumerate int ord str "
+  + "any eval isinstance pow sum basestring execfile issubclass print super"
+  + "bin file iter property tuple bool filter len range type"
+  + "bytearray float list raw_input unichr callable format locals reduce unicode"
+  + "chr frozenset long reload vars classmethod getattr map repr xrange"
+  + "cmp globals max reversed zip compile hasattr memoryview round __import__"
+  + "complex hash min set apply delattr help next setattr buffer"
+  + "dict hex object slice coerce dir id oct sorted intern ";
+    var pythonBuiltinsL = pythonBuiltins.split(" ").join("() ").split(" ");
+    var pythonBuiltinsU = pythonBuiltins.toUpperCase().split(" ").join("() ").split(" ");
+  
+    function getCompletions(token, context) {
+      var found = [], start = token.string;
+      function maybeAdd(str) {
+        if (str.indexOf(start) == 0 && !arrayContains(found, str)) found.push(str);
+      }
+  
+      function gatherCompletions(_obj) {
+          forEach(pythonBuiltinsL, maybeAdd);
+          forEach(pythonBuiltinsU, maybeAdd);
+          forEach(pythonKeywordsL, maybeAdd);
+          forEach(pythonKeywordsU, maybeAdd);
+      }
+  
+      if (context) {
+        // If this is a property, see if it belongs to some object we can
+        // find in the current environment.
+        var obj = context.pop(), base;
+  
+        if (obj.type == "variable")
+            base = obj.string;
+        else if(obj.type == "variable-3")
+            base = ":" + obj.string;
+  
+        while (base != null && context.length)
+          base = base[context.pop().string];
+        if (base != null) gatherCompletions(base);
+      }
+      return found;
+    }
+  })();
+  

src/js/editor_change.js

@@ -86,6 +86,43 @@ let exec_all = function (instance) {
     autoscroll_output();
 };
 
+let check_error = function (instance) {
+    if (error_query == undefined) {
+        return;
+    }
+    instance.syntaxErrorMark.forEach(mark => mark.clear());
+    instance.syntaxErrorMark = [];
+    let errors = error_query.matches(parser.parse(instance.getValue()).rootNode);
+    // If a match is found, the error is displayed
+    if (errors.length > 0) {
+        // Clear previous error marks
+        
+        errors.forEach(capture => {
+            capture.captures.forEach(element => {
+                instance.syntaxErrorMark.push(instance.markText({
+                    line: element.node.startPosition.row, 
+                    ch: element.node.startPosition.column 
+                }, 
+                {   
+                    line: element.node.endPosition.row, 
+                    ch: element.node.endPosition.column 
+                }, {className: "syntax-error"}));
+            })
+        });
+        return true;
+    }
+    return false;
+}
+
+let check_error_bloc = function (text) {
+    if (error_query == undefined) {
+        return;
+    }
+    let errors = error_query.matches(parser.parse(text).rootNode);
+    return errors.length > 0;
+}
+    
+
 
 let calculate_interval = function (instance) {
     let intervalles = [];
@@ -370,15 +407,20 @@ function create_editor(id, name) {
                 }
             },
             'Shift-Tab': function (cm) { cm.execCommand('indentLess') },
-        }
+        },
+        hintOptions: {hint: CodeMirror.pythonHint},
     });
     editor.id = id
     editor.name = name
     editor.is_saved = true
+    editor.ext_autocomplete = localStorage.getItem("betterocaml-autocomplete") == "true"
+    editor.autocomplete_timeout = Date.now()
     editor.current_marker = editor.markText({ line: 0 }, { line: 0 }, { css: "color: #fe4" });
+    editor.syntaxErrorMark = [];
     editor.on("cursorActivity", cursor_activity);
     editor.on('drop', editor_drop);
     editor.on("keyup", function (cm, event) {
+        check_error(cm);
         if (cm.ext_autocomplete && // Only trigger if jetbrain style autocompletion is activated
             cm.autocomplete_timeout < Date.now() - 500 && // Only trigger if the user stopped typing
             !cm.state.completionActive && /*Enables keyboard navigation in autocomplete list*/