Replace ace with monaco editor (Closes #571)

config/config.base.js

@@ -13,7 +13,7 @@ config.blob.fsDir = process.env.DEEPFORGE_BLOB_DIR || config.blob.fsDir;
 
 config.requirejsPaths.deepforge = './src/common';
 config.requirejsPaths['aws-sdk-min'] = './node_modules/aws-sdk/dist/aws-sdk.min';
-config.requirejsPaths.ace = './src/visualizers/widgets/TextEditor/lib/ace';
+config.requirejsPaths.vs = './node_modules/monaco-editor/min/vs';
 config.seedProjects.defaultProject = 'project';
 
 config.plugin.allowBrowserExecution = true;

package.json

@@ -41,6 +41,7 @@
     "lodash.merge": "^4.5.1",
     "lodash.template": "^4.4.0",
     "minimatch": "^3.0.4",
+    "monaco-editor": "^0.20.0",
     "mongodb": "^2.2.10",
     "node-fetch": "^2.6.0",
     "pacote": "^11.1.10",

src/visualizers/widgets/OperationCodeEditor/OperationCodeEditorWidget.js

@@ -1,4 +1,4 @@
-/*globals define */
+/*globals define, monaco*/
 /*jshint browser: true*/
 
 define([
@@ -18,13 +18,12 @@ define([
         TextEditorWidget.call(this, logger, container);
         this.lineOffset = 0;
         // Add the shift-enter command
-        this.editor.commands.addCommand({
-            name: 'executeOrStopJob',
-            bindKey: {
-                mac: 'Shift-Enter',
-                win: 'Shift-Enter'
-            },
-            exec: () => this.executeOrStopJob()
+        this.editor.addCommand(
+            monaco.KeyMod.Shift | monaco.KeyCode.Enter,
+            this.executeOrStopJob
+        );
+        this.editor.updateOptions({
+            lineNumbers: this.updateOffset.bind(this)
         });
     };
 
@@ -50,40 +49,16 @@ define([
     OperationCodeEditorWidget.prototype.setLineOffset = function (offset) {
         if (this.lineOffset !== offset) {
             this.lineOffset = offset;
-            this.updateOffset();
         }
     };
 
-    OperationCodeEditorWidget.prototype.updateOffset = function () {
+    OperationCodeEditorWidget.prototype.updateOffset = function (originalLineNumber) {
         var lines,
             actualOffset;
 
         lines = this.currentHeader.match(/\n/g);
-        actualOffset = this.lineOffset - (lines ? lines.length : 0);
-        this.editor.setOption('firstLineNumber', actualOffset);
-    };
-
-    OperationCodeEditorWidget.prototype.getCompleter = function () {
-        var completer = TextEditorWidget.prototype.getCompleter.call(this),
-            getBasicCompletions = completer.getCompletionsFor,
-            self = this;
-
-        // TODO: update completions for python stuff
-        completer.getCompletionsFor = function(obj) {
-            if (obj === 'attributes') {
-                return self.getOperationAttributes().map(attr => {
-                    return {
-                        name: attr,
-                        value: attr,
-                        score: 4,
-                        meta: 'operation'
-                    };
-                });
-            } else {
-                return getBasicCompletions.apply(this, arguments);
-            }
-        };
-        return completer;
+        actualOffset = this.lineOffset - (lines ? lines.length + 1 : 0);
+        return (originalLineNumber + actualOffset);
     };
 
     return OperationCodeEditorWidget;

src/visualizers/widgets/TextEditor/MonacoLanguages.json

@@ -0,0 +1,45 @@
+{
+  "python": {
+    "id": "python",
+    "extensions": [
+      ".py",
+      ".pyc"
+    ],
+    "aliases": [
+      "py",
+      "PY"
+    ],
+    "mimetypes": [
+      "application/text"
+    ],
+    "comment":  "#"
+  },
+  "javascript": {
+    "id": "javascript",
+    "extensions": [
+      "js",
+      "jsx"
+    ],
+    "mimetypes": [
+      "application/text"
+    ],
+    "comment": "//"
+  },
+  "yaml": {
+    "id": "yaml",
+    "extensions": [
+      "yaml",
+      "yml"
+    ],
+    "aliases": [
+      "yml",
+      "yaml",
+      "YML",
+      "YAML"
+    ],
+    "mimetypes": [
+      "application/text"
+    ],
+    "comment": "#"
+  }
+}