0c37c581c298c4ccd9ff211021a640518de558ee
[moodle.git] / lib / editor / atto / yui / src / editor / js / clean.js
1 // This file is part of Moodle - http://moodle.org/
2 //
3 // Moodle is free software: you can redistribute it and/or modify
4 // it under the terms of the GNU General Public License as published by
5 // the Free Software Foundation, either version 3 of the License, or
6 // (at your option) any later version.
7 //
8 // Moodle is distributed in the hope that it will be useful,
9 // but WITHOUT ANY WARRANTY; without even the implied warranty of
10 // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
11 // GNU General Public License for more details.
12 //
13 // You should have received a copy of the GNU General Public License
14 // along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
16 /**
17  * @module moodle-editor_atto-editor
18  * @submodule clean
19  */
21 /**
22  * Functions for the Atto editor to clean the generated content.
23  *
24  * See {{#crossLink "M.editor_atto.Editor"}}{{/crossLink}} for details.
25  *
26  * @namespace M.editor_atto
27  * @class EditorClean
28  */
30 function EditorClean() {}
32 EditorClean.ATTRS= {
33 };
35 EditorClean.prototype = {
36     /**
37      * Clean the generated HTML content without modifying the editor content.
38      *
39      * This includes removes all YUI ids from the generated content.
40      *
41      * @return {string} The cleaned HTML content.
42      */
43     getCleanHTML: function() {
44         // Clone the editor so that we don't actually modify the real content.
45         var editorClone = this.editor.cloneNode(true),
46             html;
48         // Remove all YUI IDs.
49         Y.each(editorClone.all('[id^="yui"]'), function(node) {
50             node.removeAttribute('id');
51         });
53         editorClone.all('.atto_control').remove(true);
54         html = editorClone.get('innerHTML');
56         // Revert untouched editor contents to an empty string.
57         if (html === '<p></p>' || html === '<p><br></p>') {
58             return '';
59         }
61         // Remove any and all nasties from source.
62        return this._cleanHTML(html);
63     },
65     /**
66      * Clean the HTML content of the editor.
67      *
68      * @method cleanEditorHTML
69      * @chainable
70      */
71     cleanEditorHTML: function() {
72         var startValue = this.editor.get('innerHTML');
73         this.editor.set('innerHTML', this._cleanHTML(startValue));
75         return this;
76     },
78     /**
79      * Clean the specified HTML content and remove any content which could cause issues.
80      *
81      * @method _cleanHTML
82      * @private
83      * @param {String} content The content to clean
84      * @return {String} The cleaned HTML
85      */
86     _cleanHTML: function(content) {
87         // Removing limited things that can break the page or a disallowed, like unclosed comments, style blocks, etc.
89         var rules = [
90             // Remove any style blocks. Some browsers do not work well with them in a contenteditable.
91             // Plus style blocks are not allowed in body html, except with "scoped", which most browsers don't support as of 2015.
92             // Reference: "http://stackoverflow.com/questions/1068280/javascript-regex-multiline-flag-doesnt-work"
93             {regex: /<style[^>]*>[\s\S]*?<\/style>/gi, replace: ""},
95             // Remove any open HTML comment opens that are not followed by a close. This can completely break page layout.
96             {regex: /<!--(?![\s\S]*?-->)/gi, replace: ""},
98             // Source: "http://www.codinghorror.com/blog/2006/01/cleaning-words-nasty-html.html"
99             // Remove forbidden tags for content, title, meta, style, st0-9, head, font, html, body, link.
100             {regex: /<\/?(?:title|meta|style|st\d|head|font|html|body|link)[^>]*?>/gi, replace: ""}
101         ];
103         return this._filterContentWithRules(content, rules);
104     },
106     /**
107      * Take the supplied content and run on the supplied regex rules.
108      *
109      * @method _filterContentWithRules
110      * @private
111      * @param {String} content The content to clean
112      * @param {Array} rules An array of structures: [ {regex: /something/, replace: "something"}, {...}, ...]
113      * @return {String} The cleaned content
114      */
115     _filterContentWithRules: function(content, rules) {
116         var i = 0;
117         for (i = 0; i < rules.length; i++) {
118             content = content.replace(rules[i].regex, rules[i].replace);
119         }
121         return content;
122     },
124     /**
125      * Intercept and clean html paste events.
126      *
127      * @method pasteCleanup
128      * @param {Object} sourceEvent The YUI EventFacade  object
129      * @return {Boolean} True if the passed event should continue, false if not.
130      */
131     pasteCleanup: function(sourceEvent) {
132         // We only expect paste events, but we will check anyways.
133         if (sourceEvent.type === 'paste') {
134             // The YUI event wrapper doesn't provide paste event info, so we need the underlying event.
135             var event = sourceEvent._event;
136             // Check if we have a valid clipboardData object in the event.
137             // IE has a clipboard object at window.clipboardData, but as of IE 11, it does not provide HTML content access.
138             if (event && event.clipboardData && event.clipboardData.getData && event.clipboardData.types) {
139                 // Check if there is HTML type to be pasted, if we can get it, we want to scrub before insert.
140                 var types = event.clipboardData.types;
141                 var isHTML = false;
142                 // Different browsers use different containers to hold the types, so test various functions.
143                 if (typeof types.contains === 'function') {
144                     isHTML = types.contains('text/html');
145                 } else if (typeof types.indexOf === 'function') {
146                     isHTML = (types.indexOf('text/html') > -1);
147                 }
149                 if (isHTML) {
150                     // Get the clipboard content.
151                     var content;
152                     try {
153                         content = event.clipboardData.getData('text/html');
154                     } catch (error) {
155                         // Something went wrong. Fallback.
156                         this.fallbackPasteCleanupDelayed();
157                         return true;
158                     }
160                     // Stop the original paste.
161                     sourceEvent.preventDefault();
163                     // Scrub the paste content.
164                     content = this._cleanPasteHTML(content);
166                     // Save the current selection.
167                     // Using saveSelection as it produces a more consistent experience.
168                     var selection = window.rangy.saveSelection();
170                     // Insert the content.
171                     this.insertContentAtFocusPoint(content);
173                     // Restore the selection, and collapse to end.
174                     window.rangy.restoreSelection(selection);
175                     window.rangy.getSelection().collapseToEnd();
177                     // Update the text area.
178                     this.updateOriginal();
179                     return false;
180                 } else {
181                     // Due to poor cross browser clipboard compatibility, the failure to find html doesn't mean it isn't there.
182                     // Wait for the clipboard event to finish then fallback clean the entire editor.
183                     this.fallbackPasteCleanupDelayed();
184                     return true;
185                 }
186             } else {
187                 // If we reached a here, this probably means the browser has limited (or no) clipboard support.
188                 // Wait for the clipboard event to finish then fallback clean the entire editor.
189                 this.fallbackPasteCleanupDelayed();
190                 return true;
191             }
192         }
194         // We should never get here - we must have received a non-paste event for some reason.
195         // Um, just call updateOriginalDelayed() - it's safe.
196         this.updateOriginalDelayed();
197         return true;
198     },
200     /**
201      * Cleanup code after a paste event if we couldn't intercept the paste content.
202      *
203      * @method fallbackPasteCleanup
204      * @chainable
205      */
206     fallbackPasteCleanup: function() {
207         Y.log('Using fallbackPasteCleanup for atto cleanup', 'debug', LOGNAME);
209         // Save the current selection (cursor position).
210         var selection = window.rangy.saveSelection();
212         // Get, clean, and replace the content in the editable.
213         var content = this.editor.get('innerHTML');
214         this.editor.set('innerHTML', this._cleanPasteHTML(content));
216         // Update the textarea.
217         this.updateOriginal();
219         // Restore the selection (cursor position).
220         window.rangy.restoreSelection(selection);
222         return this;
223     },
225     /**
226      * Calls fallbackPasteCleanup on a short timer to allow the paste event handlers to complete.
227      *
228      * @method fallbackPasteCleanupDelayed
229      * @chainable
230      */
231     fallbackPasteCleanupDelayed: function() {
232         Y.soon(Y.bind(this.fallbackPasteCleanup, this));
234         return this;
235     },
237     /**
238      * Cleanup html that comes from WYSIWYG paste events. These are more likely to contain messy code that we should strip.
239      *
240      * @method _cleanPasteHTML
241      * @private
242      * @param {String} content The html content to clean
243      * @return {String} The cleaned HTML
244      */
245     _cleanPasteHTML: function(content) {
246         // Return an empty string if passed an invalid or empty object.
247         if (!content || content.length === 0) {
248             return "";
249         }
251         // Rules that get rid of the real-nasties and don't care about normalize code (correct quotes, white spaces, etc).
252         var rules = [
253             // Stuff that is specifically from MS Word and similar office packages.
254             // Remove all garbage after closing html tag.
255             {regex: /<\s*\/html\s*>([\s\S]+)$/gi, replace: ""},
256             // Remove if comment blocks.
257             {regex: /<!--\[if[\s\S]*?endif\]-->/gi, replace: ""},
258             // Remove start and end fragment comment blocks.
259             {regex: /<!--(Start|End)Fragment-->/gi, replace: ""},
260             // Remove any xml blocks.
261             {regex: /<xml[^>]*>[\s\S]*?<\/xml>/gi, replace: ""},
262             // Remove any <?xml><\?xml> blocks.
263             {regex: /<\?xml[^>]*>[\s\S]*?<\\\?xml>/gi, replace: ""},
264             // Remove <o:blah>, <\o:blah>.
265             {regex: /<\/?\w+:[^>]*>/gi, replace: ""}
266         ];
268         // Apply the first set of harsher rules.
269         content = this._filterContentWithRules(content, rules);
271         // Apply the standard rules, which mainly cleans things like headers, links, and style blocks.
272         content = this._cleanHTML(content);
274         // Check if the string is empty or only contains whitespace.
275         if (content.length === 0 || !content.match(/\S/)) {
276             return content;
277         }
279         // Now we let the browser normalize the code by loading it into the DOM and then get the html back.
280         // This gives us well quoted, well formatted code to continue our work on. Word may provide very poorly formatted code.
281         var holder = document.createElement('div');
282         holder.innerHTML = content;
283         content = holder.innerHTML;
284         // Free up the DOM memory.
285         holder.innerHTML = "";
287         // Run some more rules that care about quotes and whitespace.
288         rules = [
289             // Get all style attributes so we can work on them.
290             {regex: /(<[^>]*?style\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
291                     // Remove MSO-blah, MSO:blah style attributes.
292                     group2 = group2.replace(/(?:^|;)[\s]*MSO[-:](?:&[\w]*;|[^;"])*/gi,"");
293                     return group1 + group2 + group3;
294                 }},
295             // Get all class attributes so we can work on them.
296             {regex: /(<[^>]*?class\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {
297                     // Remove MSO classes.
298                     group2 = group2.replace(/(?:^|[\s])[\s]*MSO[_a-zA-Z0-9\-]*/gi,"");
299                     // Remove Apple- classes.
300                     group2 = group2.replace(/(?:^|[\s])[\s]*Apple-[_a-zA-Z0-9\-]*/gi,"");
301                     return group1 + group2 + group3;
302                 }},
303             // Remove OLE_LINK# anchors that may litter the code.
304             {regex: /<a [^>]*?name\s*?=\s*?"OLE_LINK\d*?"[^>]*?>\s*?<\/a>/gi, replace: ""}
305         ];
307         // Apply the rules.
308         content = this._filterContentWithRules(content, rules);
310         // Reapply the standard cleaner to the content.
311         content = this._cleanHTML(content);
313         // Clean unused spans out of the content.
314         content = this._cleanSpans(content);
316         return content;
317     },
319     /**
320      * Clean empty or un-unused spans from passed HTML.
321      *
322      * This code intentionally doesn't use YUI Nodes. YUI was quite a bit slower at this, so using raw DOM objects instead.
323      *
324      * @method _cleanSpans
325      * @private
326      * @param {String} content The content to clean
327      * @return {String} The cleaned HTML
328      */
329     _cleanSpans: function(content) {
330         // Return an empty string if passed an invalid or empty object.
331         if (!content || content.length === 0) {
332             return "";
333         }
334         // Check if the string is empty or only contains whitespace.
335         if (content.length === 0 || !content.match(/\S/)) {
336             return content;
337         }
339         var rules = [
340             // Remove unused class, style, or id attributes. This will make empty tag detection easier later.
341             {regex: /(<[^>]*?)(?:[\s]*(?:class|style|id)\s*?=\s*?"\s*?")+/gi, replace: "$1"}
342         ];
343         // Apply the rules.
344         content = this._filterContentWithRules(content, rules);
346         // Reference: "http://stackoverflow.com/questions/8131396/remove-nested-span-without-id"
348         // This is better to run detached from the DOM, so the browser doesn't try to update on each change.
349         var holder = document.createElement('div');
350         holder.innerHTML = content;
351         var spans = holder.getElementsByTagName('span');
353         // Since we will be removing elements from the list, we should copy it to an array, making it static.
354         var spansarr = Array.prototype.slice.call(spans, 0);
356         spansarr.forEach(function(span) {
357             if (!span.hasAttributes()) {
358                 // If no attributes (id, class, style, etc), this span is has no effect.
359                 // Move each child (if they exist) to the parent in place of this span.
360                 while (span.firstChild) {
361                     span.parentNode.insertBefore(span.firstChild, span);
362                 }
364                 // Remove the now empty span.
365                 span.parentNode.removeChild(span);
366             }
367         });
369         return holder.innerHTML;
370     }
371 };
373 Y.Base.mix(Y.M.editor_atto.Editor, [EditorClean]);