Improve clean up of empty/senseless <span> elements (also add an opti…

…on to disable this behavior, fixes tiff#106)
moviepilot · Nov 1, 2012 · 54f6fbc · 54f6fbc
1 parent 4b0b64c
commit 54f6fbc
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 7 deletions.
diff --git a/examples/advanced.html b/examples/advanced.html
@@ -136,7 +136,7 @@ <h2>Events:</h2>
 <small>powered by <a href="https://github.com/xing/wysihtml5" target="_blank">wysihtml5</a>.</small>
 
 <script src="../parser_rules/advanced.js"></script>
-<script src="../dist/wysihtml5-0.3.0.js"></script>
+<script src="../dist/wysihtml5-0.4.0pre.js"></script>
 <script>
   var editor = new wysihtml5.Editor("textarea", {
     toolbar:        "toolbar",

diff --git a/examples/simple.html b/examples/simple.html
@@ -87,7 +87,7 @@ <h2>Events:</h2>
 <small>powered by <a href="https://github.com/xing/wysihtml5" target="_blank">wysihtml5</a>.</small>
 
 <script src="../parser_rules/simple.js"></script>
-<script src="../dist/wysihtml5-0.3.0.js"></script>
+<script src="../dist/wysihtml5-0.4.0pre.js"></script>
 <script>
   var editor = new wysihtml5.Editor("textarea", {
     toolbar:        "toolbar",

diff --git a/src/dom/parse.js b/src/dom/parse.js
@@ -112,6 +112,7 @@ wysihtml5.dom.parse = (function() {
         oldChildsLength = oldChilds.length,
         method          = NODE_TYPE_MAPPING[oldNodeType],
         i               = 0,
+        fragment,
         newNode,
         newChild;
 
@@ -130,10 +131,13 @@ wysihtml5.dom.parse = (function() {
 
     // Cleanup senseless <span> elements
     if (cleanUp &&
-        newNode.childNodes.length <= 1 &&
         newNode.nodeName.toLowerCase() === DEFAULT_NODE_NAME &&
-        !newNode.attributes.length) {
-      return newNode.firstChild;
+        (!newNode.childNodes.length || !newNode.attributes.length)) {
+      fragment = newNode.ownerDocument.createDocumentFragment();
+      while (newNode.firstChild) {
+        fragment.appendChild(newNode.firstChild);
+      }
+      return fragment;
     }
 
     return newNode;

diff --git a/src/editor.js b/src/editor.js
@@ -57,7 +57,9 @@
     // Placeholder text to use, defaults to the placeholder attribute on the textarea element
     placeholderText:      undef,
     // Whether the rich text editor should be rendered on touch devices (wysihtml5 >= 0.3.0 comes with basic support for iOS 5)
-    supportTouchDevices:  true
+    supportTouchDevices:  true,
+    // Whether senseless <span> elements (empty or without attributes) should be removed/replaced with their content
+    cleanUp:              true
   };
 
   wysihtml5.Editor = wysihtml5.lang.Dispatcher.extend(
@@ -152,7 +154,7 @@
     },
 
     parse: function(htmlOrElement) {
-      var returnValue = this.config.parser(htmlOrElement, this.config.parserRules, this.composer.sandbox.getDocument(), true);
+      var returnValue = this.config.parser(htmlOrElement, this.config.parserRules, this.composer.sandbox.getDocument(), this.config.cleanUp);
       if (typeof(htmlOrElement) === "object") {
         wysihtml5.quirks.redraw(htmlOrElement);
       }

diff --git a/test/dom/parse_test.js b/test/dom/parse_test.js
@@ -211,6 +211,7 @@ if (wysihtml5.browser.supported()) {
 
   test("Test cleanup mode", function() {
     var rules = {
+      classes: { a: 1, c: 1 },
       tags: { span: true, div: true }
     };
 
@@ -223,6 +224,18 @@ if (wysihtml5.browser.supported()) {
       this.sanitize("<span><p>foo</p></span>", rules, null, true),
       "foo"
     );
+
+    this.equal(
+      this.sanitize('<span class="a"></span><span class="a">foo</span>', rules, null, true),
+      '<span class="a">foo</span>',
+      "Empty 'span' is correctly removed"
+    );
+
+    this.equal(
+      this.sanitize('<span><span class="a">1</span> <span class="b">2</span> <span class="c">3</span></span>', rules, null, true),
+      '<span class="a">1</span> 2 <span class="c">3</span>',
+      "Senseless 'span' is correctly removed"
+    );
   });