bootstrap-wysihtml5-rails 0.2.4 → 0.2.5

data/Rakefile

@@ -18,4 +18,5 @@ end
 desc "Publish the gem"
 task 'publish' do
   system("gem push bootstrap-wysihtml5-rails-#{BootstrapWysihtml5Rails::Rails::VERSION}.gem")
+  system("git push")
 end

data/lib/bootstrap-wysihtml5-rails/version.rb

@@ -1,5 +1,5 @@
 module BootstrapWysihtml5Rails
   module Rails
-    VERSION = "0.2.4"
+    VERSION = "0.2.5"
   end
 end

data/vendor/assets/javascripts/bootstrap-wysihtml5.js

@@ -19,14 +19,54 @@
 							    //,+ "<a class='btn' data-wysihtml5-command='underline' title='CTRL+U'>Underline</a>" 
 							+ "</div>" 
 						+ "</li>",
-		"lists": 		"<li>" 
-							+ "<div class='btn-group'>" 
-						    	+ "<a class='btn' data-wysihtml5-command='insertUnorderedList' title='Unordered List'><i class='icon-list'></i></a>" 
-							    + "<a class='btn' data-wysihtml5-command='insertOrderedList' title='Ordered List'><i class='icon-th-list'></i></a>" 
-							    + "<a class='btn' data-wysihtml5-command='Outdent' title='Outdent'><i class='icon-indent-right'></i></a>"  							    
-							    + "<a class='btn' data-wysihtml5-command='Indent' title='Indent'><i class='icon-indent-left'></i></a>" 
-							+ "</div>" 
-						+ "</li>",
+		"lists": 	"<li>" 
+						+ "<div class='btn-group'>" 
+					    	+ "<a class='btn' data-wysihtml5-command='insertUnorderedList' title='Unordered List'><i class='icon-list'></i></a>" 
+						    + "<a class='btn' data-wysihtml5-command='insertOrderedList' title='Ordered List'><i class='icon-th-list'></i></a>" 
+						    + "<a class='btn' data-wysihtml5-command='Outdent' title='Outdent'><i class='icon-indent-right'></i></a>"  							    
+						    + "<a class='btn' data-wysihtml5-command='Indent' title='Indent'><i class='icon-indent-left'></i></a>" 
+						+ "</div>" 
+					+ "</li>",
+
+		"link": 	"<li>" 
+						
+						+ "<div class='bootstrap-wysihtml5-insert-link-modal modal hide fade'>"
+							+ "<div class='modal-header'>"
+							+ "<a class='close' data-dismiss='modal'>×</a>"
+							  + "<h3>Insert Link</h3>"
+							+ "</div>"
+							+ "<div class='modal-body'>"
+							  + "<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>"
+							+ "</div>"
+							+ "<div class='modal-footer'>"
+							  + "<a href='#' class='btn' data-dismiss='modal'>Cancel</a>"
+							  + "<a href='#' class='btn btn-primary' data-dismiss='modal'>Insert link</a>"
+							+ "</div>"
+						+ "</div>"
+
+				    	+ "<a class='btn' data-wysihtml5-command='createLink' title='Link'><i class='icon-share'></i></a>" 
+
+					+ "</li>",
+
+			"image": "<li>" 
+						
+						+ "<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>"
+							+ "<div class='modal-header'>"
+							+ "<a class='close' data-dismiss='modal'>×</a>"
+							  + "<h3>Insert Image</h3>"
+							+ "</div>"
+							+ "<div class='modal-body'>"
+							  + "<input value='http://' class='bootstrap-wysihtml5-insert-link-url input-xlarge'>"
+							+ "</div>"
+							+ "<div class='modal-footer'>"
+							  + "<a href='#' class='btn' data-dismiss='modal'>Cancel</a>"
+							  + "<a href='#' class='btn btn-primary' data-dismiss='modal'>Insert image</a>"
+							+ "</div>"
+						+ "</div>"
+
+						+ "<a class='btn' data-wysihtml5-command='insertImage' title='Insert image'><i class='icon-picture'></i></a>" 
+
+					+ "</li>",
 
 		"html": 
 						"<li>"
@@ -41,6 +81,8 @@
 		"emphasis": true,
 		"lists": true,
 		"html": false,
+		"link": true,
+		"image": false,
 		events: {},
 		parserRules: {
 			tags: {
@@ -53,6 +95,14 @@
 				"h1": {},
 				"h2": {},
 				"u": 1,
+				"img": {
+					"check_attributes": {
+			            "width": "numbers",
+			            "alt": "alt",
+			            "src": "url",
+			            "height": "numbers"
+			        }
+				},
 				"a":  {
 					set_attributes: {
 						target: "_blank",
@@ -70,6 +120,8 @@
 		this.el = el;
 		this.toolbar = this.createToolbar(el, options || defaultOptions);
 		this.editor =  this.createEditor(options);
+		
+		window.editor = this.editor;
 
   		$('iframe.wysihtml5-sandbox').each(function(i, el){
 			$(el.contentWindow).off('focus.wysihtml5').on({
@@ -78,6 +130,8 @@
 			   }
 			});
 		});
+
+
 	};
 
 	Wysihtml5.prototype = {
@@ -105,11 +159,12 @@
 		},
 		
 		createToolbar: function(el, options) {
+			var self = this;
 			var toolbar = $("<ul/>", {
-					id : el.attr('id') + "-wysihtml5-toolbar",
-					class : "wysihtml5-toolbar",
-					style: "display:none"
-				});
+				'id' : el.attr('id') + "-wysihtml5-toolbar",
+				'class' : "wysihtml5-toolbar",
+				'style': "display:none"
+			});
 
 			for(var key in defaultOptions) {
 				var value = false;
@@ -126,10 +181,15 @@
 					toolbar.append(templates[key]);
 
 					if(key == "html") {
-						var changeViewSelector = "a[data-wysihtml5-action='change_view']";
-						toolbar.find(changeViewSelector).click(function(e) {
-							toolbar.find('a.btn').not(changeViewSelector).toggleClass('disabled');
-						});
+						this.initHtml(toolbar);
+					}
+
+					if(key == "link") {
+						this.initInsertLink(toolbar);
+					}
+
+					if(key == "image") {
+						this.initInsertImage(toolbar);
 					}
 				}
 			}
@@ -144,6 +204,91 @@
 			this.el.before(toolbar);
 			
 			return toolbar;
+		},
+
+		initHtml: function(toolbar) {
+			var changeViewSelector = "a[data-wysihtml5-action='change_view']";
+			toolbar.find(changeViewSelector).click(function(e) {
+				toolbar.find('a.btn').not(changeViewSelector).toggleClass('disabled');
+			});
+		},
+
+		initInsertImage: function(toolbar) {
+			var self = this;
+			var insertImageModal = toolbar.find('.bootstrap-wysihtml5-insert-image-modal');
+			var urlInput = insertImageModal.find('.bootstrap-wysihtml5-insert-image-url');
+			var insertButton = insertImageModal.find('a.btn-primary');
+
+			var insertImage = function() { 
+				var url = urlInput.val();
+				urlInput.val('');
+				self.editor.composer.commands.exec("createLink", { 
+					href: url, 
+					target: "_blank", 
+					rel: "nofollow" 
+				});
+			};
+			
+			urlInput.keypress(function(e) {
+				if(e.which == 13) {
+					insertImage();
+					insertImageModal.modal('hide');
+				}
+			});
+
+			insertButton.click(insertImage);
+
+			insertImageModal.on('shown', function() {
+				urlInput.focus();
+			});
+
+			insertImageModal.on('hide', function() { 
+				self.editor.currentView.element.focus();
+			});
+
+			toolbar.find('a[data-wysihtml5-command=insertImage]').click(function() {
+				insertImageModal.modal('show');
+			});
+		},
+
+		initInsertLink: function(toolbar) {
+			var self = this;
+			var insertLinkModal = toolbar.find('.bootstrap-wysihtml5-insert-link-modal');
+			var urlInput = insertLinkModal.find('.bootstrap-wysihtml5-insert-link-url');
+			var insertButton = insertLinkModal.find('a.btn-primary');
+			var initialValue = urlInput.val();
+
+			var insertLink = function() { 
+				var url = urlInput.val();
+				urlInput.val(initialValue);
+				self.editor.composer.commands.exec("createLink", { 
+					href: url, 
+					target: "_blank", 
+					rel: "nofollow" 
+				});
+			};
+			var pressedEnter = false;
+
+			urlInput.keypress(function(e) {
+				if(e.which == 13) {
+					insertLink();
+					insertLinkModal.modal('hide');
+				}
+			});
+
+			insertButton.click(insertLink);
+
+			insertLinkModal.on('shown', function() {
+				urlInput.focus();
+			});
+
+			insertLinkModal.on('hide', function() { 
+				self.editor.currentView.element.focus();
+			});
+
+			toolbar.find('a[data-wysihtml5-command=createLink]').click(function() {
+				insertLinkModal.modal('show');
+			});
 		}
 	};
 
@@ -156,4 +301,4 @@
 
   	$.fn.wysihtml5.Constructor = Wysihtml5;
 
-}(window.jQuery, window.wysihtml5);
+}(window.jQuery, window.wysihtml5);

data/vendor/assets/javascripts/wysihtml5.js

