separate editor for each file

app/assets/javascripts/editor.js.erb

@@ -403,6 +403,8 @@ $(function() {
     $('.editor').each(function(index, element) {
       var editor = ace.edit(element);
 
+      console.log('ace', element)
+
       if (qa_api) {
         editor.getSession().on("change", function (deltaObject) {
           qa_api.executeCommand('syncEditor', [active_file, deltaObject]);
@@ -834,7 +836,8 @@ $(function() {
 
   var showFrame = function(frame) {
     active_frame = frame;
-    $('.frame').hide();
+    // should not be hidden to generate multiple ace editors in edit mode
+    //$('.frame').hide();
     frame.show();
   };
 

app/views/exercises/_file_form.html.slim

@@ -5,7 +5,7 @@
       a.file-heading data-toggle="collapse" data-parent="#files" href="#collapse#{file.id}"
         div.clearfix role="button"
           span = file.name
-    /.panel-collapse.collapse id="collapse#{file.id}" role="tabpanel"
+    .panel-collapse.collapse id="collapse#{file.id}" role="tabpanel"
       .panel-body
         .clearfix = link_to(t('shared.destroy'), '#', class:'btn btn-warning btn-sm discard-file pull-right')
         .form-group

app/views/exercises/_form.html.slim

@@ -32,7 +32,7 @@
   h2 = t('activerecord.attributes.exercise.files')
 
   /hidden editor -> to be deleted
-  .hidden = render('ace', exercise: @exercise, file: @files.first)
+  = render('ace', exercise: @exercise, file: @files.first)
   /after use $('.frame').show() in js console everything works fine, probably editors are hidden somewhere in editor.js because we get "display:none" on frames
 
   ul#files.list-unstyled.panel-group