inside the // root. Detach the
; the _ensureBottomLine call will insert a new // block. if ( node === self._root && ( node = node.firstChild ) && node.nodeName === 'BR' ) { detach( node ); } self._ensureBottomLine(); self.setSelection( range ); self._updatePath( range, true ); } catch ( error ) { didError( error ); } }, detachUneditableNode = ( node, root ) => { let parent; while (( parent = node.parentNode )) { if ( parent === root || parent.isContentEditable ) { break; } node = parent; } detach( node ); }, handleEnter = ( self, shiftKey, range ) => { let root = self._root; let block, parent, node, offset, nodeAfterSplit; // Save undo checkpoint and add any links in the preceding section. // Remove any zws so we don't think there's content in an empty // block. self._recordUndoState( range ); if ( self._config.addLinks ) { addLinks( range.startContainer, root, self ); } self._removeZWS(); self._getRangeAndRemoveBookmark( range ); // Selected text is overwritten, therefore delete the contents // to collapse selection. if ( !range.collapsed ) { deleteContentsOfRange( range, root ); } block = getStartBlockOfRange( range, root ); // Inside a PRE, insert literal newline, unless on blank line. if ( block && ( parent = getClosest( block, root, 'PRE' ) ) ) { moveRangeBoundariesDownTree( range ); node = range.startContainer; offset = range.startOffset; if ( node.nodeType !== TEXT_NODE ) { node = doc.createTextNode( '' ); parent.insertBefore( node, parent.firstChild ); } // If blank line: split and insert default block if ( !shiftKey && ( node.data.charAt( offset - 1 ) === '\n' || rangeDoesStartAtBlockBoundary( range, root ) ) && ( node.data.charAt( offset ) === '\n' || rangeDoesEndAtBlockBoundary( range, root ) ) ) { node.deleteData( offset && offset - 1, offset ? 2 : 1 ); nodeAfterSplit = split( node, offset && offset - 1, root, root ); node = nodeAfterSplit.previousSibling; if ( !node.textContent ) { detach( node ); } node = self.createDefaultBlock(); nodeAfterSplit.before( node ); if ( !nodeAfterSplit.textContent ) { detach( nodeAfterSplit ); } range.setStart( node, 0 ); } else { node.insertData( offset, '\n' ); fixCursor( parent, root ); // Firefox bug: if you set the selection in the text node after // the new line, it draws the cursor before the line break still // but if you set the selection to the equivalent position // in the parent, it works. if ( node.length === offset + 1 ) { range.setStartAfter( node ); } else { range.setStart( node, offset + 1 ); } } range.collapse( true ); self.setSelection( range ); self._updatePath( range, true ); self._docWasChanged(); return; } // If this is a malformed bit of document or in a table; // just play it safe and insert a
. if ( !block || shiftKey || /^T[HD]$/.test( block.nodeName ) ) { // If inside an , move focus out moveRangeBoundaryOutOf( range, 'A', root ); insertNodeInRange( range, createElement( 'BR' ) ); range.collapse( false ); self.setSelection( range ); self._updatePath( range, true ); return; } // If in a list, we'll split the LI instead. block = getClosest( block, root, 'LI' ) || block; if ( isEmptyBlock( block ) && ( parent = getClosest( block, root, 'UL,OL,BLOCKQUOTE' ) ) ) { return 'BLOCKQUOTE' === parent.nodeName // Break blockquote ? self.modifyBlocks( (/* frag */) => self.createDefaultBlock( createBookmarkNodes( self ) ), range ) // Break list : self.decreaseListLevel( range ); } // Otherwise, split at cursor point. nodeAfterSplit = splitBlock( self, block, range.startContainer, range.startOffset ); // Clean up any empty inlines if we hit enter at the beginning of the block removeZWS( block ); removeEmptyInlines( block ); fixCursor( block, root ); // Focus cursor // If there's a / etc. at the beginning of the split // make sure we focus inside it. while ( nodeAfterSplit.nodeType === ELEMENT_NODE ) { let child = nodeAfterSplit.firstChild, next; // Don't continue links over a block break; unlikely to be the // desired outcome. if ( nodeAfterSplit.nodeName === 'A' && ( !nodeAfterSplit.textContent || nodeAfterSplit.textContent === ZWS ) ) { child = doc.createTextNode( '' ); nodeAfterSplit.replaceWith( child ); nodeAfterSplit = child; break; } while ( child && child.nodeType === TEXT_NODE && !child.data ) { next = child.nextSibling; if ( !next || next.nodeName === 'BR' ) { break; } detach( child ); child = next; } // 'BR's essentially don't count; they're a browser hack. // If you try to select the contents of a 'BR', FF will not let // you type anything! if ( !child || child.nodeName === 'BR' || child.nodeType === TEXT_NODE ) { break; } nodeAfterSplit = child; } range = createRange( nodeAfterSplit, 0 ); self.setSelection( range ); self._updatePath( range, true ); }, changeIndentationLevel = direction => ( self, event ) => { event.preventDefault(); self.changeIndentationLevel(direction); }, toggleList = ( type, methodIfNotInList ) => ( self, event ) => { event.preventDefault(); let parent = self.getSelectionClosest('UL,OL'); if (parent && type == parent.nodeName) { self.removeList(); } else { self[ methodIfNotInList ](); } }, fontSizes = { 1: 'x-small', 2: 'small', 3: 'medium', 4: 'large', 5: 'x-large', 6: 'xx-large', 7: 'xxx-large', '-1': 'smaller', '+1': 'larger' }, styleToSemantic = { fontWeight: { regexp: /^bold|^700/i, replace: () => createElement( 'B' ) }, fontStyle: { regexp: /^italic/i, replace: () => createElement( 'I' ) }, fontFamily: { regexp: notWS, replace: ( doc, classNames, family ) => createElement( 'SPAN', { style: 'font-family:' + family }) }, fontSize: { regexp: notWS, replace: ( doc, classNames, size ) => createElement( 'SPAN', { style: 'font-size:' + size }) }, textDecoration: { regexp: /^underline/i, replace: () => createElement( 'U' ) } /* textDecoration: { regexp: /^line-through/i, replace: doc => createElement( 'S' ) } */ }, replaceWithTag = tag => node => { let el = createElement( tag ); Array.prototype.forEach.call( node.attributes, attr => el.setAttribute( attr.name, attr.value ) ); node.replaceWith( el ); el.append( empty( node ) ); return el; }, replaceStyles = ( node, parent, config ) => { let style = node.style; let attr, converter, css, newTreeBottom, newTreeTop, el; for ( attr in styleToSemantic ) { converter = styleToSemantic[ attr ]; css = style[ attr ]; if ( css && converter.regexp.test( css ) ) { el = converter.replace( doc, config.classNames, css ); if ( el.nodeName === node.nodeName && el.className === node.className ) { continue; } if ( !newTreeTop ) { newTreeTop = el; } if ( newTreeBottom ) { newTreeBottom.append( el ); } newTreeBottom = el; node.style[ attr ] = ''; } } if ( newTreeTop ) { newTreeBottom.append( empty( node ) ); node.append( newTreeTop ); } return newTreeBottom || node; }, stylesRewriters = { SPAN: replaceStyles, STRONG: replaceWithTag( 'B' ), EM: replaceWithTag( 'I' ), INS: replaceWithTag( 'U' ), STRIKE: replaceWithTag( 'S' ), FONT: node => { let face = node.face, size = node.size, color = node.color, newTag = createElement( 'SPAN' ), css = newTag.style; if ( face ) { css.fontFamily = face; } if ( size ) { css.fontSize = fontSizes[ size ]; } if ( color && /^#?([\dA-F]{3}){1,2}$/i.test( color ) ) { if ( color.charAt( 0 ) !== '#' ) { color = '#' + color; } css.color = color; } node.replaceWith( newTag ); newTag.append( empty( node ) ); return newTag; }, // KBD: // VAR: // CODE: // SAMP: TT: node => { let el = createElement( 'SPAN', { style: 'font-family:menlo,consolas,"courier new",monospace' }); node.replaceWith( el ); el.append( empty( node ) ); return el; } }, 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)|COL(?:GROUP)?|UL)$/, blacklist = /^(?:HEAD|META|STYLE)/, /* Two purposes: 1. Remove nodes we don't want, such as weird
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
. Browsers that want
// elements at the end of each block will then have them added back in a later // fixCursor method call. cleanupBRs = ( node, root, keepForBlankLine ) => { let brs = node.querySelectorAll( 'BR' ); let brBreaksLine = []; let l = brs.length; let i, br, parent; // Must calculate whether the
breaks a line first, because if we // have two
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 ) { brBreaksLine[i] = isLineBreak( brs[i], keepForBlankLine ); } while ( l-- ) { 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, root ); } } }, // The (non-standard but supported enough) innerText property is based on the // render tree in Firefox and possibly other browsers, so we must insert the // DOM node into the document to ensure the text part is correct. setClipboardData = ( event, contents, root ) => { let clipboardData = event.clipboardData; let body = doc.body; let node = createElement( 'div' ); let html, text; node.append( contents ); html = node.innerHTML; // Firefox will add an extra new line for BRs at the end of block when // calculating innerText, even though they don't actually affect // display, so we need to remove them first. cleanupBRs( node, root, true ); node.setAttribute( 'style', 'position:fixed;overflow:hidden;bottom:100%;right:100%;' ); body.append( node ); text = node.innerText || node.textContent; text = text.replace( NBSP, ' ' ); // Replace nbsp with regular space node.remove( ); // Firefox (and others?) returns unix line endings (\n) even on Windows. // If on Windows, normalise to \r\n, since Notepad and some other crappy // apps do not understand just \n. if ( isWin ) { text = text.replace( /\r?\n/g, '\r\n' ); } if ( text !== html ) { clipboardData.setData( 'text/html', html ); } clipboardData.setData( 'text/plain', text ); event.preventDefault(); }, mergeObjects = ( base, extras, mayOverride ) => { let prop, value; if ( !base ) { base = {}; } if ( extras ) { for ( prop in extras ) { if ( mayOverride || !( prop in base ) ) { value = extras[ prop ]; base[ prop ] = ( value && value.constructor === Object ) ? mergeObjects( base[ prop ], value, mayOverride ) : value; } } } return base; }, // --- 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. customEvents = { pathChange: 1, select: 1, input: 1, undoStateChange: 1 }, // --- Workaround for browsers that can't focus empty text nodes --- // WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256 // Walk down the tree starting at the root and remove any ZWS. If the node only // contained ZWS space then remove it too. We may want to keep one ZWS node at // the bottom of the tree so the block can be selected. Define that node as the // keepNode. removeZWS = ( root, keepNode ) => { let walker = createTreeWalker( root, SHOW_TEXT ); let parent, node, index; while ( node = walker.nextNode() ) { while ( ( index = node.data.indexOf( ZWS ) ) > -1 && ( !keepNode || node.parentNode !== keepNode ) ) { if ( node.length === 1 ) { do { parent = node.parentNode; node.remove( ); node = parent; walker.currentNode = parent; } while ( isInline( node ) && !getLength( node ) ); break; } else { node.deleteData( index, 1 ); } } } }, // --- Bookmarking --- startSelectionId = 'squire-selection-start', endSelectionId = 'squire-selection-end', createBookmarkNodes = () => [ createElement( 'INPUT', { id: startSelectionId, type: 'hidden' }), createElement( 'INPUT', { id: endSelectionId, type: 'hidden' }) ], // --- Block formatting --- tagAfterSplit = { DT: 'DD', DD: 'DT', LI: 'LI', PRE: 'PRE' }, splitBlock = ( self, block, node, offset ) => { let splitTag = tagAfterSplit[ block.nodeName ], nodeAfterSplit = split( node, offset, block.parentNode, self._root ), config = self._config; if ( !splitTag ) { splitTag = config.blockTag; } // Make sure the new node is the correct type. if ( !hasTagAttributes( nodeAfterSplit, splitTag, {} ) ) { block = createElement( splitTag ); if ( nodeAfterSplit.dir ) { block.dir = nodeAfterSplit.dir; } nodeAfterSplit.replaceWith( block ); block.append( empty( nodeAfterSplit ) ); nodeAfterSplit = block; } return nodeAfterSplit; }, getListSelection = ( range, root ) => { // Get start+end li in single common ancestor let list = range.commonAncestorContainer; let startLi = range.startContainer; let endLi = range.endContainer; while ( list && list !== root && !/^[OU]L$/.test( list.nodeName ) ) { list = list.parentNode; } if ( !list || list === root ) { return null; } if ( startLi === list ) { startLi = startLi.childNodes[ range.startOffset ]; } if ( endLi === list ) { endLi = endLi.childNodes[ range.endOffset ]; } while ( startLi && startLi.parentNode !== list ) { startLi = startLi.parentNode; } while ( endLi && endLi.parentNode !== list ) { endLi = endLi.parentNode; } return [ list, startLi, endLi ]; }, makeList = ( self, frag, type ) => { let walker = getBlockWalker( frag, self._root ), node, tag, prev, newLi; while ( node = walker.nextNode() ) { if ( node.parentNode.nodeName === 'LI' ) { node = node.parentNode; walker.currentNode = node.lastChild; } if ( node.nodeName !== 'LI' ) { newLi = createElement( 'LI' ); if ( node.dir ) { newLi.dir = node.dir; } // Have we replaced the previous block with a new
// elements at the end of each block will then have them added back in a later // fixCursor method call. cleanupBRs = ( node, root, keepForBlankLine ) => { let brs = node.querySelectorAll( 'BR' ); let brBreaksLine = []; let l = brs.length; let i, br, parent; // Must calculate whether the
breaks a line first, because if we // have two
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 ) { brBreaksLine[i] = isLineBreak( brs[i], keepForBlankLine ); } while ( l-- ) { 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, root ); } } }, // The (non-standard but supported enough) innerText property is based on the // render tree in Firefox and possibly other browsers, so we must insert the // DOM node into the document to ensure the text part is correct. setClipboardData = ( event, contents, root ) => { let clipboardData = event.clipboardData; let body = doc.body; let node = createElement( 'div' ); let html, text; node.append( contents ); html = node.innerHTML; // Firefox will add an extra new line for BRs at the end of block when // calculating innerText, even though they don't actually affect // display, so we need to remove them first. cleanupBRs( node, root, true ); node.setAttribute( 'style', 'position:fixed;overflow:hidden;bottom:100%;right:100%;' ); body.append( node ); text = node.innerText || node.textContent; text = text.replace( NBSP, ' ' ); // Replace nbsp with regular space node.remove( ); // Firefox (and others?) returns unix line endings (\n) even on Windows. // If on Windows, normalise to \r\n, since Notepad and some other crappy // apps do not understand just \n. if ( isWin ) { text = text.replace( /\r?\n/g, '\r\n' ); } if ( text !== html ) { clipboardData.setData( 'text/html', html ); } clipboardData.setData( 'text/plain', text ); event.preventDefault(); }, mergeObjects = ( base, extras, mayOverride ) => { let prop, value; if ( !base ) { base = {}; } if ( extras ) { for ( prop in extras ) { if ( mayOverride || !( prop in base ) ) { value = extras[ prop ]; base[ prop ] = ( value && value.constructor === Object ) ? mergeObjects( base[ prop ], value, mayOverride ) : value; } } } return base; }, // --- 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. customEvents = { pathChange: 1, select: 1, input: 1, undoStateChange: 1 }, // --- Workaround for browsers that can't focus empty text nodes --- // WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=15256 // Walk down the tree starting at the root and remove any ZWS. If the node only // contained ZWS space then remove it too. We may want to keep one ZWS node at // the bottom of the tree so the block can be selected. Define that node as the // keepNode. removeZWS = ( root, keepNode ) => { let walker = createTreeWalker( root, SHOW_TEXT ); let parent, node, index; while ( node = walker.nextNode() ) { while ( ( index = node.data.indexOf( ZWS ) ) > -1 && ( !keepNode || node.parentNode !== keepNode ) ) { if ( node.length === 1 ) { do { parent = node.parentNode; node.remove( ); node = parent; walker.currentNode = parent; } while ( isInline( node ) && !getLength( node ) ); break; } else { node.deleteData( index, 1 ); } } } }, // --- Bookmarking --- startSelectionId = 'squire-selection-start', endSelectionId = 'squire-selection-end', createBookmarkNodes = () => [ createElement( 'INPUT', { id: startSelectionId, type: 'hidden' }), createElement( 'INPUT', { id: endSelectionId, type: 'hidden' }) ], // --- Block formatting --- tagAfterSplit = { DT: 'DD', DD: 'DT', LI: 'LI', PRE: 'PRE' }, splitBlock = ( self, block, node, offset ) => { let splitTag = tagAfterSplit[ block.nodeName ], nodeAfterSplit = split( node, offset, block.parentNode, self._root ), config = self._config; if ( !splitTag ) { splitTag = config.blockTag; } // Make sure the new node is the correct type. if ( !hasTagAttributes( nodeAfterSplit, splitTag, {} ) ) { block = createElement( splitTag ); if ( nodeAfterSplit.dir ) { block.dir = nodeAfterSplit.dir; } nodeAfterSplit.replaceWith( block ); block.append( empty( nodeAfterSplit ) ); nodeAfterSplit = block; } return nodeAfterSplit; }, getListSelection = ( range, root ) => { // Get start+end li in single common ancestor let list = range.commonAncestorContainer; let startLi = range.startContainer; let endLi = range.endContainer; while ( list && list !== root && !/^[OU]L$/.test( list.nodeName ) ) { list = list.parentNode; } if ( !list || list === root ) { return null; } if ( startLi === list ) { startLi = startLi.childNodes[ range.startOffset ]; } if ( endLi === list ) { endLi = endLi.childNodes[ range.endOffset ]; } while ( startLi && startLi.parentNode !== list ) { startLi = startLi.parentNode; } while ( endLi && endLi.parentNode !== list ) { endLi = endLi.parentNode; } return [ list, startLi, endLi ]; }, makeList = ( self, frag, type ) => { let walker = getBlockWalker( frag, self._root ), node, tag, prev, newLi; while ( node = walker.nextNode() ) { if ( node.parentNode.nodeName === 'LI' ) { node = node.parentNode; walker.currentNode = node.lastChild; } if ( node.nodeName !== 'LI' ) { newLi = createElement( 'LI' ); if ( node.dir ) { newLi.dir = node.dir; } // Have we replaced the previous block with a new
- /
- ?
if ( ( prev = node.previousSibling ) && prev.nodeName === type ) {
prev.append( newLi );
detach( node );
}
// Otherwise, replace this block with the
- /
-
else {
node.replaceWith(
createElement( type, null, [
newLi
])
);
}
newLi.append( empty( node ) );
walker.currentNode = newLi;
} else {
node = node.parentNode;
tag = node.nodeName;
if ( tag !== type && ( /^[OU]L$/.test( tag ) ) ) {
node.replaceWith(
createElement( type, null, [ empty( node ) ] )
);
}
}
}
return frag;
},
linkRegExp = /\b(?:((?:(?:ht|f)tps?:\/\/|www\d{0,3}[.]|[a-z0-9][a-z0-9.-]*[.][a-z]{2,}\/)(?:[^\s()<>]+|\([^\s()<>]+\))+(?:[^\s?&`!()[\]{};:'".,<>«»“”‘’]|\([^\s()<>]+\)))|([\w\-.%+]+@(?:[\w-]+\.)+[a-z]{2,}\b(?:[?][^&?\s]+=[^\s?&`!()[\]{};:'".,<>«»“”‘’]+(?:&[^&?\s]+=[^\s?&`!()[\]{};:'".,<>«»“”‘’]+)*)?))/i,
addLinks = ( frag, root ) => {
let walker = createTreeWalker( frag, SHOW_TEXT, node => !getClosest( node, root, 'A' ) );
let 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 = createElement( 'A', mergeObjects({
href: match[1] ?
/^(?:ht|f)tps?:/i.test( match[1] ) ?
match[1] :
'http://' + match[1] :
'mailto:' + match[0]
}, null, false ));
child.textContent = data.slice( index, endIndex );
parent.insertBefore( child, node );
node.data = data = data.slice( endIndex );
}
}
},
escapeHTML = text => text.replace( '&', '&' )
.replace( '<', '<' )
.replace( '>', '>' )
.replace( '"', '"' ),
removeFormatting = ( self, root, clean ) => {
let 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.append( node );
continue;
}
} else if ( isBlock( node ) ) {
clean.append( self.createDefaultBlock([
removeFormatting(
self, node, doc.createDocumentFragment() )
]));
continue;
}
removeFormatting( self, node, clean );
}
return clean;
};
let contentWalker,
nodeCategoryCache = new WeakMap();
// Previous node in post-order.
TreeWalker.prototype.previousPONode = function () {
let current = this.currentNode,
root = this.root,
nodeType = this.nodeType,
filter = this.filter,
node;
while ( current ) {
node = current.lastChild;
while ( !node && current && current !== root) {
node = current.previousSibling;
if ( !node ) { current = current.parentNode; }
}
if ( node && ( typeToBitArray[ node.nodeType ] & nodeType ) && filter( node ) ) {
this.currentNode = node;
return node;
}
current = node;
}
return null;
};
function onKey ( event ) {
if ( event.defaultPrevented ) {
return;
}
let key = event.key.toLowerCase(),
modifiers = '',
range = this.getSelection();
// 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[osKey] ) { modifiers += ctrlKey; }
if ( event.shiftKey ) { modifiers += 'shift-'; }
}
// However, on Windows, shift-delete is apparently "cut" (WTF right?), so
// we want to let the browser handle shift-delete in this situation.
if ( isWin && event.shiftKey && key === 'delete' ) {
modifiers += 'shift-';
}
key = modifiers + key;
if ( this._keyHandlers[ key ] ) {
this._keyHandlers[ key ]( this, event, range );
// !event.isComposing stops us from blatting Kana-Kanji conversion in Safari
} else if ( !range.collapsed && !event.isComposing &&
!event[osKey] &&
key.length === 1 ) {
// Record undo checkpoint.
this.saveUndoState( range );
// Delete the selection
deleteContentsOfRange( range, this._root );
this._ensureBottomLine();
this.setSelection( range );
this._updatePath( range, true );
}
}
function onCut ( event ) {
let range = this.getSelection();
let root = this._root;
let self = this;
let startBlock, endBlock, copyRoot, contents, parent, newContents;
// Nothing to do
if ( range.collapsed ) {
event.preventDefault();
return;
}
// Save undo checkpoint
this.saveUndoState( range );
// Edge only seems to support setting plain text as of 2016-03-11.
if ( !isEdge && event.clipboardData ) {
// Clipboard content should include all parents within block, or all
// parents up to root if selection across blocks
startBlock = getStartBlockOfRange( range, root );
endBlock = getEndBlockOfRange( range, root );
copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root;
// Extract the contents
contents = deleteContentsOfRange( range, root );
// Add any other parents not in extracted content, up to copy root
parent = range.commonAncestorContainer;
if ( parent.nodeType === TEXT_NODE ) {
parent = parent.parentNode;
}
while ( parent && parent !== copyRoot ) {
newContents = parent.cloneNode( false );
newContents.append( contents );
contents = newContents;
parent = parent.parentNode;
}
// Set clipboard data
setClipboardData( event, contents, root );
} else {
setTimeout( () => {
try {
// If all content removed, ensure div at start of root.
self._ensureBottomLine();
} catch ( error ) {
didError( error );
}
}, 0 );
}
this.setSelection( range );
}
function onCopy ( event ) {
// Edge only seems to support setting plain text as of 2016-03-11.
if ( !isEdge && event.clipboardData ) {
let range = this.getSelection(), root = this._root,
// Clipboard content should include all parents within block, or all
// parents up to root if selection across blocks
startBlock = getStartBlockOfRange( range, root ),
endBlock = getEndBlockOfRange( range, root ),
copyRoot = ( ( startBlock === endBlock ) && startBlock ) || root,
contents, parent, newContents;
// Clone range to mutate, then move up as high as possible without
// passing the copy root node.
range = range.cloneRange();
moveRangeBoundariesDownTree( range );
moveRangeBoundariesUpTree( range, copyRoot, copyRoot, root );
// Extract the contents
contents = range.cloneContents();
// Add any other parents not in extracted content, up to copy root
parent = range.commonAncestorContainer;
if ( parent.nodeType === TEXT_NODE ) {
parent = parent.parentNode;
}
while ( parent && parent !== copyRoot ) {
newContents = parent.cloneNode( false );
newContents.append( contents );
contents = newContents;
parent = parent.parentNode;
}
// Set clipboard data
setClipboardData( event, contents, root );
}
}
// Need to monitor for shift key like this, as event.shiftKey is not available
// in paste event.
function monitorShiftKey ( event ) {
this.isShiftDown = event.shiftKey;
}
function onPaste ( event ) {
let clipboardData = event.clipboardData;
let items = clipboardData && clipboardData.items;
let choosePlain = this.isShiftDown;
let fireDrop = false;
let hasRTF = false;
let hasImage = false;
let plainItem = null;
let htmlItem = null;
let self = this;
let l, item, type, types, data;
// Current HTML5 Clipboard interface
// ---------------------------------
// https://html.spec.whatwg.org/multipage/interaction.html
if ( items ) {
l = items.length;
while ( l-- ) {
item = items[l];
type = item.type;
if ( type === 'text/html' ) {
htmlItem = item;
// iOS copy URL gives you type text/uri-list which is just a list
// of 1 or more URLs separated by new lines. Can just treat as
// plain text.
} else if ( type === 'text/plain' || type === 'text/uri-list' ) {
plainItem = item;
} else if ( type === 'text/rtf' ) {
hasRTF = true;
} else if ( /^image\/.*/.test( type ) ) {
hasImage = true;
}
}
// Treat image paste as a drop of an image file. When you copy
// an image in Chrome/Firefox (at least), it copies the image data
// but also an HTML version (referencing the original URL of the image)
// and a plain text version.
//
// However, when you copy in Excel, you get html, rtf, text, image;
// in this instance you want the html version! So let's try using
// the presence of text/rtf as an indicator to choose the html version
// over the image.
if ( hasImage && !( hasRTF && htmlItem ) ) {
event.preventDefault();
this.fireEvent( 'dragover', {
dataTransfer: clipboardData,
/*jshint loopfunc: true */
preventDefault: () => fireDrop = true
/*jshint loopfunc: false */
});
if ( fireDrop ) {
this.fireEvent( 'drop', {
dataTransfer: clipboardData
});
}
return;
}
// Edge only provides access to plain text as of 2016-03-11 and gives no
// indication there should be an HTML part. However, it does support
// access to image data, so we check for that first. Otherwise though,
// fall through to fallback clipboard handling methods
if ( !isEdge ) {
event.preventDefault();
if ( htmlItem && ( !choosePlain || !plainItem ) ) {
htmlItem.getAsString( html => self.insertHTML( html, true ) );
} else if ( plainItem ) {
plainItem.getAsString( text => self.insertPlainText( text, true ) );
}
return;
}
}
// 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*.
types = clipboardData && clipboardData.types;
if ( !isEdge && types && (
indexOf( types, 'text/html' ) > -1 || (
!isGecko &&
indexOf( types, 'text/plain' ) > -1 &&
indexOf( 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. On iOS, Facebook (and possibly other
// apps?) copy links as type text/uri-list, but also insert a **blank**
// text/plain item onto the clipboard. Why? Who knows.
if ( !choosePlain && ( data = clipboardData.getData( 'text/html' ) ) ) {
this.insertHTML( data, true );
} else if (
( data = clipboardData.getData( 'text/plain' ) ) ||
( data = clipboardData.getData( 'text/uri-list' ) ) ) {
this.insertPlainText( data, true );
}
return;
}
}
// On Windows you can drag an drop text. We can't handle this ourselves, because
// as far as I can see, there's no way to get the drop insertion point. So just
// save an undo state and hope for the best.
function onDrop ( event ) {
let types = event.dataTransfer.types;
let l = types.length;
let hasPlain = false;
let hasHTML = false;
while ( l-- ) {
switch ( types[l] ) {
case 'text/plain':
hasPlain = true;
break;
case 'text/html':
hasHTML = true;
break;
default:
return;
}
}
if ( hasHTML || hasPlain ) {
this.saveUndoState();
}
}
let keyHandlers = {
// This song and dance is to force iOS to do enable the shift key
// automatically on enter. When you do the DOM split manipulation yourself,
// WebKit doesn't reset the IME state and so presents auto-complete options
// as though you were continuing to type on the previous line, and doesn't
// auto-enable the shift key. The old trick of blurring and focussing
// again no longer works in iOS 13, and I tried various execCommand options
// but they didn't seem to do anything. The only solution I've found is to
// let iOS handle the enter key, then after it's done that reset the HTML
// to what it was before and handle it properly in Squire; the IME state of
// course doesn't reset so you end up in the correct state!
enter: isIOS ? ( self, event, range ) => {
self._saveRangeToBookmark( range );
let html = self._getHTML();
let restoreAndDoEnter = () => {
self.removeEventListener( 'keyup', restoreAndDoEnter );
self._setHTML( html );
range = self._getRangeAndRemoveBookmark();
// Ignore the shift key on iOS, as this is for auto-capitalisation.
handleEnter( self, false, range );
};
self.addEventListener( 'keyup', restoreAndDoEnter );
} : ( self, event, range ) => {
event.preventDefault();
handleEnter( self, event.shiftKey, range );
},
'shift-enter': ( self, event, range ) => self._keyHandlers.enter( self, event, range ),
backspace: ( self, event, range ) => {
let root = self._root;
self._removeZWS();
// Record undo checkpoint.
self.saveUndoState( range );
// If not collapsed, delete contents
if ( !range.collapsed ) {
event.preventDefault();
deleteContentsOfRange( range, root );
afterDelete( self, range );
}
// If at beginning of block, merge with previous
else if ( rangeDoesStartAtBlockBoundary( range, root ) ) {
event.preventDefault();
let current = getStartBlockOfRange( range, root );
let previous;
if ( !current ) {
return;
}
// In case inline data has somehow got between blocks.
fixContainer( current.parentNode, root );
// Now get previous block
previous = getPreviousBlock( current, root );
// Must not be at the very beginning of the text area.
if ( previous ) {
// If not editable, just delete whole block.
if ( !previous.isContentEditable ) {
detachUneditableNode( previous, root );
return;
}
// Otherwise merge.
mergeWithBlock( previous, current, range, root );
// If deleted line between containers, merge newly adjacent
// containers.
current = previous.parentNode;
while ( current !== root && !current.nextSibling ) {
current = current.parentNode;
}
if ( current !== root && ( current = current.nextSibling ) ) {
mergeContainers( current, root );
}
self.setSelection( range );
}
// If at very beginning of text area, allow backspace
// to break lists/blockquote.
else if ( current ) {
let parent = getClosest( current, root, 'UL,OL,BLOCKQUOTE' );
if (parent) {
return ( 'BLOCKQUOTE' === parent.nodeName )
// Break blockquote
? self.decreaseQuoteLevel( range )
// Break list
: self.decreaseListLevel( range );
}
self.setSelection( range );
self._updatePath( range, true );
}
}
// Otherwise, leave to browser but check afterwards whether it has
// left behind an empty inline tag.
else {
self.setSelection( range );
setTimeout( () => afterDelete( self ), 0 );
}
},
'delete': ( self, event, range ) => {
let root = self._root;
let current, next, originalRange,
cursorContainer, cursorOffset, nodeAfterCursor;
self._removeZWS();
// Record undo checkpoint.
self.saveUndoState( range );
// If not collapsed, delete contents
if ( !range.collapsed ) {
event.preventDefault();
deleteContentsOfRange( range, root );
afterDelete( self, range );
}
// If at end of block, merge next into this block
else if ( rangeDoesEndAtBlockBoundary( range, root ) ) {
event.preventDefault();
current = getStartBlockOfRange( range, root );
if ( !current ) {
return;
}
// In case inline data has somehow got between blocks.
fixContainer( current.parentNode, root );
// Now get next block
next = getNextBlock( current, root );
// Must not be at the very end of the text area.
if ( next ) {
// If not editable, just delete whole block.
if ( !next.isContentEditable ) {
detachUneditableNode( next, root );
return;
}
// Otherwise merge.
mergeWithBlock( current, next, range, root );
// If deleted line between containers, merge newly adjacent
// containers.
next = current.parentNode;
while ( next !== root && !next.nextSibling ) {
next = next.parentNode;
}
if ( next !== root && ( next = next.nextSibling ) ) {
mergeContainers( next, root );
}
self.setSelection( range );
self._updatePath( range, true );
}
}
// Otherwise, leave to browser but check afterwards whether it has
// left behind an empty inline tag.
else {
// 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.
originalRange = range.cloneRange();
moveRangeBoundariesUpTree( range, root, root, root );
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( () => afterDelete( self ), 0 );
}
},
tab: ( self, event, range ) => {
let root = self._root;
let node, parent;
self._removeZWS();
// If no selection and at start of block
if ( range.collapsed && rangeDoesStartAtBlockBoundary( range, root ) ) {
node = getStartBlockOfRange( range, root );
// Iterate through the block's parents
while ( ( parent = node.parentNode ) ) {
// If we find a UL or OL (so are in a list, node must be an LI)
if ( parent.nodeName === 'UL' || parent.nodeName === 'OL' ) {
// Then increase the list level
event.preventDefault();
self.increaseListLevel( range );
break;
}
node = parent;
}
}
},
'shift-tab': ( self, event, range ) => {
let root = self._root;
let node;
self._removeZWS();
// If no selection and at start of block
if ( range.collapsed && rangeDoesStartAtBlockBoundary( range, root ) ) {
// Break list
node = range.startContainer;
if ( getClosest( node, root, 'UL,OL' ) ) {
event.preventDefault();
self.decreaseListLevel( range );
}
}
},
space: ( self, _, range ) => {
let node;
let root = self._root;
self._recordUndoState( range );
if ( self._config.addLinks ) {
addLinks( range.startContainer, root, self );
}
self._getRangeAndRemoveBookmark( range );
// If the cursor is at the end of a link (foo|) then move it
// outside of the link (foo|) so that the space is not part of
// the link text.
node = range.endContainer;
if ( range.collapsed && range.endOffset === getLength( node ) ) {
do {
if ( node.nodeName === 'A' ) {
range.setStartAfter( node );
break;
}
} while ( !node.nextSibling &&
( node = node.parentNode ) && node !== root );
}
// Delete the selection if not collapsed
if ( !range.collapsed ) {
deleteContentsOfRange( range, root );
self._ensureBottomLine();
self.setSelection( range );
self._updatePath( range, true );
}
self.setSelection( range );
},
arrowleft: self => self._removeZWS(),
arrowright: self => self._removeZWS()
};
// 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.
function _moveCursorTo( self, toStart ) {
let root = self._root,
range = createRange( root, toStart ? 0 : root.childNodes.length );
moveRangeBoundariesDownTree( range );
self.setSelection( range );
return self;
}
if ( !isMac ) {
keyHandlers.pageup = self => _moveCursorTo( self, true );
keyHandlers.pagedown = self => _moveCursorTo( self, false );
}
keyHandlers[ ctrlKey + 'b' ] = mapKeyToFormat( 'B' );
keyHandlers[ ctrlKey + 'i' ] = mapKeyToFormat( 'I' );
keyHandlers[ ctrlKey + 'u' ] = mapKeyToFormat( 'U' );
keyHandlers[ ctrlKey + 'shift-7' ] = mapKeyToFormat( 'S' );
keyHandlers[ ctrlKey + 'shift-5' ] = mapKeyToFormat( 'SUB', 'SUP' );
keyHandlers[ ctrlKey + 'shift-6' ] = mapKeyToFormat( 'SUP', 'SUB' );
keyHandlers[ ctrlKey + 'shift-8' ] = toggleList( 'UL', 'makeUnorderedList' );
keyHandlers[ ctrlKey + 'shift-9' ] = toggleList( 'OL', 'makeOrderedList' );
keyHandlers[ ctrlKey + '[' ] = changeIndentationLevel( 'decrease' );
keyHandlers[ ctrlKey + ']' ] = changeIndentationLevel( 'increase' );
keyHandlers[ ctrlKey + 'd' ] = mapKeyTo( 'toggleCode' );
keyHandlers[ ctrlKey + 'y' ] = mapKeyTo( 'redo' );
keyHandlers[ 'redo' ] = mapKeyTo( 'redo' );
keyHandlers[ ctrlKey + 'z' ] = mapKeyTo( 'undo' );
keyHandlers[ 'undo' ] = mapKeyTo( 'undo' );
keyHandlers[ ctrlKey + 'shift-z' ] = mapKeyTo( 'redo' );
class Squire
{
constructor (root, config) {
this._root = root;
this._events = {};
this._isFocused = false;
this._lastRange = null;
this._hasZWS = false;
this._lastAnchorNode = null;
this._lastFocusNode = null;
this._path = '';
let _willUpdatePath;
const selectionchange = () => {
if (root.contains(doc.activeElement)) {
if ( this._isFocused && !_willUpdatePath ) {
_willUpdatePath = setTimeout( () => {
_willUpdatePath = 0;
this._updatePath( this.getSelection() );
}, 0 );
}
} else {
this.removeEventListener('selectionchange', selectionchange);
}
};
this.addEventListener('selectstart', () => this.addEventListener('selectionchange', selectionchange));
this._undoIndex = -1;
this._undoStack = [];
this._undoStackLength = 0;
this._isInUndoState = false;
this._ignoreChange = false;
this._ignoreAllChanges = false;
this._mutation = new MutationObserver( ()=>this._docWasChanged() );
this._mutation.observe( root, {
childList: true,
attributes: true,
characterData: true,
subtree: true
});
// On blur, restore focus except if the user taps or clicks to focus a
// specific point. Can't actually use click event because focus happens
// before click, so use mousedown/touchstart
this._restoreSelection = false;
// https://caniuse.com/mdn-api_document_pointerup_event
this.addEventListener( 'blur', () => this._restoreSelection = true )
.addEventListener( 'pointerdown mousedown touchstart', () => this._restoreSelection = false )
.addEventListener( 'focus', () => this._restoreSelection && this.setSelection( this._lastRange ) )
.addEventListener( 'cut', onCut )
.addEventListener( 'copy', onCopy )
.addEventListener( 'keydown keyup', monitorShiftKey )
.addEventListener( 'paste', onPaste )
.addEventListener( 'drop', onDrop )
.addEventListener( 'keydown', onKey )
.addEventListener( 'pointerup keyup mouseup touchend', ()=>this.getSelection() );
// Add key handlers
this._keyHandlers = Object.create( keyHandlers );
// Override default properties
this.setConfig( config );
root.setAttribute( 'contenteditable', 'true' );
// Grammarly breaks the editor, *sigh*
root.setAttribute( 'data-gramm', 'false' );
// Remove Firefox's built-in controls
try {
doc.execCommand( 'enableObjectResizing', false, 'false' );
doc.execCommand( 'enableInlineTableEditing', false, 'false' );
} catch ( error ) {}
root.__squire__ = this;
// Need to register instance before calling setHTML, so that the fixCursor
// function can lookup any default block tag options set.
this.setHTML( '' );
}
setConfig ( config ) {
config = mergeObjects({
blockTag: 'DIV',
undo: {
documentSizeThreshold: -1, // -1 means no threshold
undoLimit: -1 // -1 means no limit
},
sanitizeToDOMFragment: null,
addLinks: true
}, config, true );
// Users may specify block tag in lower case
config.blockTag = config.blockTag.toUpperCase();
this._config = config;
return this;
}
createDefaultBlock ( children ) {
let config = this._config;
return fixCursor(
createElement( config.blockTag, null, children ),
this._root
);
}
getRoot () {
return this._root;
}
modifyDocument ( modificationCallback ) {
let mutation = this._mutation;
if ( mutation ) {
if ( mutation.takeRecords().length ) {
this._docWasChanged();
}
mutation.disconnect();
}
this._ignoreAllChanges = true;
modificationCallback();
this._ignoreAllChanges = false;
if ( mutation ) {
mutation.observe( this._root, {
childList: true,
attributes: true,
characterData: true,
subtree: true
});
this._ignoreChange = false;
}
}
// --- Events ---
fireEvent ( type, event ) {
let handlers = this._events[ type ];
let isFocused, l, obj;
// UI code, especially modal views, may be monitoring for focus events and
// immediately removing focus. In certain conditions, this can cause the
// focus event to fire after the blur event, which can cause an infinite
// loop. So we detect whether we're actually focused/blurred before firing.
if ( /^(?:focus|blur)/.test( type ) ) {
isFocused = this._root === doc.activeElement;
if ( type === 'focus' ) {
if ( !isFocused || this._isFocused ) {
return this;
}
this._isFocused = true;
} else {
if ( isFocused || !this._isFocused ) {
return this;
}
this._isFocused = false;
}
}
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;
didError( error );
}
}
}
return this;
}
destroy () {
let events = this._events;
let type;
for ( type in events ) {
this.removeEventListener( type );
}
if ( this._mutation ) {
this._mutation.disconnect();
}
delete this._root.__squire__;
// Destroy undo stack
this._undoIndex = -1;
this._undoStack = [];
this._undoStackLength = 0;
}
handleEvent ( event ) {
this.fireEvent( event.type, event );
}
addEventListener ( type, fn ) {
type.split(/\s+/).forEach(type=>{
let handlers = this._events[ type ],
target = this._root;
if ( !fn ) {
didError({
name: 'Squire: addEventListener with null or undefined fn',
message: 'Event type: ' + type
});
return this;
}
if ( !handlers ) {
handlers = this._events[ type ] = [];
if ( !customEvents[ type ] ) {
if ( type === 'selectionchange' ) {
target = doc;
}
target.addEventListener( type, this, {capture:true,passive:'touchstart'===type} );
}
}
handlers.push( fn );
});
return this;
}
removeEventListener ( type, fn ) {
let handlers = this._events[ type ];
let target = this._root;
let l;
if ( handlers ) {
if ( fn ) {
l = handlers.length;
while ( l-- ) {
if ( handlers[l] === fn ) {
handlers.splice( l, 1 );
}
}
} else {
handlers.length = 0;
}
if ( !handlers.length ) {
delete this._events[ type ];
if ( !customEvents[ type ] ) {
if ( type === 'selectionchange' ) {
target = doc;
}
target.removeEventListener( type, this, true );
}
}
}
return this;
}
// --- Selection and Path ---
getCursorPosition ( range ) {
if ( ( !range && !( range = this.getSelection() ) ) ||
!range.getBoundingClientRect ) {
return null;
}
// Get the bounding rect
let rect = range.getBoundingClientRect();
let node, parent;
if ( rect && !rect.top ) {
this._ignoreChange = true;
node = createElement( 'SPAN' );
node.textContent = ZWS;
insertNodeInRange( range, node );
rect = node.getBoundingClientRect();
parent = node.parentNode;
node.remove( );
mergeInlines( parent, range );
}
return rect;
}
setSelection ( range ) {
if ( range ) {
this._lastRange = range;
// If we're setting selection, that automatically, and synchronously, // triggers a focus event. So just store the selection and mark it as
// needing restore on focus.
if ( !this._isFocused ) {
this._restoreSelection = true;
} else {
// 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 ) {
win.focus();
}
let sel = win.getSelection();
if ( sel && sel.setBaseAndExtent ) {
sel.setBaseAndExtent(
range.startContainer,
range.startOffset,
range.endContainer,
range.endOffset,
);
} else if ( sel ) {
// This is just for IE11
sel.removeAllRanges();
sel.addRange( range );
}
}
}
return this;
}
getSelection () {
let sel = win.getSelection();
let root = this._root;
let range, startContainer, endContainer, node;
// If not focused, always rely on cached range; another function may
// have set it but the DOM is not modified until focus again
if ( this._isFocused && sel && sel.rangeCount ) {
range = sel.getRangeAt( 0 ).cloneRange();
startContainer = range.startContainer;
endContainer = range.endContainer;
// FF can return the range as being inside an
. // 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 = createTreeWalker( range.commonAncestorContainer, SHOW_TEXT|SHOW_ELEMENT, node => ( node.nodeType === TEXT_NODE || node.nodeName === 'BR' || node.nodeName === 'IMG' ) && isNodeContainedInRange( range, node ) ); // 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 ( filterAccept != walker.filter.acceptNode( startContainer ) ) { startContainer = walker.nextNode(); startOffset = 0; } // If there are no interesting nodes in the selection, abort if ( !startContainer ) { return range; } do { node = walker.currentNode; needsFormat = !getNearest( node, root, tag, attributes ); if ( needsFormat ) { //
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 = createElement( tag, attributes ); node.replaceWith( el ); el.append( node ); } } while ( 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; } else { // If
, we must have just wrapped it, so it must have only // one child endContainer = node.parentNode; endOffset = 1; } } // Now set the selection to as it was before range = createRange( startContainer, startOffset, endContainer, endOffset ); } return range; } _removeFormat ( tag, attributes, range, partial ) { // Add bookmark this._saveRangeToBookmark( range ); // We need a node in the selection to break the surrounding // formatted text. let fixer; if ( range.collapsed ) { fixer = this._addZWS(); insertNodeInRange( range, fixer ); } // Find block-level ancestor of selection let root = range.commonAncestorContainer; while ( isInline( root ) ) { root = root.parentNode; } // Find text nodes inside formatTags that are not in selection and // add an extra tag with the same formatting. let startContainer = range.startContainer, startOffset = range.startOffset, endContainer = range.endContainer, endOffset = range.endOffset, toWrap = [], examineNode = ( 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; } let isText = ( node.nodeType === TEXT_NODE ), child, next; // If not at least partially contained, wrap entire contents // in a clone of the tag we're removing and we're done. if ( !isNodeContainedInRange( range, node ) ) { // Ignore bookmarks and empty text nodes if ( node.nodeName !== 'INPUT' && ( !isText || node.data ) ) { toWrap.push([ exemplar, node ]); } return; } // Split any partially selected text nodes. if ( isText ) { if ( node === endContainer && endOffset !== node.length ) { toWrap.push([ exemplar, node.splitText( endOffset ) ]); } if ( node === startContainer && startOffset ) { node.splitText( startOffset ); toWrap.push([ exemplar, node ]); } } // If not a text node, recurse onto all children. // Beware, the tree may be rewritten with each call // to examineNode, hence find the next sibling first. else { for ( child = node.firstChild; child; child = next ) { next = child.nextSibling; examineNode( child, exemplar ); } } }, formatTags = Array.prototype.filter.call( root.getElementsByTagName( tag ), el => isNodeContainedInRange( range, el ) && hasTagAttributes( el, tag, attributes ) ); if ( !partial ) { formatTags.forEach( node => examineNode( node, node ) ); } // Now wrap unselected nodes in the tag toWrap.forEach( item => { // [ exemplar, node ] tuple let el = item[0].cloneNode( false ), node = item[1]; node.replaceWith( el ); el.append( node ); }); // and remove old formatting tags. formatTags.forEach( el => el.replaceWith( empty( el ) ) ); // Merge adjacent inlines: this._getRangeAndRemoveBookmark( range ); if ( fixer ) { range.collapse( false ); } mergeInlines( root, range ); return range; } toggleTag ( name, remove ) { let range = this.getSelection(); if ( this.hasFormat( name, null, range ) ) { this.changeFormat ( null, { tag: name }, range ); } else { this.changeFormat ( { tag: name }, remove ? { tag: remove } : null, range ); } } changeFormat ( add, remove, range, partial ) { // Normalise the arguments and get selection if ( !range && !( range = this.getSelection() ) ) { return this; } // Save undo checkpoint this.saveUndoState( 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 ); return this; } // --- Block formatting --- forEachBlock ( fn, range ) { if ( !range && !( range = this.getSelection() ) ) { return this; } // Save undo checkpoint this.saveUndoState( range ); let root = this._root; let start = getStartBlockOfRange( range, root ); let end = getEndBlockOfRange( range, root ); if ( start && end ) { do { if ( fn( start ) || start === end ) { break; } } while ( start = getNextBlock( start, root ) ); } this.setSelection( range ); // Path may have changed this._updatePath( range, true ); return this; } modifyBlocks ( modify, range ) { if ( !range && !( range = this.getSelection() ) ) { return this; } // 1. Save undo checkpoint and bookmark selection this._recordUndoState( range, this._isInUndoState ); let root = this._root; let frag; // 2. Expand range to block boundaries expandRangeToBlockBoundaries( range, root ); // 3. Remove range. moveRangeBoundariesUpTree( range, root, root, root ); frag = extractContentsOfRange( range, root, root ); // 4. Modify tree of fragment and reinsert. insertNodeInRange( range, modify.call( this, frag ) ); // 5. Merge containers at edges if ( range.endOffset < range.endContainer.childNodes.length ) { mergeContainers( range.endContainer.childNodes[ range.endOffset ], root ); } mergeContainers( range.startContainer.childNodes[ range.startOffset ], root ); // 6. Restore selection this._getRangeAndRemoveBookmark( range ); this.setSelection( range ); this._updatePath( range, true ); return this; } increaseListLevel ( range ) { if ( !range && !( range = this.getSelection() ) ) { return this.focus(); } let root = this._root; let listSelection = getListSelection( range, root ); if ( !listSelection ) { return this.focus(); } let list = listSelection[0]; let startLi = listSelection[1]; let endLi = listSelection[2]; if ( !startLi || startLi === list.firstChild ) { return this.focus(); } // Save undo checkpoint and bookmark selection this._recordUndoState( range, this._isInUndoState ); // Increase list depth let type = list.nodeName; let newParent = startLi.previousSibling; let next; if ( newParent.nodeName !== type ) { newParent = createElement( type ); startLi.before( newParent ); } do { next = startLi === endLi ? null : startLi.nextSibling; newParent.append( startLi ); } while ( ( startLi = next ) ); next = newParent.nextSibling; if ( next ) { mergeContainers( next, root ); } // Restore selection this._getRangeAndRemoveBookmark( range ); this.setSelection( range ); this._updatePath( range, true ); return this.focus(); } decreaseListLevel ( range ) { if ( !range && !( range = this.getSelection() ) ) { return this.focus(); } let root = this._root; let listSelection = getListSelection( range, root ); if ( !listSelection ) { return this.focus(); } let list = listSelection[0]; let startLi = listSelection[1]; let endLi = listSelection[2]; let newParent, next, insertBefore, makeNotList; if ( !startLi ) { startLi = list.firstChild; } if ( !endLi ) { endLi = list.lastChild; } // Save undo checkpoint and bookmark selection this._recordUndoState( range, this._isInUndoState ); if ( startLi ) { // Find the new parent list node newParent = list.parentNode; // Split list if necesary insertBefore = !endLi.nextSibling ? list.nextSibling : split( list, endLi.nextSibling, newParent, root ); if ( newParent !== root && newParent.nodeName === 'LI' ) { newParent = newParent.parentNode; while ( insertBefore ) { next = insertBefore.nextSibling; endLi.append( insertBefore ); insertBefore = next; } insertBefore = list.parentNode.nextSibling; } makeNotList = !/^[OU]L$/.test( newParent.nodeName ); do { next = startLi === endLi ? null : startLi.nextSibling; startLi.remove( ); if ( makeNotList && startLi.nodeName === 'LI' ) { startLi = this.createDefaultBlock([ empty( startLi ) ]); } newParent.insertBefore( startLi, insertBefore ); } while (( startLi = next )); } if ( !list.firstChild ) { detach( list ); } if ( insertBefore ) { mergeContainers( insertBefore, root ); } // Restore selection this._getRangeAndRemoveBookmark( range ); this.setSelection( range ); this._updatePath( range, true ); return this.focus(); } _ensureBottomLine () { let root = this._root; let last = root.lastElementChild; if ( !last || last.nodeName !== this._config.blockTag || !isBlock( last ) ) { root.append( this.createDefaultBlock() ); } } // --- Keyboard interaction --- setKeyHandler ( key, fn ) { this._keyHandlers[ key ] = fn; return this; } // --- Get/Set data --- _getHTML () { return this._root.innerHTML; } _setHTML ( html ) { let root = this._root; let node = root; node.innerHTML = html; do { fixCursor( node, root ); } while ( node = getNextBlock( node, root ) ); this._ignoreChange = true; } getHTML ( withBookMark ) { let html, range; if ( withBookMark && ( range = this.getSelection() ) ) { this._saveRangeToBookmark( range ); } html = this._getHTML().replace( /\u200B/g, '' ); if ( range ) { this._getRangeAndRemoveBookmark( range ); } return html; } setHTML ( html ) { let config = this._config; let sanitizeToDOMFragment = config.sanitizeToDOMFragment; let root = this._root; let div, frag, child; // Parse HTML into DOM tree if ( typeof sanitizeToDOMFragment === 'function' ) { frag = sanitizeToDOMFragment( html, false, this ); } else { div = createElement( 'DIV' ); div.innerHTML = html; frag = doc.createDocumentFragment(); frag.append( empty( div ) ); } cleanTree( frag, config ); cleanupBRs( frag, root, false ); fixContainer( frag, root ); // Fix cursor let node, walker = getBlockWalker( frag, root ); while ( (node = walker.nextNode()) && node !== root ) { fixCursor( node, root ); } // Don't fire an input event this._ignoreChange = true; // Remove existing root children while ( child = root.lastChild ) { child.remove( ); } // And insert new content root.append( frag ); fixCursor( root, root ); // Reset the undo stack this._undoIndex = -1; this._undoStack.length = 0; this._undoStackLength = 0; this._isInUndoState = false; // Record undo state let range = this._getRangeAndRemoveBookmark() || createRange( root.firstChild, 0 ); this.saveUndoState( range ); // IE will also set focus when selecting text so don't use // setSelection. Instead, just store it in lastSelection, so if // anything calls getSelection before first focus, we have a range // to return. this._lastRange = range; this._restoreSelection = true; this._updatePath( range, true ); return this; } insertElement ( el, range ) { if ( !range ) { range = this.getSelection(); } range.collapse( true ); if ( isInline( el ) ) { insertNodeInRange( range, el ); range.setStartAfter( el ); } else { // Get containing block node. let root = this._root; let splitNode = getStartBlockOfRange( range, root ) || root; let parent, nodeAfterSplit; // While at end of container node, move up DOM tree. while ( splitNode !== root && !splitNode.nextSibling ) { splitNode = splitNode.parentNode; } // If in the middle of a container node, split up to root. if ( splitNode !== root ) { parent = splitNode.parentNode; nodeAfterSplit = split( parent, splitNode.nextSibling, root, root ); } if ( nodeAfterSplit ) { nodeAfterSplit.before( el ); } else { root.append( el ); // Insert blank line below block. nodeAfterSplit = this.createDefaultBlock(); root.append( nodeAfterSplit ); } range.setStart( nodeAfterSplit, 0 ); range.setEnd( nodeAfterSplit, 0 ); moveRangeBoundariesDownTree( range ); } this.focus(); this.setSelection( range ); this._updatePath( range ); return this; } insertImage ( src, attributes ) { let img = createElement( 'IMG', mergeObjects({ src: src }, attributes, true )); this.insertElement( img ); return img; } // 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. insertHTML ( html, isPaste ) { let config = this._config; let sanitizeToDOMFragment = config.sanitizeToDOMFragment; let range = this.getSelection(); let startFragmentIndex, endFragmentIndex; let div, frag, root, node, event; // Edge doesn't just copy the fragment, but includes the surrounding guff // including the full of the page. Need to strip this out. if ( isPaste ) { startFragmentIndex = html.indexOf( '' ); endFragmentIndex = html.lastIndexOf( '' ); if ( startFragmentIndex > -1 && endFragmentIndex > -1 ) { html = html.slice( startFragmentIndex + 20, endFragmentIndex ); } } if ( typeof sanitizeToDOMFragment === 'function' ) { frag = sanitizeToDOMFragment( html, isPaste, this ); } else { // Wrap with