This fixes LMS-2387 by removing a resize call that prevented scrolling.

It also enables syntax highlighting for matlab input fields, which
wasn't previously enabled.

common/lib/capa/capa/inputtypes.py

@@ -832,6 +832,8 @@ class MatlabInput(CodeInput):
             'queue_len': str(self.queue_len),
             'queue_msg': self.queue_msg,
             'button_enabled': self.button_enabled(),
+            'matlab_editor_js': '{static_url}js/vendor/CodeMirror/addons/octave.js'.format(
+                static_url=self.capa_system.STATIC_URL),
         }
         return extra_context
 

common/lib/capa/capa/templates/codeinput.html

@@ -1,16 +1,21 @@
 <%! from django.utils.translation import ugettext as _ %>
-<section id="textbox_${id}" class="textbox">
+<section id="textbox_${id}" class="capa_inputtype textbox cminput">
   <textarea rows="${rows}" cols="${cols}" name="input_${id}" 
             aria-label="${_("{programming_language} editor").format(programming_language=mode)}" 
             aria-describedby="answer_${id}" 
             id="input_${id}" 
             tabindex="0"
-       % if hidden:
+            data-mode="${mode}"
+            data-tabsize="${tabsize}"
+            % if linenumbers:
+            data-linenums="true"
+            % endif
+            % if hidden:
       	    style="display:none;"
-       % endif
+            % endif
   >${value|h}</textarea>
 
-  <div class="grader-status" tabindex="1">
+  <div class="grader-status" tabindex="-1">
     % if status == 'unsubmitted':
       <span class="unanswered" style="display:inline-block;" id="status_${id}" aria-describedby="input_${id}"><span class="sr">Status: </span>Unanswered</span>
     % elif status == 'correct':
@@ -34,31 +39,4 @@
   <div class="external-grader-message">
     ${msg|n}
   </div>
-
-  <script>
-    // Note: We need to make the area follow the CodeMirror for this to work.
-    $(function(){
-      var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), {
-        % if linenumbers == 'true':
-        lineNumbers: true,
-        % endif
-        mode: "${mode}",
-        matchBrackets: true,
-        lineWrapping: true,
-        indentUnit: "${tabsize}",
-        tabSize: "${tabsize}",
-        indentWithTabs: false,
-        extraKeys: {
-            "Esc": function(cm) {
-                $('.grader-status').focus();
-                return false;
-            },
-            "Tab": function(cm) {
-                cm.replaceSelection("${' '*tabsize}", "end");
-            }
-        },
-        smartIndent: false
-      });
-    });
-  </script>
 </section>

common/lib/capa/capa/templates/matlabinput.html

@@ -1,11 +1,22 @@
-<section id="textbox_${id}" class="textbox">
-  <textarea rows="${rows}" cols="${cols}" name="input_${id}" aria-describedby="answer_${id}" id="input_${id}"
-       % if hidden:
-      	    style="display:none;"
-       % endif
+<section id="textbox_${id}" class="capa_inputtype cminput">
+<div class="script_placeholder" data-src="${matlab_editor_js}"/>
+<textarea 
+  rows="${rows}" 
+  cols="${cols}" 
+  name="input_${id}" 
+  aria-describedby="answer_${id}" 
+  id="input_${id}"
+  data-tabsize="${tabsize}"
+  data-mode="octave"
+  % if linenumbers:
+  data-linenums="true"
+  % endif
+ % if hidden:
+  style="display:none;"
+ % endif
   >${value|h}</textarea>
 
-  <div class="grader-status">
+  <div class="grader-status" tabindex="-1">
     % if status == 'unsubmitted':
       <span class="unanswered" style="display:inline-block;" id="status_${id}"><span class="sr">Status: </span>Unanswered</span>
     % elif status == 'correct':
@@ -40,28 +51,7 @@
   %endif
 
   <script>
