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');

app/controllers/file_types_controller.rb

@@ -3,7 +3,6 @@
 class FileTypesController < ApplicationController
   include CommonBehavior
 
-  before_action :set_editor_modes, only: %i[create edit new update]
   before_action :set_file_type, only: MEMBER_ACTIONS
 
   def authorize!
@@ -38,14 +37,6 @@ class FileTypesController < ApplicationController
     create_and_respond(object: @file_type)
   end
 
-  def set_editor_modes
-    @editor_modes = Dir.glob('vendor/assets/javascripts/ace/mode-*.js').map do |filename|
-      name = filename.gsub(%r{\w+/|mode-|.js$}, '')
-      [name, "ace/mode/#{name}"]
-    end
-  end
-  private :set_editor_modes
-
   def set_file_type
     @file_type = FileType.find(params[:id])
     authorize!

app/javascript/application.js

@@ -78,3 +78,10 @@ window.I18n = i18n;
 // Routes
 import * as Routes from 'routes.js.erb';
 window.Routes = Routes;
+
+// ACE editor
+import ace from 'ace-builds';
+import "ace-builds/esm-resolver";
+import "ace-builds/src-noconflict/ext-language_tools";
+import "ace-builds/src-noconflict/ext-modelist";
+window.ace = ace; // Publish ace in global namespace

app/views/file_types/_form.html.slim

@@ -4,8 +4,9 @@
     = f.label(:name, class: 'form-label')
     = f.text_field(:name, class: 'form-control', required: true)
   .mb-3
+    / The list of editor modes is loaded through JavaScript and dynamically populated based on supported modes by the ACE editor.
     = f.label(:editor_mode, class: 'form-label')
-    = f.select(:editor_mode, @editor_modes, {}, class: 'form-control')
+    = f.select(:editor_mode, [], {}, class: 'form-control', data: {selected: @file_type.editor_mode})
   .mb-3
     = f.label(:file_extension, class: 'form-label')
     = f.text_field(:file_extension, class: 'form-control', placeholder: '.rb')