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, false ); 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?.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 (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, family ) => createElement( 'SPAN', { style: 'font-family:' + family }) }, fontSize: { regexp: notWS, replace: ( doc, 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 => { let style = node.style; let css, newTreeBottom, newTreeTop, el; Object.entries(styleToSemantic).forEach(([attr,converter])=>{ css = style[ attr ]; if ( css && converter.regexp.test( css ) ) { el = converter.replace( doc, css ); if ( el.nodeName === node.nodeName && el.className === node.className ) { return; } 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)/, /* // Previous node in post-order. previousPONode = walker => { let current = walker.currentNode, root = walker.root, nodeType = walker.nodeType, // whatToShow? filter = walker.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 ) ) { walker.currentNode = node; return node; } current = node; } return null; }, */ /* 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 l = brs.length; let br, parent; 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 ( !isLineBreak( br, keepForBlankLine ) ) { 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).replace( NBSP, ' ' ); // Replace nbsp with regular space node.remove( ); if ( text !== html ) { clipboardData.setData( 'text/html', html ); } clipboardData.setData( 'text/plain', text ); event.preventDefault(); }, mergeObjects = ( base, extras, mayOverride ) => { base = base || {}; extras && Object.entries(extras).forEach(([prop,value])=>{ if ( mayOverride || !( prop in base ) ) { base[ prop ] = ( 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 ] || self._config.blockTag, nodeAfterSplit = split( node, offset, block.parentNode, self._root ); // 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 l = brs.length; let br, parent; 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 ( !isLineBreak( br, keepForBlankLine ) ) { 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).replace( NBSP, ' ' ); // Replace nbsp with regular space node.remove( ); if ( text !== html ) { clipboardData.setData( 'text/html', html ); } clipboardData.setData( 'text/plain', text ); event.preventDefault(); }, mergeObjects = ( base, extras, mayOverride ) => { base = base || {}; extras && Object.entries(extras).forEach(([prop,value])=>{ if ( mayOverride || !( prop in base ) ) { base[ prop ] = ( 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 ] || self._config.blockTag, nodeAfterSplit = split( node, offset, block.parentNode, self._root ); // 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( '"', '"' );
let contentWalker,
nodeCategoryCache = new WeakMap();
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-'; }
}
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 ( 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 ( 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 );
}
}
function onPaste ( event ) {
let clipboardData = event.clipboardData;
let items = clipboardData?.items;
let imageItem = null;
let plainItem = null;
let htmlItem = null;
let self = this;
let type;
// Current HTML5 Clipboard interface
// ---------------------------------
// https://html.spec.whatwg.org/multipage/interaction.html
if ( items ) {
[...items].forEach(item => {
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 ( item.kind === 'file' && /^image\/(png|jpeg|webp)/.test( type ) ) {
imageItem = item;
}
});
if (htmlItem || plainItem || imageItem) {
event.preventDefault();
if ( htmlItem && ( !self.isShiftDown || !plainItem ) ) {
htmlItem.getAsString( html => self.insertHTML( html, true ) );
} else if ( plainItem ) {
plainItem.getAsString( text => self.insertPlainText( text, true ) );
} else if ( imageItem ) {
let reader = new FileReader();
reader.onload = event =>
self.insertHTML( '
. // 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_ELEMENT_OR_TEXT, 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 interesting nodes in the selection if ( startContainer ) { do { node = walker.currentNode; if ( !getNearest( node, root, tag, attributes ) ) { //
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 ) ); partial || formatTags.forEach( node => examineNode( node, node ) ); // Now wrap unselected nodes in the tag toWrap.forEach( ([exemplar, node]) => { let el = exemplar.cloneNode( false ); node.replaceWith( el ); el.append( node ); }); // and remove old formatting tags. formatTags.forEach( el => el.replaceWith( empty( el ) ) ); // Merge adjacent inlines: this._getRangeAndRemoveBookmark( range ); 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() ) ) { // 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() ) ) { // 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() ) ) { // 1. Save undo checkpoint and bookmark selection this._recordUndoState( range ); 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() ) ) { let root = this._root; let listSelection = getListSelection( range, root ); if ( listSelection ) { let list = listSelection[0]; let startLi = listSelection[1]; let endLi = listSelection[2]; if ( startLi && startLi !== list.firstChild ) { // Save undo checkpoint and bookmark selection this._recordUndoState( range ); // 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; 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() ) ) { let root = this._root; let listSelection = getListSelection( range, root ); if ( listSelection ) { let list = listSelection[0]; let startLi = listSelection[1] || list.firstChild; let endLi = listSelection[2] || list.lastChild; let newParent, next, insertBefore, makeNotList; // Save undo checkpoint and bookmark selection this._recordUndoState( range ); 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 )); } list.firstChild || detach( list ); 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() ); } } // --- Get/Set data --- _getHTML () { return this._root.innerHTML; } _setHTML ( html ) { let root = this._root; let node = root; let sanitizeToDOMFragment = this._config.sanitizeToDOMFragment; if ( sanitizeToDOMFragment ) { empty( node ); node.appendChild( sanitizeToDOMFragment( html, false, this ) ); } else { 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, '' ); 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 ( sanitizeToDOMFragment ) { 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.editStack.clear(); // 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 ( sanitizeToDOMFragment ) { frag = sanitizeToDOMFragment( html, isPaste, this ); } else { // Wrap with