studio HTML editor - codemirror/tinymce toggle work - wip

cms/templates/component.html

@@ -3,9 +3,11 @@
 	  <div class="module-editor">
 	    ${editor}
 	  </div>
+	  <div class="row module-actions">
 			<a href="#" class="save-button">Save</a>
 			<a href="#" class="cancel-button">Cancel</a>	  	
 	  </div>
+	</div>
 </div>
 
 <div class="component-actions">

cms/templates/widgets/html-edit.html

 <%include file="metadata-edit.html" />
-<section class="html-edit">
-    <div class="row">
-        <div class="editor-bar">
+<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">Advanced</a></li>
+    <li><a href="#" class="html-tab tab" data-tab="advanced">HTML</a></li>
   </ul>
-        </div>
+  
+  <div class="row">
     <textarea class="tiny-mce">${data}</textarea>
     <div name="" class="edit-box">${data}</div>
   </div>

common/lib/xmodule/xmodule/css/editor/display.scss

-.editor-bar {
+.editor {
+  position: relative;
+  
+  .row {
+    position: relative;
+  }
+
+  .editor-bar {
     position: relative;
     @include linear-gradient(top, #d4dee8, #c9d5e2);
     padding: 5px;
@@ -31,6 +38,7 @@
       }
 
       .tab {
+        display: block;
         height: 24px;
         padding: 7px 20px 3px;
         border: 1px solid #a5aaaf;
@@ -47,4 +55,5 @@
         }
       }
     }
+  }
 }
\ No newline at end of file

common/lib/xmodule/xmodule/css/html/edit.scss

+.html-editor {
+  @include clearfix();
+
+  .CodeMirror {
+    display: none;
+    position: absolute;
+    top: 46px;
+    width: 100%;
+    height: 378px;
+    background: #fff;
+    color: #3c3c3c;
+    @include box-sizing(border-box);
+  }
+
+  .editor-tabs {
+    top: 11px;
+    right: 30px;
+    z-index: 99;
+  }
+}
\ No newline at end of file

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

@@ -8,11 +8,11 @@ class @HTMLEditingDescriptor
       mode: "text/html"
       lineNumbers: true
       lineWrapping: true})
-    $(@advanced_editor.getWrapperElement()).hide()
 
     @tiny_mce_textarea = $(".tiny-mce", @element).tinymce({
       script_url : '/static/js/vendor/tiny_mce/tiny_mce.js',
       theme : "advanced",
+      skin: 'studio',
       schema: "html5",
       # TODO: we should share this CSS with studio (and LMS)
       content_css : "/static/css/tiny-mce.css",
@@ -27,7 +27,7 @@ class @HTMLEditingDescriptor
       height: '400px',
       # Cannot get access to tinyMCE Editor instance (for focusing) until after it is rendered.
       # The tinyMCE callback passes in the editor as a paramter.
-      init_instance_callback: @focusVisualEditor
+      init_instance_callback: @initializeVisualEditor
     })
 
     @showingVisualEditor = true
@@ -41,17 +41,18 @@ class @HTMLEditingDescriptor
       $(e.currentTarget).addClass('current')
       visualEditor = @getVisualEditor()
 
+      $('table.mceToolbar').toggleClass('is-inactive')
+      $(@advanced_editor.getWrapperElement()).toggleClass('is-inactive')
+
       if $(e.currentTarget).attr('data-tab') is 'visual'
-        $(@advanced_editor.getWrapperElement()).hide()
         @showVisualEditor(visualEditor)
       else
-        visualEditor.hide()
-        @tiny_mce_textarea.hide()
+        # @tiny_mce_textarea.hide()
         @showAdvancedEditor(visualEditor)
 
   # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
   showAdvancedEditor: (visualEditor) ->
-    $(@advanced_editor.getWrapperElement()).show()
+    # $(@advanced_editor.getWrapperElement()).show()
     if visualEditor.isDirty()
       @advanced_editor.setValue(visualEditor.getContent({no_events: 1}))
       @advanced_editor.setCursor(0)
@@ -61,16 +62,16 @@ class @HTMLEditingDescriptor
 
   # Show the Visual (tinyMCE) Editor. Pulled out as a helper method for unit testing.
   showVisualEditor: (visualEditor) ->
-    visualEditor.show()
+    # visualEditor.show()
     visualEditor.setContent(@advanced_editor.getValue())
     # 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.
     visualEditor.startContent = visualEditor.getContent({format: "raw", no_events: 1});
     visualEditor.isNotDirty = true
-    @focusVisualEditor(visualEditor)
+    visualEditor.focus()
     @showingVisualEditor = true
 
-  focusVisualEditor: (visualEditor) ->
+  initializeVisualEditor: (visualEditor) ->
     visualEditor.focus()
 
   getVisualEditor: ->

common/lib/xmodule/xmodule/self_assessment_module.py

@@ -524,6 +524,7 @@ class SelfAssessmentDescriptor(XmlDescriptor, EditingDescriptor):
 
     js = {'coffee': [resource_string(__name__, 'js/src/html/edit.coffee')]}
     js_module_name = "HTMLEditingDescriptor"
+    css = {'scss': [resource_string(__name__, 'css/html/edit.scss')]}
 
     @classmethod
     def definition_from_xml(cls, xml_object, system):