Use webpack to deliver newest ACE editor

With this commit, we change the delivery method for the ACE editor from manually copied files to using yarn and webpack. As a side-change, we also modify how the mode is selected through JavaScript instead of Ruby.

Through webpack, the `modePath`, `themePath`, and `workerPath` are automatically determined and working as expected.

Closes #250

app/assets/javascripts/application.js

@@ -19,9 +19,5 @@
 //= require flash
 //= require color_mode_picker
 //
-// vendor/assets
-//= require ace/ace
-//= require ace/ext-language_tools
-//
 // app/assets
 //= require_tree .

app/assets/javascripts/community_solution.js

@@ -4,7 +4,6 @@ $(document).on('turbolinks:load', function() {
         CodeOceanEditor.sendEvents = false;
         CodeOceanEditor.editors = [];
         CodeOceanEditor.initializeDescriptionToggle();
-        CodeOceanEditor.configureEditors();
         CodeOceanEditor.initializeEditors();
         CodeOceanEditor.initializeEditors(true);
         CodeOceanEditor.initializeFileTree();

app/assets/javascripts/editor/editor.js.erb

@@ -1,7 +1,4 @@
 var CodeOceanEditor = {
-    //ACE-Editor-Path
-    // ruby part adds the relative_url_root, if it is set.
-    ACE_FILES_PATH: '<%= "#{Rails.application.config.relative_url_root.chomp('/')}/assets/ace/" %>',
     THEME: window.getCurrentTheme() === 'dark' ? 'ace/theme/tomorrow_night' : 'ace/theme/tomorrow',
 
     //Color-Encoding for Percentages in Progress Bars (For submissions)
@@ -40,13 +37,6 @@ var CodeOceanEditor = {
     eventURL: "<%= @config['codeocean_events'] ? events_path : '' %>",
     fileTypeURL: "<%= file_types_path %>",
 
-
-    configureEditors: function () {
-        _.each(['modePath', 'themePath', 'workerPath'], function (attribute) {
-            ace.config.set(attribute, this.ACE_FILES_PATH);
-        }.bind(this));
-    },
-
     confirmDestroy: function (event) {
         event.preventDefault();
         if (confirm(I18n.t('shared.confirm_destroy'))) {
@@ -1087,7 +1077,6 @@ var CodeOceanEditor = {
     initializeEverything: function () {
         CodeOceanEditor.editors = [];
         this.initializeRegexes();
-        this.configureEditors();
         this.initializeEditors();
         this.initializeEventHandlers();
         this.initializeFileTree();

app/assets/javascripts/exercises.js

@@ -5,12 +5,6 @@ $(document).on('turbolinks:load', function () {
     var file_types;
     const editors = [];
 
-    var configureEditors = function () {
-        _.each(['modePath', 'themePath', 'workerPath'], function (attribute) {
-            ace.config.set(attribute, CodeOceanEditor.ACE_FILES_PATH);
-        });
-    };
-
     var initializeEditor = function (index, element) {
         var editor = ace.edit(element);
 
@@ -487,7 +481,6 @@ $(document).on('turbolinks:load', function () {
     }
 
     if ($('#editor-edit').isPresent()) {
-        configureEditors();
         initializeEditors();
         $('.frame').show();
     }

app/assets/javascripts/file_types.js

@@ -0,0 +1,21 @@
+$(document).on('turbolinks:load', function() {
+  if ($.isController('file_types')) {
+    const select_tag = $('#file_type_editor_mode');
+
+    // The select_tag is only present when the form for new / edited file types is shown.
+    if (select_tag) {
+      // Populate the select_tag with the available modes
+      const ace_modelist = ace.require('ace/ext/modelist');
+      ace_modelist.modes.map((mode) => {
+        const option = new Option(mode.caption, mode.mode);
+        select_tag.append(option);
+      })
+
+      // Pre-select the previous element if set
+      select_tag.val(select_tag.data('selected'));
+
+      // Notify select2 about the change
+      select_tag.trigger('change');
+    }
+  }
+});

app/assets/javascripts/markdown_ace_editor.js

@@ -1,8 +1,5 @@
 (function() {
     window.MarkdownEditor = function(selector) {
-        _.each(['modePath', 'themePath', 'workerPath'], function (attribute) {
-            ace.config.set(attribute, CodeOceanEditor.ACE_FILES_PATH);
-        }.bind(this));
         var editor = ace.edit($(selector).next()[0]);
         editor.on('change', function() {
             $(selector).val(editor.getValue());

app/assets/javascripts/request_for_comments.js

@@ -57,11 +57,6 @@ $(document).on('turbolinks:load', function () {
         $(this).parent().toggleClass('collapsed');
     });
 
-// set file paths for ace
-    _.each(['modePath', 'themePath', 'workerPath'], function (attribute) {
-        ace.config.set(attribute, CodeOceanEditor.ACE_FILES_PATH);
-    });
-
     const commentitor = $('.editor');
 
     commentitor.each(function (index, editor) {

app/assets/javascripts/submission_statistics.js

@@ -62,10 +62,6 @@ $(document).on('turbolinks:load', function(event) {
 
   if ($.isController('exercises') && $('#timeline').isPresent() && event.originalEvent.data.url.includes("/statistics")) {
 
-    _.each(['modePath', 'themePath', 'workerPath'], function(attribute) {
-      ace.config.set(attribute, CodeOceanEditor.ACE_FILES_PATH);
-    });
-
     var slider = $('#submissions-slider>input');
     var submissions = $('#data').data('submissions');
     var files = $('#data').data('files');