Use IE=Edge instead of IE=7 as UA-Compatible value in iframe (fixes t…

…iff#19)
armellarcier · Mar 18, 2012 · 3c03dc6 · 3c03dc6
1 parent 3e53ed6
commit 3c03dc6
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 66 deletions.
diff --git a/src/browser.js b/src/browser.js
@@ -333,6 +333,20 @@ 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;
     }
   };
 })();
diff --git a/src/commands/insertImage.js b/src/commands/insertImage.js
@@ -17,6 +17,7 @@
 
       var doc   = element.ownerDocument,
           image = this.state(element),
+          textNode,
           i,
           parent;
 
@@ -45,7 +46,13 @@
       }
 
       wysihtml5.selection.insertNode(image);
-      wysihtml5.selection.setAfter(image);
+      if (wysihtml5.browser.hasProblemsSettingCaretAfterImg()) {
+        textNode = doc.createTextNode(wysihtml5.INVISIBLE_SPACE);
+        wysihtml5.selection.insertNode(textNode);
+        wysihtml5.selection.setAfter(textNode);
+      } else {
+        wysihtml5.selection.setAfter(image);
+      }
     },
 
     state: function(element) {

diff --git a/src/dom/sandbox.js b/src/dom/sandbox.js
@@ -15,7 +15,7 @@
  * @author Christopher Blum <[email protected]>
  *
  * @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) {
@@ -26,9 +26,6 @@
   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
@@ -59,7 +56,7 @@
 
     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();
     },
 
@@ -160,8 +157,7 @@
           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
@@ -223,7 +219,7 @@
 
       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);
     },

diff --git a/src/toolbar/toolbar.js b/src/toolbar/toolbar.js
@@ -82,8 +82,6 @@
         });
 
         dialog.observe("save", function(attributes) {
-          that.editor.focus(false);
-
           if (caretBookmark) {
             wysihtml5.selection.setBookmark(caretBookmark);
           }

diff --git a/src/views/composer.js b/src/views/composer.js
@@ -70,6 +70,13 @@
     },
 
     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;
@@ -105,8 +112,7 @@
       this.sandbox = new dom.Sandbox(function() {
         that._create();
       }, {
-        stylesheets:  this.config.stylesheets,
-        uaCompatible: "IE=7"
+        stylesheets:  this.config.stylesheets
       });
       this.iframe  = this.sandbox.getIframe();
 

diff --git a/test/dom/insert_css_test.js b/test/dom/insert_css_test.js
@@ -7,7 +7,7 @@ module("wysihtml5.dom.insertCSS", {
   }
 });
 
-asyncTest("Basic Tests with IE=Edge", function() {
+asyncTest("Basic Tests", function() {
   expect(3);
 
   new wysihtml5.dom.Sandbox(function(sandbox) {
@@ -27,28 +27,5 @@ asyncTest("Basic Tests with IE=Edge", function() {
     equal(wysihtml5.dom.getStyle("text-indent").from(element), "50px");
 
     start();
-  }, { uaCompatible: "IE=Edge" }).insertInto(document.body);
-});
-
-asyncTest("Basic Tests with IE=7", function() {
-  expect(3);
-
-  new wysihtml5.dom.Sandbox(function(sandbox) {
-    var doc     = sandbox.getDocument(),
-        body    = doc.body,
-        element = doc.createElement("sub");
-
-    body.appendChild(element);
-
-    wysihtml5.dom.insertCSS([
-      "sub { display: block; text-align: right; }",
-      "body { text-indent: 50px; }"
-    ]).into(doc);
-
-    equal(wysihtml5.dom.getStyle("display")    .from(element), "block");
-    equal(wysihtml5.dom.getStyle("text-align") .from(element), "right");
-    equal(wysihtml5.dom.getStyle("text-indent").from(body),    "50px");
-
-    start();
-  }, { uaCompatible: "IE=7" }).insertInto(document.body);
+  }).insertInto(document.body);
 });
diff --git a/test/dom/sandbox_test.js b/test/dom/sandbox_test.js
@@ -171,37 +171,14 @@ asyncTest("Check insertion of multiple stylesheets", function() {
 });
 
 
-asyncTest("Check X-UA-Compatible meta tag #1", function() {
-  expect(2);
-
-  new wysihtml5.dom.Sandbox(function(sandbox) {
-    var doc                 = sandbox.getDocument(),
-        uaCompatibleMetaTag = doc.querySelector("meta[http-equiv='X-UA-Compatible']");
-    ok(uaCompatibleMetaTag, "X-UA-Compatible meta tag found");
-    if (uaCompatibleMetaTag) {
-      equal(uaCompatibleMetaTag.getAttribute("content"), "IE=Edge", "X-UA-Compatible correctly set");
-    }
-    start();
-  }).insertInto(document.body);
-});
-
-
-asyncTest("Check X-UA-Compatible meta tag #2", function() {
-  expect(3);
+asyncTest("Check X-UA-Compatible", function() {
+  expect(1);
 
   new wysihtml5.dom.Sandbox(function(sandbox) {
     var doc                 = sandbox.getDocument(),
-        docMode             = doc.documentMode || 7,
-        uaCompatibleMetaTag = doc.querySelector("meta[http-equiv='X-UA-Compatible']");
-
-    ok(uaCompatibleMetaTag, "X-UA-Compatible meta tag found");
-
-    ok(docMode === 7 || docMode === 9, "iFrame is in in IE7 or IE9 mode");
-    if (uaCompatibleMetaTag) {
-      equal(uaCompatibleMetaTag.getAttribute("content"), "IE=7", "X-UA-Compatible correctly set");
-    }
+        docMode             = doc.documentMode;
+
+    ok(doc.documentMode === document.documentMode, "iFrame is in in the same document mode as the parent site");
     start();
-  }, {
-    uaCompatible: "IE=7"
   }).insertInto(document.body);
 });