Trim trailing spaces in ace editor upon run or save #898

static/js/app.js

@@ -1,3 +1,5 @@
+const whitespace = require("ace/ext/whitespace");
+
 (function() {
   // A bunch of code expects a global "State" object. Set it here if not
   // set yet.
@@ -158,7 +160,7 @@ function runit(level, lang, cb) {
   try {
     level = level.toString();
     var editor = ace.edit("editor");
-    var code = editor.getValue();
+    var code = get_trimmed_code();
 
     clearErrors(editor);
 
@@ -344,7 +346,7 @@ window.share_program = function share_program (level, lang, id, Public, reload)
   // Saving the program makes things way simpler for many reasons: it covers the cases where:
   // 1) there's no saved program; 2) there's no saved program for that user; 3) the program has unsaved changes.
   var name = $ ('#program_name').val ();
-  var code = ace.edit('editor').getValue();
+  var code = get_trimmed_code();
   return saveit(level, lang, name, code, function (err, resp) {
     if (err && err.Warning) return error.showWarning(ErrorMessages.Transpile_warning, err.Warning);
     if (err && err.Error) return error.show(ErrorMessages.Transpile_error, err.Error);
@@ -740,3 +742,9 @@ window.prompt_unsaved = function prompt_unsaved(cb) {
   window.State.no_unload_prompt = true;
   window.modal.confirm (window.auth.texts.unsaved_changes, cb);
 }
+
+window.get_trimmed_code = function() {
+  whitespace.trimTrailingSpace(window.editor.session, true);
+  return window.editor.getValue()
+}
+

templates/auth.html

@@ -7,6 +7,7 @@
 {% endblock %}
 {% block scripts %}
   <script src="{{static('/vendor/ace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
+  <script src="{{static('/vendor/ext-whitespace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
   <script src="{{static('/vendor/ext-rtl.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
   <script src="/client_messages.js?lang={{ lang }}" type="text/javascript" crossorigin="anonymous"></script>
   <script>window.State = {lang: "{{ lang }}", level: "{{ level }}"}</script>

templates/code-page.html

@@ -42,6 +42,7 @@ <h2>{{ commands_title }}</h2>
 
 {% block scripts %}
   <script src="{{static('/vendor/ace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
+  <script src="{{static('/vendor/ext-whitespace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
   <script src="{{static('/vendor/ext-rtl.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
   <script src="/client_messages.js?lang={{ lang }}" type="text/javascript" crossorigin="anonymous"></script>
   <script>

templates/level-page.html

@@ -9,7 +9,7 @@
   </div>
   <div class="w-full flex items-center justify-end ml-auto mr-4">
     <input id="program_name" type="text" class="border border-green-400 rounded p-2 px-3 w-1/2 h-4/5" value="{{ (loaded_program or {}).name or (level_title + ' ' + level_nr)}}">
-    <input type="submit" class="green-btn mx-2" value="{{ save_code_button }}" onclick="saveit({{ level }}, '{{ lang }}', $ ('#program_name').val (), ace.edit('editor').getValue());">
+    <input type="submit" class="green-btn mx-2" value="{{ save_code_button }}" onclick="saveit({{ level }}, '{{ lang }}', $ ('#program_name').val (), get_trimmed_code());">
     <input type="submit" class="green-btn mx-2" value="{{ share_code_button }}" onclick="share_program({{ level }}, '{{ lang }}', true, true);">
   </div>
 </div>

templates/view-program-page.html

@@ -13,6 +13,7 @@ <h1>{{loaded_program.name}}</h1>
   <script src="/client_messages.js?lang={{ lang }}" type="text/javascript" crossorigin="anonymous"></script>
   <script src="{{static('/vendor/jquery.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
   <script src="{{static('/vendor/ace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
+  <script src="{{static('/vendor/ext-whitespace.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
   <script src="{{static('/vendor/ext-rtl.js')}}" type="text/javascript" charset="utf-8" crossorigin="anonymous"></script>
   <script src="{{static('/vendor/skulpt.min.js')}}" type="text/javascript" crossorigin="anonymous"></script>
   <script src="{{static('/vendor/skulpt-stdlib.js')}}" type="text/javascript" crossorigin="anonymous"></script>