Squire/source/Editor.js

/* Copyright © 2011 by Neil Jenkins. Licensed under the MIT license. */

/*global Range, window, document, setTimeout */

document.addEventListener( 'DOMContentLoaded', function () {
    
    "use strict";
    
    // --- Constants ---
    
    var DOCUMENT_POSITION_PRECEDING = 2, // Node.DOCUMENT_POSITION_PRECEDING
        ELEMENT_NODE = 1,                // Node.ELEMENT_NODE,
        TEXT_NODE = 3,                   // Node.TEXT_NODE,
        SHOW_TEXT = 4,                   // NodeFilter.SHOW_TEXT,
        SHOW_ELEMENT = 1,                // NodeFilter.SHOW_ELEMENT,
        FILTER_ACCEPT = 1,               // NodeFilter.FILTER_ACCEPT,
        FILTER_SKIP = 3;                 // NodeFilter.FILTER_SKIP;
    
    var doc = document,
        win = doc.defaultView,
        body = doc.body;
        
    var isOpera = !!win.opera;
    var isIE = !!win.ie;
    var useTextFixer = isOpera || isOpera;

    // --- DOM Sugar ---
    
    var createElement = function ( tag, props, children ) {
        var el = doc.createElement( tag ),
            attr, i, l;
        if ( props instanceof Array ) {
            children = props;
            props = null;
        }
        if ( props ) {
            for ( attr in props ) {
                el.setAttribute( attr, props[ attr ] );
            }
        }
        if ( children ) {
            for ( i = 0, l = children.length; i < l; i += 1 ) {
                el.appendChild( children[i] );
            }
        }
        return el;
    };
    
    // --- Events ---
    
    var events = {},
        customEvents = {
            cut: 1, paste: 1, focus: 1, blur: 1,
            pathChange: 1, select: 1, input: 1, undoStateChange: 1
        };
    
    var fireEvent = function ( type, event ) {
        var handlers = events[ type ],
            l, obj;
        if ( handlers ) {
            if ( typeof event !== 'object' ) {
                event = {
                    data: event
                };
            }
            if ( event.type !== type ) {
                event.type = type;
            }
            l = handlers.length;
            while ( l-- ) {
                obj = handlers[l];
                if ( obj.handleEvent ) {
                    obj.handleEvent( event );
                } else {
                    obj( event );
                }
            }
        }
    };
    
    var propagateEvent = function ( event ) {
        fireEvent( event.type, event );
    };
    
    var addEventListener = function ( type, fn ) {
        var handlers = events[ type ];
        if ( !handlers ) {
            handlers = events[ type ] = [];
            if ( !customEvents[ type ] ) {
                doc.addEventListener( type, propagateEvent, false );
            }
        }
        handlers.push( fn );
    };
    
    var removeEventListener = function ( type, fn ) {
        var handlers = events[ type ],
            l;
        if ( handlers ) {
            l = handlers.length;
            while ( l-- ) {
                if ( handlers[l] === fn ) {
                    handlers.splice( l, 1 );
                }
            }
            if ( !handlers.length ) {
                delete events[ type ];
                if ( !customEvents[ type ] ) {
                    doc.removeEventListener( type, propagateEvent, false );
                }
            }
        }
    };
    
    // --- Selection and Path ---

    var createRange = function ( range, startOffset, endContainer, endOffset ) {
        if ( range instanceof Range ) {
            return range.cloneRange();
        }
        var domRange = doc.createRange();
        domRange.setStart( range, startOffset );
        if ( endContainer ) {
            domRange.setEnd( endContainer, endOffset );
        } else {
            domRange.setEnd( range, startOffset );
        }
        return domRange;
    };
    
    var sel = win.getSelection();
    
    var lastSelection = null;
    var getSelection = function () {
        if ( sel.rangeCount ) {
            lastSelection =
                sel.getRangeAt( 0 ).cloneRange();
        }
        return lastSelection;
    };
    
    // IE9 loses selection state of iframe on blur, so make sure we
    // cache it just before it loses focus.
    if ( win.ie ) {
        win.addEventListener( 'beforedeactivate', getSelection, true );
    }
    
    var lastAnchorNode;
    var lastFocusNode;
    var path = '';
    
    var updatePath = function ( _, force ) {
        var anchor = sel.anchorNode,
            focus = sel.focusNode,
            newPath;
        if ( force || anchor !== lastAnchorNode || focus !== lastFocusNode ) {
            lastAnchorNode = anchor;
            lastFocusNode = focus;
            newPath = ( anchor && focus ) ? ( anchor === focus ) ?
                focus.getPath() : '(selection)' : '';
            if ( path !== newPath ) {
                path = newPath;
                fireEvent( 'pathChange', newPath );
            }
        }
        if ( anchor !== focus ) {
            fireEvent( 'select' );
        }
    };
    addEventListener( 'keyup', updatePath );
    addEventListener( 'mouseup', updatePath );
    
    var setSelection = function ( range ) {
        if ( range ) {
            sel.removeAllRanges();
            sel.addRange( range );
        }
    };
    
    // --- Focus ---
    
    var focus = function () {
        win.focus();
    };
    
    var blur = function () {
        win.blur();
    };
    
    win.addEventListener( 'focus', propagateEvent, false );
    win.addEventListener( 'blur', propagateEvent, false );
    
    // --- Get/Set data ---
    
    var getHTML = function () {
        return body.innerHTML;
    };
    
    var setHTML = function ( html ) {
        body.innerHTML = html;
        body.fixCursor();
    };
    
    var insertElement = function ( el, range ) {
        if ( !range ) { range = getSelection(); }
        range.collapse( true );
        range._insertNode( el );
        range.setStartAfter( el );
        setSelection( range );
        updatePath();
    };
    
    // --- Bookmarking ---
    
    var startSelectionId = 'ss-' + Date.now() + '-' + Math.random();
    var endSelectionId = 'es-' + Date.now() + '-' + Math.random();
    
    var saveRangeToBookmark = function ( range ) {
        var startNode = createElement( 'INPUT', {
                id: startSelectionId,
                type: 'hidden'
            }),
            endNode = createElement( 'INPUT', {
                id: endSelectionId,
                type: 'hidden'
            }),
            temp;
        
        range._insertNode( startNode );
        range.collapse( false );
        range._insertNode( endNode );
        
        // In a collapsed range, the start is sometimes inserted after the end!
        if ( startNode.compareDocumentPosition( endNode ) &
                DOCUMENT_POSITION_PRECEDING ) {
            startNode.id = endSelectionId;
            endNode.id = startSelectionId;
            temp = startNode;
            startNode = endNode;
            endNode = temp;
        }
        
        range.setStartAfter( startNode );
        range.setEndBefore( endNode );
    };
    
    var indexOf = Array.prototype.indexOf;
    
    var getRangeAndRemoveBookmark = function ( range ) {
        var start = doc.getElementById( startSelectionId ),
            end = doc.getElementById( endSelectionId );
        
        if ( start && end ) {
            var startContainer = start.parentNode,
                endContainer = end.parentNode;
            
            var _range = {
                startContainer: startContainer,
                endContainer: endContainer,
                startOffset: indexOf.call( startContainer.childNodes, start ),
                endOffset: indexOf.call( endContainer.childNodes, end )
            };
            
            if ( startContainer === endContainer ) {
                _range.endOffset -= 1;
            }
            
            start.detach();
            end.detach();
            
            // Merge any text nodes we split
            startContainer.mergeInlines( _range );
            if ( startContainer !== endContainer ) {
                endContainer.mergeInlines( _range );
            }
            
            if ( !range ) {
                range = doc.createRange();
            }
            range.setStart( _range.startContainer, _range.startOffset );
            range.setEnd( _range.endContainer, _range.endOffset );
            
            if ( !range.collapsed ) {
                range.moveBoundariesDownTree();
            }
        }
        return range;
    };
    
    // --- Undo ---
    
    var undoIndex, // = -1,
        undoStack, // = [],
        undoStackLength, // = 0,
        isInUndoState, // = false,
        docWasChanged = function docWasChanged () {
            if ( isInUndoState ) {
                isInUndoState = false;
                fireEvent( 'undoStateChange', {
                    canUndo: true,
                    canRedo: false
                });
            }
            fireEvent( 'input' );
        };
    
    body.addEventListener( 'DOMCharacterDataModified', docWasChanged, false );
    
    // Leaves bookmark
    var recordUndoState = function ( range ) {
        // Don't record if we're already in an undo state
        if ( !isInUndoState ) {
            // Advance pointer to new position
            undoIndex += 1;

            // Truncate stack if longer (i.e. if has been previously undone)
            if ( undoIndex < undoStackLength) {
                undoStack.length = undoStackLength = undoIndex;
            }

            // Write out data
            if ( range ) {
                saveRangeToBookmark( range );
            }
            undoStack[ undoIndex ] = getHTML();
            undoStackLength += 1;
            isInUndoState = true;
        }
    };
    
    var undo = function () {
        // Sanity check: must not be at beginning of the history stack
        if ( undoIndex !== 0 || !isInUndoState ) {
            // Make sure any changes since last checkpoint are saved.
            recordUndoState( getSelection() );

            undoIndex -= 1;
            setHTML( undoStack[ undoIndex ] );
            var range = getRangeAndRemoveBookmark();
            if ( range ) {
                setSelection( range );
            }
            isInUndoState = true;
            fireEvent( 'undoStateChange', {
                canUndo: undoIndex !== 0,
                canRedo: true
            });
            fireEvent( 'input' );
        }
    };
    
    var redo = function () {
        // Sanity check: must not be at end of stack and must be in an undo
        // state.
        if ( undoIndex + 1 < undoStackLength && isInUndoState ) {
            undoIndex += 1;
            setHTML( undoStack[ undoIndex ] );
            var range = getRangeAndRemoveBookmark();
            if ( range ) {
                setSelection( range );
            }
            fireEvent( 'undoStateChange', {
                canUndo: true,
                canRedo: undoIndex + 1 < undoStackLength
            });
            fireEvent( 'input' );
        }
    };
    
    // --- Inline formatting ---
    
    // Looks for matching tag and attributes, so won't work
    // if <strong> instead of <b> etc.
    var hasFormat = function ( tag, attributes, range ) {
        // 1. Normalise the arguments and get selection
        tag = tag.toUpperCase();
        if ( !attributes ) { attributes = {}; }
        if ( !range && !( range = getSelection() ) ) {
            return false;
        }
        
        // If the common ancestor is inside the tag we require, we definitely
        // have the format.
        var root = range.commonAncestorContainer,
            walker, node;
        if ( root.nearest( tag, attributes ) ) {
            return true;
        }
        
        // If common ancestor is a text node and doesn't have the format, we
        // definitely don't have it.
        if ( root.nodeType === TEXT_NODE ) {
            return false;
        }
        
        // Otherwise, check each text node at least partially contained within
        // the selection and make sure all of them have the format we want.
        walker = doc.createTreeWalker( root, SHOW_TEXT, function ( node ) {
            return range.containsNode( node, true ) ?
                FILTER_ACCEPT : FILTER_SKIP;
        }, false );
        
        while ( node = walker.nextNode() ) {
            if ( !node.nearest( tag, attributes ) ) {
                return false;
            }
        }
        
        return true;
    };
    
    var addFormat = function ( tag, attributes, range ) {
        // If the range is collapsed we simply insert the node by wrapping
        // it round the range and focus it.
        if ( range.collapsed ) {
            var el = createElement( tag, attributes ).fixCursor();
            range._insertNode( el );
            range.selectNodeContents( el );
        }
        // Otherwise we find all the textnodes in the range (splitting
        // partially selected nodes) and if they're not already formatted
        // correctly we wrap them in the appropriate tag.
        else {
            // We don't want to apply formatting twice so we check each text
            // node to see if it has an ancestor with the formatting already.
            // Create an iterator to walk over all the text nodes under this
            // ancestor which are in the range and not already formatted
            // correctly.
            var walker = doc.createTreeWalker(
                range.commonAncestorContainer,
                SHOW_TEXT,
                function ( node ) {
                    return range.containsNode( node, true ) ?
                        FILTER_ACCEPT : FILTER_SKIP;
                }, false );

            // Start at the beginning node of the range and iterate through
            // all the nodes in the range that need formatting.
            var startContainer,
                endContainer,
                startOffset = 0,
                endOffset = 0,
                textnode = walker.currentNode = range.startContainer,
                needsFormat;
            
            if ( textnode.nodeType !== TEXT_NODE ) {
                textnode = walker.nextNode();
            }
            
            do {
                needsFormat = !textnode.nearest( tag, attributes );
                if ( textnode === range.endContainer ) {
                    if ( needsFormat && textnode.length > range.endOffset ) {
                        textnode.splitText( range.endOffset );
                    } else {
                        endOffset = range.endOffset;
                    }
                }
                if ( textnode === range.startContainer ) {
                    if ( needsFormat && range.startOffset ) {
                        textnode = textnode.splitText( range.startOffset );
                    } else {
                        startOffset = range.startOffset;
                    }
                }
                if ( needsFormat ) {
                    createElement( tag, attributes ).wraps( textnode );
                    endOffset = textnode.length;
                }
                endContainer = textnode;
                if ( !startContainer ) { startContainer = endContainer; }
            } while ( textnode = walker.nextNode() );
            
            // Now set the selection to as it was before
            range = createRange(
                startContainer, startOffset, endContainer, endOffset );
        }
        return range;
    };
    
    var removeFormat = function ( tag, attributes, range ) {
        // Add bookmark
        saveRangeToBookmark( range );
        
        // We need a node in the selection to break the surrounding
        // formatted text.
        if ( range.collapsed ) {
            range._insertNode( doc.createTextNode( '' ) );
        }
        
        // Find block-level ancestor of selection
        var root = range.commonAncestorContainer;
        while ( root.isInline() ) {
            root = root.parentNode;
        }
        
        // Find text nodes inside formatTags that are not in selection and
        // add an extra tag with the same formatting.
        var startContainer = range.startContainer,
            startOffset = range.startOffset,
            endContainer = range.endContainer,
            endOffset = range.endOffset,
            toWrap = [],
            examineNode = function examineNode ( node, exemplar ) {
                // If the node is completely contained by the range then
                // we're going to remove all formatting so ignore it.
                if ( range.containsNode( node, false ) ) {
                    return;
                }
                
                var isText = node.nodeType === TEXT_NODE,
                    child, next;
                
                // If not at least partially contained, wrap entire contents
                // in a clone of the tag we're removing and we're done.
                if ( !range.containsNode( node, true ) ) {
                    // Tidy up as we go...
                    if ( isText && !node.length ) {
                        node.detach();
                    }
                    // Ignore bookmarks
                    else if ( node.nodeName !== 'INPUT' ) {
                        toWrap.push([ exemplar, node ]);
                    }
                    return;
                }
                
                // Split any partially selected text nodes.
                if ( isText ) {
                    if ( node === endContainer && endOffset !== node.length ) {
                        toWrap.push([ exemplar, node.splitText( endOffset ) ]);
                    }
                    if ( node === startContainer && startOffset ) {
                        node.splitText( startOffset );
                        toWrap.push([ exemplar, node ]);
                    }
                }
                // If not a text node, recurse onto all children.
                // Beware, the tree may be rewritten with each call
                // to examineNode, hence find the next sibling first.
                else {
                    for ( child = node.firstChild; child; child = next ) {
                        next = child.nextSibling;
                        examineNode( child, exemplar );
                    }
                }
            },
            formatTags = Array.prototype.filter.call(
                root.getElementsByTagName( tag ), function ( el ) {
                    return range.containsNode( el, true ) &&
                        el.is( tag, attributes );
                }
            );
        
        formatTags.forEach( function ( node ) {
            examineNode( node, node );
        });
        
        // Now wrap unselected nodes in the tag
        toWrap.forEach( function ( item ) {
            // [ exemplar, node ] tuple
            item[0].cloneNode( false ).wraps( item[1] );
        });
        // and remove old formatting tags.
        formatTags.forEach( function ( el ) {
            el.replaceWith( el.empty() );
        });
        
        // Merge adjacent inlines:
        range = getRangeAndRemoveBookmark();
        var _range = {
            startContainer: range.startContainer,
            startOffset: range.startOffset,
            endContainer: range.endContainer,
            endOffset: range.endOffset
        };
        root.mergeInlines( _range );
        range.setStart( _range.startContainer, _range.startOffset );
        range.setEnd( _range.endContainer, _range.endOffset );
        
        return range;
    };
    
    var changeFormat = function ( add, remove, range ) {
        // Normalise the arguments and get selection
        if ( !range && !( range = getSelection() ) ) {
            return;
        }
        
        // Save undo checkpoint
        recordUndoState( range );
        getRangeAndRemoveBookmark( range );
        
        if ( remove ) {
            range = removeFormat( remove.tag.toUpperCase(),
                remove.attributes || {}, range );
        }
        if ( add ) {
            range = addFormat( add.tag.toUpperCase(),
                add.attributes || {}, range );
        }
        
        setSelection( range );
        updatePath( 0, true );
        
        // We're not still in an undo state
        docWasChanged();
    };
    
    // --- Block formatting ---
    
    var forEachBlock = function ( fn, range ) {
        if ( !range && !( range = getSelection() ) ) {
            return;
        }
        
        // Save undo checkpoint
        recordUndoState( range );
        getRangeAndRemoveBookmark( range );
        
        var start = range.getStartBlock(),
            end = range.getEndBlock();
        if ( start && end ) {
            while ( true ) {
                fn( start );
                if ( start === end ) { break; }
                start = start.getNextBlock();
            }
        }
        
        // Path may have changed
        updatePath( 0, true );
        
        // We're not still in an undo state
        docWasChanged();
    };
    
    var modifyBlocks = function ( modify, range ) {
        if ( !range && !( range = getSelection() ) ) {
            return;
        }
        // 1. Stop firefox adding an extra <BR> to <BODY>
        // if we remove everything. Don't want to do this in Opera
        // as it can cause focus problems.
        if ( !isOpera ) {
            body.setAttribute( 'contenteditable', 'false' );
        }
        
        // 2. Save undo checkpoint and bookmark selection
        if ( isInUndoState ) {
            saveRangeToBookmark( range );
        } else {
            recordUndoState( range );
        }
        
        // 3. Expand range to block boundaries
        range.expandToBlockBoundaries();
        
        // 4. Remove range.
        range.moveBoundariesUpTree( body );
        var frag = range._extractContents( body );
        
        // 5. Modify tree of fragment and reinsert.
        range._insertNode( modify( frag ) );
        
        // 6. Merge containers at edges
        if ( range.endOffset < range.endContainer.childNodes.length ) {
            range.endContainer.childNodes[ range.endOffset ].mergeContainers();
        }
        range.startContainer.childNodes[ range.startOffset ].mergeContainers();
        
        // 7. Make it editable again
        if ( !isOpera ) {
            body.setAttribute( 'contenteditable', 'true' );
        }
        
        // 8. Restore selection
        setSelection( getRangeAndRemoveBookmark() );
        updatePath( 0, true );
        
        // 9. We're not still in an undo state
        docWasChanged();
    };
    
    var increaseBlockQuoteLevel = function ( frag ) {
        return createElement( 'BLOCKQUOTE', [
            frag
        ]);
    };
    
    var decreaseBlockQuoteLevel = function ( frag ) {
        var blockquotes = frag.querySelectorAll( 'blockquote' );
        Array.prototype.filter.call( blockquotes, function ( el ) {
            return !el.parentNode.nearest( 'BLOCKQUOTE' );
        }).forEach( function ( el ) {
            el.replaceWith( el.empty() );
        });
        return frag;
    };
    
    var makeList = function makeList ( nodes, type ) {
        var i, l, node, tag, prev, replacement;
        for ( i = 0, l = nodes.length; i < l; i += 1 ) {
            node = nodes[i];
            tag = node.nodeName;
            if ( node.isBlock() ) {
                if ( tag !== 'LI' ) {
                    replacement = createElement( 'LI', [
                        node.empty()
                    ]);
                    if ( node.parentNode.nodeName === type ) {
                        node.replaceWith( replacement );
                    }
                    else if ( ( prev = node.previousSibling ) &&
                            prev.nodeName === type ) {
                        prev.appendChild( replacement );
                        node.detach();
                        i -= 1;
                        l -= 1;
                    }
                    else {
                        node.replaceWith(
                            createElement( type, [
                                replacement
                            ])
                        );
                    }
                }
            } else if ( node.isContainer() ) {
                if ( tag !== type && ( /^[DOU]L$/.test( tag ) ) ) {
                    node.replaceWith( createElement( type, [
                        node.empty()
                    ]) );
                } else {
                    makeList( node.childNodes, type );
                }
            }
        }
    };
    
    var makeUnorderedList = function ( frag ) {
        makeList( frag.childNodes, 'UL' );
        return frag;
    };
    
    var makeOrderedList = function ( frag ) {
        makeList( frag.childNodes, 'OL' );
        return frag;
    };
    
    var decreaseListLevel = function ( frag ) {
        var lists = frag.querySelectorAll( 'UL, OL' );
        Array.prototype.filter.call( lists, function ( el ) {
            return !el.parentNode.nearest( 'UL' ) &&
                !el.parentNode.nearest( 'OL' );
        }).forEach( function ( el ) {
            var frag = el.empty(),
                children = frag.childNodes,
                l = children.length,
                child;
            while ( l-- ) {
                child = children[l];
                if ( child.nodeName === 'LI' ) {
                    frag.replaceChild( createElement( 'DIV', [
                        child.empty()
                    ]), child );
                }
            }
            el.replaceWith( frag );
        });
        return frag;
    };
    
    var tagAfterSplit = {
        DIV: 'DIV',
        PRE: 'DIV',
        H1:  'DIV',
        H2:  'DIV',
        H3:  'DIV',
        H4:  'DIV',
        H5:  'DIV',
        H6:  'DIV',
        P:   'DIV',
        DT:  'DD',
        DD:  'DT',
        LI:  'LI'
    };
    
    var splitBlock = function ( block, node, offset ) {
        var splitTag = tagAfterSplit[ block.nodeName ],
            nodeAfterSplit = node.split( offset, block.parentNode );
        
        // Make sure the new node is the correct type.
        if ( nodeAfterSplit.nodeName !== splitTag ) {
            block = createElement( splitTag );
            block.replaces( nodeAfterSplit )
                 .appendChild( nodeAfterSplit.empty() );
            nodeAfterSplit = block;
        }
        return nodeAfterSplit;
    };
    
    // --- Clean ---
    
    var allowedBlock = /^A(?:DDRESS|RTICLE|SIDE)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|UL$/;
    
    var spanToSemantic = {
        color: {
            regexp: /\S/,
            replace: function ( color ) {
                return createElement( 'SPAN', {
                    'class': 'colour',
                    style: 'color:' + color
                });
            }
        },
        fontWeight: {
            regexp: /^bold/i,
            replace: function () {
                return createElement( 'B' );
            }
        },
        fontStyle: {
            regexp: /^italic/i,
            replace: function () {
                return createElement( 'I' );
            }
        },
        fontFamily: {
            regexp: /\S/,
            replace: function ( family ) {
                return createElement( 'SPAN', {
                    'class': 'font',
                    style: 'font-family:' + family
                });
            }
        },
        fontSize: {
            regexp: /\S/,
            replace: function ( size ) {
                return createElement( 'SPAN', {
                    'class': 'size',
                    style: 'font-size:' + size
                });
            }
        }
    };
    
    var stylesRewriters = {
        SPAN: function ( span, parent ) {
            var style = span.style,
                attr, converter, css, newTreeBottom, newTreeTop, el;
            
            for ( attr in spanToSemantic ) {
                converter = spanToSemantic[ attr ];
                css = style[ attr ];
                if ( css && converter.regexp.test( css ) ) {
                    el = converter.replace( css );
                    if ( newTreeBottom ) {
                        newTreeBottom.appendChild( el );
                    }
                    newTreeBottom = el;
                    if ( !newTreeTop ) {
                        newTreeTop = el;
                    }
                }
            }
            
            if ( newTreeTop ) {
                newTreeBottom.appendChild( span.empty() );
                parent.replaceChild( newTreeTop, span );
            }
            
            return newTreeBottom || span;
        },
        STRONG: function ( node, parent ) {
            var el = createElement( 'B' );
            parent.replaceChild( el, node );
            el.appendChild( node.empty() );
            return el;
        },
        EM: function ( node, parent ) {
            var el = createElement( 'I' );
            parent.replaceChild( el, node );
            el.appendChild( node.empty() );
            return el;
        }
    };
    
    /*
        Two purposes:
        
        1. Remove nodes we don't want, such as weird <o:p> tags, comment nodes
           and whitespace nodes.
        2. Convert inline tags into our preferred format.
    */
    var cleanTree = function ( node, allowStyles ) {
        var children = node.childNodes,
            i, l, child, nodeName, nodeType, rewriter, parent;
        for ( i = 0, l = children.length; i < l; i += 1 ) {
            child = children[i];
            nodeName = child.nodeName;
            nodeType = child.nodeType;
            rewriter = stylesRewriters[ nodeName ];
            if ( rewriter ) {
                child = rewriter( child, node );
            } else if (
                  ( !allowedBlock.test( nodeName ) && !child.isInline() ) ||
                  ( nodeType === TEXT_NODE && !( /\S/.test( child.data ) ) ) ) {
                node.removeChild( child );
                i -= 1;
                l -= 1;
                continue;
            }
            if ( nodeType === ELEMENT_NODE ) {
                if ( !allowStyles && child.style.cssText ) {
                    child.removeAttribute( 'style' );
                }
                if ( child.childNodes.length ) {
                    cleanTree( child, allowStyles );
                }
            }
        }
        return node;
    };
    
    var wrapTopLevelInline = function ( root, tag ) {
        var children = root.childNodes,
            wrapper = null,
            i, l, child, isBR;
        for ( i = 0, l = children.length; i < l; i += 1 ) {
            child = children[i];
            isBR = child.nodeName === 'BR';
            if ( !isBR && child.isInline() ) {
                if ( !wrapper ) { wrapper = createElement( tag ); }
                wrapper.appendChild( child );
                i -= 1;
                l -= 1;
            } else if ( isBR || wrapper ) {
                if ( !wrapper ) { wrapper = createElement( tag ); }
                wrapper.fixCursor();
                if ( isBR ) {
                    root.replaceChild( wrapper, child );
                } else {
                    root.insertBefore( wrapper, child );
                    i += 1;
                    l += 1;
                }
                wrapper = null;
            }
        }
        if ( wrapper ) {
            root.appendChild( wrapper.fixCursor() );
        }
        return root;
    };
    
    var cleanupBRs = function ( root ) {
        var brs = root.querySelectorAll( 'BR' ),
            l = brs.length,
            br, block, nodeAfterSplit, div, next;
        
        while ( l-- ) {
            br = brs[l];
            // Cleanup may have removed it
            block = br.parentNode;
            if ( !block ) { continue; }
            if ( br.nextSibling && br.previousSibling ) {
                while ( block.isInline() ) {
                    block = block.parentNode;
                }
                // If this is not inside a block, replace it by wrapping
                // inlines in DIV.
                if ( !block.isBlock() ) {
                    wrapTopLevelInline( block, 'DIV' );
                }
                // If in a block we can split, split it instead
                else if ( tagAfterSplit[ block.nodeName ] ) {
                    splitBlock( block, br.parentNode, br );
                    br.detach();
                }
                // Otherwise leave the br alone.
            } else {
                br.detach();
            }
        }
    };
    
    // --- Cut and Paste ---
    
    doc.addEventListener( isIE ? 'beforecut' : 'cut', function () {
        // Save undo checkpoint
        var range = getSelection();
        recordUndoState( range );
        getRangeAndRemoveBookmark( range );
        // If all content removed, ensure div at start of body.
        setTimeout( function () {
            body.fixCursor();
        }, 0 );
    }, false );
        
    doc.addEventListener( isIE ?  'beforepaste' : 'paste', function () {
        var range = getSelection(),
            startContainer = range.startContainer,
            startOffset = range.startOffset,
            endContainer = range.endContainer,
            endOffset = range.endOffset;
        
        var pasteArea = createElement( 'DIV', {
            style: 'position: absolute; overflow: hidden;' +
                'top: -100px; left: -100px; width: 1px; height: 1px;'
        });
        body.appendChild( pasteArea );
        range.selectNodeContents( pasteArea );
        setSelection( range );
        
        // A setTimeout of 0 means this is added to the back of the
        // single javascript thread, so it will be executed after the
        // paste event.
        setTimeout( function () {
            // Get the pasted content and clean
            var frag = pasteArea.detach().empty(),
                first = frag.firstChild;
            
            // Safari likes putting extra divs around things.
            if ( first &&
                    first === frag.lastChild && first.nodeName === 'DIV' ) {
                frag.replaceChild( first.empty(), first );
            }
            
            frag.normalize();
            cleanTree( frag, false );
            cleanupBRs( frag );
            
            var node = frag;
            while ( node = node.getNextBlock() ) {
                node.fixCursor();
            }
            
            // Restore the previous selection
            range.setStart( startContainer, startOffset );
            range.setEnd( endContainer, endOffset );
            
            // Insert pasted data
            range.insertTreeFragment( frag );
            docWasChanged();
            
            range.collapse( false );
            setSelection( range );
            updatePath( 0, true );
        }, 0 );
    }, false );
    
    // --- Keyboard interaction ---
    
    var keys = {
        8: 'backspace',
        9: 'tab',
        13: 'enter',
        32: 'space',
        46: 'delete'
    };
    
    var mapKeyTo = function ( fn ) {
        return function ( event ) {
            event.preventDefault();
            fn();
        };
    };
    
    var mapKeyToFormat = function ( tag ) {
        return function ( event ) {
            event.preventDefault();
            var range = getSelection();
            if ( hasFormat( tag, null, range ) ) {
                changeFormat( null, { tag: tag }, range );
            } else {
                changeFormat( { tag: tag }, null, range );
            }
        };
    };
    
    var keyHandlers = {
        tab: function ( event ) {
            event.preventDefault();
        },
        enter: function ( event ) {
            // We handle this ourselves
            event.preventDefault();
            
            // Must have some form of selection
            var range = getSelection();
            if ( !range ) { return; }
            
            // Save undo checkpoint
            recordUndoState( range );
            getRangeAndRemoveBookmark( range );
            
            // Selected text is overwritten, therefore delete the contents
            // to collapse selection.
            if ( !range.collapsed ) {
                range._deleteContents();
            }
            
            var block = range.getStartBlock(),
                tag = block ? block.nodeName : 'DIV',
                splitTag = tagAfterSplit[ tag ],
                nodeAfterSplit;
            
            // If this is a malformed bit of document, just play it safe
            // and insert a <br>.
            if ( !block ) {
                range._insertNode( createElement( 'BR' ) );
                range.collapse( false );
                setSelection( range );
                updatePath( 0, true );
                docWasChanged();
                return;
            }
            
            // We need to wrap the contents in divs.
            var splitNode = range.startContainer,
                splitOffset = range.startOffset,
                replacement;
            if ( !splitTag ) {
                // If the selection point is inside the block, we're going to
                // rewrite it so our saved referece points won't be valid.
                // Pick a node at a deeper point in the tree to avoid this.
                if ( splitNode === block ) {
                    splitNode = splitOffset ?
                        splitNode.childNodes[ splitOffset - 1 ] : null;
                    splitOffset = 0;
                    if ( splitNode ) {
                        if ( splitNode.nodeName === 'BR' ) {
                            splitNode = splitNode.nextSibling;
                        } else {
                            splitOffset = splitNode.getLength();
                        }
                        if ( !splitNode || splitNode.nodeName === 'BR' ) {
                            replacement = createElement( 'DIV' ).fixCursor();
                            if ( splitNode ) {
                                block.replaceChild( replacement, splitNode );
                            } else {
                                block.appendChild( replacement );
                            }
                            splitNode = replacement;
                        }
                    }
                }
                wrapTopLevelInline( block, 'DIV' );
                splitTag = 'DIV';
                if ( !splitNode ) {
                    splitNode = block.firstChild;
                }
                range.setStart( splitNode, splitOffset );
                range.setEnd( splitNode, splitOffset );
                block = range.getStartBlock();
            }
            
            if ( !block.textContent ) {
                // Break list
                if ( block.nearest( 'UL' ) || block.nearest( 'OL' ) ) {
                    return modifyBlocks( decreaseListLevel, range );
                }
                // Break blockquote
                else if ( block.nearest( 'BLOCKQUOTE' ) ) {
                    return modifyBlocks( decreaseBlockQuoteLevel, range );
                }
            }
            
            // Otherwise, split at cursor point.
            nodeAfterSplit = splitBlock( block, splitNode, splitOffset );
            
            // Focus cursor
            // If there's a <b>/<i> etc. at the beginning of the split
            // make sure we focus inside it.
            while ( nodeAfterSplit.nodeType === ELEMENT_NODE) {
                var child = nodeAfterSplit.firstChild,
                    next;
                
                while ( child && child.nodeType === TEXT_NODE && !child.data ) {
                    next = child.nextSibling;
                    if ( !next || next.nodeName === 'BR' ) {
                        break;
                    }
                    child.detach();
                    child = next;
                }
                
                // 'BR's essentially don't count; they're a browser hack.
                // If you try to select the contents of a 'BR', FF will not let
                // you type anything!
                if ( !child || child.nodeName === 'BR' ||
                        ( child.nodeType === TEXT_NODE && !isOpera ) ) {
                    break;
                }
                nodeAfterSplit = child;
            }
            setSelection( createRange( nodeAfterSplit, 0 ) );
            updatePath( 0, true );
            
            // We're not still in an undo state
            docWasChanged();
        },
        backspace: function ( event ) {
            var range = getSelection();
            // If not collapsed, delete contents
            if ( !range.collapsed ) {
                event.preventDefault();
                range._deleteContents();
                setSelection( range );
                updatePath( 0, true );
            }
            // If at beginning of block, merge with previous
            else if ( range.startsAtBlockBoundary() ) {
                event.preventDefault();
                var current = range.getStartBlock(),
                    previous = current.getPreviousBlock();
                // Must not be at the very beginning of the text area.
                if ( previous ) {
                    previous.mergeWithBlock( current, range );
                    setSelection( range );
                }
                // If at very beginning of text area, allow backspace
                // to break lists/blockquote.
                else {
                    // Break list
                    if ( current.nearest( 'UL' ) || current.nearest( 'OL' ) ) {
                        return modifyBlocks( decreaseListLevel, range );
                    }
                    // Break blockquote
                    else if ( current.nearest( 'BLOCKQUOTE' ) ) {
                        return modifyBlocks( decreaseBlockQuoteLevel, range );
                    }
                    setSelection( range );
                    updatePath( 0, true );
                }
            }
            // All other cases can be safely left to the browser (I hope!).
        },
        'delete': function ( event ) {
            var range = getSelection();
            // If not collapsed, delete contents
            if ( !range.collapsed ) {
                event.preventDefault();
                range._deleteContents();
                setSelection( range );
                updatePath( 0, true );
            }
            // If at end of block, merge next into this block
            else if ( range.endsAtBlockBoundary() ) {
                event.preventDefault();
                var current = range.getStartBlock(),
                    next = current.getNextBlock();
                // Must not be at the very end of the text area.
                if ( next ) {
                    current.mergeWithBlock( next, range );
                    setSelection( range );
                    updatePath( 0, true );
                }
            }
            // All other cases can be safely left to the browser (I hope!).
        },
        space: function () {
            var range = getSelection();
            recordUndoState( range );
            getRangeAndRemoveBookmark( range );
            setSelection( range );
        },
        'ctrl-b': mapKeyToFormat( 'B' ),
        'ctrl-i': mapKeyToFormat( 'I' ),
        'ctrl-u': mapKeyToFormat( 'U' ),
        'ctrl-y': mapKeyTo( redo ),
        'ctrl-z': mapKeyTo( undo ),
        'ctrl-shift-z': mapKeyTo( redo )
    };
    
    addEventListener( 'keydown', function ( event ) {
        // Ref: http://unixpapa.com/js/key.html
        var code = event.keyCode || event.which,
            key = keys[ code ] || String.fromCharCode( code ).toLowerCase(),
            modifiers = '';
        
        // Function keys
        if ( 111 < code && code < 124 ) {
            key = 'f' + ( code - 111 );
        }
        
        if ( event.altKey ) { modifiers += 'alt-'; }
        if ( event.ctrlKey || event.metaKey ) { modifiers += 'ctrl-'; }
        if ( event.shiftKey ) { modifiers += 'shift-'; }
        
        key = modifiers + key;
        
        if ( keyHandlers[ key ] ) {
            keyHandlers[ key ]( event );
        }
    });
     
    // --- Export ---
    
    var styleExtractor = /<style[^>]*>([\s\S]*?)<\/style>/gi;
    
    var chain = function ( fn ) {
        return function () {
            fn.apply( null, arguments );
            return this;
        };
    };
        
    var command = function ( fn, arg, arg2 ) {
        return function () {
            fn( arg, arg2 );
            focus();
            return this;
        };
    };
    
    win.editor = {
        
        addEventListener: chain( addEventListener ),
        removeEventListener: chain( removeEventListener ),
        
        focus: chain( focus ),
        blur: chain( blur ),
        
        getDocument: function () {
            return doc;
        },
        
        getHTML: function () {
            var brs = [],
                node, fixer, html, l;
            if ( useTextFixer ) {
                node = body;
                while ( node = node.getNextBlock() ) {
                    if ( !node.textContent && !node.querySelector( 'BR' ) ) {
                        fixer = createElement( 'BR' );
                        node.appendChild( fixer );
                        brs.push( fixer );
                    }
                }
            }
            html = getHTML();
            if ( useTextFixer ) {
                l = brs.length;
                while ( l-- ) {
                    brs[l].detach();
                }
            }
            return html;
        },
        setHTML: function ( html ) {
            var frag = doc.createDocumentFragment(),
                div = createElement( 'DIV' ),
                styles = '',
                child;
            
            // Extract styles to insert into <head>
            styleExtractor.lastIndex = 0;
            html = html.replace( styleExtractor,
                function ( _, rules ) {
                    styles += rules.replace( /<!--|-->/g, '' );
                    return '';
            });
            
            // Parse HTML into DOM tree
            div.innerHTML = html;
            frag.appendChild( div.empty() );
            
            cleanTree( frag, true );
            cleanupBRs( frag );

            wrapTopLevelInline( frag, 'DIV' );
            
            // Fix cursor
            var node = frag;
            while ( node = node.getNextBlock() ) {
                node.fixCursor();
            }
            
            // Remove existing body children
            while ( child = body.lastChild ) {
                body.removeChild( child );
            }
            
            // And insert new content
            // Add the styles
            if ( styles ) {
                var head = doc.documentElement.firstChild,
                    style = createElement( 'STYLE', {
                        type: 'text/css'
                    });
                if ( style.styleSheet ) {
                    // IE8: must append to document BEFORE adding styles
                    // or you get the IE7 CSS parser!
                    head.appendChild( style );
                    style.styleSheet.cssText = styles;
                } else {
                    // Everyone else
                    style.appendChild( doc.createTextNode( styles ) );
                    head.appendChild( style );
                }
            }
            
            body.appendChild( frag );
            body.fixCursor();
            
            // Reset the undo stack
            undoIndex = -1;
            undoStack = [];
            undoStackLength = 0;
            isInUndoState = false;
            
            // Record undo state
            var range = createRange( body.firstChild, 0 );
            recordUndoState( range );
            setSelection( getRangeAndRemoveBookmark( range ) );
            updatePath( 0, true );
            
            return this;
        },
        
        insertImage: function ( src ) {
            var img = createElement( 'IMG', {
                src: src
            });
            insertElement( img );
            return img;
        },
        
        getPath: function () {
            return path;
        },
        getSelection: getSelection,
        setSelection: chain( setSelection ),
        
        undo: chain( undo ),
        redo: chain( redo ),
        
        hasFormat: hasFormat,
        changeFormat: chain( changeFormat ),
        
        bold: command( changeFormat, { tag: 'B' } ),
        italic: command( changeFormat, { tag: 'I' } ),
        underline: command( changeFormat, { tag: 'U' } ),
        
        removeBold: command( changeFormat, null, { tag: 'B' } ),
        removeItalic: command( changeFormat, null, { tag: 'I' } ),
        removeUnderline: command( changeFormat, null, { tag: 'U' } ),
        
        makeLink: function ( url ) {
            changeFormat({
                tag: 'A',
                attributes: {
                    href: url
                }
            }, {
                tag: 'A'
            });
            focus();
            return this;
        },
        
        setFontFace: function ( name ) {
            changeFormat({
                tag: 'SPAN',
                attributes: {
                    'class': 'font',
                    style: 'font-family: ' + name + ', sans-serif;'
                }
            }, {
                tag: 'SPAN',
                attributes: { 'class': 'font' }
            });
            focus();
            return this;
        },
        setFontSize: function ( size ) {
            changeFormat({
                tag: 'SPAN',
                attributes: {
                    'class': 'size',
                    style: 'font-size: ' +
                        ( typeof size === 'number' ? size + 'px' : size )
                }
            }, {
                tag: 'SPAN',
                attributes: { 'class': 'size' }
            });
            focus();
            return this;
        },
        setTextAlignment: function ( dir ) {
            forEachBlock( function ( block ) {
                block.className = 'align-' + dir;
                block.style.textAlign = dir;
            });
            focus();
            return this;
        },
        
        modifyBlocks: chain( modifyBlocks ),
        
        incQuoteLevel: command( modifyBlocks, increaseBlockQuoteLevel ),
        decQuoteLevel: command( modifyBlocks, decreaseBlockQuoteLevel ),
        
        makeUnorderedList: command( modifyBlocks, makeUnorderedList ),
        makeOrderedList: command( modifyBlocks, makeOrderedList ),
        removeList: command( modifyBlocks, decreaseListLevel )
    };
    
    // --- Initialise ---
    
    body.setAttribute( 'contenteditable', 'true' );
    win.editor.setHTML( '' );
    
}, false );