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); 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 (isElement(nodeAfterSplit)) { 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 ] || 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
' wrapper, move selection to here
range = createRange(nextElement, 0);
} else {
// create a new wrapper
range = createRange(this._root.insertBefore(
this.createDefaultBlock(), nextElement
), 0);
if (nextElement.tagName === 'BR') {
// delete it because 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 ] || 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;
},
setDirection = (self, frag, dir) => {
let walker = getBlockWalker(frag, self._root),
node;
while(node = walker.nextNode()){
if (node.nodeName === "LI") {
node.parentNode.setAttribute("dir", dir);
break;
}
node.setAttribute("dir", dir);
}
return frag;
},
linkRegExp = /\b(?:((https?:\/\/)?(?: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', {
href: match[1]
? (match[2] ? match[1] : 'https://' + match[1])
: 'mailto:' + match[0]
}, [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);
} else if (range.collapsed
&& range.startContainer === this._root
&& this._root.children.length > 0) {
// Under certain conditions, cursor/range can be positioned directly
// under this._root (not wrapped) and when this happens, an inline(TEXT)
// element is attached directly to this._root. There might be other
// issues, but squire.makeUnorderedList(), squire.makeOrderedList() and
// maybe other functions that call squire.modifyBlocks() do NOT work
// on inline(TEXT) nodes that are direct children of this._root.
// Therefor, we try to detect this case here and wrap the cursor/range
// before the text is inserted.
const nextElement = this._root.children[range.startOffset];
if (nextElement.tagName === blockTag
&& nextElement.children.length === 1
&& nextElement.children[0].tagName === 'BR') {
// this is a suitable '
is created by createDefaultBlock() this._root.removeChild(nextElement); } } const restore = this._restoreSelection; this.setSelection(range); this._restoreSelection = restore; } } 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 (imageItem) { let reader = new FileReader(); reader.onload = event => { let img = createElement('img', {src: event.target.result}), canvas = createElement('canvas'), ctx = canvas.getContext('2d'); img.onload = ()=>{ ctx.drawImage(img, 0, 0); let width = img.width, height = img.height; if (width > height) { // Landscape if (width > 1024) { height = height * 1024 / width; width = 1024; } } else if (height > 1024) { // Portrait width = width * 1024 / height; height = 1024; } canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); 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 !== blockTag || !isBlock(last)) { root.append(this.createDefaultBlock()); } } // --- Get/Set data --- _getHTML () { return this._root.innerHTML; } _setHTML (html) { let root = this._root; let node = root; empty(root); root.appendChild(this._config.sanitizeToDOMFragment(html, false)); 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 root = this._root, // Parse HTML into DOM tree frag = this._config.sanitizeToDOMFragment(html, false), child; cleanTree(frag); 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 range = this.getSelection(); // 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) { let startFragmentIndex = html.indexOf(''), endFragmentIndex = html.lastIndexOf(''); if (startFragmentIndex > -1 && endFragmentIndex > -1) { html = html.slice(startFragmentIndex + 20, endFragmentIndex); } } let frag = this._config.sanitizeToDOMFragment(html, isPaste); // Record undo checkpoint this.saveUndoState(range); try { let root = this._root, node = frag; addLinks(frag, frag, this); cleanTree(frag); cleanupBRs(frag, root, false); removeEmptyInlines(frag); frag.normalize(); while (node = getNextBlock(node, frag)) { fixCursor(node, root); } insertTreeFragmentIntoRange(range, frag, root); range.collapse(false); // After inserting the fragment, check whether the cursor is inside // an element and if so if there is an equivalent cursor // position after the element. If there is, move it there. moveRangeBoundaryOutOf(range, 'A', root); this._ensureBottomLine(); this.setSelection(range); this._updatePath(range, true); // Safari sometimes loses focus after paste. Weird. isPaste && this.focus(); } catch (error) { didError(error); } return this; } insertPlainText(plainText, isPaste) { let range = this.getSelection(); if (range.collapsed && getClosest(range.startContainer, this._root, 'PRE')) { let node = range.startContainer; let offset = range.startOffset; let text; if (node?.nodeType !== TEXT_NODE) { text = doc.createTextNode(''); node?.childNodes[ offset ].before(text); node = text; offset = 0; } node.insertData(offset, plainText); range.setStart(node, offset + plainText.length); range.collapse(true); this.setSelection(range); return this; } let lines = plainText.split(/\r?\n/), closeBlock = '', openBlock = '<' + blockTag + '>'; lines.forEach((line, i) => { line = escapeHTML(line).replace(/ (?=(?: |$))/g, NBSP); // We don't wrap the first line in the block, so if it gets inserted // into a blank line it keeps that line's formatting. // Wrap each line in lines[i] = i ? openBlock + (line || '
') + closeBlock : line; }); return this.insertHTML(lines.join(''), isPaste); } // --- Formatting --- makeLink(url, attributes) { let range = this.getSelection(); if (range.collapsed) { insertNodeInRange( range, doc.createTextNode(url.replace(/^[^:]*:\/*/, '')) ); } attributes = mergeObjects( mergeObjects({ href: url }, attributes, true), null, false ); this.changeFormat({ tag: 'A', attributes: attributes }, { tag: 'A' }, range); return this.focus(); } removeLink() { this.changeFormat(null, { tag: 'A' }, this.getSelection(), true); return this.focus(); } setStyle(style) { this.setAttribute('style', style); } setAttribute(name, value) { let range = this.getSelection(); let start = range?.startContainer || {}; let end = range ? range.endContainer : 0; // When the selection is all the text inside an element, set style on the element itself if ('dir' == name || (TEXT_NODE === start?.nodeType && 0 === range.startOffset && start === end && end.length === range.endOffset)) { this.saveUndoState(range); setAttributes(start.parentNode, {[name]: value}); this.setSelection(range); this._updatePath(range, true); } // Else create a span element else { this.changeFormat({ tag: 'SPAN', attributes: {[name]: value} }, null, range); } return this.focus(); } // --- code() { let range = this.getSelection(); if (range.collapsed || isContainer(range.commonAncestorContainer)) { this.modifyBlocks(frag => { let root = this._root; let output = doc.createDocumentFragment(); let walker = getBlockWalker(frag, root); let node; // 1. Extract inline content; drop all blocks and contains. while ((node = walker.nextNode())) { // 2. Replace
with \n in content node.querySelectorAll('BR').forEach(br => { if (!isLineBreak(br, false)) { detach(br); } else { br.replaceWith(doc.createTextNode('\n')); } }); // 3. Remove
; its format clashes with
node.querySelectorAll('CODE').forEach(el => detach(el));
if (output.childNodes.length) {
output.append(doc.createTextNode('\n'));
}
output.append(empty(node));
}
// 4. Replace nbsp with regular sp
walker = createTreeWalker(output, SHOW_TEXT);
while ((node = walker.nextNode())) {
node.data = node.data.replace(NBSP, ' '); // nbsp -> sp
}
output.normalize();
return fixCursor(createElement('PRE',
null, [
output
]), root);
}, range);
} else {
this.changeFormat({
tag: 'CODE'
}, null, range);
}
return this.focus();
}
removeCode() {
let range = this.getSelection();
let ancestor = range.commonAncestorContainer;
let inPre = getClosest(ancestor, this._root, 'PRE');
if (inPre) {
this.modifyBlocks(frag => {
let root = this._root;
let pres = frag.querySelectorAll('PRE');
let l = pres.length;
let pre, walker, node, value, contents, index;
while (l--) {
pre = pres[l];
walker = createTreeWalker(pre, SHOW_TEXT);
while ((node = walker.nextNode())) {
value = node.data;
value = value.replace(/ (?=)/g, NBSP); // sp -> nbsp
contents = doc.createDocumentFragment();
while ((index = value.indexOf('\n')) > -1) {
contents.append(
doc.createTextNode(value.slice(0, index))
);
contents.append(createElement('BR'));
value = value.slice(index + 1);
}
node.before(contents);
node.data = value;
}
fixContainer(pre, root);
pre.replaceWith(empty(pre));
}
return frag;
}, range);
} else {
this.changeFormat(null, { tag: 'CODE' }, range);
}
return this.focus();
}
toggleCode() {
return (this.hasFormat('PRE') || this.hasFormat('CODE'))
? this.removeCode()
: this.code();
}
// ---
changeIndentationLevel(direction) {
let parent = this.getSelectionClosest('UL,OL,BLOCKQUOTE');
if (parent || 'increase' === direction) {
let method = (!parent || 'BLOCKQUOTE' === parent.nodeName) ? 'Quote' : 'List';
this[ direction + method + 'Level' ]();
}
}
increaseQuoteLevel(range) {
this.modifyBlocks(
frag => createElement('BLOCKQUOTE', null, [ frag ]),
range
);
return this.focus();
}
decreaseQuoteLevel(range) {
this.modifyBlocks(
frag => {
Array.prototype.filter.call(frag.querySelectorAll('blockquote'), el =>
!getClosest(el.parentNode, frag, 'BLOCKQUOTE')
).forEach(el => el.replaceWith(empty(el)));
return frag;
},
range
);
return this.focus();
}
bidi(dir) {
this.modifyBlocks(frag => setDirection(this, frag, dir));
return this.focus();
}
makeUnorderedList() {
this.modifyBlocks(frag => makeList(this, frag, 'UL'));
return this.focus();
}
makeOrderedList() {
this.modifyBlocks(frag => makeList(this, frag, 'OL'));
return this.focus();
}
removeList() {
this.modifyBlocks(frag => {
let root = this._root,
listFrag;
frag.querySelectorAll('UL, OL').forEach(list => {
listFrag = empty(list);
fixContainer(listFrag, root);
list.replaceWith(listFrag);
});
frag.querySelectorAll('LI').forEach(item => {
if (isBlock(item)) {
item.replaceWith(
this.createDefaultBlock([ empty(item) ])
);
} else {
fixContainer(item, root);
item.replaceWith(empty(item));
}
});
return frag;
});
return this.focus();
}
bold() { this.toggleTag('B'); }
italic() { this.toggleTag('I'); }
underline() { this.toggleTag('U'); }
strikethrough() { this.toggleTag('S'); }
subscript() { this.toggleTag('SUB', 'SUP'); }
superscript() { this.toggleTag('SUP', 'SUB'); }
}
win.Squire = Squire;
})(document);