@@ -1,15 +1,15 @@
 /**
- * @license wysihtml5 v0.3.0_rc1
+ * @license wysihtml5 v0.3.0_rc2
  * https://github.com/xing/wysihtml5
  *
  * Author: Christopher Blum (https://github.com/tiff)
  *
- * Copyright (C) 2011 XING AG
- * Licensed under GNU General Public License
+ * Copyright (C) 2012 XING AG
+ * Licensed under the MIT license (MIT)
  *
  */
 var wysihtml5 = {
-  version: "0.3.0_rc1",
+  version: "0.3.0_rc2",
   
   // namespaces
   commands:   {},
@@ -3383,8 +3383,6 @@ Base = Base.extend({
 	}
 });/**
  * Detect browser support for specific features
- *
- * @author Christopher Blum <christopher.blum@xing.com>
  */
 wysihtml5.browser = (function() {
   var userAgent   = navigator.userAgent,
@@ -3393,6 +3391,7 @@ wysihtml5.browser = (function() {
       isIE        = userAgent.indexOf("MSIE")         !== -1 && userAgent.indexOf("Opera") === -1,
       isGecko     = userAgent.indexOf("Gecko")        !== -1 && userAgent.indexOf("KHTML") === -1,
       isWebKit    = userAgent.indexOf("AppleWebKit/") !== -1,
+      isChrome    = userAgent.indexOf("Chrome/")      !== -1,
       isOpera     = userAgent.indexOf("Opera/")       !== -1;
   
   function iosVersion(userAgent) {
@@ -3716,6 +3715,24 @@ wysihtml5.browser = (function() {
      */
     crashesWhenDefineProperty: function(property) {
       return isIE && (property === "XMLHttpRequest" || property === "XDomainRequest");
+    },
+    
+    /**
+     * IE is the only browser who fires the "focus" event not immediately when .focus() is called on an element
+     */
+    doesAsyncFocus: function() {
+      return isIE;
+    },
+    
+    /**
+     * In IE it's impssible for the user and for the selection library to set the caret after an <img> when it's the lastChild in the document
+     */
+    hasProblemsSettingCaretAfterImg: function() {
+      return isIE;
+    },
+    
+    hasUndoInContextMenu: function() {
+      return isGecko || isChrome || isOpera;
     }
   };
 })();wysihtml5.lang.array = function(arr) {
@@ -3905,7 +3922,7 @@ wysihtml5.browser = (function() {
  * Inspired by http://james.padolsey.com/javascript/find-and-replace-text-with-javascript/
  *
  * @param {Element} element Container element in which to search for urls
- * @author Christopher Blum <christopher.blum@xing.com>
+ *
  * @example
  *    <div id="text-container">Please click here: www.google.com</div>
  *    <script>wysihtml5.dom.autoLink(document.getElementById("text-container"));</script>
@@ -4089,7 +4106,6 @@ wysihtml5.dom.contains = (function() {
 })();/**
  * Converts an HTML fragment/element into a unordered/ordered list
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} element The element which should be turned into a list
  * @param {String} listType The list type in which to convert the tree (either "ul" or "ol")
  * @return {Element} The created list
@@ -4170,8 +4186,6 @@ wysihtml5.dom.convertToList = (function() {
 })();/**
  * Copy a set of attributes from one element to another
  *
- * @author Christopher Blum <christopher.blum@xing.com>
- *
  * @param {Array} attributesToCopy List of attributes which should be copied
  * @return {Object} Returns an object which offers the "from" method which can be invoked with the element where to
  *    copy the attributes from., this again returns an object which provides a method named "to" which can be invoked 
@@ -4210,8 +4224,6 @@ wysihtml5.dom.copyAttributes = function(attributesToCopy) {
  *
  * Interesting article on how to copy styles
  *
- * @author Christopher Blum <christopher.blum@xing.com>
- *
  * @param {Array} stylesToCopy List of styles which should be copied
  * @return {Object} Returns an object which offers the "from" method which can be invoked with the element where to
  *    copy the styles from., this again returns an object which provides a method named "to" which can be invoked 
@@ -4306,7 +4318,6 @@ wysihtml5.dom.copyAttributes = function(attributesToCopy) {
  * Fixing IE's inability to treat unknown elements (HTML5 section, article, ...) correctly
  * when inserted via innerHTML
  * 
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {String} html The html which should be wrapped in a dom element
  * @param {Obejct} [context] Document object of the context the html belongs to
  *
@@ -4368,7 +4379,6 @@ wysihtml5.dom.getAsDom = (function() {
  * Walks the dom tree from the given node up until it finds a match
  * Designed for optimal performance.
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} node The from which to check the parent nodes
  * @param {Object} matchingSet Object to match against (possible properties: nodeName, className, classRegExp)
  * @param {Number} [levels] How many parents should the function check up from the current node (defaults to 50)
@@ -4446,7 +4456,7 @@ wysihtml5.dom.getParentElement = (function() {
  *
  * @param {Element} element The element on which to retrieve the style
  * @param {String} property The CSS property to retrieve ("float", "display", "text-align", ...)
- * @author Christopher Blum <christopher.blum@xing.com>
+ *
  * @example
  *    wysihtml5.dom.getStyle("display").from(document.body);
  *    // => "block"
@@ -4485,11 +4495,11 @@ wysihtml5.dom.getStyle = (function() {
         // gives you the original "50%".
         // Opera supports both, currentStyle and window.getComputedStyle, that's why checking for currentStyle should have higher prio
         if (currentStyle) {
-            try {
+          try {
                 return currentStyle[camelizedProperty];
-            } catch(e) {
-                //ie fails for some reason. need to investigate
-            }
+          } catch(e) {
+            //ie will occasionally fail for unknown reasons. swallowing exception
+          }
         }
 
         var win                 = doc.defaultView || doc.parentWindow,
@@ -4518,7 +4528,6 @@ wysihtml5.dom.getStyle = (function() {
  * Optimized for being heavily executed
  * Unleashes the power of live node lists
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Object} doc The document object of the context where to check
  * @param {String} tagName Upper cased tag name
  * @example
@@ -4546,7 +4555,6 @@ wysihtml5.dom.hasElementWithTagName = (function() {
  * Optimized for being heavily executed
  * Unleashes the power of live node lists
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Object} doc The document object of the context where to check
  * @param {String} tagName Upper cased tag name
  * @example
@@ -4614,8 +4622,6 @@ wysihtml5.dom.insert = function(elementToInsert) {
 };/**
  * Method to set dom events
  *
- * @author Christopher Blum <christopher.blum@xing.com>
- *
  * @example
  *    wysihtml5.dom.observe(iframe.contentWindow.document.body, ["focus", "blur"], function() { ... });
  */
@@ -4668,8 +4674,6 @@ wysihtml5.dom.observe = function(element, eventNames, handler) {
  * HTML Sanitizer
  * Rewrites the HTML based on given rules
  *
- * @author Christopher Blum <christopher.blum@xing.com>
- *
  * @param {Element|String} elementOrHtml HTML String to be sanitized OR element whose content should be sanitized
  * @param {Object} [rules] List of rules for rewriting the HTML, if there's no rule for an element it will
  *    be converted to a "span". Each rule is a key/value pair where key is the tag to convert, and value the
@@ -5115,7 +5119,6 @@ wysihtml5.dom.parse = (function() {
 })();/**
  * Checks for empty text node childs and removes them
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} node The element in which to cleanup
  * @example
  *    wysihtml5.dom.removeEmptyTextNodes(element);
@@ -5135,7 +5138,6 @@ wysihtml5.dom.removeEmptyTextNodes = function(node) {
 /**
  * Renames an element (eg. a <div> to a <p>) and keeps its childs
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} element The list element which should be renamed
  * @param {Element} newNodeName The desired tag name
  *
@@ -5170,7 +5172,6 @@ wysihtml5.dom.renameElement = function(element, newNodeName) {
 };/**
  * Takes an element, removes it and replaces it with it's childs
  * 
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Object} node The node which to replace with it's child nodes
  * @example
  *    <div id="foo">
@@ -5201,7 +5202,6 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
 /**
  * Unwraps an unordered/ordered list
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} element The list element which should be unwrapped
  *
  * @example
@@ -5285,10 +5285,8 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
  *    - therefore the "allow-scripts" flag is needed, which then would deactivate any security, as the js executed inside the iframe
  *      can do anything as if the sandbox attribute wasn't set
  *
- * @author Christopher Blum <christopher.blum@xing.com>
- *
  * @param {Function} [readyCallback] Method that gets invoked when the sandbox is ready
- * @param {Object} [config] Optional parameters, see defaultConfig property for more info
+ * @param {Object} [config] Optional parameters
  *
  * @example
  *    new wysihtml5.dom.Sandbox(function(sandbox) {
@@ -5299,9 +5297,6 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
   var /**
        * Default configuration
        */
-      defaultConfig       = {
-        uaCompatible: "IE=Edge"   // X-UA-Compatible meta tag value (Document compatibility mode)
-      },
       doc                 = document,
       /**
        * Properties to unset/protect on the window object
@@ -5332,7 +5327,7 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
 
     constructor: function(readyCallback, config) {
       this.callback = readyCallback || wysihtml5.EMPTY_FUNCTION;
-      this.config   = wysihtml5.lang.object({}).merge(defaultConfig).merge(config).get();
+      this.config   = wysihtml5.lang.object({}).merge(config).get();
       this.iframe   = this._createIframe();
     },
     
@@ -5429,12 +5424,11 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
 
       var that           = this,
           iframeWindow   = iframe.contentWindow,
-          iframeDocument = iframe.contentDocument || iframe.contentWindow.document,
+          iframeDocument = iframe.contentWindow.document,
           charset        = doc.characterSet || doc.charset || "utf-8",
           sandboxHtml    = this._getHtml({
             charset:      charset,
-            stylesheets:  this.config.stylesheets,
-            uaCompatible: this.config.uaCompatible
+            stylesheets:  this.config.stylesheets
           });
 
       // Create the basic dom tree including proper DOCTYPE and charset
@@ -5442,8 +5436,8 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
       iframeDocument.write(sandboxHtml);
       iframeDocument.close();
 
-      this.getWindow = function() { return iframeWindow; };
-      this.getDocument = function() { return iframeDocument; };
+      this.getWindow = function() { return iframe.contentWindow; };
+      this.getDocument = function() { return iframe.contentWindow.document; };
 
       // Catch js errors and pass them to the parent's onerror event
       // addEventListener("error") doesn't work properly in some browsers
@@ -5496,7 +5490,7 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
 
       return wysihtml5.lang.string(
         '<!DOCTYPE html><html><head>'
-        + '<meta http-equiv="X-UA-Compatible" content="#{uaCompatible}"><meta charset="#{charset}">#{stylesheets}</head>'
+        + '<meta charset="#{charset}">#{stylesheets}</head>'
         + '<body></body></html>'
       ).interpolate(templateVars);
     },
@@ -5567,8 +5561,6 @@ wysihtml5.dom.replaceWithChildNodes = function(node) {
  *    - div[contentEditable] elements don't support it
  *    - older browsers (such as IE8 and Firefox 3.6) don't support it at all
  *
- * @author Christopher Blum <christopher.blum@xing.com>
- *
  * @param {Object} parent Instance of main wysihtml5.Editor class
  * @param {Element} view Instance of wysihtml5.views.* class
  * @param {String} placeholderText
@@ -5679,7 +5671,6 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
 })();/**
  * IE and Opera leave an empty paragraph in the contentEditable element after clearing it
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Object} contentEditableElement The contentEditable element to observe for clearing events
  * @exaple
  *    wysihtml5.quirks.ensureProperClearing(myContentEditableElement);
@@ -5699,8 +5690,8 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
       }, 0);
     };
 
-    return function(contentEditableElement) {
-      dom.observe(contentEditableElement, ["cut", "keydown"], clearIfNecessary);
+    return function(composer) {
+      dom.observe(composer.element, ["cut", "keydown"], clearIfNecessary);
     };
   })();
 
@@ -5709,7 +5700,6 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
   /**
    * In Opera when the caret is in the first and only item of a list (<ul><li>|</li></ul>) and the list is the first child of the contentEditable element, it's impossible to delete the list by hitting backspace
    *
-   * @author Christopher Blum <christopher.blum@xing.com>
    * @param {Object} contentEditableElement The contentEditable element to observe for clearing events
    * @exaple
    *    wysihtml5.quirks.ensureProperClearing(myContentEditableElement);
@@ -5745,14 +5735,14 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
       list.parentNode.removeChild(list);
     };
 
-    return function(contentEditableElement) {
-      dom.observe(contentEditableElement, "keydown", function(event) {
+    return function(composer) {
+      dom.observe(composer.element, "keydown", function(event) {
         if (event.keyCode !== wysihtml5.BACKSPACE_KEY) {
           return;
         }
 
-        var element = wysihtml5.selection.getSelectedNode();
-        clearIfNecessary(element, contentEditableElement);
+        var element = composer.selection.getSelectedNode();
+        clearIfNecessary(element, composer.element);
       });
     };
   })();
@@ -5792,8 +5782,6 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
  *    - Opera & IE insert new <p> on return
  *    - Chrome & Safari insert new <div> on return
  *    - Firefox inserts <br> on return (yippie!)
- 
- * @author Christopher Blum <christopher.blum@xing.com>
  *
  * @param {Element} element
  *
@@ -5805,72 +5793,71 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
       USE_NATIVE_LINE_BREAK_WHEN_CARET_INSIDE_TAGS  = ["LI", "P", "H1", "H2", "H3", "H4", "H5", "H6"],
       LIST_TAGS                                     = ["UL", "OL", "MENU"];
   
-  function unwrap(selectedNode) {
-    var parentElement = dom.getParentElement(selectedNode, { nodeName: ["P", "DIV"] }, 2);
-    if (!parentElement) {
-      return;
-    }
-    
-    var invisibleSpace = document.createTextNode(wysihtml5.INVISIBLE_SPACE);
-    dom.insert(invisibleSpace).before(parentElement);
-    dom.replaceWithChildNodes(parentElement);
-    wysihtml5.selection.selectNode(invisibleSpace);
-  }
-  
-  function keyDown(event) {
-    var keyCode = event.keyCode;
-    if (event.shiftKey || (keyCode !== wysihtml5.ENTER_KEY && keyCode !== wysihtml5.BACKSPACE_KEY)) {
-      return;
+  wysihtml5.quirks.insertLineBreakOnReturn = function(composer) {
+    function unwrap(selectedNode) {
+      var parentElement = dom.getParentElement(selectedNode, { nodeName: ["P", "DIV"] }, 2);
+      if (!parentElement) {
+        return;
+      }
+
+      var invisibleSpace = document.createTextNode(wysihtml5.INVISIBLE_SPACE);
+      dom.insert(invisibleSpace).before(parentElement);
+      dom.replaceWithChildNodes(parentElement);
+      composer.selection.selectNode(invisibleSpace);
     }
-    
-    var element         = event.target,
-        selectedNode    = wysihtml5.selection.getSelectedNode(),
-        blockElement    = dom.getParentElement(selectedNode, { nodeName: USE_NATIVE_LINE_BREAK_WHEN_CARET_INSIDE_TAGS }, 4);
-    if (blockElement) {
-      // Some browsers create <p> elements after leaving a list
-      // check after keydown of backspace and return whether a <p> got inserted and unwrap it
-      if (blockElement.nodeName === "LI" && (keyCode === wysihtml5.ENTER_KEY || keyCode === wysihtml5.BACKSPACE_KEY)) {
-        setTimeout(function() {
-          var selectedNode = wysihtml5.selection.getSelectedNode(),
-              list,
-              div;
-          if (!selectedNode) {
-            return;
-          }
-          
-          list = dom.getParentElement(selectedNode, {
-            nodeName: LIST_TAGS
-          }, 2);
-          
-          if (list) {
-            return;
-          }
-          
-          unwrap(selectedNode);
-        }, 0);
-      } else if (blockElement.nodeName.match(/H[1-6]/) && keyCode === wysihtml5.ENTER_KEY) {
-        setTimeout(function() {
-          unwrap(wysihtml5.selection.getSelectedNode());
-        }, 0);
-      } 
-      return;
+
+    function keyDown(event) {
+      var keyCode = event.keyCode;
+      if (event.shiftKey || (keyCode !== wysihtml5.ENTER_KEY && keyCode !== wysihtml5.BACKSPACE_KEY)) {
+        return;
+      }
+
+      var element         = event.target,
+          selectedNode    = composer.selection.getSelectedNode(),
+          blockElement    = dom.getParentElement(selectedNode, { nodeName: USE_NATIVE_LINE_BREAK_WHEN_CARET_INSIDE_TAGS }, 4);
+      if (blockElement) {
+        // Some browsers create <p> elements after leaving a list
+        // check after keydown of backspace and return whether a <p> got inserted and unwrap it
+        if (blockElement.nodeName === "LI" && (keyCode === wysihtml5.ENTER_KEY || keyCode === wysihtml5.BACKSPACE_KEY)) {
+          setTimeout(function() {
+            var selectedNode = composer.selection.getSelectedNode(),
+                list,
+                div;
+            if (!selectedNode) {
+              return;
+            }
+
+            list = dom.getParentElement(selectedNode, {
+              nodeName: LIST_TAGS
+            }, 2);
+
+            if (list) {
+              return;
+            }
+
+            unwrap(selectedNode);
+          }, 0);
+        } else if (blockElement.nodeName.match(/H[1-6]/) && keyCode === wysihtml5.ENTER_KEY) {
+          setTimeout(function() {
+            unwrap(composer.selection.getSelectedNode());
+          }, 0);
+        } 
+        return;
+      }
+
+      if (keyCode === wysihtml5.ENTER_KEY && !wysihtml5.browser.insertsLineBreaksOnReturn()) {
+        composer.commands.exec("insertLineBreak");
+        event.preventDefault();
+      }
     }
     
-    if (keyCode === wysihtml5.ENTER_KEY && !wysihtml5.browser.insertsLineBreaksOnReturn()) {
-      wysihtml5.commands.exec("insertLineBreak");
-      event.preventDefault();
-    }
-  }
-  
-  wysihtml5.quirks.insertLineBreakOnReturn = function(element) {
     // keypress doesn't fire when you hit backspace
-    dom.observe(element.ownerDocument, "keydown", keyDown);
+    dom.observe(composer.element.ownerDocument, "keydown", keyDown);
   };
 })(wysihtml5);/**
  * Force rerendering of a given element
  * Needed to fix display misbehaviors of IE
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} element The element object which needs to be rerendered
  * @example
  *    wysihtml5.quirks.redraw(document.body);
@@ -5889,7 +5876,13 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
       doc.execCommand("italic", false, null);
     } catch(e) {}
   };
-})(wysihtml5);(function(wysihtml5) {
+})(wysihtml5);/**
+ * Selection API
+ *
+ * @example
+ *    var selection = new wysihtml5.Selection(editor);
+ */
+(function(wysihtml5) {
   var dom = wysihtml5.dom;
   
   function _getCumulativeOffsetTop(element) {
@@ -5903,18 +5896,15 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
     return top;
   }
   
-  wysihtml5.selection = {
-    
-    /**
-     * Setup selection for editor
-     *
-     * @param {Object} doc Document object of the context
-     */
-    initialize: function(doc) {
+  wysihtml5.Selection = Base.extend(
+    /** @scope wysihtml5.Selection.prototype */ {
+    constructor: function(editor) {
       // Make sure that our external range library is initialized
       window.rangy.init();
       
-      this.doc = doc;
+      this.editor   = editor;
+      this.composer = editor.composer;
+      this.doc      = this.composer.doc;
     },
     
     /**
@@ -5928,7 +5918,7 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
     },
 
     /**
-     * Restore a selection retrieved via wysihtml5.selection.getBookmark
+     * Restore a selection retrieved via wysihtml5.Selection.prototype.getBookmark
      *
      * @param {Object} bookmark An object that represents the current selection
      */
@@ -5945,7 +5935,7 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
      *
      * @param {Object} node The element or text node where to position the caret in front of
      * @example
-     *    wysihtml5.selection.setBefore(myElement);
+     *    selection.setBefore(myElement);
      */
     setBefore: function(node) {
       var range = rangy.createRange(this.doc);
@@ -5959,7 +5949,7 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
      *
      * @param {Object} node The element or text node where to position the caret in front of
      * @example
-     *    wysihtml5.selection.setBefore(myElement);
+     *    selection.setBefore(myElement);
      */
     setAfter: function(node) {
       var range = rangy.createRange(this.doc);
@@ -5973,7 +5963,7 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
      *
      * @param {Element} node The node/element to select
      * @example
-     *    wysihtml5.selection.selectNode(document.getElementById("my-image"));
+     *    selection.selectNode(document.getElementById("my-image"));
      */
     selectNode: function(node) {
       var range           = rangy.createRange(this.doc),
@@ -6011,7 +6001,7 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
      * @param {Boolean} [controlRange] (only IE) Whether it should return the selected ControlRange element when the selection type is a "ControlRange"
      * @return {Object} The node that contains the caret
      * @example
-     *    var nodeThatContainsCaret = wysihtml5.selection.getSelectedNode();
+     *    var nodeThatContainsCaret = selection.getSelectedNode();
      */
     getSelectedNode: function(controlRange) {
       var selection,
@@ -6128,7 +6118,7 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
      *
      * @param {String} html HTML string to insert
      * @example
-     *    wysihtml5.selection.insertHTML("<p>foobar</p>");
+     *    selection.insertHTML("<p>foobar</p>");
      */
     insertHTML: function(html) {
       var range     = rangy.createRange(this.doc),
@@ -6145,7 +6135,7 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
      *
      * @param {Object} node HTML string to insert
      * @example
-     *    wysihtml5.selection.insertNode(document.createTextNode("foobar"));
+     *    selection.insertNode(document.createTextNode("foobar"));
      */
     insertNode: function(node) {
       var range = this.getRange();
@@ -6180,11 +6170,10 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
      * Scroll the current caret position into the view
      * FIXME: This is a bit hacky, there might be a smarter way of doing this
      *
-     * @param {Object} element A scrollable element in which the caret is currently positioned
      * @example
-     *    wysihtml5.selection.scrollIntoView(element);
+     *    selection.scrollIntoView();
      */
-    scrollIntoView: function(element) {
+    scrollIntoView: function() {
       var doc           = this.doc,
           hasScrollBars = doc.documentElement.scrollHeight > doc.documentElement.offsetHeight,
           tempElement   = doc._wysihtml5ScrollIntoViewElement = doc._wysihtml5ScrollIntoViewElement || (function() {
@@ -6199,8 +6188,8 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
         this.insertNode(tempElement);
         offsetTop = _getCumulativeOffsetTop(tempElement);
         tempElement.parentNode.removeChild(tempElement);
-        if (offsetTop > element.scrollTop) {
-          element.scrollTop = offsetTop;
+        if (offsetTop > doc.body.scrollTop) {
+          doc.body.scrollTop = offsetTop;
         }
       }
     },
@@ -6302,18 +6291,16 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
           selection = rangy.getSelection(win);
       return selection.setSingleRange(range);
     }
-  };
+  });
   
 })(wysihtml5);
-
 /**
- * @author Christopher Blum <christopher.blum@xing.com> to match WYSIHTML5 logic
- * in order to be able ...
+ * Inspired by the rangy CSS Applier module written by Tim Down and licensed under the MIT license.
+ * http://code.google.com/p/rangy/
+ *
+ * changed in order to be able ...
  *    - to use custom tags
  *    - to detect and replace similar css classes via reg exp
- *
- * Inspired by the rangy CSS Applier module written by Tim Down and  licensed under the MIT license.
- * http://code.google.com/p/rangy/
  */
 (function(wysihtml5, rangy) {
   var defaultTagName = "span";
@@ -6742,22 +6729,23 @@ wysihtml5.quirks.cleanPastedHTML = (function() {
 })(wysihtml5, rangy);/**
  * Rich Text Query/Formatting Commands
  * 
- * @author Christopher Blum <christopher.blum@xing.com>
+ * @example
+ *    var commands = new wysihtml5.Commands(editor);
  */
-wysihtml5.commands = {
-  initialize: function(editor) {
+wysihtml5.Commands = Base.extend(
+  /** @scope wysihtml5.Commands.prototype */ {
+  constructor: function(editor) {
     this.editor   = editor;
-    this.element  = editor.composer.element;
-    this.doc      = this.element.ownerDocument;
+    this.composer = editor.composer;
+    this.doc      = this.composer.doc;
   },
   
   /**
    * Check whether the browser supports the given command
    *
-   * @param {Object} element The element which has contentEditable=true
    * @param {String} command The command string which to check (eg. "bold", "italic", "insertUnorderedList")
    * @example
-   *    wysihtml5.commands.supports("createLink");
+   *    commands.supports("createLink");
    */
   support: function(command) {
     return wysihtml5.browser.supportsCommand(this.doc, command);
@@ -6766,20 +6754,19 @@ wysihtml5.commands = {
   /**
    * Check whether the browser supports the given command
    *
-   * @param {Object} element The element which has contentEditable=true
    * @param {String} command The command string which to execute (eg. "bold", "italic", "insertUnorderedList")
    * @param {String} [value] The command value parameter, needed for some commands ("createLink", "insertImage", ...), optional for commands that don't require one ("bold", "underline", ...)
    * @example
-   *    wysihtml5.commands.exec("insertImage", "http://a1.twimg.com/profile_images/113868655/schrei_twitter_reasonably_small.jpg");
+   *    commands.exec("insertImage", "http://a1.twimg.com/profile_images/113868655/schrei_twitter_reasonably_small.jpg");
    */
   exec: function(command, value) {
-    var obj     = this[command],
+    var obj     = wysihtml5.commands[command],
         method  = obj && obj.exec;
     
     this.editor.fire("beforecommand:composer");
     
     if (method) {
-      return method.call(obj, this.element, command, value);
+      return method.call(obj, this.composer, command, value);
     } else {
       try {
         // try/catch for buggy firefox
@@ -6794,18 +6781,17 @@ wysihtml5.commands = {
    * Check whether the current command is active
    * If the caret is within a bold text, then calling this with command "bold" should return true
    *
-   * @param {Object} element The element which has contentEditable=true
    * @param {String} command The command string which to check (eg. "bold", "italic", "insertUnorderedList")
    * @param {String} [commandValue] The command value parameter (eg. for "insertImage" the image src)
    * @return {Boolean} Whether the command is active
    * @example
-   *    var isCurrentSelectionBold = wysihtml5.commands.state("bold");
+   *    var isCurrentSelectionBold = commands.state("bold");
    */
   state: function(command, commandValue) {
-    var obj     = this[command],
+    var obj     = wysihtml5.commands[command],
         method  = obj && obj.state;
     if (method) {
-      return method.call(obj, this.element, command, commandValue);
+      return method.call(obj, this.composer, command, commandValue);
     } else {
       try {
         // try/catch for buggy firefox
@@ -6819,17 +6805,16 @@ wysihtml5.commands = {
   /**
    * Get the current command's value
    *
-   * @param {Object} element The element which has contentEditable=true
    * @param {String} command The command string which to check (eg. "formatBlock")
    * @return {String} The command value
    * @example
-   *    var currentBlockElement = wysihtml5.commands.value("formatBlock");
+   *    var currentBlockElement = commands.value("formatBlock");
    */
   value: function(command) {
-    var obj     = this[command],
+    var obj     = wysihtml5.commands[command],
         method  = obj && obj.value;
     if (method) {
-      method(this.element, command);
+      return method.call(obj, this.composer, command);
     } else {
       try {
         // try/catch for buggy firefox
@@ -6839,21 +6824,21 @@ wysihtml5.commands = {
       }
     }
   }
-};(function(wysihtml5) {
+});(function(wysihtml5) {
   var undef;
   
   wysihtml5.commands.bold = {
-    exec: function(element, command) {
-      return wysihtml5.commands.formatInline.exec(element, command, "b");
+    exec: function(composer, command) {
+      return wysihtml5.commands.formatInline.exec(composer, command, "b");
     },
 
-    state: function(element, command, color) {
+    state: function(composer, command, color) {
       // element.ownerDocument.queryCommandState("bold") results:
       // firefox: only <b>
       // chrome:  <b>, <strong>, <h1>, <h2>, ...
       // ie:      <b>, <strong>
       // opera:   <b>, <strong>
-      return wysihtml5.commands.formatInline.state(element, command, "b");
+      return wysihtml5.commands.formatInline.state(composer, command, "b");
     },
 
     value: function() {
@@ -6867,9 +6852,9 @@ wysihtml5.commands = {
       NODE_NAME = "A",
       dom       = wysihtml5.dom;
   
-  function _removeFormat(element, anchors) {
-    var length = anchors.length,
-        i      = 0,
+  function _removeFormat(composer, anchors) {
+    var length  = anchors.length,
+        i       = 0,
         anchor,
         codeElement,
         textContent;
@@ -6889,8 +6874,8 @@ wysihtml5.commands = {
     }
   }
 
-  function _format(element, attributes) {
-    var doc             = element.ownerDocument,
+  function _format(composer, attributes) {
+    var doc             = composer.doc,
         tempClass       = "_wysihtml5-temp-" + (+new Date()),
         tempClassRegExp = /non-matching-class/g,
         i               = 0,
@@ -6903,7 +6888,7 @@ wysihtml5.commands = {
         textContent,
         whiteSpace,
         j;
-    wysihtml5.commands.formatInline.exec(element, undef, NODE_NAME, tempClass, tempClassRegExp);
+    wysihtml5.commands.formatInline.exec(composer, undef, NODE_NAME, tempClass, tempClassRegExp);
     anchors = doc.querySelectorAll(NODE_NAME + "." + tempClass);
     length  = anchors.length;
     for (; i<length; i++) {
@@ -6922,12 +6907,12 @@ wysihtml5.commands = {
       if (!hasElementChild && isEmpty) {
         dom.setTextContent(anchor, anchor.href);
         whiteSpace = doc.createTextNode(" ");
-        wysihtml5.selection.setAfter(anchor);
-        wysihtml5.selection.insertNode(whiteSpace);
+        composer.selection.setAfter(anchor);
+        composer.selection.insertNode(whiteSpace);
         elementToSetCaretAfter = whiteSpace;
       }
     }
-    wysihtml5.selection.setAfter(elementToSetCaretAfter);
+    composer.selection.setAfter(elementToSetCaretAfter);
   }
   
   wysihtml5.commands.createLink = {
@@ -6940,28 +6925,26 @@ wysihtml5.commands = {
      * 
      * @example
      *    // either ...
-     *    wysihtml5.commands.createLink.exec(element, "createLink", "http://www.google.de");
+     *    wysihtml5.commands.createLink.exec(composer, "createLink", "http://www.google.de");
      *    // ... or ...
-     *    wysihtml5.commands.createLink.exec(element, "createLink", { href: "http://www.google.de", target: "_blank" });
+     *    wysihtml5.commands.createLink.exec(composer, "createLink", { href: "http://www.google.de", target: "_blank" });
      */
-    exec: function(element, command, value) {
-      var doc           = element.ownerDocument,
-          anchors       = this.state(element, command);
-
+    exec: function(composer, command, value) {
+      var anchors = this.state(composer, command);
       if (anchors) {
         // Selection contains links
-        wysihtml5.selection.executeAndRestore(function() {
-          _removeFormat(element, anchors);
+        composer.selection.executeAndRestore(function() {
+          _removeFormat(composer, anchors);
         });
       } else {
         // Create links
         value = typeof(value) === "object" ? value : { href: value };
-        _format(element, value);
+        _format(composer, value);
       }
     },
 
-    state: function(element, command) {
-      return wysihtml5.commands.formatInline.state(element, command, "A");
+    state: function(composer, command) {
+      return wysihtml5.commands.formatInline.state(composer, command, "A");
     },
 
     value: function() {
@@ -6978,12 +6961,12 @@ wysihtml5.commands = {
       REG_EXP = /wysiwyg-font-size-[a-z]+/g;
   
   wysihtml5.commands.fontSize = {
-    exec: function(element, command, size) {
-      return wysihtml5.commands.formatInline.exec(element, command, "span", "wysiwyg-font-size-" + size, REG_EXP);
+    exec: function(composer, command, size) {
+      return wysihtml5.commands.formatInline.exec(composer, command, "span", "wysiwyg-font-size-" + size, REG_EXP);
     },
 
-    state: function(element, command, size) {
-      return wysihtml5.commands.formatInline.state(element, command, "span", "wysiwyg-font-size-" + size, REG_EXP);
+    state: function(composer, command, size) {
+      return wysihtml5.commands.formatInline.state(composer, command, "span", "wysiwyg-font-size-" + size, REG_EXP);
     },
 
     value: function() {
@@ -7001,12 +6984,12 @@ wysihtml5.commands = {
       REG_EXP = /wysiwyg-color-[a-z]+/g;
   
   wysihtml5.commands.foreColor = {
-    exec: function(element, command, color) {
-      return wysihtml5.commands.formatInline.exec(element, command, "span", "wysiwyg-color-" + color, REG_EXP);
+    exec: function(composer, command, color) {
+      return wysihtml5.commands.formatInline.exec(composer, command, "span", "wysiwyg-color-" + color, REG_EXP);
     },
 
-    state: function(element, command, color) {
-      return wysihtml5.commands.formatInline.state(element, command, "span", "wysiwyg-color-" + color, REG_EXP);
+    state: function(composer, command, color) {
+      return wysihtml5.commands.formatInline.state(composer, command, "span", "wysiwyg-color-" + color, REG_EXP);
     },
 
     value: function() {
@@ -7016,7 +6999,6 @@ wysihtml5.commands = {
 })(wysihtml5);(function(wysihtml5) {
   var undef,
       dom                     = wysihtml5.dom,
-      selection               = wysihtml5.selection,
       DEFAULT_NODE_NAME       = "DIV",
       // Following elements are grouped
       // when the caret is within a H1 and the H4 is invoked, the H1 should turn into H4
@@ -7140,7 +7122,7 @@ wysihtml5.commands = {
         if (target.nodeType !== wysihtml5.ELEMENT_NODE) {
           return;
         }
-        displayStyle  = dom.getStyle("display").from(target);
+        displayStyle = dom.getStyle("display").from(target);
         if (displayStyle.substr(0, 6) !== "inline") {
           // Make sure that only block elements receive the given class
           target.className += " " + className;
@@ -7153,12 +7135,12 @@ wysihtml5.commands = {
     }
   }
 
-  function _selectLineAndWrap(element) {
-    selection.selectLine();
-    selection.surround(element);
+  function _selectLineAndWrap(composer, element) {
+    composer.selection.selectLine();
+    composer.selection.surround(element);
     _removeLineBreakBeforeAndAfter(element);
     _removeLastChildIfLineBreak(element);
-    selection.selectNode(element);
+    composer.selection.selectNode(element);
   }
 
   function _hasClasses(element) {
@@ -7166,15 +7148,15 @@ wysihtml5.commands = {
   }
   
   wysihtml5.commands.formatBlock = {
-    exec: function(element, command, nodeName, className, classRegExp) {
-      var doc          = element.ownerDocument,
-          blockElement = this.state(element, command, nodeName, className, classRegExp),
+    exec: function(composer, command, nodeName, className, classRegExp) {
+      var doc          = composer.doc,
+          blockElement = this.state(composer, command, nodeName, className, classRegExp),
           selectedNode;
 
       nodeName = typeof(nodeName) === "string" ? nodeName.toUpperCase() : nodeName;
 
       if (blockElement) {
-        selection.executeAndRestoreSimple(function() {
+        composer.selection.executeAndRestoreSimple(function() {
           if (classRegExp) {
             _removeClass(blockElement, classRegExp);
           }
@@ -7194,13 +7176,13 @@ wysihtml5.commands = {
 
       // Find similiar block element and rename it (<h2 class="foo"></h2>  =>  <h1 class="foo"></h1>)
       if (nodeName === null || wysihtml5.lang.array(BLOCK_ELEMENTS_GROUP).contains(nodeName)) {
-        selectedNode = selection.getSelectedNode();
+        selectedNode = composer.selection.getSelectedNode();
         blockElement = dom.getParentElement(selectedNode, {
-          nodeName:     BLOCK_ELEMENTS_GROUP
+          nodeName: BLOCK_ELEMENTS_GROUP
         });
 
         if (blockElement) {
-          selection.executeAndRestoreSimple(function() {
+          composer.selection.executeAndRestoreSimple(function() {
             // Rename current block element to new block element and add class
             if (nodeName) {
               blockElement = dom.renameElement(blockElement, nodeName);
@@ -7213,7 +7195,7 @@ wysihtml5.commands = {
         }
       }
 
-      if (wysihtml5.commands.support(command)) {
+      if (composer.commands.support(command)) {
         _execCommand(doc, command, nodeName || DEFAULT_NODE_NAME, className);
         return;
       }
@@ -7222,12 +7204,12 @@ wysihtml5.commands = {
       if (className) {
         blockElement.className = className;
       }
-      _selectLineAndWrap(blockElement);
+      _selectLineAndWrap(composer, blockElement);
     },
 
-    state: function(element, command, nodeName, className, classRegExp) {
+    state: function(composer, command, nodeName, className, classRegExp) {
       nodeName = typeof(nodeName) === "string" ? nodeName.toUpperCase() : nodeName;
-      var selectedNode = selection.getSelectedNode();
+      var selectedNode = composer.selection.getSelectedNode();
       return dom.getParentElement(selectedNode, {
         nodeName:     nodeName,
         className:    className,
@@ -7297,17 +7279,17 @@ wysihtml5.commands = {
   }
   
   wysihtml5.commands.formatInline = {
-    exec: function(element, command, tagName, className, classRegExp) {
-      var range = wysihtml5.selection.getRange();
+    exec: function(composer, command, tagName, className, classRegExp) {
+      var range = composer.selection.getRange();
       if (!range) {
         return false;
       }
       _getApplier(tagName, className, classRegExp).toggleRange(range);
-      wysihtml5.selection.setSelection(range);
+      composer.selection.setSelection(range);
     },
 
-    state: function(element, command, tagName, className, classRegExp) {
-      var doc           = element.ownerDocument,
+    state: function(composer, command, tagName, className, classRegExp) {
+      var doc           = composer.doc,
           aliasTagName  = ALIAS_MAPPING[tagName] || tagName,
           range;
 
@@ -7322,7 +7304,7 @@ wysihtml5.commands = {
          return false;
       }
 
-      range = wysihtml5.selection.getRange();
+      range = composer.selection.getRange();
       if (!range) {
         return false;
       }
@@ -7338,11 +7320,11 @@ wysihtml5.commands = {
   var undef;
   
   wysihtml5.commands.insertHTML = {
-    exec: function(element, command, html) {
-      if (wysihtml5.commands.support(command)) {
-        element.ownerDocument.execCommand(command, false, html);
+    exec: function(composer, command, html) {
+      if (composer.commands.support(command)) {
+        composer.doc.execCommand(command, false, html);
       } else {
-        wysihtml5.selection.insertHTML(html);
+        composer.selection.insertHTML(html);
       }
     },
 
@@ -7364,33 +7346,34 @@ wysihtml5.commands = {
      * 
      * @example
      *    // either ...
-     *    wysihtml5.commands.insertImage.exec(element, "insertImage", "http://www.google.de/logo.jpg");
+     *    wysihtml5.commands.insertImage.exec(composer, "insertImage", "http://www.google.de/logo.jpg");
      *    // ... or ...
-     *    wysihtml5.commands.insertImage.exec(element, "insertImage", { src: "http://www.google.de/logo.jpg", title: "foo" });
+     *    wysihtml5.commands.insertImage.exec(composer, "insertImage", { src: "http://www.google.de/logo.jpg", title: "foo" });
      */
-    exec: function(element, command, value) {
+    exec: function(composer, command, value) {
       value = typeof(value) === "object" ? value : { src: value };
 
-      var doc   = element.ownerDocument,
-          image = this.state(element),
+      var doc     = composer.doc,
+          image   = this.state(composer),
+          textNode,
           i,
           parent;
 
       if (image) {
         // Image already selected, set the caret before it and delete it
-        wysihtml5.selection.setBefore(image);
+        composer.selection.setBefore(image);
         parent = image.parentNode;
         parent.removeChild(image);
 
         // and it's parent <a> too if it hasn't got any other relevant child nodes
         wysihtml5.dom.removeEmptyTextNodes(parent);
         if (parent.nodeName === "A" && !parent.firstChild) {
-          wysihtml5.selection.setAfter(parent);
+          composer.selection.setAfter(parent);
           parent.parentNode.removeChild(parent);
         }
 
         // firefox and ie sometimes don't remove the image handles, even though the image got removed
-        wysihtml5.quirks.redraw(element);
+        wysihtml5.quirks.redraw(composer.element);
         return;
       }
 
@@ -7400,12 +7383,18 @@ wysihtml5.commands = {
         image[i] = value[i];
       }
 
-      wysihtml5.selection.insertNode(image);
-      wysihtml5.selection.setAfter(image);
+      composer.selection.insertNode(image);
+      if (wysihtml5.browser.hasProblemsSettingCaretAfterImg()) {
+        textNode = doc.createTextNode(wysihtml5.INVISIBLE_SPACE);
+        composer.selection.insertNode(textNode);
+        composer.selection.setAfter(textNode);
+      } else {
+        composer.selection.setAfter(image);
+      }
     },
 
-    state: function(element) {
-      var doc = element.ownerDocument,
+    state: function(composer) {
+      var doc = composer.doc,
           selectedNode,
           text,
           imagesInSelection;
@@ -7414,7 +7403,7 @@ wysihtml5.commands = {
         return false;
       }
 
-      selectedNode = wysihtml5.selection.getSelectedNode();
+      selectedNode = composer.selection.getSelectedNode();
       if (!selectedNode) {
         return false;
       }
@@ -7428,13 +7417,13 @@ wysihtml5.commands = {
         return false;
       }
 
-      text = wysihtml5.selection.getText();
+      text = composer.selection.getText();
       text = wysihtml5.lang.string(text).trim();
       if (text) {
         return false;
       }
 
-      imagesInSelection = wysihtml5.selection.getNodes(wysihtml5.ELEMENT_NODE, function(node) {
+      imagesInSelection = composer.selection.getNodes(wysihtml5.ELEMENT_NODE, function(node) {
         return node.nodeName === "IMG";
       });
 
@@ -7445,8 +7434,8 @@ wysihtml5.commands = {
       return imagesInSelection[0];
     },
 
-    value: function(element) {
-      var image = this.state(element);
+    value: function(composer) {
+      var image = this.state(composer);
       return image && image.src;
     }
   };
@@ -7455,14 +7444,14 @@ wysihtml5.commands = {
       LINE_BREAK = "<br>" + (wysihtml5.browser.needsSpaceAfterLineBreak() ? " " : "");
   
   wysihtml5.commands.insertLineBreak = {
-    exec: function(element, command) {
-      if (wysihtml5.commands.support(command)) {
-        element.ownerDocument.execCommand(command, false, null);
+    exec: function(composer, command) {
+      if (composer.commands.support(command)) {
+        composer.doc.execCommand(command, false, null);
         if (!wysihtml5.browser.autoScrollsToCaret()) {
-          wysihtml5.selection.scrollIntoView(element);
+          composer.selection.scrollIntoView();
         }
       } else {
-        wysihtml5.commands.exec("insertHTML", LINE_BREAK);
+        composer.commands.exec("insertHTML", LINE_BREAK);
       }
     },
 
@@ -7478,33 +7467,33 @@ wysihtml5.commands = {
   var undef;
   
   wysihtml5.commands.insertOrderedList = {
-    exec: function(element, command) {
-      var doc = element.ownerDocument,
+    exec: function(composer, command) {
+      var doc = composer.doc,
           selectedNode,
           isEmpty,
           tempElement,
           list;
 
-      if (wysihtml5.commands.support(command)) {
+      if (composer.commands.support(command)) {
         doc.execCommand(command, false, null);
       } else {
-        selectedNode = wysihtml5.selection.getSelectedNode();
+        selectedNode = composer.selection.getSelectedNode();
         list = wysihtml5.dom.getParentElement(selectedNode, { nodeName: ["UL", "OL"] }, 4);
         if (!list) {
           tempElement = doc.createElement("span");
-          wysihtml5.selection.surround(tempElement);
+          composer.selection.surround(tempElement);
           isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE;
-          wysihtml5.selection.executeAndRestoreSimple(function() {
+          composer.selection.executeAndRestoreSimple(function() {
             list = wysihtml5.dom.convertToList(tempElement, "ol");
           });
 
           if (isEmpty) {
-            wysihtml5.selection.selectNode(list.querySelector("li"));
+            composer.selection.selectNode(list.querySelector("li"));
           }
           return;
         }
 
-        wysihtml5.selection.executeAndRestoreSimple(function() {
+        composer.selection.executeAndRestoreSimple(function() {
           if (list.nodeName === "OL") {
             // Unwrap list
             // <ol><li>foo</li><li>bar</li></ol>
@@ -7522,9 +7511,9 @@ wysihtml5.commands = {
       }
     },
 
-    state: function(element, command) {
+    state: function(composer, command) {
       try {
-        return element.ownerDocument.queryCommandState(command);
+        return composer.doc.queryCommandState(command);
       } catch(e) {
         return false;
       }
@@ -7538,34 +7527,34 @@ wysihtml5.commands = {
   var undef;
   
   wysihtml5.commands.insertUnorderedList = {
-    exec: function(element, command) {
-      var doc = element.ownerDocument,
+    exec: function(composer, command) {
+      var doc = composer.doc,
           selectedNode,
           isEmpty,
           tempElement,
           list;
 
-      if (wysihtml5.commands.support(command)) {
+      if (composer.commands.support(command)) {
         doc.execCommand(command, false, null);
       } else {
-        selectedNode = wysihtml5.selection.getSelectedNode();
+        selectedNode = composer.selection.getSelectedNode();
         list = wysihtml5.dom.getParentElement(selectedNode, { nodeName: ["UL", "OL"] });
 
         if (!list) {
           tempElement = doc.createElement("span");
-          wysihtml5.selection.surround(tempElement);
+          composer.selection.surround(tempElement);
           isEmpty = tempElement.innerHTML === "" || tempElement.innerHTML === wysihtml5.INVISIBLE_SPACE;
-          wysihtml5.selection.executeAndRestoreSimple(function() {
+          composer.selection.executeAndRestoreSimple(function() {
             list = wysihtml5.dom.convertToList(tempElement, "ul");
           });
 
           if (isEmpty) {
-            wysihtml5.selection.selectNode(list.querySelector("li"));
+            composer.selection.selectNode(list.querySelector("li"));
           }
           return;
         }
 
-        wysihtml5.selection.executeAndRestoreSimple(function() {
+        composer.selection.executeAndRestoreSimple(function() {
           if (list.nodeName === "UL") {
             // Unwrap list
             // <ul><li>foo</li><li>bar</li></ul>
@@ -7583,9 +7572,9 @@ wysihtml5.commands = {
       }
     },
 
-    state: function(element, command) {
+    state: function(composer, command) {
       try {
-        return element.ownerDocument.queryCommandState(command);
+        return composer.doc.queryCommandState(command);
       } catch(e) {
         return false;
       }
@@ -7599,17 +7588,17 @@ wysihtml5.commands = {
   var undef;
   
   wysihtml5.commands.italic = {
-    exec: function(element, command) {
-      return wysihtml5.commands.formatInline.exec(element, command, "i");
+    exec: function(composer, command) {
+      return wysihtml5.commands.formatInline.exec(composer, command, "i");
     },
 
-    state: function(element, command, color) {
+    state: function(composer, command, color) {
       // element.ownerDocument.queryCommandState("italic") results:
       // firefox: only <i>
       // chrome:  <i>, <em>, <blockquote>, ...
       // ie:      <i>, <em>
       // opera:   only <i>
-      return wysihtml5.commands.formatInline.state(element, command, "i");
+      return wysihtml5.commands.formatInline.state(composer, command, "i");
     },
 
     value: function() {
@@ -7622,12 +7611,12 @@ wysihtml5.commands = {
       REG_EXP     = /wysiwyg-text-align-[a-z]+/g;
   
   wysihtml5.commands.justifyCenter = {
-    exec: function(element, command) {
-      return wysihtml5.commands.formatBlock.exec(element, "formatBlock", null, CLASS_NAME, REG_EXP);
+    exec: function(composer, command) {
+      return wysihtml5.commands.formatBlock.exec(composer, "formatBlock", null, CLASS_NAME, REG_EXP);
     },
 
-    state: function(element, command) {
-      return wysihtml5.commands.formatBlock.state(element, "formatBlock", null, CLASS_NAME, REG_EXP);
+    state: function(composer, command) {
+      return wysihtml5.commands.formatBlock.state(composer, "formatBlock", null, CLASS_NAME, REG_EXP);
     },
 
     value: function() {
@@ -7640,12 +7629,12 @@ wysihtml5.commands = {
       REG_EXP     = /wysiwyg-text-align-[a-z]+/g;
   
   wysihtml5.commands.justifyLeft = {
-    exec: function(element, command) {
-      return wysihtml5.commands.formatBlock.exec(element, "formatBlock", null, CLASS_NAME, REG_EXP);
+    exec: function(composer, command) {
+      return wysihtml5.commands.formatBlock.exec(composer, "formatBlock", null, CLASS_NAME, REG_EXP);
     },
 
-    state: function(element, command) {
-      return wysihtml5.commands.formatBlock.state(element, "formatBlock", null, CLASS_NAME, REG_EXP);
+    state: function(composer, command) {
+      return wysihtml5.commands.formatBlock.state(composer, "formatBlock", null, CLASS_NAME, REG_EXP);
     },
 
     value: function() {
@@ -7658,12 +7647,12 @@ wysihtml5.commands = {
       REG_EXP     = /wysiwyg-text-align-[a-z]+/g;
   
   wysihtml5.commands.justifyRight = {
-    exec: function(element, command) {
-      return wysihtml5.commands.formatBlock.exec(element, "formatBlock", null, CLASS_NAME, REG_EXP);
+    exec: function(composer, command) {
+      return wysihtml5.commands.formatBlock.exec(composer, "formatBlock", null, CLASS_NAME, REG_EXP);
     },
 
-    state: function(element, command) {
-      return wysihtml5.commands.formatBlock.state(element, "formatBlock", null, CLASS_NAME, REG_EXP);
+    state: function(composer, command) {
+      return wysihtml5.commands.formatBlock.state(composer, "formatBlock", null, CLASS_NAME, REG_EXP);
     },
 
     value: function() {
@@ -7676,12 +7665,12 @@ wysihtml5.commands = {
       CLASS_NAME  = "wysiwyg-text-decoration-underline";
   
   wysihtml5.commands.underline = {
-    exec: function(element, command) {
-      return wysihtml5.commands.formatInline.exec(element, command, "span", CLASS_NAME, REG_EXP);
+    exec: function(composer, command) {
+      return wysihtml5.commands.formatInline.exec(composer, command, "span", CLASS_NAME, REG_EXP);
     },
 
-    state: function(element, command) {
-      return wysihtml5.commands.formatInline.state(element, command, "span", CLASS_NAME, REG_EXP);
+    state: function(composer, command) {
+      return wysihtml5.commands.formatInline.state(composer, command, "span", CLASS_NAME, REG_EXP);
     },
 
     value: function() {
@@ -7713,24 +7702,25 @@ wysihtml5.commands = {
     /** @scope wysihtml5.UndoManager.prototype */ {
     constructor: function(editor) {
       this.editor = editor;
-      this.composerElement = editor.composer.element;
-      this.history = [this.editor.composer.getValue()];
+      this.composer = editor.composer;
+      this.element = this.composer.element;
+      this.history = [this.composer.getValue()];
       this.position = 1;
       
       // Undo manager currently only supported in browsers who have the insertHTML command (not IE)
-      if (wysihtml5.commands.support("insertHTML")) {
+      if (this.composer.commands.support("insertHTML")) {
         this._observe();
       }
     },
     
     _observe: function() {
-      var that = this,
-          doc = this.editor.composer.sandbox.getDocument(),
+      var that      = this,
+          doc       = this.composer.sandbox.getDocument(),
           lastKey;
           
       // Catch CTRL+Z and CTRL+Y
-      dom.observe(this.composerElement, "keydown", function(event) {
-        if (!event.ctrlKey && !event.metaKey) {
+      dom.observe(this.element, "keydown", function(event) {
+        if (event.altKey || (!event.ctrlKey && !event.metaKey)) {
           return;
         }
         
@@ -7748,7 +7738,7 @@ wysihtml5.commands = {
       });
       
       // Catch delete and backspace
-      dom.observe(this.composerElement, "keydown", function(event) {
+      dom.observe(this.element, "keydown", function(event) {
         var keyCode = event.keyCode;
         if (keyCode === lastKey) {
           return;
@@ -7761,12 +7751,6 @@ wysihtml5.commands = {
         }
       });
       
-      var interval, observed, cleanUp = function() {
-        cleanTempElements(doc);
-        clearInterval(interval);
-      };
-      
-      
       // Now this is very hacky:
       // These days browsers don't offer a undo/redo event which we could hook into
       // to be notified when the user hits undo/redo in the contextmenu.
@@ -7774,36 +7758,43 @@ wysihtml5.commands = {
       // The last element being inserted will be immediately be removed again by a exexCommand("undo")
       //  => When the second element appears in the dom tree then we know the user clicked "redo" in the context menu
       //  => When the first element disappears from the dom tree then we know the user clicked "undo" in the context menu
-      dom.observe(this.composerElement, "contextmenu", function() {
-        cleanUp();
-        wysihtml5.selection.executeAndRestoreSimple(function() {
-          if (that.composerElement.lastChild) {
-            wysihtml5.selection.setAfter(that.composerElement.lastChild);
-          }
-          
-          // enable undo button in context menu
-          doc.execCommand("insertHTML", false, UNDO_HTML);
-          // enable redo button in context menu
-          doc.execCommand("insertHTML", false, REDO_HTML);
-          doc.execCommand("undo", false, null);
-        });
+      if (wysihtml5.browser.hasUndoInContextMenu()) {
+        var interval, observed, cleanUp = function() {
+          cleanTempElements(doc);
+          clearInterval(interval);
+        };
         
-        interval = setInterval(function() {
-          if (doc.getElementById("_wysihtml5-redo")) {
-            cleanUp();
-            that.redo();
-          } else if (!doc.getElementById("_wysihtml5-undo")) {
-            cleanUp();
-            that.undo();
+        dom.observe(this.element, "contextmenu", function() {
+          cleanUp();
+          that.composer.selection.executeAndRestoreSimple(function() {
+            if (that.element.lastChild) {
+              that.composer.selection.setAfter(that.element.lastChild);
+            }
+
+            // enable undo button in context menu
+            doc.execCommand("insertHTML", false, UNDO_HTML);
+            // enable redo button in context menu
+            doc.execCommand("insertHTML", false, REDO_HTML);
+            doc.execCommand("undo", false, null);
+          });
+
+          interval = setInterval(function() {
+            if (doc.getElementById("_wysihtml5-redo")) {
+              cleanUp();
+              that.redo();
+            } else if (!doc.getElementById("_wysihtml5-undo")) {
+              cleanUp();
+              that.undo();
+            }
+          }, 400);
+
+          if (!observed) {
+            observed = true;
+            dom.observe(document, "mousedown", cleanUp);
+            dom.observe(doc, ["mousedown", "paste", "cut", "copy"], cleanUp);
           }
-        }, 400);
-        
-        if (!observed) {
-          observed = true;
-          dom.observe(document, "mousedown", cleanUp);
-          dom.observe(doc, ["mousedown", "paste", "cut", "copy"], cleanUp);
-        }
-      });
+        });
+      }
       
       this.editor
         .observe("newword:composer", function() {
@@ -7817,7 +7808,7 @@ wysihtml5.commands = {
     
     transact: function() {
       var previousHtml  = this.history[this.position - 1],
-          currentHtml   = this.editor.composer.getValue();
+          currentHtml   = this.composer.getValue();
       
       if (currentHtml == previousHtml) {
         return;
@@ -7854,7 +7845,7 @@ wysihtml5.commands = {
     },
     
     set: function(html) {
-      this.editor.composer.setValue(html);
+      this.composer.setValue(html);
       this.editor.focus(true);
     }
   });
@@ -7913,9 +7904,7 @@ wysihtml5.views.View = Base.extend(
   }
 });(function(wysihtml5) {
   var dom       = wysihtml5.dom,
-      browser   = wysihtml5.browser,
-      selection = wysihtml5.selection,
-      commands  = wysihtml5.commands;
+      browser   = wysihtml5.browser;
   
   wysihtml5.views.Composer = wysihtml5.views.View.extend(
     /** @scope wysihtml5.views.Composer.prototype */ {
@@ -7983,14 +7972,21 @@ wysihtml5.views.View = Base.extend(
     },
 
     focus: function(setToEnd) {
+      // IE 8 fires the focus event after .focus()
+      // This is needed by our simulate_placeholder.js to work
+      // therefore we clear it ourselves this time
+      if (wysihtml5.browser.doesAsyncFocus() && this.hasPlaceholderSet()) {
+        this.clear();
+      }
+      
       this.base();
       
       var lastChild = this.element.lastChild;
       if (setToEnd && lastChild) {
         if (lastChild.nodeName === "BR") {
-          selection.setBefore(this.element.lastChild);
+          this.selection.setBefore(this.element.lastChild);
         } else {
-          selection.setAfter(this.element.lastChild);
+          this.selection.setAfter(this.element.lastChild);
         }
       }
     },
@@ -8018,8 +8014,7 @@ wysihtml5.views.View = Base.extend(
       this.sandbox = new dom.Sandbox(function() {
         that._create();
       }, {
-        stylesheets:  this.config.stylesheets,
-        uaCompatible: "IE=7"
+        stylesheets:  this.config.stylesheets
       });
       this.iframe  = this.sandbox.getIframe();
 
@@ -8038,16 +8033,17 @@ wysihtml5.views.View = Base.extend(
     _create: function() {
       var that = this;
       
-      this.element            = this.sandbox.getDocument().body;
+      this.doc                = this.sandbox.getDocument();
+      this.element            = this.doc.body;
       this.textarea           = this.parent.textarea;
       this.element.innerHTML  = this.textarea.getValue(true);
       this.enable();
       
       // Make sure our selection handler is ready
-      selection.initialize(this.sandbox.getDocument());
+      this.selection = new wysihtml5.Selection(this.parent);
       
-      // Make sure commands are ready
-      commands.initialize(this.parent);
+      // Make sure commands dispatcher is ready
+      this.commands  = new wysihtml5.Commands(this.parent);
 
       dom.copyAttributes([
         "className", "spellcheck", "title", "lang", "dir", "accessKey"
@@ -8077,7 +8073,7 @@ wysihtml5.views.View = Base.extend(
       }
       
       // Make sure that the browser avoids using inline styles whenever possible
-      commands.exec("styleWithCSS", false);
+      this.commands.exec("styleWithCSS", false);
 
       this._initAutoLinking();
       this._initObjectResizing();
@@ -8088,15 +8084,15 @@ wysihtml5.views.View = Base.extend(
         setTimeout(function() { that.focus(); }, 100);
       }
 
-      wysihtml5.quirks.insertLineBreakOnReturn(this.element);
+      wysihtml5.quirks.insertLineBreakOnReturn(this);
 
       // IE sometimes leaves a single paragraph, which can't be removed by the user
       if (!browser.clearsContentEditableCorrectly()) {
-        wysihtml5.quirks.ensureProperClearing(this.element);
+        wysihtml5.quirks.ensureProperClearing(this);
       }
 
       if (!browser.clearsListsInContentEditableCorrectly()) {
-        wysihtml5.quirks.ensureProperClearingOfLists(this.element);
+        wysihtml5.quirks.ensureProperClearingOfLists(this);
       }
 
       // Set up a sync that makes sure that textarea and editor have the same content
@@ -8112,10 +8108,11 @@ wysihtml5.views.View = Base.extend(
     },
 
     _initAutoLinking: function() {
-      var supportsDisablingOfAutoLinking = browser.canDisableAutoLinking(),
+      var that                           = this,
+          supportsDisablingOfAutoLinking = browser.canDisableAutoLinking(),
           supportsAutoLinking            = browser.doesAutoLinkingInContentEditable();
       if (supportsDisablingOfAutoLinking) {
-        commands.exec("autoUrlDetect", false);
+        this.commands.exec("autoUrlDetect", false);
       }
 
       if (!this.config.autoLink) {
@@ -8126,7 +8123,7 @@ wysihtml5.views.View = Base.extend(
       // OR when he supports auto linking but we were able to turn it off (IE9+)
       if (!supportsAutoLinking || (supportsAutoLinking && supportsDisablingOfAutoLinking)) {
         this.parent.observe("newword:composer", function() {
-          selection.executeAndRestore(function(startContainer, endContainer) {
+          that.selection.executeAndRestore(function(startContainer, endContainer) {
             dom.autoLink(endContainer.parentNode);
           });
         });
@@ -8153,7 +8150,7 @@ wysihtml5.views.View = Base.extend(
           return;
         }
 
-        var selectedNode = selection.getSelectedNode(event.target.ownerDocument),
+        var selectedNode = that.selection.getSelectedNode(event.target.ownerDocument),
             link         = dom.getParentElement(selectedNode, { nodeName: "A" }, 4),
             textContent;
 
@@ -8183,8 +8180,8 @@ wysihtml5.views.View = Base.extend(
           propertiesLength  = properties.length,
           element           = this.element;
       
-      commands.exec("enableObjectResizing", this.config.allowObjectResizing);
-
+      this.commands.exec("enableObjectResizing", this.config.allowObjectResizing);
+      
       if (this.config.allowObjectResizing) {
          // IE sets inline styles after resizing objects
          // The following lines make sure that the width/height css properties
@@ -8406,8 +8403,6 @@ wysihtml5.views.View = Base.extend(
  *  - Catch paste events
  *  - Dispatch proprietary newword:composer event
  *  - Keyboard shortcuts
- *
- * @author Christopher Blum <christopher.blum@xing.com>
  */
 (function(wysihtml5) {
   var dom       = wysihtml5.dom,
@@ -8470,7 +8465,7 @@ wysihtml5.views.View = Base.extend(
             originalScrollTop = document.documentElement.scrollTop || document.body.scrollTop,
             originalScrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
         try {
-          wysihtml5.selection.insertNode(input);
+          that.selection.insertNode(input);
         } catch(e) {
           element.appendChild(input);
         }
@@ -8501,7 +8496,7 @@ wysihtml5.views.View = Base.extend(
       }
       if (data) {
         element.focus();
-        wysihtml5.commands.exec("insertHTML", data);
+        that.commands.exec("insertHTML", data);
         that.parent.fire("paste").fire("paste:composer");
         event.stopPropagation();
         event.preventDefault();
@@ -8529,7 +8524,7 @@ wysihtml5.views.View = Base.extend(
       dom.observe(element, "mousedown", function(event) {
         var target = event.target;
         if (target.nodeName === "IMG") {
-          wysihtml5.selection.selectNode(target);
+          that.selection.selectNode(target);
           event.preventDefault();
         }
       });
@@ -8540,14 +8535,14 @@ wysihtml5.views.View = Base.extend(
       var keyCode  = event.keyCode,
           command  = shortcuts[keyCode];
       if ((event.ctrlKey || event.metaKey) && command) {
-        wysihtml5.commands.exec(command);
+        that.commands.exec(command);
         event.preventDefault();
       }
     });
 
     // --------- Make sure that when pressing backspace/delete on selected images deletes the image and it's anchor ---------
     dom.observe(element, "keydown", function(event) {
-      var target  = wysihtml5.selection.getSelectedNode(true),
+      var target  = that.selection.getSelectedNode(true),
           keyCode = event.keyCode,
           parent;
       if (target && target.nodeName === "IMG" && (keyCode === wysihtml5.BACKSPACE_KEY || keyCode === wysihtml5.DELETE_KEY)) { // 8 => backspace, 46 => delete
@@ -8747,7 +8742,6 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
 });/**
  * Toolbar Dialog
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} link The toolbar link which causes the dialog to show up
  * @param {Element} container The dialog container
  *
@@ -8877,7 +8871,7 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
      * Basically it adopted the attribute values into the corresponding input fields
      *
      */
-    _interpolate: function() {
+    _interpolate: function(avoidHiddenFields) {
       var field,
           fieldName,
           newValue,
@@ -8887,10 +8881,18 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
           i              = 0;
       for (; i<length; i++) {
         field = fields[i];
+        
         // Never change elements where the user is currently typing in
         if (field === focusedElement) {
           continue;
         }
+        
+        // Don't update hidden fields
+        // See https://github.com/xing/wysihtml5/pull/14
+        if (avoidHiddenFields && field.type === "hidden") {
+          continue;
+        }
+        
         fieldName = field.getAttribute(ATTRIBUTE_FIELDS);
         newValue  = this.elementToChange ? (this.elementToChange[fieldName] || "") : field.defaultValue;
         field.value = newValue;
@@ -8907,7 +8909,7 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
       this._observe();
       this._interpolate();
       if (elementToChange) {
-        this.interval = setInterval(function() { that._interpolate(); }, 500);
+        this.interval = setInterval(function() { that._interpolate(true); }, 500);
       }
       dom.addClass(this.link, CLASS_NAME_OPENED);
       this.container.style.display = "";
@@ -8943,8 +8945,6 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
  * 
  * "Accessing Google Speech API Chrome 11"
  * http://mikepultz.com/2011/03/accessing-google-speech-api-chrome-11/
- *
- * @author Christopher Blum <christopher.blum@xing.com>
  */
 (function(wysihtml5) {
   var dom = wysihtml5.dom;
@@ -9021,7 +9021,6 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
 })(wysihtml5);/**
  * Toolbar
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Object} parent Reference to instance of Editor instance
  * @param {Element} container Reference to the toolbar container element
  *
@@ -9092,20 +9091,19 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
           dialogElement = this.container.querySelector("[data-wysihtml5-dialog='" + command + "']"),
           dialog,
           caretBookmark;
+      
       if (dialogElement) {
         dialog = new wysihtml5.toolbar.Dialog(link, dialogElement);
 
         dialog.observe("show", function() {
-          caretBookmark = wysihtml5.selection.getBookmark();
+          caretBookmark = that.composer.selection.getBookmark();
 
           that.editor.fire("show:dialog", { command: command, dialogContainer: dialogElement, commandLink: link });
         });
 
         dialog.observe("save", function(attributes) {
-          that.editor.focus(false);
-
           if (caretBookmark) {
-            wysihtml5.selection.setBookmark(caretBookmark);
+            that.composer.selection.setBookmark(caretBookmark);
           }
           that._execCommand(command, attributes);
           
@@ -9145,7 +9143,7 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
       // Make sure that composer is focussed (false => don't move caret to the end)
       this.editor.focus(false);
 
-      wysihtml5.commands.exec(command, commandValue);
+      this.composer.commands.exec(command, commandValue);
       this._updateLinkStates();
     },
 
@@ -9240,7 +9238,7 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
             command.dialog.hide();
           }
         } else {
-          state = wysihtml5.commands.state(command.name, command.value);
+          state = this.composer.commands.state(command.name, command.value);
           if (wysihtml5.lang.object(state).isArray()) {
             // Grab first and only object/element in state array, otherwise convert state into boolean
             // to avoid showing a dialog for multiple selected elements which may have different attributes
@@ -9287,7 +9285,6 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
 /**
  * WYSIHTML5 Editor
  *
- * @author Christopher Blum <christopher.blum@xing.com>
  * @param {Element} textareaElement Reference to the textarea which should be turned into a rich text interface
  * @param {Object} [config] See defaultConfig object below for explanation of each individual config option
  *
@@ -9449,7 +9446,7 @@ wysihtml5.views.Textarea = wysihtml5.views.View.extend(
       this.observe("paste:composer", function() {
         var keepScrollPosition  = true,
             that                = this;
-        wysihtml5.selection.executeAndRestore(function() {
+        that.composer.selection.executeAndRestore(function() {
           wysihtml5.quirks.cleanPastedHTML(that.composer.element);
           that.parse(that.composer.element);
         }, keepScrollPosition);