Visual Editor work.

2013-01-14 15:28:28 -05:00
parent 29f49895d3
commit 1f681b4dcf
5 changed files with 124 additions and 25 deletions
--- a/common/lib/xmodule/jasmine_test_runner.html.erb
+++ b/common/lib/xmodule/jasmine_test_runner.html.erb
@@ -15,6 +15,7 @@
  <script type="text/javascript" src="<%= common_js_root %>/vendor/jquery.cookie.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" src="<%= common_js_root %>/vendor/tiny_mce/jquery.tinymce.js"></script>

  <script type="text/javascript">
    AjaxPrefix.addAjaxPrefix(jQuery, function() {
--- a/common/lib/xmodule/xmodule/js/fixtures/html-edit-formattingbug.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/html-edit-formattingbug.html
@@ -1,5 +1,6 @@
 <section class="html-edit">
-    <div name="" class="edit-box" rows="8" cols="40">&lt;problem>
+    <textarea class="tiny-mce">dummy content</textarea>
+    <div name="" class="edit-box">&lt;problem>
 &lt;p>&lt;/p>
 &lt;multiplechoiceresponse>
 <pre>&lt;problem>
--- a/common/lib/xmodule/xmodule/js/fixtures/html-edit.html
+++ b/common/lib/xmodule/xmodule/js/fixtures/html-edit.html
@@ -0,0 +1,12 @@
+<section class="html-edit">
+    <div class="row">
+        <div class="editor-bar">
+            <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>
+            </ul>
+        </div>
+        <textarea class="tiny-mce">dummy text</textarea>
+        <div name="" class="edit-box">Advanced Editor Text</div>
+    </div>
+</section>
--- a/common/lib/xmodule/xmodule/js/spec/html/edit_spec.coffee
+++ b/common/lib/xmodule/xmodule/js/spec/html/edit_spec.coffee
@@ -8,10 +8,84 @@ describe 'HTMLEditingDescriptor', ->
 #     However, we currently have no working Selenium tests.
      loadFixtures 'html-edit-formattingbug.html'
      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
+      visualEditorStub =
+        isDirty: () -> false
+      spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
+        visualEditorStub
      data = @descriptor.save().data
      expect(data).toEqual("""&lt;problem&gt;
                              &lt;p&gt;&lt;/p&gt;
                              &lt;multiplechoiceresponse&gt;
                              <pre>&lt;problem&gt;
                                  &lt;p&gt;&lt;/p&gt;</pre>
-                              <div><foo>bar</foo></div>""")
+                              <div><foo>bar</foo></div>""")
+  describe 'Saves HTML', ->
+    beforeEach ->
+      loadFixtures 'html-edit.html'
+      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
+    it 'Returns data from Advanced Editor if Visual Editor is not dirty', ->
+      visualEditorStub =
+        isDirty: () -> false
+      spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
+        visualEditorStub
+      expect(@descriptor.showingVisualEditor).toEqual(true)
+      data = @descriptor.save().data
+      expect(data).toEqual('Advanced Editor Text')
+    it 'Returns data from Advanced Editor if Visual Editor is not showing (even if Visual Editor is dirty)', ->
+      visualEditorStub =
+        isDirty: () -> true
+      spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
+        visualEditorStub
+      @descriptor.showingVisualEditor = false
+      data = @descriptor.save().data
+      expect(data).toEqual('Advanced Editor Text')
+    it 'Returns data from Visual Editor if Visual Editor is dirty and showing', ->
+      visualEditorStub =
+        isDirty: () -> true
+        getContent: () -> 'from visual editor'
+      spyOn(@descriptor, 'getVisualEditor').andCallFake () ->
+        visualEditorStub
+      expect(@descriptor.showingVisualEditor).toEqual(true)
+      data = @descriptor.save().data
+      expect(data).toEqual('from visual editor')
+  describe 'Can switch to Advanced Editor', ->
+    beforeEach ->
+      loadFixtures 'html-edit.html'
+      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
+    it 'Populates from Advanced Editor if Advanced Editor is dirty', ->
+      expect(@descriptor.showingVisualEditor).toEqual(true)
+      visualEditorStub =
+        isDirty: () -> true
+        getContent: () -> 'from visual editor'
+      @descriptor.showAdvancedEditor(visualEditorStub)
+      expect(@descriptor.showingVisualEditor).toEqual(false)
+      expect(@descriptor.advanced_editor.getValue()).toEqual('from visual editor')
+    it 'Does not populate from Advanced Editor if Advanced Editor is not dirty', ->
+      expect(@descriptor.showingVisualEditor).toEqual(true)
+      visualEditorStub =
+        isDirty: () -> false
+        getContent: () -> 'from visual editor'
+      @descriptor.showAdvancedEditor(visualEditorStub)
+      expect(@descriptor.showingVisualEditor).toEqual(false)
+      expect(@descriptor.advanced_editor.getValue()).toEqual('Advanced Editor Text')
+  describe 'Can switch to Visual Editor', ->
+    it 'Always populates from the Advanced Editor', ->
+      loadFixtures 'html-edit.html'
+      @descriptor = new HTMLEditingDescriptor($('.html-edit'))
+      @descriptor.showingVisualEditor = false
+
+      visualEditorStub =
+        isNotDirty: false
+        content: 'not set'
+        startContent: 'not set',
+        show: () -> true
+        focus: () -> true
+        isDirty: () -> not @isNotDirty
+        setContent: (x) -> @content = x
+        getContent: -> @content
+
+      @descriptor.showVisualEditor(visualEditorStub)
+      expect(@descriptor.showingVisualEditor).toEqual(true)
+      expect(visualEditorStub.isDirty()).toEqual(false)
+      expect(visualEditorStub.getContent()).toEqual('Advanced Editor Text')
+      expect(visualEditorStub.startContent).toEqual('Advanced Editor Text')
--- a/common/lib/xmodule/xmodule/js/src/html/edit.coffee
+++ b/common/lib/xmodule/xmodule/js/src/html/edit.coffee
@@ -25,6 +25,9 @@ class @HTMLEditingDescriptor
      theme_advanced_blockformats : "p,code,h2,h3,blockquote",
      width: '100%',
      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
    })

    @showingVisualEditor = true
@@ -36,28 +39,39 @@ class @HTMLEditingDescriptor
    if not $(e.currentTarget).hasClass('current')
      $('.editor-tabs .current').removeClass('current')
      $(e.currentTarget).addClass('current')
-      tinyMCE = @getVisualEditor()
+      visualEditor = @getVisualEditor()

      if $(e.currentTarget).attr('data-tab') is 'visual'
        $(@advanced_editor.getWrapperElement()).hide()
-        tinyMCE.show()
-        tinyMCE.setContent(@advanced_editor.getValue())
-        # In order for tinyMCE.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.
-        tinyMCE.startContent = tinyMCE.getContent({format: "raw", no_events: 1});
-        tinyMCE.isNotDirty = true
-        @showingVisualEditor = true
+        @showVisualEditor(visualEditor)
      else
-        tinyMCE.hide()
+        visualEditor.hide()
        @tiny_mce_textarea.hide()
-        $(@advanced_editor.getWrapperElement()).show()
-        if tinyMCE.isDirty()
-          console.log('was dirty! setting text')
-          @advanced_editor.setValue(tinyMCE.getContent({no_events: 1}))
-          @advanced_editor.setCursor(0)
-        @advanced_editor.refresh()
-        @advanced_editor.focus()
-        @showingVisualEditor = false
+        @showAdvancedEditor(visualEditor)
+
+  # Show the Advanced (codemirror) Editor. Pulled out as a helper method for unit testing.
+  showAdvancedEditor: (visualEditor) ->
+    $(@advanced_editor.getWrapperElement()).show()
+    if visualEditor.isDirty()
+      @advanced_editor.setValue(visualEditor.getContent({no_events: 1}))
+      @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) ->
+    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)
+    @showingVisualEditor = true
+
+  focusVisualEditor: (visualEditor) ->
+    visualEditor.focus()

  getVisualEditor: ->
    ###
@@ -69,10 +83,7 @@ class @HTMLEditingDescriptor
  save: ->
    @element.off('click', '.editor-tabs .tab', @onSwitchEditor)
    text = @advanced_editor.getValue()
-    tinyMCE = @getVisualEditor()
-    if @showingVisualEditor and tinyMCE.isDirty()
-      console.log('persist from visual editor')
-      text = tinyMCE.getContent({no_events: 1})
-    else
-      console.log('persist from HTML editor')
+    visualEditor = @getVisualEditor()
+    if @showingVisualEditor and visualEditor.isDirty()
+      text = visualEditor.getContent({no_events: 1})
    data: text