MDL-55012 Atto: no style attrs on paste

Specifically on paste - we don't need all the random style attributes
from content on the clipboard. When you copy from a webpage - the browser
inlines all the styles from the page so that the pasted content will look
like the place it was copied from. But this is never what you want - you
want the content on paste, but with no special styling.

lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor-debug.js

@@ -1310,14 +1310,6 @@ EditorClean.prototype = {
 
         // Run some more rules that care about quotes and whitespace.
         rules = [
-            // Get all style attributes so we can work on them.
-            {regex: /(<[^>]*?style\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
-                    // Remove MSO-blah, MSO:blah style attributes.
-                    group2 = group2.replace(/(?:^|;)[\s]*MSO[-:](?:&[\w]*;|[^;"])*/gi,"");
-                    // Remove backgroud color style.
-                    group2 = group2.replace(/background-color:.*?;/gi,"");
-                    return group1 + group2 + group3;
-                }},
             // Get all class attributes so we can work on them.
             {regex: /(<[^>]*?class\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
                     // Remove MSO classes.
@@ -1330,6 +1322,9 @@ EditorClean.prototype = {
             {regex: /<a [^>]*?name\s*?=\s*?"OLE_LINK\d*?"[^>]*?>\s*?<\/a>/gi, replace: ""}
         ];
 
+        // Clean all style attributes from the text.
+        content = this._cleanStyles(content);
+
         // Apply the rules.
         content = this._filterContentWithRules(content, rules);
 
@@ -1342,6 +1337,33 @@ EditorClean.prototype = {
         return content;
     },
 
+    /**
+     * Clean all inline styles from pasted text.
+     *
+     * This code intentionally doesn't use YUI Nodes. YUI was quite a bit slower at this, so using raw DOM objects instead.
+     *
+     * @method _cleanStyles
+     * @private
+     * @param {String} content The content to clean
+     * @return {String} The cleaned HTML
+     */
+    _cleanStyles: function(content) {
+        var holder = document.createElement('div');
+        holder.innerHTML = content;
+        var elementsWithStyle = holder.querySelectorAll('[style]');
+        var i = 0;
+
+        for (i = 0; i < elementsWithStyle.length; i++) {
+            elementsWithStyle[i].removeAttribute('style');
+        }
+
+        var elementsWithClass = holder.querySelectorAll('[class]');
+        for (i = 0; i < elementsWithClass.length; i++) {
+            elementsWithClass[i].removeAttribute('class');
+        }
+
+        return holder.innerHTML;
+    },
     /**
      * Clean empty or un-unused spans from passed HTML.
      *

lib/editor/atto/yui/build/moodle-editor_atto-editor/moodle-editor_atto-editor.js

@@ -1299,14 +1299,6 @@ EditorClean.prototype = {
 
         // Run some more rules that care about quotes and whitespace.
         rules = [
-            // Get all style attributes so we can work on them.
-            {regex: /(<[^>]*?style\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
-                    // Remove MSO-blah, MSO:blah style attributes.
-                    group2 = group2.replace(/(?:^|;)[\s]*MSO[-:](?:&[\w]*;|[^;"])*/gi,"");
-                    // Remove backgroud color style.
-                    group2 = group2.replace(/background-color:.*?;/gi,"");
-                    return group1 + group2 + group3;
-                }},
             // Get all class attributes so we can work on them.
             {regex: /(<[^>]*?class\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
                     // Remove MSO classes.
@@ -1319,6 +1311,9 @@ EditorClean.prototype = {
             {regex: /<a [^>]*?name\s*?=\s*?"OLE_LINK\d*?"[^>]*?>\s*?<\/a>/gi, replace: ""}
         ];
 
+        // Clean all style attributes from the text.
+        content = this._cleanStyles(content);
+
         // Apply the rules.
         content = this._filterContentWithRules(content, rules);
 
@@ -1331,6 +1326,33 @@ EditorClean.prototype = {
         return content;
     },
 
+    /**
+     * Clean all inline styles from pasted text.
+     *
+     * This code intentionally doesn't use YUI Nodes. YUI was quite a bit slower at this, so using raw DOM objects instead.
+     *
+     * @method _cleanStyles
+     * @private
+     * @param {String} content The content to clean
+     * @return {String} The cleaned HTML
+     */
+    _cleanStyles: function(content) {
+        var holder = document.createElement('div');
+        holder.innerHTML = content;
+        var elementsWithStyle = holder.querySelectorAll('[style]');
+        var i = 0;
+
+        for (i = 0; i < elementsWithStyle.length; i++) {
+            elementsWithStyle[i].removeAttribute('style');
+        }
+
+        var elementsWithClass = holder.querySelectorAll('[class]');
+        for (i = 0; i < elementsWithClass.length; i++) {
+            elementsWithClass[i].removeAttribute('class');
+        }
+
+        return holder.innerHTML;
+    },
     /**
      * Clean empty or un-unused spans from passed HTML.
      *

lib/editor/atto/yui/src/editor/js/clean.js

@@ -286,14 +286,6 @@ EditorClean.prototype = {
 
         // Run some more rules that care about quotes and whitespace.
         rules = [
-            // Get all style attributes so we can work on them.
-            {regex: /(<[^>]*?style\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
-                    // Remove MSO-blah, MSO:blah style attributes.
-                    group2 = group2.replace(/(?:^|;)[\s]*MSO[-:](?:&[\w]*;|[^;"])*/gi,"");
-                    // Remove backgroud color style.
-                    group2 = group2.replace(/background-color:.*?;/gi,"");
-                    return group1 + group2 + group3;
-                }},
             // Get all class attributes so we can work on them.
             {regex: /(<[^>]*?class\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
                     // Remove MSO classes.
@@ -306,6 +298,9 @@ EditorClean.prototype = {
             {regex: /<a [^>]*?name\s*?=\s*?"OLE_LINK\d*?"[^>]*?>\s*?<\/a>/gi, replace: ""}
         ];
 
+        // Clean all style attributes from the text.
+        content = this._cleanStyles(content);
+
         // Apply the rules.
         content = this._filterContentWithRules(content, rules);
 
@@ -318,6 +313,33 @@ EditorClean.prototype = {
         return content;
     },
 
+    /**
+     * Clean all inline styles from pasted text.
+     *
+     * This code intentionally doesn't use YUI Nodes. YUI was quite a bit slower at this, so using raw DOM objects instead.
+     *
+     * @method _cleanStyles
+     * @private
+     * @param {String} content The content to clean
+     * @return {String} The cleaned HTML
+     */
+    _cleanStyles: function(content) {
+        var holder = document.createElement('div');
+        holder.innerHTML = content;
+        var elementsWithStyle = holder.querySelectorAll('[style]');
+        var i = 0;
+
+        for (i = 0; i < elementsWithStyle.length; i++) {
+            elementsWithStyle[i].removeAttribute('style');
+        }
+
+        var elementsWithClass = holder.querySelectorAll('[class]');
+        for (i = 0; i < elementsWithClass.length; i++) {
+            elementsWithClass[i].removeAttribute('class');
+        }
+
+        return holder.innerHTML;
+    },
     /**
      * Clean empty or un-unused spans from passed HTML.
      *