Remove CodeMirror tabbed editor.

cms/templates/widgets/html-edit.html

@@ -2,14 +2,8 @@
 
 <div class="wrapper-comp-editor" id="editor-tab" data-base-asset-url="${base_asset_url}">
     <section class="html-editor editor">
-      <ul class="editor-tabs">
-        <li><a href="#" class="visual-tab tab current" data-tab="visual">${_("Visual")}</a></li>
-        <li><a href="#" class="html-tab tab" data-tab="advanced">${_("HTML")}</a></li>
-      </ul>
-
       <div class="row">
         <textarea class="tiny-mce">${data | h}</textarea>
-        <textarea name="" class="edit-box">${data | h}</textarea>
       </div>
     </section>
 </div>

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

@@ -7,15 +7,6 @@ class @HTMLEditingDescriptor
     if @base_asset_url == undefined
       @base_asset_url = null
 
-    @advanced_editor = CodeMirror.fromTextArea($(".edit-box", @element)[0], {
-      mode: "text/html"
-      lineNumbers: true
-      lineWrapping: true
-    })
-
-    @$advancedEditorWrapper = $(@advanced_editor.getWrapperElement())
-    @$advancedEditorWrapper.addClass(HTMLEditingDescriptor.isInactiveClass)
-
 #   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/tiny_mce"
@@ -23,7 +14,7 @@ class @HTMLEditingDescriptor
 #   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/tiny_mce/tiny_mce.min.js",
+      script_url : "#{baseUrl}/js/vendor/tiny_mce/tinymce.min.js",
       theme : "modern",
       skin: 'studio-tmce4',
       schema: "html5",
@@ -48,8 +39,7 @@ class @HTMLEditingDescriptor
       },
       # We may want to add "styleselect" when we collect all styles used throughout the LMS
       # Can have a single toolbar by just specifying "toolbar". Splitting for now so all are visible.
-      toolbar1: "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent",
-      toolbar2: "link unlink image | blockquote wrapAsCode code",
+      toolbar: "formatselect | fontselect | bold italic underline forecolor | bullist numlist outdent indent | link unlink image | blockquote wrapAsCode | code",
       # TODO: i18n
       block_formats: "Paragraph=p;Preformatted=pre;Heading 1=h1;Heading 2=h2;Heading 3=h3",
       width: '100%',
@@ -62,14 +52,6 @@ class @HTMLEditingDescriptor
       init_instance_callback: @initInstanceCallback
     })
 
-    @showingVisualEditor = true
-    # Doing these find operations within onSwitchEditor leads to sporadic failures on Chrome (version 20 and older).
-    $element = $(element)
-    @$htmlTab = $element.find('.html-tab')
-    @$visualTab = $element.find('.visual-tab')
-
-    @element.on('click', '.editor-tabs .tab', @onSwitchEditor)
-
   setupTinyMCE: (ed) =>
     ed.addButton('wrapAsCode', {
       title : 'Code',
@@ -84,6 +66,8 @@ class @HTMLEditingDescriptor
     @visualEditor = ed
 
     ed.on('change', @changeHandler)
+    ed.on('ShowCodeMirror', @showCodeEditor)
+    ed.on('SaveCodeMirror', @saveCodeEditor)
 
   # Intended to run after the "image" plugin is used so that static urls are set
   # correctly in the Visual editor immediately after command use.
@@ -91,59 +75,27 @@ class @HTMLEditingDescriptor
     # The fact that we have to listen to all change events and act on an event actually fired
     # from undo (which is where the "level" comes from) is extremely ugly. However, plugins
     # don't fire any events in TinyMCE version 4 that I can hook into (in particular, not ExecCommand).
+    debugger
     if e.level and e.level.content and e.level.content.match(/<img src="\/static\//)
       content = rewriteStaticLinks(e.target.getContent(), '/static/', @base_asset_url)
       e.target.setContent(content)
 
-  onSwitchEditor: (e) =>
-    e.preventDefault();
-
-    $currentTarget = $(e.currentTarget)
-    if not $currentTarget.hasClass('current')
-      $currentTarget.addClass('current')
+  showCodeEditor: (codeEditor) =>
+    # Called with the CodeMirror Editor is displayed to convert links to show satic prefix.
+    content = rewriteStaticLinks(codeEditor.getValue(), @base_asset_url, '/static/')
+    codeEditor.setValue(content)
 
-      # Initializing $mceToolbar if undefined.
-      if not @$mceToolbar?
-        @$mceToolbar = $(@element).find('table.mceToolbar')
-      @$mceToolbar.toggleClass(HTMLEditingDescriptor.isInactiveClass)
-      @$advancedEditorWrapper.toggleClass(HTMLEditingDescriptor.isInactiveClass)
-
-      visualEditor = @getVisualEditor()
-      if $currentTarget.data('tab') is 'visual'
-        @$htmlTab.removeClass('current')
-        @showVisualEditor(visualEditor)
-      else
-        @$visualTab.removeClass('current')
-        @showAdvancedEditor(visualEditor)
-
-  # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
-  showAdvancedEditor: (visualEditor) ->
-    if visualEditor.isDirty()
-      content = rewriteStaticLinks(visualEditor.getContent({no_events: 1}), @base_asset_url, '/static/')
-      @advanced_editor.setValue(content)
-      @advanced_editor.setCursor(0)
-    @advanced_editor.refresh()
-    @advanced_editor.focus()
-    @showingVisualEditor = false
-
-  # Show the Visual (tinyMCE) Editor. Pulled out as a helper method for unit testing.
-  showVisualEditor: (visualEditor) ->
-    # In order for isDirty() to return true ONLY if edits have been made after setting the text,
-    # both the startContent must be sync'ed up and the dirty flag set to false.
-    content = rewriteStaticLinks(@advanced_editor.getValue(), '/static/', @base_asset_url)
-    visualEditor.setContent(content)
-    visualEditor.startContent = visualEditor.getContent({format : 'raw'})
-    @focusVisualEditor(visualEditor)
-    @showingVisualEditor = true
+  saveCodeEditor: (codeEditor) =>
+    # Called when the CodeMirror Editor is saved to convert links back to the full form.
+    content = rewriteStaticLinks(codeEditor.getValue(), '/static/', @base_asset_url)
+    codeEditor.setValue(content)
 
   initInstanceCallback: (visualEditor) =>
-    visualEditor.setContent(rewriteStaticLinks(@advanced_editor.getValue(), '/static/', @base_asset_url))
+    visualEditor.setContent(rewriteStaticLinks(visualEditor.getContent({no_events: 1}), '/static/', @base_asset_url))
     @focusVisualEditor(visualEditor)
 
   focusVisualEditor: (visualEditor) =>
     visualEditor.focus()
-    if not @$mceToolbar?
-      @$mceToolbar = $(@element).find('table.mceToolbar')
 
   getVisualEditor: () ->
     ###
@@ -155,9 +107,7 @@ class @HTMLEditingDescriptor
     return @visualEditor
 
   save: ->
-    @element.off('click', '.editor-tabs .tab', @onSwitchEditor)
-    text = @advanced_editor.getValue()
     visualEditor = @getVisualEditor()
-    if @showingVisualEditor and visualEditor.isDirty()
+    if visualEditor.isDirty()
       text = rewriteStaticLinks(visualEditor.getContent({no_events: 1}), @base_asset_url, '/static/')
     data: text