-    // Note: We need to make the area follow the CodeMirror for this to work.
     $(function(){
-      var cm = CodeMirror.fromTextArea(document.getElementById("input_${id}"), {
-        % if linenumbers == 'true':
-        lineNumbers: true,
-        % endif
-        mode: "matlab",
-        matchBrackets: true,
-        lineWrapping: true,
-        indentUnit: "${tabsize}",
-        tabSize: "${tabsize}",
-        indentWithTabs: false,
-        extraKeys: {
-            "Tab": function(cm) {
-                cm.replaceSelection("${' '*tabsize}", "end");
-            }
-        },
-        smartIndent: false
-      });
-
-      $("#textbox_${id}").find('.CodeMirror-scroll').height(${int(13.5*eval(rows))});
-
       var gentle_alert = function (parent_elt, msg) {
           if($(parent_elt).find('.capa_alert').length) {
               $(parent_elt).find('.capa_alert').remove();
@@ -80,8 +70,13 @@
           input_id = "${id}";
 
           // save the codemirror text to the textarea
-          cm.save();
+          // since there could be multiple codemirror instances on the page,
+          // save all of them.
+          $('.CodeMirror').each(function(i, el){
+            el.CodeMirror.save();
+          });
           var input = $("#input_${id}");
+
           // pull out the coded text
           submission = input.val();
 

common/lib/capa/capa/tests/test_inputtypes.py

@@ -435,6 +435,7 @@ class MatlabTest(unittest.TestCase):
             'tabsize': int(self.tabsize),
             'button_enabled': True,
             'queue_len': '3',
+            'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/addons/octave.js',
         }
 
         self.assertEqual(context, expected)
@@ -465,6 +466,7 @@ class MatlabTest(unittest.TestCase):
             'tabsize': int(self.tabsize),
             'button_enabled': True,
             'queue_len': '3',
+            'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/addons/octave.js',
         }
 
         self.assertEqual(context, expected)
@@ -495,6 +497,7 @@ class MatlabTest(unittest.TestCase):
                 'tabsize': int(self.tabsize),
                 'button_enabled': False,
                 'queue_len': '0',
+                'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/addons/octave.js',
             }
 
             self.assertEqual(context, expected)
@@ -524,6 +527,7 @@ class MatlabTest(unittest.TestCase):
             'tabsize': int(self.tabsize),
             'button_enabled': True,
             'queue_len': '1',
+            'matlab_editor_js': '/dummy-static/js/vendor/CodeMirror/addons/octave.js',
         }
 
         self.assertEqual(context, expected)
@@ -589,11 +593,7 @@ class MatlabTest(unittest.TestCase):
         output = self.the_input.get_html()
         self.assertEqual(
             etree.tostring(output),
-            """<div>{\'status\': \'queued\', \'button_enabled\': True, \'rows\': \'10\', \'queue_len\': \'3\'\
-, \'mode\': \'\', \'cols\': \'80\', \'STATIC_URL\': \'/dummy-static/\', \'linenumbers\': \'true\'\
-, \'queue_msg\': \'\', \'value\': \'print "good evening"\', \'msg\': u\'Submitted\
-. As soon as a response is returned, this message will be replaced by that feedback.\', \'hidden\': \'\'\
-, \'id\': \'prob_1_2\', \'tabsize\': 4}</div>"""
+            """<div>{\'status\': \'queued\', \'button_enabled\': True, \'rows\': \'10\', \'queue_len\': \'3\', \'mode\': \'\', \'cols\': \'80\', \'STATIC_URL\': \'/dummy-static/\', \'linenumbers\': \'true\', \'queue_msg\': \'\', \'value\': \'print "good evening"\', \'msg\': u\'Submitted. As soon as a response is returned, this message will be replaced by that feedback.\', \'matlab_editor_js\': \'/dummy-static/js/vendor/CodeMirror/addons/octave.js\', \'hidden\': \'\', \'id\': \'prob_1_2\', \'tabsize\': 4}</div>"""
         )
 
         # test html, that is correct HTML5 html, but is not parsable by XML parser.