Proyectos de Subversion Moodle

// This file is part of Moodle - http://moodle.org/

//

// Moodle is free software: you can redistribute it and/or modify

// it under the terms of the GNU General Public License as published by

// the Free Software Foundation, either version 3 of the License, or

// (at your option) any later version.

//

// Moodle is distributed in the hope that it will be useful,

// but WITHOUT ANY WARRANTY; without even the implied warranty of

// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

// GNU General Public License for more details.

//

// You should have received a copy of the GNU General Public License

// along with Moodle.  If not, see <http://www.gnu.org/licenses/>.

/**

 * @module moodle-editor_atto-editor

 * @submodule clean

 */

/**

 * Functions for the Atto editor to clean the generated content.

 *

 * See {{#crossLink "M.editor_atto.Editor"}}{{/crossLink}} for details.

 *

 * @namespace M.editor_atto

 * @class EditorClean

 */

function EditorClean() {}

EditorClean.ATTRS = {

};

EditorClean.prototype = {

    /**

     * Clean the generated HTML content without modifying the editor content.

     *

     * This includes removes all YUI ids from the generated content.

     *

     * @return {string} The cleaned HTML content.

     */

    getCleanHTML: function() {

        // Clone the editor so that we don't actually modify the real content.

        var editorClone = this.editor.cloneNode(true),

            html;

        // Remove all YUI IDs.

        Y.each(editorClone.all('[id^="yui"]'), function(node) {

            node.removeAttribute('id');

        });

        editorClone.all('.atto_control').remove(true);

        html = editorClone.get('innerHTML');

        // Revert untouched editor contents to an empty string.

        var emptyContents = [

            // For FF and Chrome.

            '<p></p>',

            '<p><br></p>',

            '<br>',

            '<p dir="rtl" style="text-align: right;"></p>',

            '<p dir="rtl" style="text-align: right;"><br></p>',

            '<p dir="ltr" style="text-align: left;"></p>',

            '<p dir="ltr" style="text-align: left;"><br></p>',

            // For IE 9 and 10.

            '<p>&nbsp;</p>',

            '<p><br>&nbsp;</p>',

            '<p dir="rtl" style="text-align: right;">&nbsp;</p>',

            '<p dir="rtl" style="text-align: right;"><br>&nbsp;</p>',

            '<p dir="ltr" style="text-align: left;">&nbsp;</p>',

            '<p dir="ltr" style="text-align: left;"><br>&nbsp;</p>'

        ];

        if (emptyContents.includes(html)) {

            return '';

        }

        // Remove any and all nasties from source.

        return this._cleanHTML(html);

    },

    /**

     * Clean the HTML content of the editor.

     *

     * @method cleanEditorHTML

     * @chainable

     */

    cleanEditorHTML: function() {

        var startValue = this.editor.get('innerHTML');

        this.editor.set('innerHTML', this._cleanHTML(startValue));

        return this;

    },

    /**

     * Clean the specified HTML content and remove any content which could cause issues.

     *

     * @method _cleanHTML

     * @private

     * @param {String} content The content to clean

     * @param {Boolean} deepClean If true, do a more in depth (and resource intensive) cleaning of the HTML.

     * @return {String} The cleaned HTML

     */

    _cleanHTML: function(content, deepClean) {

        // Removing limited things that can break the page or a disallowed, like unclosed comments, style blocks, etc.

        var rules = [

            // Remove any style blocks. Some browsers do not work well with them in a contenteditable.

            // Plus style blocks are not allowed in body html, except with "scoped", which most browsers don't support as of 2015.

            // Reference: "http://stackoverflow.com/questions/1068280/javascript-regex-multiline-flag-doesnt-work"

            {regex: /<style[^>]*>[\s\S]*?<\/style>/gi, replace: ""},

            // Remove any open HTML comment opens that are not followed by a close. This can completely break page layout.

            {regex: /<!--(?![\s\S]*?-->)/gi, replace: ""},

            // Source: "http://www.codinghorror.com/blog/2006/01/cleaning-words-nasty-html.html"

            // Remove forbidden tags for content, title, meta, style, st0-9, head, font, html, body, link.

            {regex: /<\/?(?:title|meta|style|st\d|head\b|font|html|body|link)[^>]*?>/gi, replace: ""}

        ];

        content = this._filterContentWithRules(content, rules);

        if (deepClean) {

            content = this._cleanHTMLLists(content);

        }

        return content;

    },

    /**

     * Take the supplied content and run on the supplied regex rules.

     *

     * @method _filterContentWithRules

     * @private

     * @param {String} content The content to clean

     * @param {Array} rules An array of structures: [ {regex: /something/, replace: "something"}, {...}, ...]

     * @return {String} The cleaned content

     */

    _filterContentWithRules: function(content, rules) {

        var i = 0;

        for (i = 0; i < rules.length; i++) {

            content = content.replace(rules[i].regex, rules[i].replace);

        }

        return content;

    },

    /**

     * Intercept and clean html paste events.

     *

     * @method pasteCleanup

     * @param {Object} sourceEvent The YUI EventFacade  object

     * @return {Boolean} True if the passed event should continue, false if not.

     */

    pasteCleanup: function(sourceEvent) {

        // We only expect paste events, but we will check anyways.

        if (sourceEvent.type === 'paste') {

            // Register the delayed paste cleanup. We will cancel it if we register the fallback cleanup.

            var delayedCleanup = this.postPasteCleanupDelayed();

            // The YUI event wrapper doesn't provide paste event info, so we need the underlying event.

            var event = sourceEvent._event;

            // Check if we have a valid clipboardData object in the event.

            // IE has a clipboard object at window.clipboardData, but as of IE 11, it does not provide HTML content access.

            if (event && event.clipboardData && event.clipboardData.getData && event.clipboardData.types) {

                // Check if there is HTML type to be pasted, if we can get it, we want to scrub before insert.

                var types = event.clipboardData.types;

                var isHTML = false;

                // Different browsers use different containers to hold the types, so test various functions.

                if (typeof types.contains === 'function') {

                    isHTML = types.contains('text/html');

                } else if (typeof types.indexOf === 'function') {

                    isHTML = (types.indexOf('text/html') > -1);

                }

                var content;

                if (isHTML) {

                    // Get the clipboard content.

                    try {

                        content = event.clipboardData.getData('text/html');

                    } catch (error) {

                        // Something went wrong. Fallback.

                        delayedCleanup.cancel();

                        this.fallbackPasteCleanupDelayed();

                        return true;

                    }

                    // Stop the original paste.

                    sourceEvent.preventDefault();

                    // Scrub the paste content.

                    content = this._cleanPasteHTML(content);

                    // Insert the content.

                    this.insertContentAtFocusPoint(content);

                    // Update the text area.

                    this.updateOriginal();

                    return false;

                } else {

                    try {

                        // Plaintext clipboard content can only be retrieved this way.

                        content = event.clipboardData.getData('text');

                    } catch (error) {

                        // Something went wrong. Fallback.

                        // Due to poor cross browser clipboard compatibility, the failure to find html doesn't mean it isn't there.

                        // Wait for the clipboard event to finish then fallback clean the entire editor.

                        delayedCleanup.cancel();

                        this.fallbackPasteCleanupDelayed();

                        return true;

                    }

                }

            } else {

                // If we reached a here, this probably means the browser has limited (or no) clipboard support.

                // Wait for the clipboard event to finish then fallback clean the entire editor.

                this.fallbackPasteCleanupDelayed();

                return true;

            }

        }

        // We should never get here - we must have received a non-paste event for some reason.

        // Um, just call updateOriginalDelayed() - it's safe.

        this.updateOriginalDelayed();

        return true;

    },

    /**

     * Calls postPasteCleanup on a short timer to allow the paste event handlers to complete, then deep clean the content.

     *

     * @method postPasteCleanupDelayed

     * @return {object}

     * @chainable

     */

    postPasteCleanupDelayed: function() {

        Y.soon(Y.bind(this.postPasteCleanup, this));

        return this;

    },

    /**

     * Do additional cleanup after the paste is complete.

     *

     * @method postPasteCleanup

     * @return {object}

     * @chainable

     */

    postPasteCleanup: function() {

        Y.log('Executing delayed post paste cleanup', 'debug', LOGNAME);

        // Save the current selection (cursor position).

        var selection = window.rangy.saveSelection();

        // Get, clean, and replace the content in the editable.

        var content = this.editor.get('innerHTML');

        this.editor.set('innerHTML', this._cleanHTML(content, true));

        // Update the textarea.

        this.updateOriginal();

        // Restore the selection (cursor position).

        window.rangy.restoreSelection(selection);

        return this;

    },

    /**

     * Cleanup code after a paste event if we couldn't intercept the paste content.

     *

     * @method fallbackPasteCleanup

     * @return {object}

     * @chainable

     */

    fallbackPasteCleanup: function() {

        Y.log('Using fallbackPasteCleanup for atto cleanup', 'debug', LOGNAME);

        // Save the current selection (cursor position).

        var selection = window.rangy.saveSelection();

        // Get, clean, and replace the content in the editable.

        var content = this.editor.get('innerHTML');

        this.editor.set('innerHTML', this._cleanHTML(this._cleanPasteHTML(content), true));

        // Update the textarea.

        this.updateOriginal();

        // Restore the selection (cursor position).

        window.rangy.restoreSelection(selection);

        return this;

    },

    /**

     * Calls fallbackPasteCleanup on a short timer to allow the paste event handlers to complete.

     *

     * @method fallbackPasteCleanupDelayed

     * @chainable

     */

    fallbackPasteCleanupDelayed: function() {

        Y.soon(Y.bind(this.fallbackPasteCleanup, this));

        return this;

    },

    /**

     * Cleanup html that comes from WYSIWYG paste events. These are more likely to contain messy code that we should strip.

     *

     * @method _cleanPasteHTML

     * @private

     * @param {String} content The html content to clean

     * @return {String} The cleaned HTML

     */

    _cleanPasteHTML: function(content) {

        // Return an empty string if passed an invalid or empty object.

        if (!content || content.length === 0) {

            return "";

        }

        // Rules that get rid of the real-nasties and don't care about normalize code (correct quotes, white spaces, etc).

        var rules = [

            // Stuff that is specifically from MS Word and similar office packages.

            // Remove all garbage after closing html tag.

            {regex: /<\s*\/html\s*>([\s\S]+)$/gi, replace: ""},

            // Remove if comment blocks.

            {regex: /<!--\[if[\s\S]*?endif\]-->/gi, replace: ""},

            // Remove start and end fragment comment blocks.

            {regex: /<!--(Start|End)Fragment-->/gi, replace: ""},

            // Remove any xml blocks.

            {regex: /<xml[^>]*>[\s\S]*?<\/xml>/gi, replace: ""},

            // Remove any <?xml><\?xml> blocks.

            {regex: /<\?xml[^>]*>[\s\S]*?<\\\?xml>/gi, replace: ""},

            // Remove <o:blah>, <\o:blah>.

            {regex: /<\/?\w+:[^>]*>/gi, replace: ""}

        ];

        // Apply the first set of harsher rules.

        content = this._filterContentWithRules(content, rules);

        // Apply the standard rules, which mainly cleans things like headers, links, and style blocks.

        content = this._cleanHTML(content);

        // Check if the string is empty or only contains whitespace.

        if (content.length === 0 || !content.match(/\S/)) {

            return content;

        }

        // Now we let the browser normalize the code by loading it into the DOM and then get the html back.

        // This gives us well quoted, well formatted code to continue our work on. Word may provide very poorly formatted code.

        var holder = document.createElement('div');

        holder.innerHTML = content;

        content = holder.innerHTML;

        // Free up the DOM memory.

        holder.innerHTML = "";

        // Run some more rules that care about quotes and whitespace.

        rules = [

            // Get all class attributes so we can work on them.

            {regex: /(<[^>]*?class\s*?=\s*?")([^>"]*)(")/gi, replace: function(match, group1, group2, group3) {

                    // Remove MSO classes.

                    group2 = group2.replace(/(?:^|[\s])[\s]*MSO[_a-zA-Z0-9\-]*/gi, "");

                    // Remove Apple- classes.

                    group2 = group2.replace(/(?:^|[\s])[\s]*Apple-[_a-zA-Z0-9\-]*/gi, "");

                    return group1 + group2 + group3;

                }},

            // Remove OLE_LINK# anchors that may litter the code.

            {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);

        // Reapply the standard cleaner to the content.

        content = this._cleanHTML(content);

        // Clean unused spans out of the content.

        content = this._cleanSpans(content);

        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.

     *

     * This code intentionally doesn't use YUI Nodes. YUI was quite a bit slower at this, so using raw DOM objects instead.

     *

     * @method _cleanSpans

     * @private

     * @param {String} content The content to clean

     * @return {String} The cleaned HTML

     */

    _cleanSpans: function(content) {

        // Return an empty string if passed an invalid or empty object.

        if (!content || content.length === 0) {

            return "";

        }

        // Check if the string is empty or only contains whitespace.

        if (content.length === 0 || !content.match(/\S/)) {

            return content;

        }

        var rules = [

            // Remove unused class, style, or id attributes. This will make empty tag detection easier later.

            {regex: /(<[^>]*?)(?:[\s]*(?:class|style|id)\s*?=\s*?"\s*?")+/gi, replace: "$1"}

        ];

        // Apply the rules.

        content = this._filterContentWithRules(content, rules);

        // Reference: "http://stackoverflow.com/questions/8131396/remove-nested-span-without-id"

        // This is better to run detached from the DOM, so the browser doesn't try to update on each change.

        var holder = document.createElement('div');

        holder.innerHTML = content;

        var spans = holder.getElementsByTagName('span');

        // Since we will be removing elements from the list, we should copy it to an array, making it static.

        var spansarr = Array.prototype.slice.call(spans, 0);

        spansarr.forEach(function(span) {

            if (!span.hasAttributes()) {

                // If no attributes (id, class, style, etc), this span is has no effect.

                // Move each child (if they exist) to the parent in place of this span.

                while (span.firstChild) {

                    span.parentNode.insertBefore(span.firstChild, span);

                }

                // Remove the now empty span.

                span.parentNode.removeChild(span);

            }

        });

        return holder.innerHTML;

    },

    /**

     * This is a function that searches for, and attempts to correct certain issues with ul/ol html lists.

     * This is needed because these lists are used heavily in page layout, and content with bad tags can

     * lead to broke course pages.

     *

     * The theory of operation here is to linearly process the incoming content, counting the opening and closing

     * of list tags, and determining when there is a mismatch.

     *

     * The specific issues this should be able to correct are:

     * - Orphaned li elements will be wrapped in a set of ul tags.

     * - li elements inside li elements.

     * - An extra closing ul, or ol tag will be discarded.

     * - An extra closing li tag will have an opening tag added if appropriate, or will be discarded.

     * - If there is an unmatched list open tag, a matching close tag will be inserted.

     *

     * It does it's best to match the case of corrected tags. Even though not required by html spec,

     * it seems like the safer route.

     *

     * A note on parent elements of li. This code assumes that li must have a ol or ul parent.

     * There are two other potential other parents of li. They are menu and dir. The dir tag was deprecated in

     * HTML4, and removed in HTML5. The menu tag is experimental as of this writing, and basically doesn't work

     * in any browsers, even Firefox, which theoretically has limited support for it. If other parents of li

     * become viable, they will need to be added to this code.

     *

     * @method _cleanHTMLLists

     * @private

     * @param {String} content The content to clean

     * @return {String} The cleaned content

     */

    _cleanHTMLLists: function(content) {

        var output = '',

            toProcess = content,

            match = null,

            openTags = [],

            currentTag = null,

            previousTag = null;

        // Use a regular expression to find the next open or close li, ul, or ol tag.

        // Keep going until there are no more matching tags left.

        // This expression looks for whole words by employing the word boundary (\b) metacharacter.

        while ((match = toProcess.match(/<(\/?)(li|ul|ol)\b[^>]*>/i))) {

            currentTag = {

                tag: match[2],

                tagLowerCase: match[2].toLowerCase(),

                fullTag: match[0],

                isOpen: (match[1].length == 1) ? false : true

            };

            // Get the most recent open tag.

            previousTag = (openTags.length) ? openTags[openTags.length - 1] : null;

            // Slice up the content based on the match and add content before the match to output.

            output += toProcess.slice(0, match.index);

            toProcess = toProcess.slice(match.index + match[0].length);

            // Now the full content is in output + currentTag.fullTag + toProcess. When making fixes, it is best to push the fix and

            // fullTag back onto the front or toProcess, then restart the loop. This allows processing to follow the normal path

            // most often. But sometimes we will need to modify output to insert or remove tags in the already complete code.

            if (currentTag.isOpen) {

                // We are at the opening phase of a tag.

                // We have to do special processing for list items, as they can only be children of ul and ol tags.

                if (currentTag.tagLowerCase === 'li') {

                    if (!previousTag) {

                        // This means we have are opening a li, but aren't in a list. This is not allowed!

                        // We are going to check for the count of open and close ol tags ahead to decide what to do.

                        var closeCount = (toProcess.match(/<\/(ol)[ >]/ig) || []).length;

                        var openCount = (toProcess.match(/<(ol)[ >]/ig) || []).length;

                        if (closeCount > openCount) {

                            // There are more close ol's ahead than opens ahead. So open the ol and try again.

                            Y.log('Adding an opening ol for orphan li', 'debug', LOGNAME);

                            toProcess = '<ol>' + currentTag.fullTag + toProcess;

                            continue;

                        }

                        // For the other cases, just open a ul and try again. Later the closing ul will get matched if it exists,

                        // or if it doesn't one will automatically get inserted.

                        Y.log('Adding an opening ul for orphan li', 'debug', LOGNAME);

                        toProcess = '<ul>' + currentTag.fullTag + toProcess;

                        continue;

                    }

                    if (previousTag.tagLowerCase === 'li') {

                        // You aren't allowed to nest li tags. Close the current one before starting the new one.

                        Y.log('Adding a closing ' + previousTag.tag + ' before opening a new one.', 'debug', LOGNAME);

                        toProcess = '</' + previousTag.tag + '>' + currentTag.fullTag + toProcess;

                        continue;

                    }

                    // Previous tag must be a list at this point, so we can continue.

                }

                // If we made it this far, record the tag to the open tags list.

                openTags.push({

                    tag: currentTag.tag,

                    tagLowerCase: currentTag.tagLowerCase,

                    position: output.length,

                    length: currentTag.fullTag.length

                });

            } else {

                // We are processing a closing tag.

                if (openTags.length == 0) {

                    // We are closing a tag that isn't open. That's a problem. Just discarding should be safe.

                    Y.log('Discarding extra ' + currentTag.fullTag + ' tag.', 'debug', LOGNAME);

                    continue;

                }

                if (previousTag.tagLowerCase === currentTag.tagLowerCase) {

                    // Closing a tag that matches the open tag. This is the nominal case. Pop it off, and update previousTag.

                    if (currentTag.tag != previousTag.tag) {

                        // This would mean cases don't match between the opening and closing tag.

                        // We are going to swap them to match, even though not required.

                        currentTag.fullTag = currentTag.fullTag.replace(currentTag.tag, previousTag.tag);

                    }

                    openTags.pop();

                    previousTag = (openTags.length) ? openTags[openTags.length - 1] : null;

                } else {

                    // We are closing a tag that isn't the most recent open one open, so we have a mismatch.

                    if (currentTag.tagLowerCase === 'li' && previousTag.liEnd && (previousTag.liEnd < output.length)) {

                        // We are closing an unopened li, but the parent list has complete li tags more than 0 chars ago.

                        // Assume we are missing an open li at the end of the previous li, and insert there.

                        Y.log('Inserting opening ' + currentTag.tag + ' after previous li.', 'debug', LOGNAME);

                        output = this._insertString(output, '<' + currentTag.tag + '>', previousTag.liEnd);

                    } else if (currentTag.tagLowerCase === 'li' && !previousTag.liEnd &&

                            ((previousTag.position + previousTag.length) < output.length)) {

                        // We are closing an unopened li, and the parent has no previous lis in it, but opened more than 0

                        // chars ago. Assume we are missing a starting li, and insert it right after the list opened.

                        Y.log('Inserting opening ' + currentTag.tag + ' at start of parent.', 'debug', LOGNAME);

                        output = this._insertString(output, '<' + currentTag.tag + '>', previousTag.position + previousTag.length);

                    } else if (previousTag.tagLowerCase === 'li') {

                        // We must be trying to close a ul/ol while in a li. Just assume we are missing a closing li.

                        Y.log('Adding a closing ' + previousTag.tag + ' before closing ' + currentTag.tag + '.', 'debug', LOGNAME);

                        toProcess = '</' + previousTag.tag + '>' + currentTag.fullTag + toProcess;

                        continue;

                    } else {

                        // Here we must be trying to close a tag that isn't open, or is open higher up. Just discard.

                        // If there ends up being a missing close tag later on, that will get fixed separately.

                        Y.log('Discarding incorrect ' + currentTag.fullTag + '.', 'debug', LOGNAME);

                        continue;

                    }

                }

                // If we have a valid closing li tag, and a list, record where the li ended.

                if (currentTag.tagLowerCase === 'li' && previousTag) {

                    previousTag.liEnd = output.length + currentTag.fullTag.length;

                }

            }

            // Now we can add the tag to the output.

            output += currentTag.fullTag;

        }

        // Add anything left in toProcess to the output.

        output += toProcess;

        // Anything still in the openTags list are extra and need to be dealt with.

        if (openTags.length) {

            // Work on the list in reverse order so positions stay correct.

            while ((currentTag = openTags.pop())) {

                if (currentTag.liEnd) {

                    // We have a position for the last list item in this element. Insert the closing it after that.

                    output = this._insertString(output, '</' + currentTag.tag + '>', currentTag.liEnd);

                    Y.log('Adding closing ' + currentTag.tag + ' based on last li location.', 'debug', LOGNAME);

                } else {

                    // If there weren't any children list items, then we should just remove the tag where it started.

                    // This will also remote an open li tag that runs to the end of the content, since it has no children lis.

                    output = output.slice(0, currentTag.position) + output.slice(currentTag.position + currentTag.length);

                    Y.log('Removing opening ' + currentTag.fullTag + ' because it was missing closing.', 'debug', LOGNAME);

                }

            }

        }

        return output;

    },

    /**

     * Insert a string in the middle of an existing string at the specified location.

     *

     * @method _insertString

     * @param {String} content The subject of the insertion.

     * @param {String} insert The string that will be inserted.

     * @param {Number} position The location to make the insertion.

     * @return {String} The string with the new content inserted.

     */

    _insertString: function(content, insert, position) {

        return content.slice(0, position) + insert + content.slice(position);

    }

};

Y.Base.mix(Y.M.editor_atto.Editor, [EditorClean]);