Bug fix for Lighthouse #22.

html names are automatically converted to the symbols they describe.

cms/templates/widgets/html-edit.html

@@ -1,4 +1,4 @@
 <%include file="metadata-edit.html" />
 <section class="html-edit">
-  <textarea name="" class="edit-box" rows="8" cols="40">${data}</textarea>
+  <div name="" class="edit-box">${data}</div>
 </section>

common/lib/xmodule/jasmine_test_runner.html.erb

@@ -12,6 +12,7 @@
   <script type="text/javascript" src="<%= common_coffee_root %>/logger.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/jquery.min.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/jasmine-jquery.js"></script>
+  <script type="text/javascript" src="<%= common_js_root %>/vendor/CodeMirror/codemirror.js"></script>
   <script type="text/javascript" src="<%= common_js_root %>/vendor/mathjax-MathJax-c9db6ac/MathJax.js"></script>
 
   <script type="text/javascript">

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

@@ -0,0 +1,8 @@
+<section class="html-edit">
+    <div name="" class="edit-box" rows="8" cols="40">&lt;problem>
+&lt;p>&lt;/p>
+&lt;multiplechoiceresponse>
+<pre>&lt;problem>
+    &lt;p>&lt;/p></pre>
+<div><foo>bar</foo></div></div>
+</section>

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

@@ -0,0 +1,17 @@
+describe 'HTMLEditingDescriptor', ->
+  describe 'Read data from server, create Editor, and get data back out', ->
+    it 'Does not munge &lt', ->
+#     This is a test for Lighthouse #22,
+#     "html names are automatically converted to the symbols they describe"
+#     A better test would be a Selenium test to avoid duplicating the
+#     mako template structure in html-edit-formattingbug.html.
+#     However, we currently have no working Selenium tests.
+      loadFixtures 'html-edit-formattingbug.html'
+      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
+      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>""")

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

@@ -1,11 +1,12 @@
 class @HTMLEditingDescriptor
   constructor: (@element) ->
-    @edit_box = CodeMirror.fromTextArea($(".edit-box", @element)[0], {
+    text = $(".edit-box", @element)[0];
+    replace_func = (elt) -> text.parentNode.replaceChild(elt, text)
+    @edit_box = CodeMirror(replace_func, {
+      value: text.innerHTML
       mode: "text/html"
       lineNumbers: true
-      lineWrapping: true
-    })
+      lineWrapping: true})
 
   save: ->
     data: @edit_box.getValue()
-