squire-rails 0.0.8 → 0.0.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 49a7361e5ff8621dc290906bbd13199217b5f69d
-  data.tar.gz: 4a4ea25f90b9b510a290d35db35bea378b163466
+  metadata.gz: 604f8843d5e2ecfd3a4c5975af0c37e74d79b3a9
+  data.tar.gz: a1d403eccb978254d6df20ea2a6b08a6fd6893b8
 SHA512:
-  metadata.gz: e0d6494032e4bd0e63885cf44c990f17b1346ca2eb38f7b64cccff2705b0c05fb6c8972a00919c4d37a1ac6aebd6c3a6cdd57ba32e7c61d79a95bd36caf1c7ba
-  data.tar.gz: 51b2d771a1a970fbb2bf621be39f9a9adfdc07bd932644a69d5b1434c3b5c797068a7006096b3eb810ade97ab35255f5f59e60cfc670d389ad09de19b80a2ed9
+  metadata.gz: a72947f12e20854bc725199576c0d666814447a4ea656bf65774f4195b8d2211e2ef509eb7acb1f2725932a2449509203ea69d69004763c9fed702a99dd65757
+  data.tar.gz: bf05167d9a969b2a9de03d4faefbc82d7cdd189f093ba4a9cc9c34f5fb4d6efa58931fe3edf123dd0b173bf7f679b7ddc91d3a19906340298e2a32ee6ce5d51c

data/lib/squire-rails/version.rb

@@ -1,3 +1,3 @@
 module SquireRails
-  VERSION = "0.0.8"
+  VERSION = "0.0.9"
 end

data/vendor/assets/javascripts/squire/squire-raw.js

@@ -7,6 +7,7 @@
 var DOCUMENT_POSITION_PRECEDING = 2; // Node.DOCUMENT_POSITION_PRECEDING
 var ELEMENT_NODE = 1;                // Node.ELEMENT_NODE;
 var TEXT_NODE = 3;                   // Node.TEXT_NODE;
+var DOCUMENT_FRAGMENT_NODE = 11;     // Node.DOCUMENT_FRAGMENT_NODE;
 var SHOW_ELEMENT = 1;                // NodeFilter.SHOW_ELEMENT;
 var SHOW_TEXT = 4;                   // NodeFilter.SHOW_TEXT;
 
@@ -140,7 +141,35 @@ TreeWalker.prototype.previousNode = function () {
     }
 };
 
