Fixes #47 change_view does not show HTML when using DIV

Gruntfile.js

@@ -104,6 +104,7 @@ module.exports = function(grunt) {
     "src/views/composer.style.js",
     "src/views/composer.observe.js",
     "src/views/synchronizer.js",
+    "src/views/sourceview.js",
     "src/views/textarea.js",
     "src/editor.js"
   ];

examples/advanced_div.html

@@ -61,7 +61,7 @@
     border: 2px solid black;
   }
 
-  .wysihtml5-command-active {
+  .wysihtml5-command-active, .wysihtml5-action-active {
     font-weight: bold;
   }
 
@@ -117,7 +117,7 @@
     padding: 0 0.2em;
     margin: 1px 0;
   }
-  .toolbar a.wysihtml5-command-active {
+  .toolbar a.wysihtml5-command-active, .toolbar .wysihtml5-action-active {
     background: #222;
     color: white;
   }
@@ -256,7 +256,7 @@ <h1>wysihtml5 - Advanced Editor Example</h1>
       </div>
 
       <div class="block">
-        <a data-wysihtml5-action="showSource">HTML</a>
+        <a data-wysihtml5-action="change_view">HTML</a>
       </div>
 
       <div data-wysihtml5-dialog="createLink" style="display: none;">
@@ -374,7 +374,7 @@ <h1>This content is not editable</h1>
         <a data-wysihtml5-command="redo">redo</a>
       </div>
       <div class="block">
-        <a data-wysihtml5-action="showSource">HTML</a>
+        <a data-wysihtml5-action="change_view">HTML</a>
       </div>
 
       <div class="block">
@@ -474,4 +474,4 @@ <h2>Events:</h2>
 
   });
 
-</script>
+</script>

src/editor.js

@@ -119,7 +119,9 @@
 
     handleBeforeLoad: function() {
         if (!this.config.noTextarea) {
-            this.synchronizer = new wysihtml5.views.Synchronizer(this, this.textarea, this.composer);
+          this.synchronizer = new wysihtml5.views.Synchronizer(this, this.textarea, this.composer);
+        } else {
+          this.sourceView = new wysihtml5.views.SourceView(this, this.composer);
         }
         if (this.config.toolbar) {
           this.toolbar = new wysihtml5.toolbar.Toolbar(this, this.config.toolbar, this.config.showToolbarAfterInit);

src/toolbar/toolbar.js

@@ -155,12 +155,10 @@
     execAction: function(action) {
       var editor = this.editor;
       if (action === "change_view") {
-        if (editor.textarea) {
-            if (editor.currentView === editor.textarea) {
-              editor.fire("change_view", "composer");
-            } else {
-              editor.fire("change_view", "textarea");
-            }
+        if (editor.currentView === editor.textarea || editor.currentView === "source") {
+          editor.fire("change_view", "composer");
+        } else {
+          editor.fire("change_view", "textarea");
         }
       }
       if (action == "showSource") {
@@ -225,17 +223,15 @@
 
       editor.on("change_view", function(currentView) {
         // Set timeout needed in order to let the blur event fire first
-        if (editor.textarea) {
-            setTimeout(function() {
-              that.commandsDisabled = (currentView !== "composer");
-              that._updateLinkStates();
-              if (that.commandsDisabled) {
-                dom.addClass(container, CLASS_NAME_COMMANDS_DISABLED);
-              } else {
-                dom.removeClass(container, CLASS_NAME_COMMANDS_DISABLED);
-              }
-            }, 0);
-        }
+          setTimeout(function() {
+            that.commandsDisabled = (currentView !== "composer");
+            that._updateLinkStates();
+            if (that.commandsDisabled) {
+              dom.addClass(container, CLASS_NAME_COMMANDS_DISABLED);
+            } else {
+              dom.removeClass(container, CLASS_NAME_COMMANDS_DISABLED);
+            }
+          }, 0);
       });
     },
 
@@ -316,7 +312,7 @@
         action = actionMapping[i];
 
         if (action.name === "change_view") {
-          action.state = this.editor.currentView === this.editor.textarea;
+          action.state = this.editor.currentView === this.editor.textarea || this.editor.currentView === "source";
           if (action.state) {
             dom.addClass(action.link, CLASS_NAME_ACTION_ACTIVE);
           } else {

src/views/sourceview.js

@@ -0,0 +1,55 @@
+(function(wysihtml5) {
+
+  wysihtml5.views.SourceView = Base.extend(
+    /** @scope wysihtml5.views.SourceView.prototype */ {
+
+    constructor: function(editor, composer) {
+      this.editor   = editor;
+      this.composer = composer;
+
+      this._observe();
+    },
+
+    switchToTextarea: function(shouldParseHtml) {
+      var composerStyles = this.composer.win.getComputedStyle(this.composer.element),
+          width = parseFloat(composerStyles.width),
+          height = Math.max(parseFloat(composerStyles.height), 100);
+
+      if (!this.textarea) {
+        this.textarea = this.composer.doc.createElement('textarea');
+        this.textarea.className = "wysihtml5-source-view";
+      }
+      this.textarea.style.width = width + 'px';
+      this.textarea.style.height = height + 'px';
+      this.textarea.value = this.editor.getValue(shouldParseHtml, true);
+      this.composer.element.parentNode.insertBefore(this.textarea, this.composer.element);
+      this.editor.currentView = "source";
+      this.composer.element.style.display = 'none';
+    },
+
+    switchToComposer: function(shouldParseHtml) {
+      var textareaValue = this.textarea.value;
+      if (textareaValue) {
+        this.composer.setValue(textareaValue, shouldParseHtml);
+      } else {
+        this.composer.clear();
+        this.editor.fire("set_placeholder");
+      }
+      this.textarea.parentNode.removeChild(this.textarea);
+      this.editor.currentView = this.composer;
+      this.composer.element.style.display = '';
+    },
+
+    _observe: function() {
+      this.editor.on("change_view", function(view) {
+        if (view === "composer") {
+          this.switchToComposer(true);
+        } else if (view === "textarea") {
+          this.switchToTextarea(true);
+        }
+      }.bind(this));
+    }
+
+  });
+
+})(wysihtml5);

test/index.html

@@ -116,6 +116,7 @@
 <script src="../src/views/composer.style.js"></script>
 <script src="../src/views/composer.observe.js"></script>
 <script src="../src/views/synchronizer.js"></script>
+<script src="../src/views/sourceview.js"></script>
 <script src="../src/views/textarea.js"></script>
 
 <script src="../src/toolbar/dialog.js"></script>