JS Performance: Unload and destroy ACE editor on navigation

With this change, each editor instance is destroyed upon changing the page. This prevents memory leaks and thus optimizes the performance. The editor will be restored upon visiting the sites again.

Author: MrSerth

app/assets/javascripts/community_solution.js

@@ -25,6 +25,18 @@ $(document).on('turbo-migration:load', function() {
     }
 });
 
+$(document).one('turbo-migration:load', function() {
+    if ($.isController('community_solutions') && $('#community-solution-editor').isPresent()) {
+        $(document).one('turbo:visit', unloadEditorHandler);
+        $(window).one('beforeunload', unloadEditorHandler);
+    }
+});
+
+function unloadEditorHandler() {
+    CodeOceanEditor.autosaveIfChanged();
+    CodeOceanEditor.unloadEditor();
+}
+
 function submitCode(event) {
     const button = $(event.target) || $('#submit');
     this.newSentryTransaction(button, async () => {
@@ -35,10 +47,7 @@ function submitCode(event) {
         if (!submission) return;
         if (!submission.redirect) return;
 
-        this.autosaveIfChanged();
-        await this.stopCode(event);
-        this.editors = [];
-        Turbo.cache.clear();
+        unloadEditorHandler();
         Turbo.visit(submission.redirect);
     });
 }

app/assets/javascripts/editor/editor.js

@@ -1111,9 +1111,14 @@ var CodeOceanEditor = {
     unloadEverything: function () {
         App.synchronized_editor?.disconnect();
         this.autosaveIfChanged();
-        this.cacheEditorContent();
+        this.unloadEditor();
         this.teardownEventHandlers();
-        this.destroyEditors();
+    },
+
+    unloadEditor: function () {
+        $(document).off('theme:change:ace');
+        CodeOceanEditor.cacheEditorContent();
+        CodeOceanEditor.destroyEditors();
     },
 
     cacheEditorContent: function () {

app/assets/javascripts/exercises.js

@@ -34,6 +34,17 @@ $(document).on('turbo-migration:load', function () {
         session.setTabSize(element_selector.data('indent-size'));
         session.setUseSoftTabs(true);
         session.setUseWrapMode(true);
+
+        function unloadTeacherEditor() {
+            $(document).off('theme:change:ace');
+            const value = editor.getValue();
+            editor.destroy();
+            // "Restore" the editor's content to the original element for caching.
+            textarea.val = value;
+        }
+
+        $(document).one('turbo:visit', unloadTeacherEditor);
+        $(window).one('beforeunload', unloadTeacherEditor);
     }
 
     const handleAceThemeChangeEvent = function(_event) {
@@ -42,12 +53,11 @@ $(document).on('turbo-migration:load', function () {
         }.bind(this));
     };
 
-    $(document).on('theme:change:ace', handleAceThemeChangeEvent.bind(this));
-
     var initializeEditors = function () {
         // initialize ace editors for all code textareas in the dom except the last one. The last one is the dummy area for new files, which is cloned when needed.
         // this one must NOT! be initialized.
         $('.editor:not(:last)').each(initializeEditor)
+        $(document).on('theme:change:ace', handleAceThemeChangeEvent.bind(this));
     };
 
     var addFileForm = function (event) {

app/assets/javascripts/request_for_comments.js

@@ -394,4 +394,18 @@ $(document).on('turbo-migration:load', function () {
             showPermanent: response.status === 422,
         });
     }
+
+    function unloadRfCEditors() {
+        $(document).off('theme:change:ace');
+        $('.editor').each(function (_, editor) {
+            const aceEditor = ace.edit(editor);
+            const value = aceEditor.getValue();
+            aceEditor.destroy();
+            // "Restore" the editor's content to the original element for caching.
+            editor.textContent = value;
+        });
+    }
+
+    $(document).one('turbo:visit', unloadRfCEditors);
+    $(window).one('beforeunload', unloadRfCEditors);
 });

app/assets/javascripts/submission_statistics.js

@@ -110,7 +110,7 @@ $(document).on('turbo-migration:load', function(event) {
 
     slider.on('change', onSliderChange);
 
-    stopReplay = function() {
+    const stopReplay = function() {
       clearInterval(playInterval);
       playInterval = undefined;
       playButton.find('span.fa-solid').removeClass('fa-pause').addClass('fa-play')
@@ -145,6 +145,17 @@ $(document).on('turbo-migration:load', function(event) {
     // Start with newest submission
     slider.val(submissions.length - 1);
     onSliderChange();
+
+    const unloadSubmissionStatistics = function() {
+      if (playInterval) {
+        stopReplay();
+      }
+      $(document).off('theme:change:ace');
+      editor.destroy();
+    }
+
+    $(document).on('turbo:visit', unloadSubmissionStatistics);
+    $(window).on('beforeunload', unloadSubmissionStatistics);
   }
 
 });