-var inlineNodeNames  = /^(?:#text|A(?:BBR|CRONYM)?|B(?:R|D[IO])?|C(?:ITE|ODE)|D(?:ATA|FN|EL)|EM|FONT|HR|I(?:NPUT|MG|NS)?|KBD|Q|R(?:P|T|UBY)|S(?:U[BP]|PAN|TR(?:IKE|ONG)|MALL|AMP)?|U|VAR|WBR)$/;
+// Previous node in post-order.
+TreeWalker.prototype.previousPONode = function () {
+    var current = this.currentNode,
+        root = this.root,
+        nodeType = this.nodeType,
+        filter = this.filter,
+        node;
+    while ( true ) {
+        node = current.lastChild;
+        while ( !node && current ) {
+            if ( current === root ) {
+                break;
+            }
+            node = current.previousSibling;
+            if ( !node ) { current = current.parentNode; }
+        }
+        if ( !node ) {
+            return null;
+        }
+        if ( ( typeToBitArray[ node.nodeType ] & nodeType ) &&
+                filter( node ) ) {
+            this.currentNode = node;
+            return node;
+        }
+        current = node;
+    }
+};
+
+var inlineNodeNames  = /^(?:#text|A(?:BBR|CRONYM)?|B(?:R|D[IO])?|C(?:ITE|ODE)|D(?:ATA|EL|FN)|EM|FONT|HR|I(?:MG|NPUT|NS)?|KBD|Q|R(?:P|T|UBY)|S(?:AMP|MALL|PAN|TR(?:IKE|ONG)|U[BP])?|U|VAR|WBR)$/;
 
 var leafNodeNames = {
     BR: 1,
@@ -172,7 +201,7 @@ function hasTagAttributes ( node, tag, attributes ) {
     return true;
 }
 function areAlike ( node, node2 ) {
-    return (
+    return !isLeaf( node ) && (
         node.nodeType === node2.nodeType &&
         node.nodeName === node2.nodeName &&
         node.className === node2.className &&
@@ -189,11 +218,13 @@ function isInline ( node ) {
     return inlineNodeNames.test( node.nodeName );
 }
 function isBlock ( node ) {
-    return node.nodeType === ELEMENT_NODE &&
+    var type = node.nodeType;
+    return ( type === ELEMENT_NODE || type === DOCUMENT_FRAGMENT_NODE ) &&
         !isInline( node ) && every( node.childNodes, isInline );
 }
 function isContainer ( node ) {
-    return node.nodeType === ELEMENT_NODE &&
+    var type = node.nodeType;
+    return ( type === ELEMENT_NODE || type === DOCUMENT_FRAGMENT_NODE ) &&
         !isInline( node ) && !isBlock( node );
 }
 
@@ -667,7 +698,7 @@ var insertNodeInRange = function ( range, node ) {
 
     childCount = children.length;
 
-    if ( startOffset === childCount) {
+    if ( startOffset === childCount ) {
         startContainer.appendChild( node );
     } else {
         startContainer.insertBefore( node, children[ startOffset ] );
@@ -735,8 +766,16 @@ var extractContentsOfRange = function ( range, common ) {
 
 var deleteContentsOfRange = function ( range ) {
     // Move boundaries up as much as possible to reduce need to split.
+    // But we need to check whether we've moved the boundary outside of a
+    // block. If so, the entire block will be removed, so we shouldn't merge
+    // later.
     moveRangeBoundariesUpTree( range );
 
+    var startBlock = range.startContainer,
+        endBlock = range.endContainer,
+        needsMerge = ( isInline( startBlock ) || isBlock( startBlock ) ) &&
+            ( isInline( endBlock ) || isBlock( endBlock ) );
+
     // Remove selected range
     extractContentsOfRange( range );
 
@@ -746,10 +785,12 @@ var deleteContentsOfRange = function ( range ) {
     moveRangeBoundariesDownTree( range );
 
     // If we split into two different blocks, merge the blocks.
-    var startBlock = getStartBlockOfRange( range ),
+    if ( needsMerge ) {
+        startBlock = getStartBlockOfRange( range );
         endBlock = getEndBlockOfRange( range );
-    if ( startBlock && endBlock && startBlock !== endBlock ) {
-        mergeWithBlock( startBlock, endBlock, range );
+        if ( startBlock && endBlock && startBlock !== endBlock ) {
+            mergeWithBlock( startBlock, endBlock, range );
+        }
     }
 
     // Ensure block has necessary children
@@ -763,6 +804,8 @@ var deleteContentsOfRange = function ( range ) {
     if ( !child || child.nodeName === 'BR' ) {
         fixCursor( body );
         range.selectNodeContents( body.firstChild );
+    } else {
+        range.collapse( false );
     }
 };
 
@@ -788,15 +831,13 @@ var insertTreeFragmentIntoRange = function ( range, frag ) {
     // Move range down into text nodes
     moveRangeBoundariesDownTree( range );
 
-    // If inline, just insert at the current position.
     if ( allInline ) {
+        // If inline, just insert at the current position.
         insertNodeInRange( range, frag );
         range.collapse( false );
-    }
-    // Otherwise, split up to blockquote (if a parent) or body, insert inline
-    // before and after split and insert block in between split, then merge
-    // containers.
-    else {
+    } else {
+        // Otherwise...
+        // 1. Split up to blockquote (if a parent) or body
         var splitPoint = range.startContainer,
             nodeAfterSplit = split( splitPoint, range.startOffset,
                 getNearest( splitPoint.parentNode, 'BLOCKQUOTE' ) ||
@@ -807,11 +848,16 @@ var insertTreeFragmentIntoRange = function ( range, frag ) {
             endContainer = nodeAfterSplit,
             endOffset = 0,
             parent = nodeAfterSplit.parentNode,
-            child, node;
+            child, node, prev, next, startAnchor;
 
+        // 2. Move down into edge either side of split and insert any inline
+        // nodes at the beginning/end of the fragment
         while ( ( child = startContainer.lastChild ) &&
-                child.nodeType === ELEMENT_NODE &&
-                child.nodeName !== 'BR' ) {
+                child.nodeType === ELEMENT_NODE ) {
+            if ( child.nodeName === 'BR' ) {
+                startOffset -= 1;
+                break;
+            }
             startContainer = child;
             startOffset = startContainer.childNodes.length;
         }
@@ -820,40 +866,68 @@ var insertTreeFragmentIntoRange = function ( range, frag ) {
                 child.nodeName !== 'BR' ) {
             endContainer = child;
         }
+        startAnchor = startContainer.childNodes[ startOffset ] || null;
         while ( ( child = frag.firstChild ) && isInline( child ) ) {
-            startContainer.appendChild( child );
+            startContainer.insertBefore( child, startAnchor );
         }
         while ( ( child = frag.lastChild ) && isInline( child ) ) {
             endContainer.insertBefore( child, endContainer.firstChild );
             endOffset += 1;
         }
 
-        // Fix cursor then insert block(s)
+        // 3. Fix cursor then insert block(s) in the fragment
         node = frag;
         while ( node = getNextBlock( node ) ) {
             fixCursor( node );
         }
         parent.insertBefore( frag, nodeAfterSplit );
 
-        // Remove empty nodes created by split and merge inserted containers
-        // with edges of split
-        node = nodeAfterSplit.previousSibling;
-        if ( !nodeAfterSplit.textContent ) {
-            parent.removeChild( nodeAfterSplit );
-        } else {
-            mergeContainers( nodeAfterSplit );
+        // 4. Remove empty nodes created either side of split, then
+        // merge containers at the edges.
+        next = nodeBeforeSplit.nextSibling;
+        node = getPreviousBlock( next );
+        if ( !/\S/.test( node.textContent ) ) {
+            do {
+                parent = node.parentNode;
+                parent.removeChild( node );
+                node = parent;
+            } while ( parent && !parent.lastChild &&
+                parent.nodeName !== 'BODY' );
         }
-        if ( !nodeAfterSplit.parentNode ) {
-            endContainer = node;
-            endOffset = getLength( endContainer );
+        if ( !nodeBeforeSplit.parentNode ) {
+            nodeBeforeSplit = next.previousSibling;
+        }
+        if ( !startContainer.parentNode ) {
+            startContainer = nodeBeforeSplit || next.parentNode;
+            startOffset = nodeBeforeSplit ?
+                nodeBeforeSplit.childNodes.length : 0;
+        }
+        // Merge inserted containers with edges of split
+        if ( isContainer( next ) ) {
+            mergeContainers( next );
         }
 
-        if ( !nodeBeforeSplit.textContent) {
-            startContainer = nodeBeforeSplit.nextSibling;
-            startOffset = 0;
-            parent.removeChild( nodeBeforeSplit );
-        } else {
-            mergeContainers( nodeBeforeSplit );
+        prev = nodeAfterSplit.previousSibling;
+        node = isBlock( nodeAfterSplit ) ?
+            nodeAfterSplit : getNextBlock( nodeAfterSplit );
+        if ( !/\S/.test( node.textContent ) ) {
+            do {
+                parent = node.parentNode;
+                parent.removeChild( node );
+                node = parent;
+            } while ( parent && !parent.lastChild &&
+                parent.nodeName !== 'BODY' );
+        }
+        if ( !nodeAfterSplit.parentNode ) {
+            nodeAfterSplit = prev.nextSibling;
+        }
+        if ( !endOffset ) {
+            endContainer = prev;
+            endOffset = prev.childNodes.length;
+        }
+        // Merge inserted containers with edges of split
+        if ( nodeAfterSplit && isContainer( nodeAfterSplit ) ) {
+            mergeContainers( nodeAfterSplit );
         }
 
         range.setStart( startContainer, startOffset );
@@ -1022,6 +1096,7 @@ var rangeDoesStartAtBlockBoundary = function ( range ) {
         startOffset = range.startOffset;
 
     // If in the middle or end of a text node, we're not at the boundary.
+    contentWalker.root = null;
     if ( startContainer.nodeType === TEXT_NODE ) {
         if ( startOffset ) {
             return false;
@@ -1044,6 +1119,7 @@ var rangeDoesEndAtBlockBoundary = function ( range ) {
 
     // If in a text node with content, and not at the end, we're not
     // at the boundary
+    contentWalker.root = null;
     if ( endContainer.nodeType === TEXT_NODE ) {
         length = endContainer.data.length;
         if ( length && endOffset < length ) {
@@ -1073,6 +1149,77 @@ var expandRangeToBlockBoundaries = function ( range ) {
     }
 };
 
+var keys = {
+    8: 'backspace',
+    9: 'tab',
+    13: 'enter',
+    32: 'space',
+    33: 'pageup',
+    34: 'pagedown',
+    37: 'left',
+    39: 'right',
+    46: 'delete',
+    219: '[',
+    221: ']'
+};
+
+// Ref: http://unixpapa.com/js/key.html
+var onKey = function ( event ) {
+    var code = event.keyCode,
+        key = keys[ code ],
+        modifiers = '',
+        range = this.getSelection();
+
+    if ( event.defaultPrevented ) {
+        return;
+    }
+
+    if ( !key ) {
+        key = String.fromCharCode( code ).toLowerCase();
+        // Only reliable for letters and numbers
+        if ( !/^[A-Za-z0-9]$/.test( key ) ) {
+            key = '';
+        }
+    }
+
+    // On keypress, delete and '.' both have event.keyCode 46
+    // Must check event.which to differentiate.
+    if ( isPresto && event.which === 46 ) {
+        key = '.';
+    }
+
+    // Function keys
+    if ( 111 < code && code < 124 ) {
+        key = 'f' + ( code - 111 );
+    }
+
+    // We need to apply the backspace/delete handlers regardless of
+    // control key modifiers.
+    if ( key !== 'backspace' && key !== 'delete' ) {
+        if ( event.altKey  ) { modifiers += 'alt-'; }
+        if ( event.ctrlKey ) { modifiers += 'ctrl-'; }
+        if ( event.metaKey ) { modifiers += 'meta-'; }
+    }
+    // However, on Windows, shift-delete is apparently "cut" (WTF right?), so
+    // we want to let the browser handle shift-delete.
+    if ( event.shiftKey ) { modifiers += 'shift-'; }
+
+    key = modifiers + key;
+
+    if ( this._keyHandlers[ key ] ) {
+        this._keyHandlers[ key ]( this, event, range );
+    } else if ( key.length === 1 && !range.collapsed ) {
+        // Record undo checkpoint.
+        this._recordUndoState( range );
+        this._getRangeAndRemoveBookmark( range );
+        // Delete the selection
+        deleteContentsOfRange( range );
+        this._ensureBottomLine();
+        this.setSelection( range );
+        this._updatePath( range, true );
+    }
+};
+
 var mapKeyTo = function ( method ) {
     return function ( self, event ) {
         event.preventDefault();
@@ -1129,6 +1276,14 @@ var afterDelete = function ( self, range ) {
             // Move cursor into text node
             moveRangeBoundariesDownTree( range );
         }
+        // If you delete the last character in the sole <div> in Chrome,
+        // it removes the div and replaces it with just a <br> inside the
+        // body. Detach the <br>; the _ensureBottomLine call will insert a new
+        // block.
+        if ( node.nodeName === 'BODY' &&
+                ( node = node.firstChild ) && node.nodeName === 'BR' ) {
+            detach( node );
+        }
         self._ensureBottomLine();
         self.setSelection( range );
         self._updatePath( range, true );
@@ -1240,11 +1395,9 @@ var keyHandlers = {
         if ( nodeAfterSplit.nodeType === TEXT_NODE ) {
             nodeAfterSplit = nodeAfterSplit.parentNode;
         }
-        var doc = self._doc,
-            body = self._body;
-        if ( nodeAfterSplit.offsetTop + nodeAfterSplit.offsetHeight >
-                ( doc.documentElement.scrollTop || body.scrollTop ) +
-                body.offsetHeight ) {
+        // 16 ~ one standard line height in px.
+        if ( nodeAfterSplit.getBoundingClientRect().top + 16 >
+                self._doc.documentElement.clientHeight ) {
             nodeAfterSplit.scrollIntoView( false );
         }
     },
@@ -1348,17 +1501,33 @@ var keyHandlers = {
         // Otherwise, leave to browser but check afterwards whether it has
         // left behind an empty inline tag.
         else {
-            self.setSelection( range );
+            // But first check if the cursor is just before an IMG tag. If so,
+            // delete it ourselves, because the browser won't if it is not
+            // inline.
+            var originalRange = range.cloneRange(),
+                cursorContainer, cursorOffset, nodeAfterCursor;
+            moveRangeBoundariesUpTree( range, self._body );
+            cursorContainer = range.endContainer;
+            cursorOffset = range.endOffset;
+            if ( cursorContainer.nodeType === ELEMENT_NODE ) {
+                nodeAfterCursor = cursorContainer.childNodes[ cursorOffset ];
+                if ( nodeAfterCursor && nodeAfterCursor.nodeName === 'IMG' ) {
+                    event.preventDefault();
+                    detach( nodeAfterCursor );
+                    moveRangeBoundariesDownTree( range );
+                    afterDelete( self, range );
+                    return;
+                }
+            }
+            self.setSelection( originalRange );
             setTimeout( function () { afterDelete( self ); }, 0 );
         }
     },
     tab: function ( self, event, range ) {
         var node, parent;
         self._removeZWS();
-        // If no selection and in an empty block
-        if ( range.collapsed &&
-                rangeDoesStartAtBlockBoundary( range ) &&
-                rangeDoesEndAtBlockBoundary( range ) ) {
+        // If no selection and at start of block
+        if ( range.collapsed && rangeDoesStartAtBlockBoundary( range ) ) {
             node = getStartBlockOfRange( range );
             // Iterate through the block's parents
             while ( parent = node.parentNode ) {
@@ -1374,7 +1543,18 @@ var keyHandlers = {
                 }
                 node = parent;
             }
-            event.preventDefault();
+        }
+    },
+    'shift-tab': function ( self, event, range ) {
+        self._removeZWS();
+        // If no selection and at start of block
+        if ( range.collapsed && rangeDoesStartAtBlockBoundary( range ) ) {
+            // Break list
+            var node = range.startContainer;
+            if ( getNearest( node, 'UL' ) || getNearest( node, 'OL' ) ) {
+                event.preventDefault();
+                self.modifyBlocks( decreaseListLevel, range );
+            }
         }
     },
     space: function ( self, _, range ) {
@@ -1418,6 +1598,18 @@ if ( isMac && isGecko && win.getSelection().modify ) {
     };
 }
 
+// System standard for page up/down on Mac is to just scroll, not move the
+// cursor. On Linux/Windows, it should move the cursor, but some browsers don't
+// implement this natively. Override to support it.
+if ( !isMac ) {
+    keyHandlers.pageup = function ( self ) {
+        self.moveCursorToStart();
+    };
+    keyHandlers.pagedown = function ( self ) {
+        self.moveCursorToEnd();
+    };
+}
+
 keyHandlers[ ctrlKey + 'b' ] = mapKeyToFormat( 'B' );
 keyHandlers[ ctrlKey + 'i' ] = mapKeyToFormat( 'I' );
 keyHandlers[ ctrlKey + 'u' ] = mapKeyToFormat( 'U' );
@@ -1432,1815 +1624,1819 @@ keyHandlers[ ctrlKey + 'y' ] = mapKeyTo( 'redo' );
 keyHandlers[ ctrlKey + 'z' ] = mapKeyTo( 'undo' );
 keyHandlers[ ctrlKey + 'shift-z' ] = mapKeyTo( 'redo' );
 
-var instances = [];
+var fontSizes = {
+    1: 10,
+    2: 13,
+    3: 16,
+    4: 18,
+    5: 24,
+    6: 32,
+    7: 48
+};
 
-function getSquireInstance ( doc ) {
-    var l = instances.length,
-        instance;
-    while ( l-- ) {
-        instance = instances[l];
-        if ( instance._doc === doc ) {
-            return instance;
+var spanToSemantic = {
+    backgroundColor: {
+        regexp: notWS,
+        replace: function ( doc, colour ) {
+            return createElement( doc, 'SPAN', {
+                'class': 'highlight',
+                style: 'background-color:' + colour
+            });
+        }
+    },
+    color: {
+        regexp: notWS,
+        replace: function ( doc, colour ) {
+            return createElement( doc, 'SPAN', {
+                'class': 'colour',
+                style: 'color:' + colour
+            });
+        }
+    },
+    fontWeight: {
+        regexp: /^bold/i,
+        replace: function ( doc ) {
+            return createElement( doc, 'B' );
+        }
+    },
+    fontStyle: {
+        regexp: /^italic/i,
+        replace: function ( doc ) {
+            return createElement( doc, 'I' );
+        }
+    },
+    fontFamily: {
+        regexp: notWS,
+        replace: function ( doc, family ) {
+            return createElement( doc, 'SPAN', {
+                'class': 'font',
+                style: 'font-family:' + family
+            });
+        }
+    },
+    fontSize: {
+        regexp: notWS,
+        replace: function ( doc, size ) {
+            return createElement( doc, 'SPAN', {
+                'class': 'size',
+                style: 'font-size:' + size
+            });
         }
     }
-    return null;
-}
-
-function mergeObjects ( base, extras ) {
-    var prop, value;
-    if ( !base ) {
-        base = {};
-    }
-    for ( prop in extras ) {
-        value = extras[ prop ];
-        base[ prop ] = ( value && value.constructor === Object ) ?
-            mergeObjects( base[ prop ], value ) :
-            value;
-    }
-    return base;
-}
+};
 
-function Squire ( doc, config ) {
-    var win = doc.defaultView;
-    var body = doc.body;
-    var mutation;
+var replaceWithTag = function ( tag ) {
+    return function ( node, parent ) {
+        var el = createElement( node.ownerDocument, tag );
+        parent.replaceChild( el, node );
+        el.appendChild( empty( node ) );
+        return el;
+    };
+};
 
-    this._win = win;
-    this._doc = doc;
-    this._body = body;
+var stylesRewriters = {
+    SPAN: function ( span, parent ) {
+        var style = span.style,
+            doc = span.ownerDocument,
+            attr, converter, css, newTreeBottom, newTreeTop, el;
 
-    this._events = {};
+        for ( attr in spanToSemantic ) {
+            converter = spanToSemantic[ attr ];
+            css = style[ attr ];
+            if ( css && converter.regexp.test( css ) ) {
+                el = converter.replace( doc, css );
+                if ( newTreeBottom ) {
+                    newTreeBottom.appendChild( el );
+                }
+                newTreeBottom = el;
+                if ( !newTreeTop ) {
+                    newTreeTop = el;
+                }
+            }
+        }
 
-    this._sel = win.getSelection();
-    this._lastSelection = null;
+        if ( newTreeTop ) {
+            newTreeBottom.appendChild( empty( span ) );
+            parent.replaceChild( newTreeTop, span );
+        }
 
-    // IE loses selection state of iframe on blur, so make sure we
-    // cache it just before it loses focus.
-    if ( losesSelectionOnBlur ) {
-        this.addEventListener( 'beforedeactivate', this.getSelection );
+        return newTreeBottom || span;
+    },
+    STRONG: replaceWithTag( 'B' ),
+    EM: replaceWithTag( 'I' ),
+    STRIKE: replaceWithTag( 'S' ),
+    FONT: function ( node, parent ) {
+        var face = node.face,
+            size = node.size,
+            colour = node.color,
+            doc = node.ownerDocument,
+            fontSpan, sizeSpan, colourSpan,
+            newTreeBottom, newTreeTop;
+        if ( face ) {
+            fontSpan = createElement( doc, 'SPAN', {
+                'class': 'font',
+                style: 'font-family:' + face
+            });
+            newTreeTop = fontSpan;
+            newTreeBottom = fontSpan;
+        }
+        if ( size ) {
+            sizeSpan = createElement( doc, 'SPAN', {
+                'class': 'size',
+                style: 'font-size:' + fontSizes[ size ] + 'px'
+            });
+            if ( !newTreeTop ) {
+                newTreeTop = sizeSpan;
+            }
+            if ( newTreeBottom ) {
+                newTreeBottom.appendChild( sizeSpan );
+            }
+            newTreeBottom = sizeSpan;
+        }
+        if ( colour && /^#?([\dA-F]{3}){1,2}$/i.test( colour ) ) {
+            if ( colour.charAt( 0 ) !== '#' ) {
+                colour = '#' + colour;
+            }
+            colourSpan = createElement( doc, 'SPAN', {
+                'class': 'colour',
+                style: 'color:' + colour
+            });
+            if ( !newTreeTop ) {
+                newTreeTop = colourSpan;
+            }
+            if ( newTreeBottom ) {
+                newTreeBottom.appendChild( colourSpan );
+            }
+            newTreeBottom = colourSpan;
+        }
+        if ( !newTreeTop ) {
+            newTreeTop = newTreeBottom = createElement( doc, 'SPAN' );
+        }
+        parent.replaceChild( newTreeTop, node );
+        newTreeBottom.appendChild( empty( node ) );
+        return newTreeBottom;
+    },
+    TT: function ( node, parent ) {
+        var el = createElement( node.ownerDocument, 'SPAN', {
+            'class': 'font',
+            style: 'font-family:menlo,consolas,"courier new",monospace'
+        });
+        parent.replaceChild( el, node );
+        el.appendChild( empty( node ) );
+        return el;
     }
+};
 
-    this._hasZWS = false;
+var allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|IGCAPTION|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|UL)$/;
 
-    this._lastAnchorNode = null;
-    this._lastFocusNode = null;
-    this._path = '';
+var blacklist = /^(?:HEAD|META|STYLE)/;
 
-    this.addEventListener( 'keyup', this._updatePathOnEvent );
-    this.addEventListener( 'mouseup', this._updatePathOnEvent );
+var walker = new TreeWalker( null, SHOW_TEXT|SHOW_ELEMENT, function () {
+    return true;
+});
 
-    win.addEventListener( 'focus', this, false );
-    win.addEventListener( 'blur', this, false );
+/*
+    Two purposes:
 
-    this._undoIndex = -1;
-    this._undoStack = [];
-    this._undoStackLength = 0;
-    this._isInUndoState = false;
-    this._ignoreChange = false;
+    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 cleanTree ( node ) {
+    var children = node.childNodes,
+        nonInlineParent, i, l, child, nodeName, nodeType, rewriter, childLength,
+        startsWithWS, endsWithWS, data, sibling;
 
-    if ( canObserveMutations ) {
-        mutation = new MutationObserver( this._docWasChanged.bind( this ) );
-        mutation.observe( body, {
-            childList: true,
-            attributes: true,
-            characterData: true,
-            subtree: true
-        });
-        this._mutation = mutation;
-    } else {
-        this.addEventListener( 'keyup', this._keyUpDetectChange );
+    nonInlineParent = node;
+    while ( isInline( nonInlineParent ) ) {
+        nonInlineParent = nonInlineParent.parentNode;
     }
+    walker.root = nonInlineParent;
 
-    // IE sometimes fires the beforepaste event twice; make sure it is not run
-    // again before our after paste function is called.
-    this._awaitingPaste = false;
-    this.addEventListener( isIElt11 ? 'beforecut' : 'cut', this._onCut );
-    this.addEventListener( isIElt11 ? 'beforepaste' : 'paste', this._onPaste );
-
-    // Opera does not fire keydown repeatedly.
-    this.addEventListener( isPresto ? 'keypress' : 'keydown', this._onKey );
-
-    // Add key handlers
-    this._keyHandlers = Object.create( keyHandlers );
-
-    // Override default properties
-    this.setConfig( config );
-
-    // Fix IE<10's buggy implementation of Text#splitText.
-    // If the split is at the end of the node, it doesn't insert the newly split
-    // node into the document, and sets its value to undefined rather than ''.
-    // And even if the split is not at the end, the original node is removed
-    // from the document and replaced by another, rather than just having its
-    // data shortened.
-    // We used to feature test for this, but then found the feature test would
-    // sometimes pass, but later on the buggy behaviour would still appear.
-    // I think IE10 does not have the same bug, but it doesn't hurt to replace
-    // its native fn too and then we don't need yet another UA category.
-    if ( isIElt11 ) {
-        win.Text.prototype.splitText = function ( offset ) {
-            var afterSplit = this.ownerDocument.createTextNode(
-                    this.data.slice( offset ) ),
-                next = this.nextSibling,
-                parent = this.parentNode,
-                toDelete = this.length - offset;
-            if ( next ) {
-                parent.insertBefore( afterSplit, next );
-            } else {
-                parent.appendChild( afterSplit );
+    for ( i = 0, l = children.length; i < l; i += 1 ) {
+        child = children[i];
+        nodeName = child.nodeName;
+        nodeType = child.nodeType;
+        rewriter = stylesRewriters[ nodeName ];
+        if ( nodeType === ELEMENT_NODE ) {
+            childLength = child.childNodes.length;
+            if ( rewriter ) {
+                child = rewriter( child, node );
+            } else if ( blacklist.test( nodeName ) ) {
+                node.removeChild( child );
+                i -= 1;
+                l -= 1;
+                continue;
+            } else if ( !allowedBlock.test( nodeName ) && !isInline( child ) ) {
+                i -= 1;
+                l += childLength - 1;
+                node.replaceChild( empty( child ), child );
+                continue;
             }
-            if ( toDelete ) {
-                this.deleteData( offset, toDelete );
+            if ( childLength ) {
+                cleanTree( child );
             }
-            return afterSplit;
-        };
+        } else {
+            if ( nodeType === TEXT_NODE ) {
+                data = child.data;
+                startsWithWS = !notWS.test( data.charAt( 0 ) );
+                endsWithWS = !notWS.test( data.charAt( data.length - 1 ) );
+                if ( !startsWithWS && !endsWithWS ) {
+                    continue;
+                }
+                // Iterate through the nodes; if we hit some other content
+                // before the start of a new block we don't trim
+                if ( startsWithWS ) {
+                    walker.currentNode = child;
+                    while ( sibling = walker.previousPONode() ) {
+                        nodeName = sibling.nodeName;
+                        if ( nodeName === 'IMG' ||
+                                ( nodeName === '#text' &&
+                                    /\S/.test( sibling.data ) ) ) {
+                            break;
+                        }
+                        if ( !isInline( sibling ) ) {
+                            sibling = null;
+                            break;
+                        }
+                    }
+                    if ( !sibling ) {
+                        data = data.replace( /^\s+/g, '' );
+                    }
+                }
+                if ( endsWithWS ) {
+                    walker.currentNode = child;
+                    while ( sibling = walker.nextNode() ) {
+                        if ( nodeName === 'IMG' ||
+                                ( nodeName === '#text' &&
+                                    /\S/.test( sibling.data ) ) ) {
+                            break;
+                        }
+                        if ( !isInline( sibling ) ) {
+                            sibling = null;
+                            break;
+                        }
+                    }
+                    if ( !sibling ) {
+                        data = data.replace( /^\s+/g, '' );
+                    }
+                }
+                if ( data ) {
+                    child.data = data;
+                    continue;
+                }
+            }
+            node.removeChild( child );
+            i -= 1;
+            l -= 1;
+        }
     }
+    return node;
+};
 
-    body.setAttribute( 'contenteditable', 'true' );
-
-    // Remove Firefox's built-in controls
-    try {
-        doc.execCommand( 'enableObjectResizing', false, 'false' );
-        doc.execCommand( 'enableInlineTableEditing', false, 'false' );
-    } catch ( error ) {}
-
-    instances.push( this );
-
-    // Need to register instance before calling setHTML, so that the fixCursor
-    // function can lookup any default block tag options set.
-    this.setHTML( '' );
-}
-
-var proto = Squire.prototype;
+// ---
 
-proto.setConfig = function ( config ) {
-    config = mergeObjects({
-        blockTag: 'DIV',
-        blockAttributes: null,
-        tagAttributes: {
-            blockquote: null,
-            ul: null,
-            ol: null,
-            li: null
+var removeEmptyInlines = function removeEmptyInlines ( root ) {
+    var children = root.childNodes,
+        l = children.length,
+        child;
+    while ( l-- ) {
+        child = children[l];
+        if ( child.nodeType === ELEMENT_NODE && !isLeaf( child ) ) {
+            removeEmptyInlines( child );
+            if ( isInline( child ) && !child.firstChild ) {
+                root.removeChild( child );
+            }
+        } else if ( child.nodeType === TEXT_NODE && !child.data ) {
+            root.removeChild( child );
         }
-    }, config );
-
-    // Users may specify block tag in lower case
-    config.blockTag = config.blockTag.toUpperCase();
-
-    this._config = config;
-
-    return this;
-};
-
-proto.createElement = function ( tag, props, children ) {
-    return createElement( this._doc, tag, props, children );
+    }
 };
 
-proto.createDefaultBlock = function ( children ) {
-    var config = this._config;
-    return fixCursor(
-        this.createElement( config.blockTag, config.blockAttributes, children )
-    );
-};
+// ---
 
-proto.didError = function ( error ) {
-    console.log( error );
+var notWSTextNode = function ( node ) {
+    return node.nodeType === ELEMENT_NODE ?
+        node.nodeName === 'BR' :
+        notWS.test( node.data );
 };
-
-proto.getDocument = function () {
-    return this._doc;
+var isLineBreak = function ( br ) {
+    var block = br.parentNode,
+        walker;
+    while ( isInline( block ) ) {
+        block = block.parentNode;
+    }
+    walker = new TreeWalker(
+        block, SHOW_ELEMENT|SHOW_TEXT, notWSTextNode );
+    walker.currentNode = br;
+    return !!walker.nextNode();
 };
 
-// --- Events ---
-
-// Subscribing to these events won't automatically add a listener to the
-// document node, since these events are fired in a custom manner by the
-// editor code.
-var customEvents = {
-    focus: 1, blur: 1,
-    pathChange: 1, select: 1, input: 1, undoStateChange: 1
-};
-
-proto.fireEvent = function ( type, event ) {
-    var handlers = this._events[ type ],
-        i, l, obj;
-    if ( handlers ) {
-        if ( !event ) {
-            event = {};
-        }
-        if ( event.type !== type ) {
-            event.type = type;
-        }
-        // Clone handlers array, so any handlers added/removed do not affect it.
-        handlers = handlers.slice();
-        for ( i = 0, l = handlers.length; i < l; i += 1 ) {
-            obj = handlers[i];
-            try {
-                if ( obj.handleEvent ) {
-                    obj.handleEvent( event );
-                } else {
-                    obj.call( this, event );
-                }
-            } catch ( error ) {
-                error.details = 'Squire: fireEvent error. Event type: ' + type;
-                this.didError( error );
-            }
-        }
-    }
-    return this;
-};
+// <br> elements are treated specially, and differently depending on the
+// browser, when in rich text editor mode. When adding HTML from external
+// sources, we must remove them, replacing the ones that actually affect
+// line breaks by wrapping the inline text in a <div>. Browsers that want <br>
+// elements at the end of each block will then have them added back in a later
+// fixCursor method call.
+var cleanupBRs = function ( root ) {
+    var brs = root.querySelectorAll( 'BR' ),
+        brBreaksLine = [],
+        l = brs.length,
+        i, br, parent;
 
-proto.destroy = function () {
-    var win = this._win,
-        doc = this._doc,
-        events = this._events,
-        type;
-    win.removeEventListener( 'focus', this, false );
-    win.removeEventListener( 'blur', this, false );
-    for ( type in events ) {
-        if ( !customEvents[ type ] ) {
-            doc.removeEventListener( type, this, true );
-        }
-    }
-    if ( this._mutation ) {
-        this._mutation.disconnect();
+    // Must calculate whether the <br> breaks a line first, because if we
+    // have two <br>s next to each other, after the first one is converted
+    // to a block split, the second will be at the end of a block and
+    // therefore seem to not be a line break. But in its original context it
+    // was, so we should also convert it to a block split.
+    for ( i = 0; i < l; i += 1 ) {
+        brBreaksLine[i] = isLineBreak( brs[i] );
     }
-    var l = instances.length;
     while ( l-- ) {
-        if ( instances[l] === this ) {
-            instances.splice( l, 1 );
+        br = brs[l];
+        // Cleanup may have removed it
+        parent = br.parentNode;
+        if ( !parent ) { continue; }
+        // If it doesn't break a line, just remove it; it's not doing
+        // anything useful. We'll add it back later if required by the
+        // browser. If it breaks a line, wrap the content in div tags
+        // and replace the brs.
+        if ( !brBreaksLine[l] ) {
+            detach( br );
+        } else if ( !isInline( parent ) ) {
+            fixContainer( parent );
         }
     }
 };
 
-proto.handleEvent = function ( event ) {
-    this.fireEvent( event.type, event );
-};
-
-proto.addEventListener = function ( type, fn ) {
-    var handlers = this._events[ type ];
-    if ( !fn ) {
-        this.didError({
-            name: 'Squire: addEventListener with null or undefined fn',
-            message: 'Event type: ' + type
-        });
-        return this;
-    }
-    if ( !handlers ) {
-        handlers = this._events[ type ] = [];
-        if ( !customEvents[ type ] ) {
-            this._doc.addEventListener( type, this, true );
+var onCut = function () {
+    // Save undo checkpoint
+    var range = this.getSelection();
+    var self = this;
+    this._recordUndoState( range );
+    this._getRangeAndRemoveBookmark( range );
+    this.setSelection( range );
+    setTimeout( function () {
+        try {
+            // If all content removed, ensure div at start of body.
+            self._ensureBottomLine();
+        } catch ( error ) {
+            self.didError( error );
         }
-    }
-    handlers.push( fn );
-    return this;
+    }, 0 );
 };
 
-proto.removeEventListener = function ( type, fn ) {
-    var handlers = this._events[ type ],
-        l;
-    if ( handlers ) {
-        l = handlers.length;
+var onPaste = function ( event ) {
+    var clipboardData = event.clipboardData,
+        items = clipboardData && clipboardData.items,
+        fireDrop = false,
+        hasImage = false,
+        plainItem = null,
+        self = this,
+        l, item, type, data;
+
+    // Current HTML5 Clipboard interface
+    // ---------------------------------
+    // https://html.spec.whatwg.org/multipage/interaction.html
+
+    if ( items ) {
+        event.preventDefault();
+        l = items.length;
         while ( l-- ) {
-            if ( handlers[l] === fn ) {
-                handlers.splice( l, 1 );
+            item = items[l];
+            type = item.type;
+            if ( type === 'text/html' ) {
+                /*jshint loopfunc: true */
+                item.getAsString( function ( html ) {
+                    self.insertHTML( html, true );
+                });
+                /*jshint loopfunc: false */
+                return;
+            }
+            if ( type === 'text/plain' ) {
+                plainItem = item;
+            }
+            if ( /^image\/.*/.test( type ) ) {
+                hasImage = true;
             }
         }
-        if ( !handlers.length ) {
-            delete this._events[ type ];
-            if ( !customEvents[ type ] ) {
-                this._doc.removeEventListener( type, this, false );
+        // Treat image paste as a drop of an image file.
+        if ( hasImage ) {
+            this.fireEvent( 'dragover', {
+                dataTransfer: clipboardData,
+                /*jshint loopfunc: true */
+                preventDefault: function () {
+                    fireDrop = true;
+                }
+                /*jshint loopfunc: false */
+            });
+            if ( fireDrop ) {
+                this.fireEvent( 'drop', {
+                    dataTransfer: clipboardData
+                });
             }
+        } else if ( plainItem ) {
+            item.getAsString( function ( text ) {
+                self.insertPlainText( text, true );
+            });
         }
+        return;
     }
-    return this;
-};
-
-// --- Selection and Path ---
 
-proto._createRange =
-        function ( range, startOffset, endContainer, endOffset ) {
-    if ( range instanceof this._win.Range ) {
-        return range.cloneRange();
-    }
-    var domRange = this._doc.createRange();
-    domRange.setStart( range, startOffset );
-    if ( endContainer ) {
-        domRange.setEnd( endContainer, endOffset );
-    } else {
-        domRange.setEnd( range, startOffset );
-    }
-    return domRange;
-};
+    // Old interface
+    // -------------
 
-proto.setSelection = function ( range ) {
-    if ( range ) {
-        // iOS bug: if you don't focus the iframe before setting the
-        // selection, you can end up in a state where you type but the input
-        // doesn't get directed into the contenteditable area but is instead
-        // lost in a black hole. Very strange.
-        if ( isIOS ) {
-            this._win.focus();
+    // Safari (and indeed many other OS X apps) copies stuff as text/rtf
+    // rather than text/html; even from a webpage in Safari. The only way
+    // to get an HTML version is to fallback to letting the browser insert
+    // the content. Same for getting image data. *Sigh*.
+    if ( clipboardData && (
+            indexOf.call( clipboardData.types, 'text/html' ) > -1 || (
+            indexOf.call( clipboardData.types, 'text/plain' ) > -1 &&
+            indexOf.call( clipboardData.types, 'text/rtf' ) < 0 ) ) ) {
+        event.preventDefault();
+        // Abiword on Linux copies a plain text and html version, but the HTML
+        // version is the empty string! So always try to get HTML, but if none,
+        // insert plain text instead.
+        if (( data = clipboardData.getData( 'text/html' ) )) {
+            this.insertHTML( data, true );
+        } else if (( data = clipboardData.getData( 'text/plain' ) )) {
+            this.insertPlainText( data, true );
         }
-        var sel = this._sel;
-        sel.removeAllRanges();
-        sel.addRange( range );
+        return;
     }
-    return this;
-};
 
-proto.getSelection = function () {
-    var sel = this._sel,
-        selection, startContainer, endContainer;
-    if ( sel.rangeCount ) {
-        selection  = sel.getRangeAt( 0 ).cloneRange();
-        startContainer = selection.startContainer;
-        endContainer = selection.endContainer;
-        // FF can return the selection as being inside an <img>. WTF?
-        if ( startContainer && isLeaf( startContainer ) ) {
-            selection.setStartBefore( startContainer );
-        }
-        if ( endContainer && isLeaf( endContainer ) ) {
-            selection.setEndBefore( endContainer );
-        }
-        this._lastSelection = selection;
-    } else {
-        selection = this._lastSelection;
-    }
-    if ( !selection ) {
-        selection = this._createRange( this._body.firstChild, 0 );
-    }
-    return selection;
-};
+    // No interface :(
+    // ---------------
 
-proto.getSelectedText = function () {
-    var range = this.getSelection(),
-        walker = new TreeWalker(
-            range.commonAncestorContainer,
-            SHOW_TEXT|SHOW_ELEMENT,
-            function ( node ) {
-                return isNodeContainedInRange( range, node, true );
-            }
-        ),
+    this._awaitingPaste = true;
+
+    var body = this._body,
+        range = this.getSelection(),
         startContainer = range.startContainer,
+        startOffset = range.startOffset,
         endContainer = range.endContainer,
-        node = walker.currentNode = startContainer,
-        textContent = '',
-        addedTextInBlock = false,
-        value;
+        endOffset = range.endOffset,
+        startBlock = getStartBlockOfRange( range );
 
-    if ( !walker.filter( node ) ) {
-        node = walker.nextNode();
-    }
+    // We need to position the pasteArea in the visible portion of the screen
+    // to stop the browser auto-scrolling.
+    var pasteArea = this.createElement( 'DIV', {
+        style: 'position: absolute; overflow: hidden; top:' +
+            ( body.scrollTop +
+                ( startBlock ? startBlock.getBoundingClientRect().top : 0 ) ) +
+            'px; right: 150%; width: 1px; height: 1px;'
+    });
+    body.appendChild( pasteArea );
+    range.selectNodeContents( pasteArea );
+    this.setSelection( range );
 
-    while ( node ) {
-        if ( node.nodeType === TEXT_NODE ) {
-            value = node.data;
-            if ( value && ( /\S/.test( value ) ) ) {
-                if ( node === endContainer ) {
-                    value = value.slice( 0, range.endOffset );
-                }
-                if ( node === startContainer ) {
-                    value = value.slice( range.startOffset );
+    // 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 () {
+        try {
+            // IE sometimes fires the beforepaste event twice; make sure it is
+            // not run again before our after paste function is called.
+            self._awaitingPaste = false;
+
+            // Get the pasted content and clean
+            var html = '',
+                next = pasteArea,
+                first, range;
+
+            // #88: Chrome can apparently split the paste area if certain
+            // content is inserted; gather them all up.
+            while ( pasteArea = next ) {
+                next = pasteArea.nextSibling;
+                detach( pasteArea );
+                // Safari and IE like putting extra divs around things.
+                first = pasteArea.firstChild;
+                if ( first && first === pasteArea.lastChild &&
+                        first.nodeName === 'DIV' ) {
+                    pasteArea = first;
                 }
-                textContent += value;
-                addedTextInBlock = true;
+                html += pasteArea.innerHTML;
             }
-        } else if ( node.nodeName === 'BR' ||
-                addedTextInBlock && !isInline( node ) ) {
-            textContent += '\n';
-            addedTextInBlock = false;
-        }
-        node = walker.nextNode();
-    }
 
-    return textContent;
-};
+            range = self._createRange(
+                startContainer, startOffset, endContainer, endOffset );
+            self.setSelection( range );
 
-proto.getPath = function () {
-    return this._path;
+            if ( html ) {
+                self.insertHTML( html, true );
+            }
+        } catch ( error ) {
+            self.didError( error );
+        }
+    }, 0 );
 };
 
-// --- Workaround for browsers that can't focus empty text nodes ---
-
-// WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256
+var instances = [];
 
-var removeZWS = function ( root ) {
-    var walker = new TreeWalker( root, SHOW_TEXT, function () {
-            return true;
-        }, false ),
-        parent, node, index;
-    while ( node = walker.nextNode() ) {
-        while ( ( index = node.data.indexOf( ZWS ) ) > -1 ) {
-            if ( node.length === 1 ) {
-                do {
-                    parent = node.parentNode;
-                    parent.removeChild( node );
-                    node = parent;
-                } while ( isInline( node ) && !getLength( node ) );
-                break;
-            } else {
-                node.deleteData( index, 1 );
-            }
+function getSquireInstance ( doc ) {
+    var l = instances.length,
+        instance;
+    while ( l-- ) {
+        instance = instances[l];
+        if ( instance._doc === doc ) {
+            return instance;
         }
     }
-};
+    return null;
+}
 
-proto._didAddZWS = function () {
-    this._hasZWS = true;
-};
-proto._removeZWS = function () {
-    if ( !this._hasZWS ) {
-        return;
+function mergeObjects ( base, extras ) {
+    var prop, value;
+    if ( !base ) {
+        base = {};
     }
-    removeZWS( this._body );
-    this._hasZWS = false;
-};
+    for ( prop in extras ) {
+        value = extras[ prop ];
+        base[ prop ] = ( value && value.constructor === Object ) ?
+            mergeObjects( base[ prop ], value ) :
+            value;
+    }
+    return base;
+}
 
-// --- Path change events ---
+function Squire ( doc, config ) {
+    var win = doc.defaultView;
+    var body = doc.body;
+    var mutation;
 
-proto._updatePath = function ( range, force ) {
-    var anchor = range.startContainer,
-        focus = range.endContainer,
-        newPath;
-    if ( force || anchor !== this._lastAnchorNode ||
-            focus !== this._lastFocusNode ) {
-        this._lastAnchorNode = anchor;
-        this._lastFocusNode = focus;
-        newPath = ( anchor && focus ) ? ( anchor === focus ) ?
-            getPath( focus ) : '(selection)' : '';
-        if ( this._path !== newPath ) {
-            this._path = newPath;
-            this.fireEvent( 'pathChange', { path: newPath } );
-        }
-    }
-    if ( !range.collapsed ) {
-        this.fireEvent( 'select' );
-    }
-};
+    this._win = win;
+    this._doc = doc;
+    this._body = body;
 
-proto._updatePathOnEvent = function () {
-    this._updatePath( this.getSelection() );
-};
+    this._events = {};
 
-// --- Focus ---
+    this._lastSelection = null;
 
-proto.focus = function () {
-    // FF seems to need the body to be focussed (at least on first load).
-    // Chrome also now needs body to be focussed in order to show the cursor
-    // (otherwise it is focussed, but the cursor doesn't appear).
-    // Opera (Presto-variant) however will lose the selection if you call this!
-    if ( !isPresto ) {
-        this._body.focus();
+    // IE loses selection state of iframe on blur, so make sure we
+    // cache it just before it loses focus.
+    if ( losesSelectionOnBlur ) {
+        this.addEventListener( 'beforedeactivate', this.getSelection );
     }
-    this._win.focus();
-    return this;
-};
 
-proto.blur = function () {
-    // IE will remove the whole browser window from focus if you call
-    // win.blur() or body.blur(), so instead we call top.focus() to focus
-    // the top frame, thus blurring this frame. This works in everything
-    // except FF, so we need to call body.blur() in that as well.
-    if ( isGecko ) {
-        this._body.blur();
-    }
-    top.focus();
-    return this;
-};
+    this._hasZWS = false;
 
-// --- Bookmarking ---
+    this._lastAnchorNode = null;
+    this._lastFocusNode = null;
+    this._path = '';
 
-var startSelectionId = 'squire-selection-start';
-var endSelectionId = 'squire-selection-end';
+    this.addEventListener( 'keyup', this._updatePathOnEvent );
+    this.addEventListener( 'mouseup', this._updatePathOnEvent );
 
-proto._saveRangeToBookmark = function ( range ) {
-    var startNode = this.createElement( 'INPUT', {
-            id: startSelectionId,
-            type: 'hidden'
-        }),
-        endNode = this.createElement( 'INPUT', {
-            id: endSelectionId,
-            type: 'hidden'
-        }),
-        temp;
+    win.addEventListener( 'focus', this, false );
+    win.addEventListener( 'blur', this, false );
 
-    insertNodeInRange( range, startNode );
-    range.collapse( false );
-    insertNodeInRange( range, endNode );
+    this._undoIndex = -1;
+    this._undoStack = [];
+    this._undoStackLength = 0;
+    this._isInUndoState = false;
+    this._ignoreChange = false;
 
-    // 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;
+    if ( canObserveMutations ) {
+        mutation = new MutationObserver( this._docWasChanged.bind( this ) );
+        mutation.observe( body, {
+            childList: true,
+            attributes: true,
+            characterData: true,
+            subtree: true
+        });
+        this._mutation = mutation;
+    } else {
+        this.addEventListener( 'keyup', this._keyUpDetectChange );
     }
 
-    range.setStartAfter( startNode );
-    range.setEndBefore( endNode );
-};
+    // IE sometimes fires the beforepaste event twice; make sure it is not run
+    // again before our after paste function is called.
+    this._awaitingPaste = false;
+    this.addEventListener( isIElt11 ? 'beforecut' : 'cut', onCut );
+    this.addEventListener( isIElt11 ? 'beforepaste' : 'paste', onPaste );
 
-proto._getRangeAndRemoveBookmark = function ( range ) {
-    var doc = this._doc,
-        start = doc.getElementById( startSelectionId ),
-        end = doc.getElementById( endSelectionId );
+    // Opera does not fire keydown repeatedly.
+    this.addEventListener( isPresto ? 'keypress' : 'keydown', onKey );
 
-    if ( start && end ) {
-        var startContainer = start.parentNode,
-            endContainer = end.parentNode,
-            collapsed;
+    // Add key handlers
+    this._keyHandlers = Object.create( keyHandlers );
 
-        var _range = {
-            startContainer: startContainer,
-            endContainer: endContainer,
-            startOffset: indexOf.call( startContainer.childNodes, start ),
-            endOffset: indexOf.call( endContainer.childNodes, end )
-        };
+    // Override default properties
+    this.setConfig( config );
 
-        if ( startContainer === endContainer ) {
-            _range.endOffset -= 1;
-        }
+    // Fix IE<10's buggy implementation of Text#splitText.
+    // If the split is at the end of the node, it doesn't insert the newly split
+    // node into the document, and sets its value to undefined rather than ''.
+    // And even if the split is not at the end, the original node is removed
+    // from the document and replaced by another, rather than just having its
+    // data shortened.
+    // We used to feature test for this, but then found the feature test would
+    // sometimes pass, but later on the buggy behaviour would still appear.
+    // I think IE10 does not have the same bug, but it doesn't hurt to replace
+    // its native fn too and then we don't need yet another UA category.
+    if ( isIElt11 ) {
+        win.Text.prototype.splitText = function ( offset ) {
+            var afterSplit = this.ownerDocument.createTextNode(
+                    this.data.slice( offset ) ),
+                next = this.nextSibling,
+                parent = this.parentNode,
+                toDelete = this.length - offset;
+            if ( next ) {
+                parent.insertBefore( afterSplit, next );
+            } else {
+                parent.appendChild( afterSplit );
+            }
+            if ( toDelete ) {
+                this.deleteData( offset, toDelete );
+            }
+            return afterSplit;
+        };
+    }
 
-        detach( start );
-        detach( end );
+    body.setAttribute( 'contenteditable', 'true' );
 
-        // Merge any text nodes we split
-        mergeInlines( startContainer, _range );
-        if ( startContainer !== endContainer ) {
-            mergeInlines( endContainer, _range );
-        }
+    // Remove Firefox's built-in controls
+    try {
+        doc.execCommand( 'enableObjectResizing', false, 'false' );
+        doc.execCommand( 'enableInlineTableEditing', false, 'false' );
+    } catch ( error ) {}
 
-        if ( !range ) {
-            range = doc.createRange();
-        }
-        range.setStart( _range.startContainer, _range.startOffset );
-        range.setEnd( _range.endContainer, _range.endOffset );
-        collapsed = range.collapsed;
+    instances.push( this );
 
-        moveRangeBoundariesDownTree( range );
-        if ( collapsed ) {
-            range.collapse( true );
-        }
-    }
-    return range || null;
-};
+    // Need to register instance before calling setHTML, so that the fixCursor
+    // function can lookup any default block tag options set.
+    this.setHTML( '' );
+}
 
-// --- Undo ---
+var proto = Squire.prototype;
 
-proto._keyUpDetectChange = function ( event ) {
-    var code = event.keyCode;
-    // Presume document was changed if:
-    // 1. A modifier key (other than shift) wasn't held down
-    // 2. The key pressed is not in range 16<=x<=20 (control keys)
-    // 3. The key pressed is not in range 33<=x<=45 (navigation keys)
-    if ( !event.ctrlKey && !event.metaKey && !event.altKey &&
-            ( code < 16 || code > 20 ) &&
-            ( code < 33 || code > 45 ) )  {
-        this._docWasChanged();
-    }
+proto.setConfig = function ( config ) {
+    config = mergeObjects({
+        blockTag: 'DIV',
+        blockAttributes: null,
+        tagAttributes: {
+            blockquote: null,
+            ul: null,
+            ol: null,
+            li: null
+        }
+    }, config );
+
+    // Users may specify block tag in lower case
+    config.blockTag = config.blockTag.toUpperCase();
+
+    this._config = config;
+
+    return this;
 };
 
-proto._docWasChanged = function () {
-    if ( canObserveMutations && this._ignoreChange ) {
-        this._ignoreChange = false;
-        return;
-    }
-    if ( this._isInUndoState ) {
-        this._isInUndoState = false;
-        this.fireEvent( 'undoStateChange', {
-            canUndo: true,
-            canRedo: false
-        });
-    }
-    this.fireEvent( 'input' );
+proto.createElement = function ( tag, props, children ) {
+    return createElement( this._doc, tag, props, children );
 };
 
-// Leaves bookmark
-proto._recordUndoState = function ( range ) {
-    // Don't record if we're already in an undo state
-    if ( !this._isInUndoState ) {
-        // Advance pointer to new position
-        var undoIndex = this._undoIndex += 1,
-            undoStack = this._undoStack;
+proto.createDefaultBlock = function ( children ) {
+    var config = this._config;
+    return fixCursor(
+        this.createElement( config.blockTag, config.blockAttributes, children )
+    );
+};
 
-        // Truncate stack if longer (i.e. if has been previously undone)
-        if ( undoIndex < this._undoStackLength) {
-            undoStack.length = this._undoStackLength = undoIndex;
+proto.didError = function ( error ) {
+    console.log( error );
+};
+
+proto.getDocument = function () {
+    return this._doc;
+};
+
+// --- Events ---
+
+// Subscribing to these events won't automatically add a listener to the
+// document node, since these events are fired in a custom manner by the
+// editor code.
+var customEvents = {
+    focus: 1, blur: 1,
+    pathChange: 1, select: 1, input: 1, undoStateChange: 1
+};
+
+proto.fireEvent = function ( type, event ) {
+    var handlers = this._events[ type ],
+        l, obj;
+    if ( handlers ) {
+        if ( !event ) {
+            event = {};
+        }
+        if ( event.type !== type ) {
+            event.type = type;
+        }
+        // Clone handlers array, so any handlers added/removed do not affect it.
+        handlers = handlers.slice();
+        l = handlers.length;
+        while ( l-- ) {
+            obj = handlers[l];
+            try {
+                if ( obj.handleEvent ) {
+                    obj.handleEvent( event );
+                } else {
+                    obj.call( this, event );
+                }
+            } catch ( error ) {
+                error.details = 'Squire: fireEvent error. Event type: ' + type;
+                this.didError( error );
+            }
         }
+    }
+    return this;
+};
 
-        // Write out data
-        if ( range ) {
-            this._saveRangeToBookmark( range );
+proto.destroy = function () {
+    var win = this._win,
+        doc = this._doc,
+        events = this._events,
+        type;
+    win.removeEventListener( 'focus', this, false );
+    win.removeEventListener( 'blur', this, false );
+    for ( type in events ) {
+        if ( !customEvents[ type ] ) {
+            doc.removeEventListener( type, this, true );
+        }
+    }
+    if ( this._mutation ) {
+        this._mutation.disconnect();
+    }
+    var l = instances.length;
+    while ( l-- ) {
+        if ( instances[l] === this ) {
+            instances.splice( l, 1 );
         }
-        undoStack[ undoIndex ] = this._getHTML();
-        this._undoStackLength += 1;
-        this._isInUndoState = true;
     }
 };
 
-proto.undo = function () {
-    // Sanity check: must not be at beginning of the history stack
-    if ( this._undoIndex !== 0 || !this._isInUndoState ) {
-        // Make sure any changes since last checkpoint are saved.
-        this._recordUndoState( this.getSelection() );
+proto.handleEvent = function ( event ) {
+    this.fireEvent( event.type, event );
+};
 
-        this._undoIndex -= 1;
-        this._setHTML( this._undoStack[ this._undoIndex ] );
-        var range = this._getRangeAndRemoveBookmark();
-        if ( range ) {
-            this.setSelection( range );
-        }
-        this._isInUndoState = true;
-        this.fireEvent( 'undoStateChange', {
-            canUndo: this._undoIndex !== 0,
-            canRedo: true
+proto.addEventListener = function ( type, fn ) {
+    var handlers = this._events[ type ];
+    if ( !fn ) {
+        this.didError({
+            name: 'Squire: addEventListener with null or undefined fn',
+            message: 'Event type: ' + type
         });
-        this.fireEvent( 'input' );
+        return this;
     }
+    if ( !handlers ) {
+        handlers = this._events[ type ] = [];
+        if ( !customEvents[ type ] ) {
+            this._doc.addEventListener( type, this, true );
+        }
+    }
+    handlers.push( fn );
     return this;
 };
 
-proto.redo = function () {
-    // Sanity check: must not be at end of stack and must be in an undo
-    // state.
-    var undoIndex = this._undoIndex,
-        undoStackLength = this._undoStackLength;
-    if ( undoIndex + 1 < undoStackLength && this._isInUndoState ) {
-        this._undoIndex += 1;
-        this._setHTML( this._undoStack[ this._undoIndex ] );
-        var range = this._getRangeAndRemoveBookmark();
-        if ( range ) {
-            this.setSelection( range );
+proto.removeEventListener = function ( type, fn ) {
+    var handlers = this._events[ type ],
+        l;
+    if ( handlers ) {
+        l = handlers.length;
+        while ( l-- ) {
+            if ( handlers[l] === fn ) {
+                handlers.splice( l, 1 );
+            }
+        }
+        if ( !handlers.length ) {
+            delete this._events[ type ];
+            if ( !customEvents[ type ] ) {
+                this._doc.removeEventListener( type, this, false );
+            }
         }
-        this.fireEvent( 'undoStateChange', {
-            canUndo: true,
-            canRedo: undoIndex + 2 < undoStackLength
-        });
-        this.fireEvent( 'input' );
     }
     return this;
 };
 
-// --- Inline formatting ---
-
-// Looks for matching tag and attributes, so won't work
-// if <strong> instead of <b> etc.
-proto.hasFormat = function ( tag, attributes, range ) {
-    // 1. Normalise the arguments and get selection
-    tag = tag.toUpperCase();
-    if ( !attributes ) { attributes = {}; }
-    if ( !range && !( range = this.getSelection() ) ) {
-        return false;
-    }
+// --- Selection and Path ---
 
-    // If the common ancestor is inside the tag we require, we definitely
-    // have the format.
-    var root = range.commonAncestorContainer,
-        walker, node;
-    if ( getNearest( root, tag, attributes ) ) {
-        return true;
+proto._createRange =
+        function ( range, startOffset, endContainer, endOffset ) {
+    if ( range instanceof this._win.Range ) {
+        return range.cloneRange();
     }
-
-    // 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;
+    var domRange = this._doc.createRange();
+    domRange.setStart( range, startOffset );
+    if ( endContainer ) {
+        domRange.setEnd( endContainer, endOffset );
+    } else {
+        domRange.setEnd( range, startOffset );
     }
+    return domRange;
+};
 
-    // Otherwise, check each text node at least partially contained within
-    // the selection and make sure all of them have the format we want.
-    walker = new TreeWalker( root, SHOW_TEXT, function ( node ) {
-        return isNodeContainedInRange( range, node, true );
-    }, false );
+proto._moveCursorTo = function ( toStart ) {
+    var body = this._body,
+        range = this._createRange( body, toStart ? 0 : body.childNodes.length );
+    moveRangeBoundariesDownTree( range );
+    this.setSelection( range );
+    return this;
+};
+proto.moveCursorToStart = function () {
+    return this._moveCursorTo( true );
+};
+proto.moveCursorToEnd = function () {
+    return this._moveCursorTo( false );
+};
 
-    var seenNode = false;
-    while ( node = walker.nextNode() ) {
-        if ( !getNearest( node, tag, attributes ) ) {
-            return false;
+proto.setSelection = function ( range ) {
+    if ( range ) {
+        // iOS bug: if you don't focus the iframe before setting the
+        // selection, you can end up in a state where you type but the input
+        // doesn't get directed into the contenteditable area but is instead
+        // lost in a black hole. Very strange.
+        if ( isIOS ) {
+            this._win.focus();
+        }
+        var sel = this._getWindowSelection();
+        if ( sel ) {
+            sel.removeAllRanges();
+            sel.addRange( range );
         }
-        seenNode = true;
     }
+    return this;
+};
 
-    return seenNode;
+proto._getWindowSelection = function () {
+    return this._win.getSelection() || null;
 };
 
-proto._addFormat = function ( tag, attributes, range ) {
-    // If the range is collapsed we simply insert the node by wrapping
-    // it round the range and focus it.
-    var el, walker, startContainer, endContainer, startOffset, endOffset,
-        node, needsFormat;
-
-    if ( range.collapsed ) {
-        el = fixCursor( this.createElement( tag, attributes ) );
-        insertNodeInRange( range, el );
-        range.setStart( el.firstChild, el.firstChild.length );
-        range.collapse( true );
+proto.getSelection = function () {
+    var sel = this._getWindowSelection(),
+        selection, startContainer, endContainer;
+    if ( sel && sel.rangeCount ) {
+        selection  = sel.getRangeAt( 0 ).cloneRange();
+        startContainer = selection.startContainer;
+        endContainer = selection.endContainer;
+        // FF can return the selection as being inside an <img>. WTF?
+        if ( startContainer && isLeaf( startContainer ) ) {
+            selection.setStartBefore( startContainer );
+        }
+        if ( endContainer && isLeaf( endContainer ) ) {
+            selection.setEndBefore( endContainer );
+        }
+        this._lastSelection = selection;
+    } else {
+        selection = this._lastSelection;
     }
-    // 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 {
-        // Create an iterator to walk over all the text nodes under this
-        // ancestor which are in the range and not already formatted
-        // correctly.
-        //
-        // In Blink/WebKit, empty blocks may have no text nodes, just a <br>.
-        // Therefore we wrap this in the tag as well, as this will then cause it
-        // to apply when the user types something in the block, which is
-        // presumably what was intended.
+    if ( !selection ) {
+        selection = this._createRange( this._body.firstChild, 0 );
+    }
+    return selection;
+};
+
+proto.getSelectedText = function () {
+    var range = this.getSelection(),
         walker = new TreeWalker(
             range.commonAncestorContainer,
             SHOW_TEXT|SHOW_ELEMENT,
             function ( node ) {
-                return ( node.nodeType === TEXT_NODE ||
-                                                    node.nodeName === 'BR' ) &&
-                    isNodeContainedInRange( range, node, true );
-            },
-            false
-        );
-
-        // Start at the beginning node of the range and iterate through
-        // all the nodes in the range that need formatting.
-        startContainer = range.startContainer;
-        startOffset = range.startOffset;
-        endContainer = range.endContainer;
-        endOffset = range.endOffset;
-
-        // Make sure we start with a valid node.
-        walker.currentNode = startContainer;
-        if ( !walker.filter( startContainer ) ) {
-            startContainer = walker.nextNode();
-            startOffset = 0;
-        }
+                return isNodeContainedInRange( range, node, true );
+            }
+        ),
+        startContainer = range.startContainer,
+        endContainer = range.endContainer,
+        node = walker.currentNode = startContainer,
+        textContent = '',
+        addedTextInBlock = false,
+        value;
 
-        // If there are no interesting nodes in the selection, abort
-        if ( !startContainer ) {
-            return range;
-        }
+    if ( !walker.filter( node ) ) {
+        node = walker.nextNode();
+    }
 
-        do {
-            node = walker.currentNode;
-            needsFormat = !getNearest( node, tag, attributes );
-            if ( needsFormat ) {
-                // <br> can never be a container node, so must have a text node
-                // if node == (end|start)Container
-                if ( node === endContainer && node.length > endOffset ) {
-                    node.splitText( endOffset );
+    while ( node ) {
+        if ( node.nodeType === TEXT_NODE ) {
+            value = node.data;
+            if ( value && ( /\S/.test( value ) ) ) {
+                if ( node === endContainer ) {
+                    value = value.slice( 0, range.endOffset );
                 }
-                if ( node === startContainer && startOffset ) {
-                    node = node.splitText( startOffset );
-                    if ( endContainer === startContainer ) {
-                        endContainer = node;
-                        endOffset -= startOffset;
-                    }
-                    startContainer = node;
-                    startOffset = 0;
+                if ( node === startContainer ) {
+                    value = value.slice( range.startOffset );
                 }
-                el = this.createElement( tag, attributes );
-                replaceWith( node, el );
-                el.appendChild( node );
+                textContent += value;
+                addedTextInBlock = true;
             }
-        } while ( walker.nextNode() );
+        } else if ( node.nodeName === 'BR' ||
+                addedTextInBlock && !isInline( node ) ) {
+            textContent += '\n';
+            addedTextInBlock = false;
+        }
+        node = walker.nextNode();
+    }
 
-        // If we don't finish inside a text node, offset may have changed.
-        if ( endContainer.nodeType !== TEXT_NODE ) {
-            if ( node.nodeType === TEXT_NODE ) {
-                endContainer = node;
-                endOffset = node.length;
+    return textContent;
+};
+
+proto.getPath = function () {
+    return this._path;
+};
+
+// --- Workaround for browsers that can't focus empty text nodes ---
+
+// WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256
+
+var removeZWS = function ( root ) {
+    var walker = new TreeWalker( root, SHOW_TEXT, function () {
+            return true;
+        }, false ),
+        parent, node, index;
+    while ( node = walker.nextNode() ) {
+        while ( ( index = node.data.indexOf( ZWS ) ) > -1 ) {
+            if ( node.length === 1 ) {
+                do {
+                    parent = node.parentNode;
+                    parent.removeChild( node );
+                    node = parent;
+                    walker.currentNode = parent;
+                } while ( isInline( node ) && !getLength( node ) );
+                break;
             } else {
-                // If <br>, we must have just wrapped it, so it must have only
-                // one child
-                endContainer = node.parentNode;
-                endOffset = 1;
+                node.deleteData( index, 1 );
             }
         }
+    }
+};
 
-        // Now set the selection to as it was before
-        range = this._createRange(
-            startContainer, startOffset, endContainer, endOffset );
+proto._didAddZWS = function () {
+    this._hasZWS = true;
+};
+proto._removeZWS = function () {
+    if ( !this._hasZWS ) {
+        return;
     }
-    return range;
+    removeZWS( this._body );
+    this._hasZWS = false;
 };
 
-proto._removeFormat = function ( tag, attributes, range, partial ) {
-    // Add bookmark
-    this._saveRangeToBookmark( range );
+// --- Path change events ---
 
-    // We need a node in the selection to break the surrounding
-    // formatted text.
-    var doc = this._doc,
-        fixer;
-    if ( range.collapsed ) {
-        if ( cantFocusEmptyTextNodes ) {
-            fixer = doc.createTextNode( ZWS );
-            this._didAddZWS();
-        } else {
-            fixer = doc.createTextNode( '' );
+proto._updatePath = function ( range, force ) {
+    var anchor = range.startContainer,
+        focus = range.endContainer,
+        newPath;
+    if ( force || anchor !== this._lastAnchorNode ||
+            focus !== this._lastFocusNode ) {
+        this._lastAnchorNode = anchor;
+        this._lastFocusNode = focus;
+        newPath = ( anchor && focus ) ? ( anchor === focus ) ?
+            getPath( focus ) : '(selection)' : '';
+        if ( this._path !== newPath ) {
+            this._path = newPath;
+            this.fireEvent( 'pathChange', { path: newPath } );
         }
-        insertNodeInRange( range, fixer );
     }
+    if ( !range.collapsed ) {
+        this.fireEvent( 'select' );
+    }
+};
 
-    // Find block-level ancestor of selection
-    var root = range.commonAncestorContainer;
-    while ( isInline( root ) ) {
-        root = root.parentNode;
+proto._updatePathOnEvent = function () {
+    this._updatePath( this.getSelection() );
+};
+
+// --- Focus ---
+
+proto.focus = function () {
+    // FF seems to need the body to be focussed (at least on first load).
+    // Chrome also now needs body to be focussed in order to show the cursor
+    // (otherwise it is focussed, but the cursor doesn't appear).
+    // Opera (Presto-variant) however will lose the selection if you call this!
+    if ( !isPresto ) {
+        this._body.focus();
     }
+    this._win.focus();
+    return this;
+};
 
-    // 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 ( node, exemplar ) {
-            // If the node is completely contained by the range then
-            // we're going to remove all formatting so ignore it.
-            if ( isNodeContainedInRange( range, node, false ) ) {
-                return;
-            }
+proto.blur = function () {
+    // IE will remove the whole browser window from focus if you call
+    // win.blur() or body.blur(), so instead we call top.focus() to focus
+    // the top frame, thus blurring this frame. This works in everything
+    // except FF, so we need to call body.blur() in that as well.
+    if ( isGecko ) {
+        this._body.blur();
+    }
+    top.focus();
+    return this;
+};
 
-            var isText = ( node.nodeType === TEXT_NODE ),
-                child, next;
+// --- Bookmarking ---
 
-            // If not at least partially contained, wrap entire contents
-            // in a clone of the tag we're removing and we're done.
-            if ( !isNodeContainedInRange( range, node, true ) ) {
-                // Ignore bookmarks and empty text nodes
-                if ( node.nodeName !== 'INPUT' &&
-                        ( !isText || node.data ) ) {
-                    toWrap.push([ exemplar, node ]);
-                }
-                return;
-            }
+var startSelectionId = 'squire-selection-start';
+var endSelectionId = 'squire-selection-end';
 
-            // 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 isNodeContainedInRange( range, el, true ) &&
-                    hasTagAttributes( el, tag, attributes );
-            }
-        );
-
-    if ( !partial ) {
-        formatTags.forEach( function ( node ) {
-            examineNode( node, node );
-        });
-    }
+proto._saveRangeToBookmark = function ( range ) {
+    var startNode = this.createElement( 'INPUT', {
+            id: startSelectionId,
+            type: 'hidden'
+        }),
+        endNode = this.createElement( 'INPUT', {
+            id: endSelectionId,
+            type: 'hidden'
+        }),
+        temp;
 
-    // Now wrap unselected nodes in the tag
-    toWrap.forEach( function ( item ) {
-        // [ exemplar, node ] tuple
-        var el = item[0].cloneNode( false ),
-            node = item[1];
-        replaceWith( node, el );
-        el.appendChild( node );
-    });
-    // and remove old formatting tags.
-    formatTags.forEach( function ( el ) {
-        replaceWith( el, empty( el ) );
-    });
+    insertNodeInRange( range, startNode );
+    range.collapse( false );
+    insertNodeInRange( range, endNode );
 
-    // Merge adjacent inlines:
-    this._getRangeAndRemoveBookmark( range );
-    if ( fixer ) {
-        range.collapse( false );
+    // 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;
     }
-    var _range = {
-        startContainer: range.startContainer,
-        startOffset: range.startOffset,
-        endContainer: range.endContainer,
-        endOffset: range.endOffset
-    };
-    mergeInlines( root, _range );
-    range.setStart( _range.startContainer, _range.startOffset );
-    range.setEnd( _range.endContainer, _range.endOffset );
 
-    return range;
+    range.setStartAfter( startNode );
+    range.setEndBefore( endNode );
 };
 
-proto.changeFormat = function ( add, remove, range, partial ) {
-    // Normalise the arguments and get selection
-    if ( !range && !( range = this.getSelection() ) ) {
-        return;
-    }
-
-    // Save undo checkpoint
-    this._recordUndoState( range );
-    this._getRangeAndRemoveBookmark( range );
-
-    if ( remove ) {
-        range = this._removeFormat( remove.tag.toUpperCase(),
-            remove.attributes || {}, range, partial );
-    }
-    if ( add ) {
-        range = this._addFormat( add.tag.toUpperCase(),
-            add.attributes || {}, range );
-    }
-
-    this.setSelection( range );
-    this._updatePath( range, true );
+proto._getRangeAndRemoveBookmark = function ( range ) {
+    var doc = this._doc,
+        start = doc.getElementById( startSelectionId ),
+        end = doc.getElementById( endSelectionId );
 
-    // We're not still in an undo state
-    if ( !canObserveMutations ) {
-        this._docWasChanged();
-    }
+    if ( start && end ) {
+        var startContainer = start.parentNode,
+            endContainer = end.parentNode,
+            collapsed;
 
-    return this;
-};
+        var _range = {
+            startContainer: startContainer,
+            endContainer: endContainer,
+            startOffset: indexOf.call( startContainer.childNodes, start ),
+            endOffset: indexOf.call( endContainer.childNodes, end )
+        };
 
-// --- Block formatting ---
+        if ( startContainer === endContainer ) {
+            _range.endOffset -= 1;
+        }
 
-var tagAfterSplit = {
-    DT:  'DD',
-    DD:  'DT',
-    LI:  'LI'
-};
+        detach( start );
+        detach( end );
 
-var splitBlock = function ( self, block, node, offset ) {
-    var splitTag = tagAfterSplit[ block.nodeName ],
-        splitProperties = null,
-        nodeAfterSplit = split( node, offset, block.parentNode ),
-        config = self._config;
+        // Merge any text nodes we split
+        mergeInlines( startContainer, _range );
+        if ( startContainer !== endContainer ) {
+            mergeInlines( endContainer, _range );
+        }
 
-    if ( !splitTag ) {
-        splitTag = config.blockTag;
-        splitProperties = config.blockAttributes;
-    }
+        if ( !range ) {
+            range = doc.createRange();
+        }
+        range.setStart( _range.startContainer, _range.startOffset );
+        range.setEnd( _range.endContainer, _range.endOffset );
+        collapsed = range.collapsed;
 
-    // Make sure the new node is the correct type.
-    if ( !hasTagAttributes( nodeAfterSplit, splitTag, splitProperties ) ) {
-        block = createElement( nodeAfterSplit.ownerDocument,
-            splitTag, splitProperties );
-        if ( nodeAfterSplit.dir ) {
-            block.dir = nodeAfterSplit.dir;
+        moveRangeBoundariesDownTree( range );
+        if ( collapsed ) {
+            range.collapse( true );
         }
-        replaceWith( nodeAfterSplit, block );
-        block.appendChild( empty( nodeAfterSplit ) );
-        nodeAfterSplit = block;
     }
-    return nodeAfterSplit;
+    return range || null;
 };
 
-proto.forEachBlock = function ( fn, mutates, range ) {
-    if ( !range && !( range = this.getSelection() ) ) {
-        return this;
-    }
+// --- Undo ---
 
-    // Save undo checkpoint
-    if ( mutates ) {
-        this._recordUndoState( range );
-        this._getRangeAndRemoveBookmark( range );
+proto._keyUpDetectChange = function ( event ) {
+    var code = event.keyCode;
+    // Presume document was changed if:
+    // 1. A modifier key (other than shift) wasn't held down
+    // 2. The key pressed is not in range 16<=x<=20 (control keys)
+    // 3. The key pressed is not in range 33<=x<=45 (navigation keys)
+    if ( !event.ctrlKey && !event.metaKey && !event.altKey &&
+            ( code < 16 || code > 20 ) &&
+            ( code < 33 || code > 45 ) ) {
+        this._docWasChanged();
     }
+};
 
-    var start = getStartBlockOfRange( range ),
-        end = getEndBlockOfRange( range );
-    if ( start && end ) {
-        do {
-            if ( fn( start ) || start === end ) { break; }
-        } while ( start = getNextBlock( start ) );
+proto._docWasChanged = function () {
+    if ( canObserveMutations && this._ignoreChange ) {
+        this._ignoreChange = false;
+        return;
+    }
+    if ( this._isInUndoState ) {
+        this._isInUndoState = false;
+        this.fireEvent( 'undoStateChange', {
+            canUndo: true,
+            canRedo: false
+        });
     }
+    this.fireEvent( 'input' );
+};
 
-    if ( mutates ) {
-        this.setSelection( range );
+// Leaves bookmark
+proto._recordUndoState = function ( range ) {
+    // Don't record if we're already in an undo state
+    if ( !this._isInUndoState ) {
+        // Advance pointer to new position
+        var undoIndex = this._undoIndex += 1,
+            undoStack = this._undoStack;
 
-        // Path may have changed
-        this._updatePath( range, true );
+        // Truncate stack if longer (i.e. if has been previously undone)
+        if ( undoIndex < this._undoStackLength ) {
+            undoStack.length = this._undoStackLength = undoIndex;
+        }
 
-        // We're not still in an undo state
-        if ( !canObserveMutations ) {
-            this._docWasChanged();
+        // Write out data
+        if ( range ) {
+            this._saveRangeToBookmark( range );
         }
+        undoStack[ undoIndex ] = this._getHTML();
+        this._undoStackLength += 1;
+        this._isInUndoState = true;
     }
-    return this;
 };
 
-proto.modifyBlocks = function ( modify, range ) {
-    if ( !range && !( range = this.getSelection() ) ) {
-        return this;
-    }
+proto.undo = function () {
+    // Sanity check: must not be at beginning of the history stack
+    if ( this._undoIndex !== 0 || !this._isInUndoState ) {
+        // Make sure any changes since last checkpoint are saved.
+        this._recordUndoState( this.getSelection() );
 
-    // 1. Save undo checkpoint and bookmark selection
-    if ( this._isInUndoState ) {
-        this._saveRangeToBookmark( range );
-    } else {
-        this._recordUndoState( range );
+        this._undoIndex -= 1;
+        this._setHTML( this._undoStack[ this._undoIndex ] );
+        var range = this._getRangeAndRemoveBookmark();
+        if ( range ) {
+            this.setSelection( range );
+        }
+        this._isInUndoState = true;
+        this.fireEvent( 'undoStateChange', {
+            canUndo: this._undoIndex !== 0,
+            canRedo: true
+        });
+        this.fireEvent( 'input' );
     }
+    return this;
+};
 
-    // 2. Expand range to block boundaries
-    expandRangeToBlockBoundaries( range );
+proto.redo = function () {
+    // Sanity check: must not be at end of stack and must be in an undo
+    // state.
+    var undoIndex = this._undoIndex,
+        undoStackLength = this._undoStackLength;
+    if ( undoIndex + 1 < undoStackLength && this._isInUndoState ) {
+        this._undoIndex += 1;
+        this._setHTML( this._undoStack[ this._undoIndex ] );
+        var range = this._getRangeAndRemoveBookmark();
+        if ( range ) {
+            this.setSelection( range );
+        }
+        this.fireEvent( 'undoStateChange', {
+            canUndo: true,
+            canRedo: undoIndex + 2 < undoStackLength
+        });
+        this.fireEvent( 'input' );
+    }
+    return this;
+};
 
-    // 3. Remove range.
-    var body = this._body,
-        frag;
-    moveRangeBoundariesUpTree( range, body );
-    frag = extractContentsOfRange( range, body );
+// --- Inline formatting ---
 
-    // 4. Modify tree of fragment and reinsert.
-    insertNodeInRange( range, modify.call( this, frag ) );
+// Looks for matching tag and attributes, so won't work
+// if <strong> instead of <b> etc.
+proto.hasFormat = function ( tag, attributes, range ) {
+    // 1. Normalise the arguments and get selection
+    tag = tag.toUpperCase();
+    if ( !attributes ) { attributes = {}; }
+    if ( !range && !( range = this.getSelection() ) ) {
+        return false;
+    }
 
-    // 5. Merge containers at edges
-    if ( range.endOffset < range.endContainer.childNodes.length ) {
-        mergeContainers( range.endContainer.childNodes[ range.endOffset ] );
+    // Sanitize range to prevent weird IE artifacts
+    if ( !range.collapsed &&
+            range.startContainer.nodeType === TEXT_NODE &&
+            range.startOffset === range.startContainer.length &&
+            range.startContainer.nextSibling ) {
+        range.setStartBefore( range.startContainer.nextSibling );
+    }
+    if ( !range.collapsed &&
+            range.endContainer.nodeType === TEXT_NODE &&
+            range.endOffset === 0 &&
+            range.endContainer.previousSibling ) {
+        range.setEndAfter( range.endContainer.previousSibling );
     }
-    mergeContainers( range.startContainer.childNodes[ range.startOffset ] );
 
-    // 6. Restore selection
-    this._getRangeAndRemoveBookmark( range );
-    this.setSelection( range );
-    this._updatePath( range, true );
+    // If the common ancestor is inside the tag we require, we definitely
+    // have the format.
+    var root = range.commonAncestorContainer,
+        walker, node;
+    if ( getNearest( root, tag, attributes ) ) {
+        return true;
+    }
 
-    // 7. We're not still in an undo state
-    if ( !canObserveMutations ) {
-        this._docWasChanged();
+    // 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;
     }
 
-    return this;
-};
+    // Otherwise, check each text node at least partially contained within
+    // the selection and make sure all of them have the format we want.
+    walker = new TreeWalker( root, SHOW_TEXT, function ( node ) {
+        return isNodeContainedInRange( range, node, true );
+    }, false );
 
-var increaseBlockQuoteLevel = function ( frag ) {
-    return this.createElement( 'BLOCKQUOTE',
-        this._config.tagAttributes.blockquote, [
-            frag
-        ]);
-};
+    var seenNode = false;
+    while ( node = walker.nextNode() ) {
+        if ( !getNearest( node, tag, attributes ) ) {
+            return false;
+        }
+        seenNode = true;
+    }
 
-var decreaseBlockQuoteLevel = function ( frag ) {
-    var blockquotes = frag.querySelectorAll( 'blockquote' );
-    Array.prototype.filter.call( blockquotes, function ( el ) {
-        return !getNearest( el.parentNode, 'BLOCKQUOTE' );
-    }).forEach( function ( el ) {
-        replaceWith( el, empty( el ) );
-    });
-    return frag;
+    return seenNode;
 };
 
-var removeBlockQuote = function (/* frag */) {
-    return this.createDefaultBlock([
-        this.createElement( 'INPUT', {
-            id: startSelectionId,
-            type: 'hidden'
-        }),
-        this.createElement( 'INPUT', {
-            id: endSelectionId,
-            type: 'hidden'
-        })
-    ]);
-};
+// Extracts the font-family and font-size (if any) of the element
+// holding the cursor. If there's a selection, returns an empty object.
+proto.getFontInfo = function ( range ) {
+    var fontInfo = {
+        color: undefined,
+        backgroundColor: undefined,
+        family: undefined,
+        size: undefined
+    };
+    var seenAttributes = 0;
+    var element, style;
 
-var makeList = function ( self, frag, type ) {
-    var walker = getBlockWalker( frag ),
-        node, tag, prev, newLi,
-        tagAttributes = self._config.tagAttributes,
-        listAttrs = tagAttributes[ type.toLowerCase() ],
-        listItemAttrs = tagAttributes.li;
+    if ( !range && !( range = this.getSelection() ) ) {
+        return fontInfo;
+    }
 
-    while ( node = walker.nextNode() ) {
-        tag = node.parentNode.nodeName;
-        if ( tag !== 'LI' ) {
-            newLi = self.createElement( 'LI', listItemAttrs );
-            if ( node.dir ) {
-                newLi.dir = node.dir;
+    element = range.commonAncestorContainer;
+    if ( range.collapsed || element.nodeType === TEXT_NODE ) {
+        if ( element.nodeType === TEXT_NODE ) {
+            element = element.parentNode;
+        }
+        while ( seenAttributes < 4 && element && ( style = element.style ) ) {
+            if ( !fontInfo.color ) {
+                fontInfo.color = style.color;
+                seenAttributes += 1;
             }
-
-            // Have we replaced the previous block with a new <ul>/<ol>?
-            if ( ( prev = node.previousSibling ) &&
-                    prev.nodeName === type ) {
-                prev.appendChild( newLi );
+            if ( !fontInfo.backgroundColor ) {
+                fontInfo.backgroundColor = style.backgroundColor;
+                seenAttributes += 1;
             }
-            // Otherwise, replace this block with the <ul>/<ol>
-            else {
-                replaceWith(
-                    node,
-                    self.createElement( type, listAttrs, [
-                        newLi
-                    ])
-                );
+            if ( !fontInfo.family ) {
+                fontInfo.family = style.fontFamily;
+                seenAttributes += 1;
             }
-            newLi.appendChild( node );
-        } else {
-            node = node.parentNode.parentNode;
-            tag = node.nodeName;
-            if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) {
-                replaceWith( node,
-                    self.createElement( type, listAttrs, [ empty( node ) ] )
-                );
+            if ( !fontInfo.size ) {
+                fontInfo.size = style.fontSize;
+                seenAttributes += 1;
             }
+            element = element.parentNode;
         }
     }
-};
-
-var makeUnorderedList = function ( frag ) {
-    makeList( this, frag, 'UL' );
-    return frag;
-};
+    return fontInfo;
+ };
 
-var makeOrderedList = function ( frag ) {
-    makeList( this, frag, 'OL' );
-    return frag;
-};
+proto._addFormat = function ( tag, attributes, range ) {
+    // If the range is collapsed we simply insert the node by wrapping
+    // it round the range and focus it.
+    var el, walker, startContainer, endContainer, startOffset, endOffset,
+        node, needsFormat;
 
-var removeList = function ( frag ) {
-    var lists = frag.querySelectorAll( 'UL, OL' ),
-        i, l, ll, list, listFrag, children, child;
-    for ( i = 0, l = lists.length; i < l; i += 1 ) {
-        list = lists[i];
-        listFrag = empty( list );
-        children = listFrag.childNodes;
-        ll = children.length;
-        while ( ll-- ) {
-            child = children[ll];
-            replaceWith( child, empty( child ) );
-        }
-        fixContainer( listFrag );
-        replaceWith( list, listFrag );
+    if ( range.collapsed ) {
+        el = fixCursor( this.createElement( tag, attributes ) );
+        insertNodeInRange( range, el );
+        range.setStart( el.firstChild, el.firstChild.length );
+        range.collapse( true );
     }
-    return frag;
-};
+    // 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 {
+        // Create an iterator to walk over all the text nodes under this
+        // ancestor which are in the range and not already formatted
+        // correctly.
+        //
+        // In Blink/WebKit, empty blocks may have no text nodes, just a <br>.
+        // Therefore we wrap this in the tag as well, as this will then cause it
+        // to apply when the user types something in the block, which is
+        // presumably what was intended.
+        //
+        // IMG tags are included because we may want to create a link around them,
+        // and adding other styles is harmless.
+        walker = new TreeWalker(
+            range.commonAncestorContainer,
+            SHOW_TEXT|SHOW_ELEMENT,
+            function ( node ) {
+                return ( node.nodeType === TEXT_NODE ||
+                        node.nodeName === 'BR' ||
+                        node.nodeName === 'IMG'
+                    ) && isNodeContainedInRange( range, node, true );
+            },
+            false
+        );
 
-var increaseListLevel = function ( frag ) {
-    var items = frag.querySelectorAll( 'LI' ),
-        i, l, item,
-        type, newParent,
-        tagAttributes = this._config.tagAttributes,
-        listItemAttrs = tagAttributes.li,
-        listAttrs;
-    for ( i = 0, l = items.length; i < l; i += 1 ) {
-        item = items[i];
-        if ( !isContainer( item.firstChild ) ) {
-            // type => 'UL' or 'OL'
-            type = item.parentNode.nodeName;
-            newParent = item.previousSibling;
-            if ( !newParent || !( newParent = newParent.lastChild ) ||
-                    newParent.nodeName !== type ) {
-                listAttrs = tagAttributes[ type.toLowerCase() ];
-                replaceWith(
-                    item,
-                    this.createElement( 'LI', listItemAttrs, [
-                        newParent = this.createElement( type, listAttrs )
-                    ])
-                );
-            }
-            newParent.appendChild( item );
+        // Start at the beginning node of the range and iterate through
+        // all the nodes in the range that need formatting.
+        startContainer = range.startContainer;
+        startOffset = range.startOffset;
+        endContainer = range.endContainer;
+        endOffset = range.endOffset;
+
+        // Make sure we start with a valid node.
+        walker.currentNode = startContainer;
+        if ( !walker.filter( startContainer ) ) {
+            startContainer = walker.nextNode();
+            startOffset = 0;
         }
-    }
-    return frag;
-};
 
-var decreaseListLevel = function ( frag ) {
-    var items = frag.querySelectorAll( 'LI' );
-    Array.prototype.filter.call( items, function ( el ) {
-        return !isContainer( el.firstChild );
-    }).forEach( function ( item ) {
-        var parent = item.parentNode,
-            newParent = parent.parentNode,
-            first = item.firstChild,
-            node = first,
-            next;
-        if ( item.previousSibling ) {
-            parent = split( parent, item, newParent );
+        // If there are no interesting nodes in the selection, abort
+        if ( !startContainer ) {
+            return range;
         }
-        while ( node ) {
-            next = node.nextSibling;
-            if ( isContainer( node ) ) {
-                break;
-            }
-            newParent.insertBefore( node, parent );
-            node = next;
-        }
-        if ( newParent.nodeName === 'LI' && first.previousSibling ) {
-            split( newParent, first, newParent.parentNode );
-        }
-        while ( item !== frag && !item.childNodes.length ) {
-            parent = item.parentNode;
-            parent.removeChild( item );
-            item = parent;
-        }
-    }, this );
-    fixContainer( frag );
-    return frag;
-};
 
-// --- Clean ---
-
-var linkRegExp = /\b((?:(?:ht|f)tps?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,}\/)(?:[^\s()<>]+|\([^\s()<>]+\))+(?:\((?:[^\s()<>]+|(?:\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))|([\w\-.%+]+@(?:[\w\-]+\.)+[A-Z]{2,}\b)/i;
+        do {
+            node = walker.currentNode;
+            needsFormat = !getNearest( node, tag, attributes );
+            if ( needsFormat ) {
+                // <br> can never be a container node, so must have a text node
+                // if node == (end|start)Container
+                if ( node === endContainer && node.length > endOffset ) {
+                    node.splitText( endOffset );
+                }
+                if ( node === startContainer && startOffset ) {
+                    node = node.splitText( startOffset );
+                    if ( endContainer === startContainer ) {
+                        endContainer = node;
+                        endOffset -= startOffset;
+                    }
+                    startContainer = node;
+                    startOffset = 0;
+                }
+                el = this.createElement( tag, attributes );
+                replaceWith( node, el );
+                el.appendChild( node );
+            }
+        } while ( walker.nextNode() );
 
-var addLinks = function ( frag ) {
-    var doc = frag.ownerDocument,
-        walker = new TreeWalker( frag, SHOW_TEXT,
-                function ( node ) {
-            return !getNearest( node, 'A' );
-        }, false ),
-        node, data, parent, match, index, endIndex, child;
-    while ( node = walker.nextNode() ) {
-        data = node.data;
-        parent = node.parentNode;
-        while ( match = linkRegExp.exec( data ) ) {
-            index = match.index;
-            endIndex = index + match[0].length;
-            if ( index ) {
-                child = doc.createTextNode( data.slice( 0, index ) );
-                parent.insertBefore( child, node );
+        // If we don't finish inside a text node, offset may have changed.
+        if ( endContainer.nodeType !== TEXT_NODE ) {
+            if ( node.nodeType === TEXT_NODE ) {
+                endContainer = node;
+                endOffset = node.length;
+            } else {
+                // If <br>, we must have just wrapped it, so it must have only
+                // one child
+                endContainer = node.parentNode;
+                endOffset = 1;
             }
-            child = doc.createElement( 'A' );
-            child.textContent = data.slice( index, endIndex );
-            child.href = match[1] ?
-                /^(?:ht|f)tps?:/.test( match[1] ) ?
-                    match[1] :
-                    'http://' + match[1] :
-                'mailto:' + match[2];
-            parent.insertBefore( child, node );
-            node.data = data = data.slice( endIndex );
         }
+
+        // Now set the selection to as it was before
+        range = this._createRange(
+            startContainer, startOffset, endContainer, endOffset );
     }
+    return range;
 };
 
-var allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|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 fontSizes = {
-    1: 10,
-    2: 13,
-    3: 16,
-    4: 18,
-    5: 24,
-    6: 32,
-    7: 48
-};
+proto._removeFormat = function ( tag, attributes, range, partial ) {
+    // Add bookmark
+    this._saveRangeToBookmark( range );
 
-var spanToSemantic = {
-    backgroundColor: {
-        regexp: notWS,
-        replace: function ( doc, colour ) {
-            return createElement( doc, 'SPAN', {
-                'class': 'highlight',
-                style: 'background-color: ' + colour
-            });
-        }
-    },
-    color: {
-        regexp: notWS,
-        replace: function ( doc, colour ) {
-            return createElement( doc, 'SPAN', {
-                'class': 'colour',
-                style: 'color:' + colour
-            });
-        }
-    },
-    fontWeight: {
-        regexp: /^bold/i,
-        replace: function ( doc ) {
-            return createElement( doc, 'B' );
-        }
-    },
-    fontStyle: {
-        regexp: /^italic/i,
-        replace: function ( doc ) {
-            return createElement( doc, 'I' );
-        }
-    },
-    fontFamily: {
-        regexp: notWS,
-        replace: function ( doc, family ) {
-            return createElement( doc, 'SPAN', {
-                'class': 'font',
-                style: 'font-family:' + family
-            });
-        }
-    },
-    fontSize: {
-        regexp: notWS,
-        replace: function ( doc, size ) {
-            return createElement( doc, 'SPAN', {
-                'class': 'size',
-                style: 'font-size:' + size
-            });
+    // We need a node in the selection to break the surrounding
+    // formatted text.
+    var doc = this._doc,
+        fixer;
+    if ( range.collapsed ) {
+        if ( cantFocusEmptyTextNodes ) {
+            fixer = doc.createTextNode( ZWS );
+            this._didAddZWS();
+        } else {
+            fixer = doc.createTextNode( '' );
         }
+        insertNodeInRange( range, fixer );
     }
-};
 
-var replaceWithTag = function ( tag ) {
-    return function ( node, parent ) {
-        var el = createElement( node.ownerDocument, tag );
-        parent.replaceChild( el, node );
-        el.appendChild( empty( node ) );
-        return el;
-    };
-};
-
-var stylesRewriters = {
-    SPAN: function ( span, parent ) {
-        var style = span.style,
-            doc = span.ownerDocument,
-            attr, converter, css, newTreeBottom, newTreeTop, el;
+    // Find block-level ancestor of selection
+    var root = range.commonAncestorContainer;
+    while ( isInline( root ) ) {
+        root = root.parentNode;
+    }
 
-        for ( attr in spanToSemantic ) {
-            converter = spanToSemantic[ attr ];
-            css = style[ attr ];
-            if ( css && converter.regexp.test( css ) ) {
-                el = converter.replace( doc, css );
-                if ( newTreeBottom ) {
-                    newTreeBottom.appendChild( el );
-                }
-                newTreeBottom = el;
-                if ( !newTreeTop ) {
-                    newTreeTop = el;
-                }
+    // 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 ( node, exemplar ) {
+            // If the node is completely contained by the range then
+            // we're going to remove all formatting so ignore it.
+            if ( isNodeContainedInRange( range, node, false ) ) {
+                return;
             }
-        }
 
-        if ( newTreeTop ) {
-            newTreeBottom.appendChild( empty( span ) );
-            parent.replaceChild( newTreeTop, span );
-        }
+            var isText = ( node.nodeType === TEXT_NODE ),
+                child, next;
 
-        return newTreeBottom || span;
-    },
-    STRONG: replaceWithTag( 'B' ),
-    EM: replaceWithTag( 'I' ),
-    STRIKE: replaceWithTag( 'S' ),
-    FONT: function ( node, parent ) {
-        var face = node.face,
-            size = node.size,
-            colour = node.color,
-            doc = node.ownerDocument,
-            fontSpan, sizeSpan, colourSpan,
-            newTreeBottom, newTreeTop;
-        if ( face ) {
-            fontSpan = createElement( doc, 'SPAN', {
-                'class': 'font',
-                style: 'font-family:' + face
-            });
-            newTreeTop = fontSpan;
-            newTreeBottom = fontSpan;
-        }
-        if ( size ) {
-            sizeSpan = createElement( doc, 'SPAN', {
-                'class': 'size',
-                style: 'font-size:' + fontSizes[ size ] + 'px'
-            });
-            if ( !newTreeTop ) {
-                newTreeTop = sizeSpan;
-            }
-            if ( newTreeBottom ) {
-                newTreeBottom.appendChild( sizeSpan );
+            // If not at least partially contained, wrap entire contents
+            // in a clone of the tag we're removing and we're done.
+            if ( !isNodeContainedInRange( range, node, true ) ) {
+                // Ignore bookmarks and empty text nodes
+                if ( node.nodeName !== 'INPUT' &&
+                        ( !isText || node.data ) ) {
+                    toWrap.push([ exemplar, node ]);
+                }
+                return;
             }
-            newTreeBottom = sizeSpan;
-        }
-        if ( colour && /^#?([\dA-F]{3}){1,2}$/i.test( colour ) ) {
-            if ( colour.charAt( 0 ) !== '#' ) {
-                colour = '#' + colour;
+
+            // 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 ]);
+                }
             }
-            colourSpan = createElement( doc, 'SPAN', {
-                'class': 'colour',
-                style: 'color:' + colour
-            });
-            if ( !newTreeTop ) {
-                newTreeTop = colourSpan;
+            // 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 );
+                }
             }
-            if ( newTreeBottom ) {
-                newTreeBottom.appendChild( colourSpan );
+        },
+        formatTags = Array.prototype.filter.call(
+            root.getElementsByTagName( tag ), function ( el ) {
+                return isNodeContainedInRange( range, el, true ) &&
+                    hasTagAttributes( el, tag, attributes );
             }
-            newTreeBottom = colourSpan;
-        }
-        if ( !newTreeTop ) {
-            newTreeTop = newTreeBottom = createElement( doc, 'SPAN' );
-        }
-        parent.replaceChild( newTreeTop, node );
-        newTreeBottom.appendChild( empty( node ) );
-        return newTreeBottom;
-    },
-    TT: function ( node, parent ) {
-        var el = createElement( node.ownerDocument, 'SPAN', {
-            'class': 'font',
-            style: 'font-family:menlo,consolas,"courier new",monospace'
+        );
+
+    if ( !partial ) {
+        formatTags.forEach( function ( node ) {
+            examineNode( node, node );
         });
-        parent.replaceChild( el, node );
-        el.appendChild( empty( node ) );
-        return el;
     }
-};
 
-var removeEmptyInlines = function ( root ) {
-    var children = root.childNodes,
-        l = children.length,
-        child;
-    while ( l-- ) {
-        child = children[l];
-        if ( child.nodeType === ELEMENT_NODE && !isLeaf( child ) ) {
-            removeEmptyInlines( child );
-            if ( isInline( child ) && !child.firstChild ) {
-                root.removeChild( child );
-            }
-        } else if ( child.nodeType === TEXT_NODE && !child.data ) {
-            root.removeChild( child );
-        }
+    // Now wrap unselected nodes in the tag
+    toWrap.forEach( function ( item ) {
+        // [ exemplar, node ] tuple
+        var el = item[0].cloneNode( false ),
+            node = item[1];
+        replaceWith( node, el );
+        el.appendChild( node );
+    });
+    // and remove old formatting tags.
+    formatTags.forEach( function ( el ) {
+        replaceWith( el, empty( el ) );
+    });
+
+    // Merge adjacent inlines:
+    this._getRangeAndRemoveBookmark( range );
+    if ( fixer ) {
+        range.collapse( false );
     }
+    var _range = {
+        startContainer: range.startContainer,
+        startOffset: range.startOffset,
+        endContainer: range.endContainer,
+        endOffset: range.endOffset
+    };
+    mergeInlines( root, _range );
+    range.setStart( _range.startContainer, _range.startOffset );
+    range.setEnd( _range.endContainer, _range.endOffset );
+
+    return range;
 };
 
-/*
-    Two purposes:
+proto.changeFormat = function ( add, remove, range, partial ) {
+    // Normalise the arguments and get selection
+    if ( !range && !( range = this.getSelection() ) ) {
+        return;
+    }
 
-    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, childLength,
-        data, j, ll;
-    for ( i = 0, l = children.length; i < l; i += 1 ) {
-        child = children[i];
-        nodeName = child.nodeName;
-        nodeType = child.nodeType;
-        rewriter = stylesRewriters[ nodeName ];
-        if ( nodeType === ELEMENT_NODE ) {
-            childLength = child.childNodes.length;
-            if ( rewriter ) {
-                child = rewriter( child, node );
-            } else if ( !allowedBlock.test( nodeName ) &&
-                    !isInline( child ) ) {
-                i -= 1;
-                l += childLength - 1;
-                node.replaceChild( empty( child ), child );
-                continue;
-            } else if ( !allowStyles && child.style.cssText ) {
-                child.removeAttribute( 'style' );
-            }
-            if ( childLength ) {
-                cleanTree( child, allowStyles );
-            }
-        } else {
-            if ( nodeType === TEXT_NODE ) {
-                data = child.data;
-                // Use \S instead of notWS, because we want to remove nodes
-                // which are just nbsp, in order to cleanup <div>nbsp<br></div>
-                // construct.
-                if ( /\S/.test( data ) ) {
-                    // If the parent node is inline, don't trim this node as
-                    // it probably isn't at the end of the block.
-                    if ( isInline( node ) ) {
-                        continue;
-                    }
-                    j = 0;
-                    ll = data.length;
-                    if ( !i || !isInline( children[ i - 1 ] ) ) {
-                        while ( j < ll && !notWS.test( data.charAt( j ) ) ) {
-                            j += 1;
-                        }
-                        if ( j ) {
-                            child.data = data = data.slice( j );
-                            ll -= j;
-                        }
-                    }
-                    if ( i + 1 === l || !isInline( children[ i + 1 ] ) ) {
-                        j = ll;
-                        while ( j > 0 && !notWS.test( data.charAt( j - 1 ) ) ) {
-                            j -= 1;
-                        }
-                        if ( j < ll ) {
-                            child.data = data.slice( 0, j );
-                        }
-                    }
-                    continue;
-                }
-                // If we have just white space, it may still be important if it
-                // separates two inline nodes, e.g. "<a>link</a> <a>link</a>".
-                else if ( i && i + 1 < l &&
-                        isInline( children[ i - 1 ] ) &&
-                        isInline( children[ i + 1 ] ) ) {
-                    child.data = ' ';
-                    continue;
-                }
-            }
-            node.removeChild( child );
-            i -= 1;
-            l -= 1;
-        }
+    // Save undo checkpoint
+    this._recordUndoState( range );
+    this._getRangeAndRemoveBookmark( range );
+
+    if ( remove ) {
+        range = this._removeFormat( remove.tag.toUpperCase(),
+            remove.attributes || {}, range, partial );
+    }
+    if ( add ) {
+        range = this._addFormat( add.tag.toUpperCase(),
+            add.attributes || {}, range );
+    }
+
+    this.setSelection( range );
+    this._updatePath( range, true );
+
+    // We're not still in an undo state
+    if ( !canObserveMutations ) {
+        this._docWasChanged();
     }
-    return node;
-};
 
-var notWSTextNode = function ( node ) {
-    return node.nodeType === ELEMENT_NODE ?
-        node.nodeName === 'BR' :
-        notWS.test( node.data );
+    return this;
 };
-var isLineBreak = function ( br ) {
-    var block = br.parentNode,
-        walker;
-    while ( isInline( block ) ) {
-        block = block.parentNode;
-    }
-    walker = new TreeWalker(
-        block, SHOW_ELEMENT|SHOW_TEXT, notWSTextNode );
-    walker.currentNode = br;
-    return !!walker.nextNode();
+
+// --- Block formatting ---
+
+var tagAfterSplit = {
+    DT:  'DD',
+    DD:  'DT',
+    LI:  'LI'
 };
 
-// <br> elements are treated specially, and differently depending on the
-// browser, when in rich text editor mode. When adding HTML from external
-// sources, we must remove them, replacing the ones that actually affect
-// line breaks with a split of the block element containing it (and wrapping
-// any not inside a block). Browsers that want <br> elements at the end of
-// each block will then have them added back in a later fixCursor method
-// call.
-var cleanupBRs = function ( root ) {
-    var brs = root.querySelectorAll( 'BR' ),
-        brBreaksLine = [],
-        l = brs.length,
-        i, br, block;
+var splitBlock = function ( self, block, node, offset ) {
+    var splitTag = tagAfterSplit[ block.nodeName ],
+        splitProperties = null,
+        nodeAfterSplit = split( node, offset, block.parentNode ),
+        config = self._config;
 
-    // Must calculate whether the <br> breaks a line first, because if we
-    // have two <br>s next to each other, after the first one is converted
-    // to a block split, the second will be at the end of a block and
-    // therefore seem to not be a line break. But in its original context it
-    // was, so we should also convert it to a block split.
-    for ( i = 0; i < l; i += 1 ) {
-        brBreaksLine[i] = isLineBreak( brs[i] );
+    if ( !splitTag ) {
+        splitTag = config.blockTag;
+        splitProperties = config.blockAttributes;
     }
-    while ( l-- ) {
-        br = brs[l];
-        // Cleanup may have removed it
-        block = br.parentNode;
-        if ( !block ) { continue; }
-        while ( isInline( block ) ) {
-            block = block.parentNode;
-        }
-        // If this is not inside a block, replace it by wrapping
-        // inlines in a <div>.
-        if ( !isBlock( block ) ) {
-            fixContainer( block );
-        }
-        else {
-            // If it doesn't break a line, just remove it; it's not doing
-            // anything useful. We'll add it back later if required by the
-            // browser. If it breaks a line, split the block or leave it as
-            // appropriate.
-            if ( brBreaksLine[l] ) {
-                // If in a <div>, split, but anywhere else we might change
-                // the formatting too much (e.g. <li> -> to two list items!)
-                // so just play it safe and leave it.
-                if ( block.nodeName !== 'DIV' ) {
-                    continue;
-                }
-                split( br.parentNode, br, block.parentNode );
-            }
-            detach( br );
+
+    // Make sure the new node is the correct type.
+    if ( !hasTagAttributes( nodeAfterSplit, splitTag, splitProperties ) ) {
+        block = createElement( nodeAfterSplit.ownerDocument,
+            splitTag, splitProperties );
+        if ( nodeAfterSplit.dir ) {
+            block.dir = nodeAfterSplit.dir;
         }
+        replaceWith( nodeAfterSplit, block );
+        block.appendChild( empty( nodeAfterSplit ) );
+        nodeAfterSplit = block;
     }
+    return nodeAfterSplit;
 };
 
-proto._ensureBottomLine = function () {
-    var body = this._body,
-        last = body.lastElementChild;
-    if ( !last ||
-            last.nodeName !== this._config.blockTag || !isBlock( last ) ) {
-        body.appendChild( this.createDefaultBlock() );
+proto.forEachBlock = function ( fn, mutates, range ) {
+    if ( !range && !( range = this.getSelection() ) ) {
+        return this;
     }
-};
 
-// --- Cut and Paste ---
-
-proto._onCut = function () {
     // Save undo checkpoint
-    var range = this.getSelection();
-    var self = this;
-    this._recordUndoState( range );
-    this._getRangeAndRemoveBookmark( range );
-    this.setSelection( range );
-    setTimeout( function () {
-        try {
-            // If all content removed, ensure div at start of body.
-            self._ensureBottomLine();
-        } catch ( error ) {
-            self.didError( error );
+    if ( mutates ) {
+        this._recordUndoState( range );
+        this._getRangeAndRemoveBookmark( range );
+    }
+
+    var start = getStartBlockOfRange( range ),
+        end = getEndBlockOfRange( range );
+    if ( start && end ) {
+        do {
+            if ( fn( start ) || start === end ) { break; }
+        } while ( start = getNextBlock( start ) );
+    }
+
+    if ( mutates ) {
+        this.setSelection( range );
+
+        // Path may have changed
+        this._updatePath( range, true );
+
+        // We're not still in an undo state
+        if ( !canObserveMutations ) {
+            this._docWasChanged();
         }
-    }, 0 );
+    }
+    return this;
 };
 
-proto._onPaste = function ( event ) {
-    if ( this._awaitingPaste ) { return; }
+proto.modifyBlocks = function ( modify, range ) {
+    if ( !range && !( range = this.getSelection() ) ) {
+        return this;
+    }
 
-    // Treat image paste as a drop of an image file.
-    var clipboardData = event.clipboardData,
-        items = clipboardData && clipboardData.items,
-        fireDrop = false,
-        hasImage = false,
-        l, type;
-    if ( items ) {
-        l = items.length;
-        while ( l-- ) {
-            type = items[l].type;
-            if ( type === 'text/html' ) {
-                hasImage = false;
-                break;
-            }
-            if ( /^image\/.*/.test( type ) ) {
-                hasImage = true;
-            }
-        }
-        if ( hasImage ) {
-            event.preventDefault();
-                this.fireEvent( 'dragover', {
-                dataTransfer: clipboardData,
-                /*jshint loopfunc: true */
-                preventDefault: function () {
-                    fireDrop = true;
-                }
-                /*jshint loopfunc: false */
-            });
-            if ( fireDrop ) {
-                this.fireEvent( 'drop', {
-                    dataTransfer: clipboardData
-                });
-            }
-            return;
-        }
+    // 1. Save undo checkpoint and bookmark selection
+    if ( this._isInUndoState ) {
+        this._saveRangeToBookmark( range );
+    } else {
+        this._recordUndoState( range );
     }
 
-    this._awaitingPaste = true;
+    // 2. Expand range to block boundaries
+    expandRangeToBlockBoundaries( range );
 
-    var self = this,
-        body = this._body,
-        range = this.getSelection(),
-        startContainer, startOffset, endContainer, endOffset, startBlock;
+    // 3. Remove range.
+    var body = this._body,
+        frag;
+    moveRangeBoundariesUpTree( range, body );
+    frag = extractContentsOfRange( range, body );
 
-    // Record undo checkpoint
-    self._recordUndoState( range );
-    self._getRangeAndRemoveBookmark( range );
+    // 4. Modify tree of fragment and reinsert.
+    insertNodeInRange( range, modify.call( this, frag ) );
 
-    // Note current selection. We must do this AFTER recording the undo
-    // checkpoint, as this modifies the DOM.
-    startContainer = range.startContainer;
-    startOffset = range.startOffset;
-    endContainer = range.endContainer;
-    endOffset = range.endOffset;
-    startBlock = getStartBlockOfRange( range );
+    // 5. Merge containers at edges
+    if ( range.endOffset < range.endContainer.childNodes.length ) {
+        mergeContainers( range.endContainer.childNodes[ range.endOffset ] );
+    }
+    mergeContainers( range.startContainer.childNodes[ range.startOffset ] );
 
-    // We need to position the pasteArea in the visible portion of the screen
-    // to stop the browser auto-scrolling.
-    var pasteArea = this.createElement( 'DIV', {
-        style: 'position: absolute; overflow: hidden; top:' +
-            ( body.scrollTop +
-                ( startBlock ? startBlock.getBoundingClientRect().top : 0 ) ) +
-            'px; left: 0; width: 1px; height: 1px;'
-    });
-    body.appendChild( pasteArea );
-    range.selectNodeContents( pasteArea );
+    // 6. Restore selection
+    this._getRangeAndRemoveBookmark( range );
     this.setSelection( range );
+    this._updatePath( range, true );
 
-    // 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 () {
-        try {
-            // Get the pasted content and clean
-            var frag = empty( detach( pasteArea ) ),
-                first = frag.firstChild,
-                range = self._createRange(
-                    startContainer, startOffset, endContainer, endOffset );
+    // 7. We're not still in an undo state
+    if ( !canObserveMutations ) {
+        this._docWasChanged();
+    }
 
-            // Was anything actually pasted?
-            if ( first ) {
-                // Safari and IE like putting extra divs around things.
-                if ( first === frag.lastChild &&
-                        first.nodeName === 'DIV' ) {
-                    frag.replaceChild( empty( first ), first );
-                }
+    return this;
+};
 
-                frag.normalize();
-                addLinks( frag );
-                cleanTree( frag, false );
-                cleanupBRs( frag );
-                removeEmptyInlines( frag );
-
-                var node = frag,
-                    doPaste = true,
-                    event = {
-                        fragment: frag,
-                        preventDefault: function () {
-                            doPaste = false;
-                        },
-                        isDefaultPrevented: function () {
-                            return !doPaste;
-                        }
-                    };
-                while ( node = getNextBlock( node ) ) {
-                    fixCursor( node );
-                }
+var increaseBlockQuoteLevel = function ( frag ) {
+    return this.createElement( 'BLOCKQUOTE',
+        this._config.tagAttributes.blockquote, [
+            frag
+        ]);
+};
 
-                self.fireEvent( 'willPaste', event );
+var decreaseBlockQuoteLevel = function ( frag ) {
+    var blockquotes = frag.querySelectorAll( 'blockquote' );
+    Array.prototype.filter.call( blockquotes, function ( el ) {
+        return !getNearest( el.parentNode, 'BLOCKQUOTE' );
+    }).forEach( function ( el ) {
+        replaceWith( el, empty( el ) );
+    });
+    return frag;
+};
 
-                // Insert pasted data
-                if ( doPaste ) {
-                    insertTreeFragmentIntoRange( range, event.fragment );
-                    if ( !canObserveMutations ) {
-                        self._docWasChanged();
-                    }
-                    range.collapse( false );
-                    self._ensureBottomLine();
-                }
+var removeBlockQuote = function (/* frag */) {
+    return this.createDefaultBlock([
+        this.createElement( 'INPUT', {
+            id: startSelectionId,
+            type: 'hidden'
+        }),
+        this.createElement( 'INPUT', {
+            id: endSelectionId,
+            type: 'hidden'
+        })
+    ]);
+};
+
+var makeList = function ( self, frag, type ) {
+    var walker = getBlockWalker( frag ),
+        node, tag, prev, newLi,
+        tagAttributes = self._config.tagAttributes,
+        listAttrs = tagAttributes[ type.toLowerCase() ],
+        listItemAttrs = tagAttributes.li;
+
+    while ( node = walker.nextNode() ) {
+        tag = node.parentNode.nodeName;
+        if ( tag !== 'LI' ) {
+            newLi = self.createElement( 'LI', listItemAttrs );
+            if ( node.dir ) {
+                newLi.dir = node.dir;
+            }
+
+            // Have we replaced the previous block with a new <ul>/<ol>?
+            if ( ( prev = node.previousSibling ) &&
+                    prev.nodeName === type ) {
+                prev.appendChild( newLi );
+            }
+            // Otherwise, replace this block with the <ul>/<ol>
+            else {
+                replaceWith(
+                    node,
+                    self.createElement( type, listAttrs, [
+                        newLi
+                    ])
+                );
+            }
+            newLi.appendChild( node );
+        } else {
+            node = node.parentNode.parentNode;
+            tag = node.nodeName;
+            if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) {
+                replaceWith( node,
+                    self.createElement( type, listAttrs, [ empty( node ) ] )
+                );
             }
-
-            self.setSelection( range );
-            self._updatePath( range, true );
-
-            self._awaitingPaste = false;
-        } catch ( error ) {
-            self.didError( error );
         }
-    }, 0 );
+    }
 };
 
-// --- Keyboard interaction ---
-
-var keys = {
-    8: 'backspace',
-    9: 'tab',
-    13: 'enter',
-    32: 'space',
-    37: 'left',
-    39: 'right',
-    46: 'delete',
-    219: '[',
-    221: ']'
+var makeUnorderedList = function ( frag ) {
+    makeList( this, frag, 'UL' );
+    return frag;
 };
 
-// Ref: http://unixpapa.com/js/key.html
-proto._onKey = function ( event ) {
-    var code = event.keyCode,
-        key = keys[ code ],
-        modifiers = '',
-        range = this.getSelection();
+var makeOrderedList = function ( frag ) {
+    makeList( this, frag, 'OL' );
+    return frag;
+};
 
-    if ( !key ) {
-        key = String.fromCharCode( code ).toLowerCase();
-        // Only reliable for letters and numbers
-        if ( !/^[A-Za-z0-9]$/.test( key ) ) {
-            key = '';
+var removeList = function ( frag ) {
+    var lists = frag.querySelectorAll( 'UL, OL' ),
+        i, l, ll, list, listFrag, children, child;
+    for ( i = 0, l = lists.length; i < l; i += 1 ) {
+        list = lists[i];
+        listFrag = empty( list );
+        children = listFrag.childNodes;
+        ll = children.length;
+        while ( ll-- ) {
+            child = children[ll];
+            replaceWith( child, empty( child ) );
         }
+        fixContainer( listFrag );
+        replaceWith( list, listFrag );
     }
+    return frag;
+};
 
-    // On keypress, delete and '.' both have event.keyCode 46
-    // Must check event.which to differentiate.
-    if ( isPresto && event.which === 46 ) {
-        key = '.';
-    }
-
-    // Function keys
-    if ( 111 < code && code < 124 ) {
-        key = 'f' + ( code - 111 );
-    }
-
-    // We need to apply the backspace/delete handlers regardless of
-    // control key modifiers.
-    if ( key !== 'backspace' && key !== 'delete' ) {
-        if ( event.altKey  ) { modifiers += 'alt-'; }
-        if ( event.ctrlKey ) { modifiers += 'ctrl-'; }
-        if ( event.metaKey ) { modifiers += 'meta-'; }
+var increaseListLevel = function ( frag ) {
+    var items = frag.querySelectorAll( 'LI' ),
+        i, l, item,
+        type, newParent,
+        tagAttributes = this._config.tagAttributes,
+        listItemAttrs = tagAttributes.li,
+        listAttrs;
+    for ( i = 0, l = items.length; i < l; i += 1 ) {
+        item = items[i];
+        if ( !isContainer( item.firstChild ) ) {
+            // type => 'UL' or 'OL'
+            type = item.parentNode.nodeName;
+            newParent = item.previousSibling;
+            if ( !newParent || !( newParent = newParent.lastChild ) ||
+                    newParent.nodeName !== type ) {
+                listAttrs = tagAttributes[ type.toLowerCase() ];
+                replaceWith(
+                    item,
+                    this.createElement( 'LI', listItemAttrs, [
+                        newParent = this.createElement( type, listAttrs )
+                    ])
+                );
+            }
+            newParent.appendChild( item );
+        }
     }
-    // However, on Windows, shift-delete is apparently "cut" (WTF right?), so
-    // we want to let the browser handle shift-delete.
-    if ( event.shiftKey ) { modifiers += 'shift-'; }
+    return frag;
+};
 
-    key = modifiers + key;
+var decreaseListLevel = function ( frag ) {
+    var items = frag.querySelectorAll( 'LI' );
+    Array.prototype.filter.call( items, function ( el ) {
+        return !isContainer( el.firstChild );
+    }).forEach( function ( item ) {
+        var parent = item.parentNode,
+            newParent = parent.parentNode,
+            first = item.firstChild,
+            node = first,
+            next;
+        if ( item.previousSibling ) {
+            parent = split( parent, item, newParent );
+        }
+        while ( node ) {
+            next = node.nextSibling;
+            if ( isContainer( node ) ) {
+                break;
+            }
+            newParent.insertBefore( node, parent );
+            node = next;
+        }
+        if ( newParent.nodeName === 'LI' && first.previousSibling ) {
+            split( newParent, first, newParent.parentNode );
+        }
+        while ( item !== frag && !item.childNodes.length ) {
+            parent = item.parentNode;
+            parent.removeChild( item );
+            item = parent;
+        }
+    }, this );
+    fixContainer( frag );
+    return frag;
+};
 
-    if ( this._keyHandlers[ key ] ) {
-        this._keyHandlers[ key ]( this, event, range );
-    } else if ( key.length === 1 && !range.collapsed ) {
-        // Record undo checkpoint.
-        this._recordUndoState( range );
-        this._getRangeAndRemoveBookmark( range );
-        // Delete the selection
-        deleteContentsOfRange( range );
-        this._ensureBottomLine();
-        this.setSelection( range );
-        this._updatePath( range, true );
+proto._ensureBottomLine = function () {
+    var body = this._body,
+        last = body.lastElementChild;
+    if ( !last ||
+            last.nodeName !== this._config.blockTag || !isBlock( last ) ) {
+        body.appendChild( this.createDefaultBlock() );
     }
 };
 
+// --- Keyboard interaction ---
+
 proto.setKeyHandler = function ( key, fn ) {
     this._keyHandlers[ key ] = fn;
     return this;
@@ -3299,7 +3495,7 @@ proto.setHTML = function ( html ) {
     div.innerHTML = html;
     frag.appendChild( empty( div ) );
 
-    cleanTree( frag, true );
+    cleanTree( frag );
     cleanupBRs( frag );
 
     fixContainer( frag );
@@ -3394,10 +3590,42 @@ proto.insertImage = function ( src, attributes ) {
     return img;
 };
 
+var linkRegExp = /\b((?:(?:ht|f)tps?:\/\/|www\d{0,3}[.]|[a-z0-9.\-]+[.][a-z]{2,}\/)(?:[^\s()<>]+|\([^\s()<>]+\))+(?:\((?:[^\s()<>]+|(?:\([^\s()<>]+\)))*\)|[^\s`!()\[\]{};:'".,<>?«»“”‘’]))|([\w\-.%+]+@(?:[\w\-]+\.)+[A-Z]{2,}\b)/i;
+
+var addLinks = function ( frag ) {
+    var doc = frag.ownerDocument,
+        walker = new TreeWalker( frag, SHOW_TEXT,
+                function ( node ) {
+            return !getNearest( node, 'A' );
+        }, false ),
+        node, data, parent, match, index, endIndex, child;
+    while ( node = walker.nextNode() ) {
+        data = node.data;
+        parent = node.parentNode;
+        while ( match = linkRegExp.exec( data ) ) {
+            index = match.index;
+            endIndex = index + match[0].length;
+            if ( index ) {
+                child = doc.createTextNode( data.slice( 0, index ) );
+                parent.insertBefore( child, node );
+            }
+            child = doc.createElement( 'A' );
+            child.textContent = data.slice( index, endIndex );
+            child.href = match[1] ?
+                /^(?:ht|f)tps?:/.test( match[1] ) ?
+                    match[1] :
+                    'http://' + match[1] :
+                'mailto:' + match[2];
+            parent.insertBefore( child, node );
+            node.data = data = data.slice( endIndex );
+        }
+    }
+};
+
 // Insert HTML at the cursor location. If the selection is not collapsed
 // insertTreeFragmentIntoRange will delete the selection so that it is replaced
 // by the html being inserted.
-proto.insertHTML = function ( html ) {
+proto.insertHTML = function ( html, isPaste ) {
     var range = this.getSelection(),
         frag = this._doc.createDocumentFragment(),
         div = this.createElement( 'DIV' );
@@ -3411,24 +3639,37 @@ proto.insertHTML = function ( html ) {
     this._getRangeAndRemoveBookmark( range );
 
     try {
-        frag.normalize();
+        var node = frag;
+        var event = {
+            fragment: frag,
+            preventDefault: function () {
+                this.defaultPrevented = true;
+            },
+            defaultPrevented: false
+        };
+
         addLinks( frag );
-        cleanTree( frag, true );
+        cleanTree( frag );
         cleanupBRs( frag );
         removeEmptyInlines( frag );
-        fixContainer( frag );
+        frag.normalize();
 
-        var node = frag;
         while ( node = getNextBlock( node ) ) {
             fixCursor( node );
         }
 
-        insertTreeFragmentIntoRange( range, frag );
-        if ( !canObserveMutations ) {
-            this._docWasChanged();
+        if ( isPaste ) {
+            this.fireEvent( 'willPaste', event );
+        }
+
+        if ( !event.defaultPrevented ) {
+            insertTreeFragmentIntoRange( range, event.fragment );
+            if ( !canObserveMutations ) {
+                this._docWasChanged();
+            }
+            range.collapse( false );
+            this._ensureBottomLine();
         }
-        range.collapse( false );
-        this._ensureBottomLine();
 
         this.setSelection( range );
         this._updatePath( range, true );
@@ -3438,6 +3679,24 @@ proto.insertHTML = function ( html ) {
     return this;
 };
 
+proto.insertPlainText = function ( plainText, isPaste ) {
+    var lines = plainText.split( '\n' ),
+        i, l, line;
+    for ( i = 0, l = lines.length; i < l; i += 1 ) {
+        line = lines[i];
+        line = line.split( '&' ).join( '&amp;' )
+                   .split( '<' ).join( '&lt;'  )
+                   .split( '>' ).join( '&gt;'  )
+                   .replace( / (?= )/g, '&nbsp;' );
+        // Wrap all but first/last lines in <div></div>
+        if ( i && i + 1 < l ) {
+            line = '<DIV>' + ( line || '<BR>' ) + '</DIV>';
+        }
+        lines[i] = line;
+    }
+    return this.insertHTML( lines.join( '' ), isPaste );
+};
+
 // --- Formatting ---
 
 var command = function ( method, arg, arg2 ) {
@@ -3453,16 +3712,8 @@ proto.addStyles = function ( styles ) {
             style = this.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( this._doc.createTextNode( styles ) );
-            head.appendChild( style );
-        }
+        style.appendChild( this._doc.createTextNode( styles ) );
+        head.appendChild( style );
     }
     return this;
 };
@@ -3547,7 +3798,7 @@ proto.setTextColour = function ( colour ) {
         tag: 'SPAN',
         attributes: {
             'class': 'colour',
-            style: 'color: ' + colour
+            style: 'color:' + colour
         }
     }, {
         tag: 'SPAN',
@@ -3561,7 +3812,7 @@ proto.setHighlightColour = function ( colour ) {
         tag: 'SPAN',
         attributes: {
             'class': 'highlight',
-            style: 'background-color: ' + colour
+            style: 'background-color:' + colour
         }
     }, {
         tag: 'SPAN',
@@ -3591,6 +3842,112 @@ proto.setTextDirection = function ( direction ) {
     return this.focus();
 };
 
+function removeFormatting ( self, root, clean ) {
+    var node, next;
+    for ( node = root.firstChild; node; node = next ) {
+        next = node.nextSibling;
+        if ( isInline( node ) ) {
+            if ( node.nodeType === TEXT_NODE || node.nodeName === 'BR' || node.nodeName === 'IMG' ) {
+                clean.appendChild( node );
+                continue;
+            }
+        } else if ( isBlock( node ) ) {
+            clean.appendChild( self.createDefaultBlock([
+                removeFormatting(
+                    self, node, self._doc.createDocumentFragment() )
+            ]));
+            continue;
+        }
+        removeFormatting( self, node, clean );
+    }
+    return clean;
+}
+
+proto.removeAllFormatting = function ( range ) {
+    if ( !range && !( range = this.getSelection() ) || range.collapsed ) {
+        return this;
+    }
+
+    var stopNode = range.commonAncestorContainer;
+    while ( stopNode && !isBlock( stopNode ) ) {
+        stopNode = stopNode.parentNode;
+    }
+    if ( !stopNode ) {
+        expandRangeToBlockBoundaries( range );
+        stopNode = this._body;
+    }
+    if ( stopNode.nodeType === TEXT_NODE ) {
+        return this;
+    }
+
+    // Record undo point
+    this._recordUndoState( range );
+    this._getRangeAndRemoveBookmark( range );
+
+
+    // Avoid splitting where we're already at edges.
+    moveRangeBoundariesUpTree( range, stopNode );
+
+    // Split the selection up to the block, or if whole selection in same
+    // block, expand range boundaries to ends of block and split up to body.
+    var doc = stopNode.ownerDocument;
+    var startContainer = range.startContainer;
+    var startOffset = range.startOffset;
+    var endContainer = range.endContainer;
+    var endOffset = range.endOffset;
+
+    // Split end point first to avoid problems when end and start
+    // in same container.
+    var formattedNodes = doc.createDocumentFragment();
+    var cleanNodes = doc.createDocumentFragment();
+    var nodeAfterSplit = split( endContainer, endOffset, stopNode );
+    var nodeInSplit = split( startContainer, startOffset, stopNode );
+    var nextNode, _range, childNodes;
+
+    // Then replace contents in split with a cleaned version of the same:
+    // blocks become default blocks, text and leaf nodes survive, everything
+    // else is obliterated.
+    while ( nodeInSplit !== nodeAfterSplit ) {
+        nextNode = nodeInSplit.nextSibling;
+        formattedNodes.appendChild( nodeInSplit );
+        nodeInSplit = nextNode;
+    }
+    removeFormatting( this, formattedNodes, cleanNodes );
+    cleanNodes.normalize();
+    nodeInSplit = cleanNodes.firstChild;
+    nextNode = cleanNodes.lastChild;
+
+    // Restore selection
+    childNodes = stopNode.childNodes;
+    if ( nodeInSplit ) {
+        stopNode.insertBefore( cleanNodes, nodeAfterSplit );
+        startOffset = indexOf.call( childNodes, nodeInSplit );
+        endOffset = indexOf.call( childNodes, nextNode ) + 1;
+    } else {
+        startOffset = indexOf.call( childNodes, nodeAfterSplit );
+        endOffset = startOffset;
+    }
+
+    // Merge text nodes at edges, if possible
+    _range = {
+        startContainer: stopNode,
+        startOffset: startOffset,
+        endContainer: stopNode,
+        endOffset: endOffset
+    };
+    mergeInlines( stopNode, _range );
+    range.setStart( _range.startContainer, _range.startOffset );
+    range.setEnd( _range.endContainer, _range.endOffset );
+
+    // And move back down the tree
+    moveRangeBoundariesDownTree( range );
+
+    this.setSelection( range );
+    this._updatePath( range, true );
+
+    return this.focus();
+};
+
 proto.increaseQuoteLevel = command( 'modifyBlocks', increaseBlockQuoteLevel );
 proto.decreaseQuoteLevel = command( 'modifyBlocks', decreaseBlockQuoteLevel );
 
@@ -3601,18 +3958,23 @@ proto.removeList = command( 'modifyBlocks', removeList );
 proto.increaseListLevel = command( 'modifyBlocks', increaseListLevel );
 proto.decreaseListLevel = command( 'modifyBlocks', decreaseListLevel );
 
-if ( top !== win ) {
-    win.editor = new Squire( doc );
-    if ( win.onEditorLoad ) {
-        win.onEditorLoad( win.editor );
-        win.onEditorLoad = null;
-    }
+if ( typeof exports === 'object' ) {
+    module.exports = Squire;
+} else if ( typeof define === 'function' && define.amd ) {
+    define( function () {
+        return Squire;
+    });
 } else {
-    if ( typeof exports === 'object' ) {
-        module.exports = Squire;
-    } else {
-        win.Squire = Squire;
+    win.Squire = Squire;
+
+    if ( top !== win &&
+            doc.documentElement.getAttribute( 'data-squireinit' ) === 'true' ) {
+        win.editor = new Squire( doc );
+        if ( win.onEditorLoad ) {
+            win.onEditorLoad( win.editor );
+            win.onEditorLoad = null;
+        }
     }
 }
 
-}( document ) );
+}( document ) );