init work on getting HTML editor wired into unit page

cms/djangoapps/contentstore/views.py

@@ -677,6 +677,7 @@ def unpublish_unit(request):
 def clone_item(request):
     parent_location = Location(request.POST['parent_location'])
     template = Location(request.POST['template'])
+    data = request.POST.get('data')
     
     display_name = request.POST.get('display_name')
 
@@ -697,6 +698,11 @@ def clone_item(request):
 
     _modulestore(template).update_metadata(new_item.location.url(), new_item.own_metadata)
 
+    # seed any initial content, if passed by caller
+    logging.debug('data = {0}'.format(data))
+    if data is not None:
+        _modulestore(template).update_item(new_item.location.url(), data)
+
     if new_item.location.category not in DETACHED_CATEGORIES:
         _modulestore(parent.location).update_children(parent_location, parent.definition.get('children', []) + [new_item.location.url()])
 

cms/static/coffee/src/views/module_edit.coffee

@@ -35,10 +35,11 @@ class CMS.Views.ModuleEdit extends Backbone.View
 
     return _metadata
 
-  cloneTemplate: (parent, template) ->
+  cloneTemplate: (parent, template, content) ->
     $.post("/clone_item", {
       parent_location: parent
       template: template
+      data: content
     }, (data) => 
       @model.set(id: data.id)
       @$el.data('id', data.id)

cms/static/coffee/src/views/unit.coffee

@@ -46,7 +46,7 @@ class CMS.Views.UnitEdit extends Backbone.View
     )
 
     @$('.component').each((idx, element) =>
-        new CMS.Views.ModuleEdit(
+        new CMS.Views.HTMLModuleEdit(
             el: element,
             onDelete: @deleteComponent,
             model: new CMS.Models.Module(
@@ -82,9 +82,9 @@ class CMS.Views.UnitEdit extends Backbone.View
 
   addNewComponent: (event) =>
     event.preventDefault()
+    type = $(event.currentTarget).data('type')
 
     @$componentItem = $('<li>').addClass('editing')
-    type = $(event.currentTarget).data('type')
 
     switch type
       when 'video'
@@ -95,22 +95,29 @@ class CMS.Views.UnitEdit extends Backbone.View
         $preview = $($('#problem-preview').html())
         initProblemEditors(@$editor, $preview)
       when 'html'
-        @$editor = $($('#html-editor').html())
-        $preview = $('<div class="html-preview"></div>')
-        initHTMLEditor(@$editor, $preview)
+        $editView = $('<li>').addClass('component')
+        @$newComponentItem.before($editView)
+        parent = @$el.data('id')
+        moduleEditor = new CMS.Views.HTMLModuleEdit(
+            el: $editView,
+            onDelete: @deleteComponent,
+            isNew: true,
+            parent: parent,
+            model: new CMS.Models.Module()
+          )
+        moduleEditor.enterEditMode()
+        return
       when 'discussion'
         @$editor = $($('#discussion-editor').html())
         $preview = $($('#discussion-preview').html())        
 
-    @$editor.find('.save-button, .cancel-button').bind('click', =>
-      @$componentItem.removeClass('editing')
-      @closeEditor()
-    )
+    @$editor.find('.cancel-button').bind('click', @closeSpeedEditor)
+    @$editor.find('.save-button').bind('click', @saveSpeedEditor)
 
     $componentActions = $($('#component-actions').html())
 
     @$componentItem.append(@$editor)
-    @$componentItem.append($preview)
+    #@$componentItem.append($preview)
 
     @$componentItem.append($componentActions)
     @$componentItem.hide()
@@ -119,6 +126,25 @@ class CMS.Views.UnitEdit extends Backbone.View
     $modalCover.fadeIn(200)
     $modalCover.bind('click', @closeEditor)
 
+  saveSpeedEditor: (event) =>
+    html = getHTMLContent()
+    @$componentItem.remove()
+    @closeEditor()
+    module = new CMS.Views.HTMLModuleEdit(
+      onDelete: @deleteComponent
+      model: new CMS.Models.Module()
+    )
+    @$newComponentItem.before(module.$el)
+    module.cloneTemplate(
+      @$el.data('id'),
+      'i4x://edx/templates/html/Empty',
+      html
+    ) 
+
+  closeSpeedEditor: (event) =>
+    @$componentItem.remove()
+    @closeEditor()   
+
   closeEditor: (event) =>
     @$editor.slideUp(150)
     $modalCover.fadeOut(150)

cms/static/js/html-editor.js

 var $body;
-var $htmlPreview;
 var $htmlEditor;
 var $visualEditor;
 var $assetWidget;
 var $linkDialog;
 var visualEditor;
 var htmlEditor;
+var htmlEditorTargetId;
 
-function initHTMLEditor($editor, $prev) {
+function initHTMLEditor($editor, html) {
   $htmlEditor = $editor;
-  $htmlPreview = $prev;
+  htmlEditorTargetId = null;
+  var _html = html;
 
   // there's a race condition here. wait a bit, then init tiny
   setTimeout(function() {
@@ -59,6 +60,11 @@ function initHTMLEditor($editor, $prev) {
         });
       }
     });
+
+    if(_html != null) {
+      htmlEditor.setValue(_html)
+      convertHTMLToVisual()
+    }
   }, 100);
   
   htmlEditor = CodeMirror.fromTextArea($editor.find('.html-box')[0], {
@@ -67,7 +73,8 @@ function initHTMLEditor($editor, $prev) {
     lineNumbers: true
   });
 
-  $editor.find('.save-button, .cancel-button').bind('click', updateHTMLPreview);
+  $editor.find('.save-button').bind('click', saveHTMLEditor);
+  $editor.find('.cancel-button').bind('click', cancelHTMLEditor);
 }
 
 function closeLinkDialog(e) {
@@ -118,9 +125,25 @@ function convertHTMLToVisual() {
 }
 
 function updateHTMLPreview() {
+  //if(currentEditor == htmlEditor) {
+  //  $htmlPreview.html(htmlEditor.getValue());
+  //} else {
+  //  $htmlPreview.html($visualEditor.html());
+  //}
+}
+
+function getHTMLContent() {
   if(currentEditor == htmlEditor) {
-    $htmlPreview.html(htmlEditor.getValue());
+    return htmlEditor.getValue();
   } else {
-    $htmlPreview.html($visualEditor.html());
-  }
+    return $visualEditor.html();
+  }  
+}
+
+function saveHTMLEditor() {
+
+}
+
+function cancelHTMLEditor() {
+
 }
\ No newline at end of file