Add support for raw HTML editor.

STUD-1562

CHANGELOG.rst

@@ -10,6 +10,9 @@ Blades: Set initial video quality to large instead of default to avoid automatic
 Blades: Add an upload button for authors to provide students with an option to
 download a handout associated with a video (of arbitrary file format). BLD-1000.
 
+Studio: Add "raw HTML" editor so that authors can write HTML that will not be
+changed in any way. STUD-1562
+
 Blades: Show the HD button only if there is an HD version available. BLD-937.
 
 Studio: Add edit button to leaf xblocks on the container page. STUD-1306.

cms/djangoapps/contentstore/features/html-editor.feature

@@ -5,7 +5,7 @@ Feature: CMS.HTML Editor
   Scenario: User can view metadata
     Given I have created a Blank HTML Page
     And I edit and select Settings
-    Then I see only the HTML display name setting
+    Then I see the HTML component settings
 
   # Safari doesn't save the name properly
   @skip_safari

cms/djangoapps/contentstore/features/html-editor.py

@@ -18,9 +18,14 @@ def i_created_blank_html_page(step):
     )
 
 
-@step('I see only the HTML display name setting$')
+@step('I see the HTML component settings$')
 def i_see_only_the_html_display_name(step):
-    world.verify_all_setting_entries([['Display Name', "Text", False]])
+    world.verify_all_setting_entries(
+        [
+            ['Display Name', "Text", False],
+            ['Editor', "Visual", False]
+        ]
+    )
 
 
 @step('I have created an E-text Written in LaTeX$')

cms/templates/widgets/html-edit.html

 <%! from django.utils.translation import ugettext as _ %>
 
-<div class="wrapper-comp-editor" id="editor-tab" data-base-asset-url="${base_asset_url}">
+<div class="wrapper-comp-editor" id="editor-tab" data-base-asset-url="${base_asset_url}" data-editor="${editor}">
     <section class="html-editor editor">
       <div class="row">
+          % if editor == 'visual':
             <textarea class="tiny-mce">${data | h}</textarea>
+          % endif
+          <textarea name="" class="edit-box">${data | h}</textarea>
       </div>
     </section>
 </div>

common/lib/xmodule/xmodule/html_module.py

@@ -36,6 +36,16 @@ class HtmlFields(object):
         default=False,
         scope=Scope.settings
     )
+    editor = String(
+        help="Supports switching between the Visual Editor and the Raw HTML Editor. The change does not take effect until Save is pressed.",
+        display_name="Editor",
+        default="visual",
+        values=[
+            {"display_name": "Visual", "value": "visual"},
+            {"display_name": "Raw", "value": "raw"}
+        ],
+        scope=Scope.settings
+    )
 
 
 class HtmlModule(HtmlFields, XModule):
@@ -113,6 +123,7 @@ class HtmlDescriptor(HtmlFields, XmlDescriptor, EditingDescriptor):
         _context.update({
             'base_asset_url': StaticContent.get_base_url_path_for_course_assets(self.location) + '/',
             'enable_latex_compiler': self.use_latex_compiler,
+            'editor': self.editor
         })
         return _context
 

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

+<div class="test-component">
+    <div class="wrapper-comp-editor" id="editor-tab" data-base-asset-url="/c4x/foo/bar/asset/" data-editor="visual">
+        <section class="html-editor editor">
+            <div class="row">
+                <textarea class="tiny-mce"><p>original visual text</p></textarea>
+                <textarea name="" class="edit-box">raw text</textarea>
+            </div>
+        </section>
+    </div>
+</div>

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

-<section class="html-edit">
-    <textarea class="tiny-mce">dummy text</textarea>
-</section>

common/lib/xmodule/xmodule/js/fixtures/html-editor-raw.html

+<div class="test-component">
+    <div class="wrapper-comp-editor" id="editor-tab" data-editor="raw">
+        <section class="html-editor editor">
+            <div class="row">
+                <textarea name="" class="edit-box">raw text</textarea>
+            </div>
+        </section>
+    </div>
+</div>

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

@@ -3,39 +3,32 @@ describe 'HTMLEditingDescriptor', ->
     window.baseUrl = "/static/deadbeef"
   afterEach ->
     delete window.baseUrl
-  describe 'HTML Editor', ->
+  describe 'Visual HTML Editor', ->
     beforeEach ->
-      loadFixtures 'html-edit.html'
-      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
-    it 'Returns data from Visual Editor if Visual Editor is dirty', ->
+      loadFixtures 'html-edit-visual.html'
+      @descriptor = new HTMLEditingDescriptor($('.test-component'))
+    it 'Returns data from Visual Editor if text has changed', ->
       visualEditorStub =
-        isDirty: () -> true
         getContent: () -> 'from visual editor'
       spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
         visualEditorStub
       data = @descriptor.save().data
       expect(data).toEqual('from visual editor')
-    it 'Returns data from Visual Editor even if Visual Editor is not dirty', ->
+    it 'Returns data from Raw Editor if text has not changed', ->
       visualEditorStub =
-        isDirty: () -> false
-        getContent: () -> 'from visual editor'
+        getContent: () -> '<p>original visual text</p>'
       spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
         visualEditorStub
       data = @descriptor.save().data
-      expect(data).toEqual('from visual editor')
+      expect(data).toEqual('raw text')
     it 'Performs link rewriting for static assets when saving', ->
       visualEditorStub =
