monaco: various changes

* format code
* implement python annotations

bt5/erp5_monaco_editor/SkinTemplateItem/portal_skins/erp5_monaco_editor/monaco_editor_support.zpt

 <div id="monaco-container" style="width:100%;height:800px;border:1px solid grey;"></div>
 
-<script tal:content='python: "window.monacoEditorWebPackResourceBaseUrl = " + modules["json"].dumps(options["portal_url"]) + " + \"/monaco-editor/\""'></script>
 <textarea tal:attributes="id options/field_id;
-                          name options/field_id" style="display:none" tal:content="options/content" tal:condition="options/field_id | nothing">
+                          name options/field_id"
+          style="display:none"
+          tal:content="options/content"
+          tal:condition="options/field_id | nothing">
 </textarea>
+
+<script tal:content='python: "var portal_url=" + modules["json"].dumps(options.get("portal_url"))'></script>
 <script tal:content='python: "var field_id=" + modules["json"].dumps(options.get("field_id"))'></script>
 <script tal:content='python: "var mode=" + modules["json"].dumps(options["mode"])'></script>
 <script tal:content='python: "var textarea_selector=" + modules["json"].dumps(options.get("textarea_selector"))'></script>
+<script tal:content='python: "var bound_names=" + modules["json"].dumps(options.get("bound_names"))'></script>
+
+<script tal:content='python: "window.monacoEditorWebPackResourceBaseUrl = " + modules["json"].dumps(options["portal_url"]) + " + \"/monaco-editor/\""'></script>
+
 <script>
-	/* we need to defer import for the monacoEditorWebPackResourceBaseUrl trick to work as expected in ZMI */
-var $script = document.createElement('script');
-$script.src = window.monacoEditorWebPackResourceBaseUrl + '/monaco-editor/app.bundle.js';
+/* we need to defer import for the monacoEditorWebPackResourceBaseUrl trick to work as expected in ZMI */
+var $script = document.createElement("script");
+$script.src =
+  window.monacoEditorWebPackResourceBaseUrl + "/monaco-editor/app.bundle.js";
 document.head.appendChild($script);
 
 $script.onload = function() {
-
-  var $textarea = document.querySelector(textarea_selector) || document.getElementById(field_id);
+  var $textarea =
+    document.querySelector(textarea_selector) ||
+    document.getElementById(field_id);
   if (textarea_selector) {
     /* ZMI mode */
-    var $monacoContainer = document.getElementById('monaco-container');
+    /* create a div instead of the default textarea */
+    var $monacoContainer = document.getElementById("monaco-container");
     $monacoContainer.parentNode.removeChild($monacoContainer);
     $textarea.parentNode.appendChild($monacoContainer);
-    $monacoContainer.style.width = ($textarea.parentNode.offsetWidth - 10) + "px";
+    $monacoContainer.style.width = $textarea.parentNode.offsetWidth - 10 + "px";
     $monacoContainer.style.height = $textarea.parentNode.offsetHeight + "px";
     $textarea.style.display = "none";
 
@@ -37,48 +48,99 @@ $script.onload = function() {
     $textarea.parentNode.title = "";
 
     function saveDocument() {
-      clickSaveButton('Base_edit');
-      document.getElementById("main_form").submit()
+      clickSaveButton("Base_edit");
+      document.getElementById("main_form").submit();
     }
   }
-  var editor = monaco.editor.create(document.getElementById('monaco-container'), {
-    value: $textarea.value,
-    language: mode,
-	  multiCursorModifier: 'ctrlCmd', /* because Alt+Click is LeftClick on ChromeOS */
+  var editor = monaco.editor.create(
+    document.getElementById("monaco-container"),
+    {
+      value: $textarea.value,
+      language: mode,
+      multiCursorModifier:
+        "ctrlCmd" /* because Alt+Click is LeftClick on ChromeOS */,
 
-    /* XXX audoindent experiments */
-    autoIndent: true,
-    formatOnPaste: true,
-    formatOnType: true,
-  });
+      formatOnType: true
+    }
+  );
   if (mode == "python") {
     editor.model.updateOptions({ tabSize: 2 });
-	  monaco.languages.setLanguageConfiguration(
-      "python",
-      { indentationRules: { increaseIndentPattern: /^.*:$/, }});
+    monaco.languages.setLanguageConfiguration("python", {
+      indentationRules: { increaseIndentPattern: /^.*:$/ }
+    });
+    // TODO unindent rule
   }
 
-  editor.model.onDidChangeContent((event) => {
+  var timeout = null;
+  function checkPythonSourceCode() {
+    const data = new FormData();
+    const checker_parameters = {
+      code: editor.getValue()
+    };
+    // ZMI python scripts.
+    if (bound_names) {
+      checker_parameters["bound_names"] = JSON.parse(bound_names);
+      checker_parameters["params"] = document.querySelector(
+        'input[name="params"]'
+      ).value;
+    }
+
+    data.append("data", JSON.stringify(checker_parameters));
+    fetch(portal_url + "/ERP5Site_checkPythonSourceCodeAsJSON", {
+      method: "POST",
+      body: data
+    })
+      .then(response => response.json())
+      .then(data => {
+        monaco.editor.setModelMarkers(
+          editor.model,
+          "pylint",
+          data["annotations"].map(annotation => {
+            return {
+              startLineNumber: annotation.row + 1,
+              endLineNumber: annotation.row + 1,
+              startColumn: annotation.col,
+              endColumn: Infinity,
+              message: annotation.text,
+              severity:
+                annotation.type === "error"
+                  ? monaco.Severity.Error
+                  : monaco.Severity.Warning
+            };
+          })
+        );
+        timeout = null;
+      });
+  }
+
+  editor.model.onDidChangeContent(event => {
     $textarea.value = editor.getValue();
     changed = true; /* global variable used in erp5.js for onbeforeunload event */
+    if (mode == "python") {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+      timeout = setTimeout(checkPythonSourceCode, 300);
+    }
   });
 
+  if (mode === "python") {
+    // Check a first time when loading document.
+    checkPythonSourceCode();
+  }
+
   editor.addAction({
-    id: 'save',
-    label: 'Save',
-    keybindings: [
-      monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S,
-    ],
+    id: "save",
+    label: "Save",
+    keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S],
     precondition: null,
     keybindingContext: null,
-    contextMenuGroupId: 'navigation',
+    contextMenuGroupId: "navigation",
     contextMenuOrder: 1.5,
     run: function(ed) {
       return saveDocument();
     }
   });
-
-  window.monacoEditor = editor; // XXX debug
-}
+};
 
 </script>
\ No newline at end of file