Change the div being used to create code mirror to a textarea-- just make sure…

Change the div being used to create code mirror to a textarea-- just make sure to escape the content! Update tests accordingly.

cms/templates/widgets/html-edit.html

@@ -6,7 +6,7 @@
   </ul>
   
   <div class="row">
-    <textarea class="tiny-mce">${data}</textarea>
-    <div name="" class="edit-box">${data}</div>
+    <textarea class="tiny-mce">${data | h}</textarea>
+    <textarea name="" class="edit-box">${data | h}</textarea>
   </div>
 </section>

common/lib/xmodule/xmodule/js/fixtures/html-edit-formattingbug.html

 <section class="html-edit">
-    <textarea class="tiny-mce">dummy content</textarea>
-    <div name="" class="edit-box">&lt;problem>
-&lt;p>&lt;/p>
-&lt;multiplechoiceresponse>
-<pre>&lt;problem>
-    &lt;p>&lt;/p></pre>
-<div><foo>bar</foo></div></div>
+    <textarea class="tiny-mce">dummy</textarea>
+<!--
+    The text passed in is the escaped version of
+    &lt;problem>
+    &lt;p>&lt;/p>
+    &lt;multiplechoiceresponse>
+    <pre>&lt;problem>
+        &lt;p>&lt;/p></pre>
+    <div><foo>bar</foo></div>
+-->
+    <textarea name="" class="edit-box">&amp;lt;problem&gt;
+&amp;lt;p&gt;&amp;lt;/p&gt;
+&amp;lt;multiplechoiceresponse&gt;
+&lt;pre&gt;&amp;lt;problem&gt;
+    &amp;lt;p&gt;&amp;lt;/p&gt;</pre>
+<div><foo>bar</foo></div></textarea>
 </section>
\ No newline at end of file

common/lib/xmodule/xmodule/js/fixtures/html-edit.html

@@ -5,6 +5,6 @@
     </ul>
     <div class="row">
         <textarea class="tiny-mce">dummy text</textarea>
-        <div name="" class="edit-box">Advanced Editor Text</div>
+        <textarea name="" class="edit-box">Advanced Editor Text</textarea>
     </div>
 </section>
\ No newline at end of file

common/lib/xmodule/xmodule/js/spec/html/edit_spec.coffee

@@ -13,12 +13,12 @@ describe 'HTMLEditingDescriptor', ->
       spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
         visualEditorStub
       data = @descriptor.save().data
-      expect(data).toEqual("""<problem>
-                              <p></p>
-                              <multiplechoiceresponse>
-                              <pre>&lt;problem&gt;
-                                  &lt;p&gt;&lt;/p&gt;</pre>
-                              <div><foo>bar</foo></div>""")
+      expect(data).toEqual("""&lt;problem>
+                           &lt;p>&lt;/p>
+                           &lt;multiplechoiceresponse>
+                           <pre>&lt;problem>
+                               &lt;p>&lt;/p></pre>
+                           <div><foo>bar</foo></div>""")
   describe 'Saves HTML', ->
     beforeEach ->
       loadFixtures 'html-edit.html'
@@ -52,7 +52,7 @@ describe 'HTMLEditingDescriptor', ->
     beforeEach ->
       loadFixtures 'html-edit.html'
       @descriptor = new HTMLEditingDescriptor($('.html-edit'))
-    it 'Populates from Advanced Editor if Advanced Editor is dirty', ->
+    it 'Populates from Visual Editor if Advanced Visual is dirty', ->
       expect(@descriptor.showingVisualEditor).toEqual(true)
       visualEditorStub =
         isDirty: () -> true
@@ -60,7 +60,7 @@ describe 'HTMLEditingDescriptor', ->
       @descriptor.showAdvancedEditor(visualEditorStub)
       expect(@descriptor.showingVisualEditor).toEqual(false)
       expect(@descriptor.advanced_editor.getValue()).toEqual('from visual editor')
-    it 'Does not populate from Advanced Editor if Advanced Editor is not dirty', ->
+    it 'Does not populate from Visual Editor if Visual Editor is not dirty', ->
       expect(@descriptor.showingVisualEditor).toEqual(true)
       visualEditorStub =
         isDirty: () -> false

common/lib/xmodule/xmodule/js/src/html/edit.coffee

@@ -3,13 +3,12 @@ class @HTMLEditingDescriptor
 
   constructor: (element) ->
     @element = element;
-    text = $(".edit-box", @element)[0];
-    replace_func = (elt) -> text.parentNode.replaceChild(elt, text)
-    @advanced_editor = CodeMirror(replace_func, {
-      value: text.innerHTML
+
+    @advanced_editor = CodeMirror.fromTextArea($(".edit-box", @element)[0], {
       mode: "text/html"
       lineNumbers: true
-      lineWrapping: true})
+      lineWrapping: true
+    })
 
     $(@advanced_editor.getWrapperElement()).addClass(HTMLEditingDescriptor.isInactiveClass)