-        isDirty: () -> true
         getContent: () -> 'from visual editor with /c4x/foo/bar/asset/image.jpg'
       spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
         visualEditorStub
-      @descriptor.base_asset_url = '/c4x/foo/bar/asset/'
       data = @descriptor.save().data
       expect(data).toEqual('from visual editor with /static/image.jpg')
     it 'When showing visual editor links are rewritten to c4x format', ->
-      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
-      @descriptor.base_asset_url = '/c4x/foo/bar/asset/'
-
       visualEditorStub =
         content: 'text /static/image.jpg'
         startContent: 'text /static/image.jpg'
@@ -45,3 +38,10 @@ describe 'HTMLEditingDescriptor', ->
 
       @descriptor.initInstanceCallback(visualEditorStub)
       expect(visualEditorStub.getContent()).toEqual('text /c4x/foo/bar/asset/image.jpg')
+  describe 'Raw HTML Editor', ->
+    beforeEach ->
+      loadFixtures 'html-editor-raw.html'
+      @descriptor = new HTMLEditingDescriptor($('.test-component'))
+    it 'Returns data from raw editor', ->
+      data = @descriptor.save().data
+      expect(data).toEqual('raw text')

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

 class @HTMLEditingDescriptor
 
   constructor: (element) ->
-    @element = element;
+    @element = element
     @base_asset_url = @element.find("#editor-tab").data('base-asset-url')
+    @editor_choice = @element.find("#editor-tab").data('editor')
     if @base_asset_url == undefined
       @base_asset_url = null
 
+    # We always create the "raw editor" so we can get the text out of it if necessary on save.
+    @advanced_editor = CodeMirror.fromTextArea($(".edit-box", @element)[0], {
+        mode: "text/html"
+        lineNumbers: true
+        lineWrapping: true
+    })
+
+    if @editor_choice == 'visual'
+      @$advancedEditorWrapper = $(@advanced_editor.getWrapperElement())
+      @$advancedEditorWrapper.addClass('is-inactive')
       # Create an array of all content CSS links to use in and pass to Tiny MCE.
       # We create this dynamically in order to support hashed files from our Django pipeline.
       # CSS files that are to be used by Tiny MCE should contain the string "tinymce" so
@@ -16,11 +27,11 @@ class @HTMLEditingDescriptor
           tiny_mce_css_links.push $(this).attr("href")
           return
 
-#   This is a workaround for the fact that tinyMCE's baseURL property is not getting correctly set on AWS
-#   instances (like sandbox). It is not necessary to explicitly set baseURL when running locally.
+  #   This is a workaround for the fact that tinyMCE's baseURL property is not getting correctly set on AWS
+  #   instances (like sandbox). It is not necessary to explicitly set baseURL when running locally.
       tinyMCE.baseURL = "#{baseUrl}/js/vendor/tinymce/js/tinymce"
-#   This is necessary for the LMS bulk e-mail acceptance test. In that particular scenario,
-#   tinyMCE incorrectly decides that the suffix should be "", which means it fails to load files.
+  #   This is necessary for the LMS bulk e-mail acceptance test. In that particular scenario,
+  #   tinyMCE incorrectly decides that the suffix should be "", which means it fails to load files.
       tinyMCE.suffix = ".min"
       @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
         script_url : "#{baseUrl}/js/vendor/tinymce/js/tinymce/tinymce.full.min.js",
@@ -116,6 +127,9 @@ class @HTMLEditingDescriptor
 
   initInstanceCallback: (visualEditor) =>
     visualEditor.setContent(rewriteStaticLinks(visualEditor.getContent({no_events: 1}), '/static/', @base_asset_url))
+    # Unfortunately, just setting visualEditor.isNortDirty = true is not enough to convince TinyMCE we
+    # haven't dirtied the Editor. Store the raw content so we can compare it later.
+    @starting_content = visualEditor.getContent({format:"raw", no_events: 1})
     visualEditor.focus()
 
   getVisualEditor: () ->
@@ -127,6 +141,14 @@ class @HTMLEditingDescriptor
     return @visualEditor
 
   save: ->
+    text = undefined
+    if @editor_choice == 'visual'
       visualEditor = @getVisualEditor()
-    text = rewriteStaticLinks(visualEditor.getContent({no_events: 1}), @base_asset_url, '/static/')
+      content = visualEditor.getContent({format:"raw", no_events: 1})
+      if @starting_content != content
+        text = rewriteStaticLinks(content, @base_asset_url, '/static/')
+
+    if text == undefined
+      text = @advanced_editor.getValue()
+
     data: text

common/lib/xmodule/xmodule/templates/html/raw.yaml

+---
+metadata:
+    display_name: Raw HTML
+    editor: raw
+data: |
+      <p>For use with complex HTML, to allow complete control over the final product.</p>

lms/templates/widgets/html-edit.html

 <%! from django.utils.translation import ugettext as _ %>
 
-<section class="html-editor editor">
+<div class="wrapper-comp-editor" id="editor-tab" data-editor="${editor}">
+    <section class="html-editor editor">
         <div class="row">
+            % if editor == 'visual':
             <textarea class="tiny-mce">${data | h}</textarea>
+            % endif
+            <textarea name="" class="edit-box">${data | h}</textarea>
         </div>
-</section>
+    </section>
+</div>
\ No newline at end of file