0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2024-12-22 15:23:29 -05:00
Squire/source/Editor.ts
2023-02-22 11:14:16 +11:00

2821 lines
91 KiB
TypeScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import {
TreeIterator,
SHOW_TEXT,
SHOW_ELEMENT_OR_TEXT,
} from './node/TreeIterator';
import {
createElement,
detach,
empty,
getNearest,
hasTagAttributes,
replaceWith,
} from './node/Node';
import {
isLeaf,
isInline,
resetNodeCategoryCache,
isContainer,
isBlock,
} from './node/Category';
import { isLineBreak, removeZWS } from './node/Whitespace';
import {
moveRangeBoundariesDownTree,
isNodeContainedInRange,
moveRangeBoundaryOutOf,
moveRangeBoundariesUpTree,
} from './range/Boundaries';
import {
createRange,
deleteContentsOfRange,
extractContentsOfRange,
insertNodeInRange,
insertTreeFragmentIntoRange,
} from './range/InsertDelete';
import {
fixContainer,
fixCursor,
mergeContainers,
mergeInlines,
split,
} from './node/MergeSplit';
import { getBlockWalker, getNextBlock, isEmptyBlock } from './node/Block';
import { cleanTree, cleanupBRs, escapeHTML, removeEmptyInlines } from './Clean';
import { cantFocusEmptyTextNodes, isAndroid, ZWS } from './Constants';
import {
expandRangeToBlockBoundaries,
getEndBlockOfRange,
getStartBlockOfRange,
rangeDoesEndAtBlockBoundary,
rangeDoesStartAtBlockBoundary,
} from './range/Block';
import {
_monitorShiftKey,
_onCopy,
_onCut,
_onDrop,
_onPaste,
} from './Clipboard';
import { keyHandlers, _onKey } from './keyboard/KeyHandlers';
import { linkifyText } from './keyboard/KeyHelpers';
declare const DOMPurify: any;
// ---
type EventHandler = { handleEvent: (e: Event) => void } | ((e: Event) => void);
type KeyHandlerFunction = (x: Squire, y: KeyboardEvent, z: Range) => void;
type TagAttributes = {
[key: string]: { [key: string]: string };
};
interface SquireConfig {
blockTag: string;
blockAttributes: null | Record<string, string>;
tagAttributes: TagAttributes;
classNames: {
color: string;
fontFamily: string;
fontSize: string;
highlight: string;
};
undo: {
documentSizeThreshold: number;
undoLimit: number;
};
addLinks: boolean;
willCutCopy: null | ((html: string) => string);
sanitizeToDOMFragment: (html: string, editor: Squire) => DocumentFragment;
didError: (x: any) => void;
}
// ---
class Squire {
_root: HTMLElement;
_config: SquireConfig;
_isFocused: boolean;
_lastSelection: Range;
_willRestoreSelection: boolean;
_mayHaveZWS: boolean;
_lastAnchorNode: Node | null;
_lastFocusNode: Node | null;
_path: string;
_events: Map<string, Array<EventHandler>>;
_undoIndex: number;
_undoStack: Array<string>;
_undoStackLength: number;
_isInUndoState: boolean;
_ignoreChange: boolean;
_ignoreAllChanges: boolean;
_isShiftDown: boolean;
_keyHandlers: Record<string, KeyHandlerFunction>;
_mutation: MutationObserver;
constructor(root: HTMLElement, config?: object) {
this._root = root;
this._config = this._makeConfig(config);
this._isFocused = false;
this._lastSelection = createRange(root, 0);
this._willRestoreSelection = false;
this._mayHaveZWS = false;
this._lastAnchorNode = null;
this._lastFocusNode = null;
this._path = '';
this._events = new Map();
this._undoIndex = -1;
this._undoStack = [];
this._undoStackLength = 0;
this._isInUndoState = false;
this._ignoreChange = false;
this._ignoreAllChanges = false;
// Add event listeners
this.addEventListener('selectionchange', this._updatePathOnEvent);
// 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.addEventListener('blur', this._enableRestoreSelection);
this.addEventListener('mousedown', this._disableRestoreSelection);
this.addEventListener('touchstart', this._disableRestoreSelection);
this.addEventListener('focus', this._restoreSelection);
// Clipboard support
this._isShiftDown = false;
this.addEventListener('cut', _onCut as (e: Event) => void);
this.addEventListener('copy', _onCopy as (e: Event) => void);
this.addEventListener('paste', _onPaste as (e: Event) => void);
this.addEventListener('drop', _onDrop as (e: Event) => void);
this.addEventListener(
'keydown',
_monitorShiftKey as (e: Event) => void,
);
this.addEventListener('keyup', _monitorShiftKey as (e: Event) => void);
// Keyboard support
this.addEventListener('keydown', _onKey as (e: Event) => void);
this._keyHandlers = Object.create(keyHandlers);
const mutation = new MutationObserver(() => this._docWasChanged());
mutation.observe(root, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
});
this._mutation = mutation;
// Make it editable
root.setAttribute('contenteditable', 'true');
// Remove Firefox's built-in controls
try {
document.execCommand('enableObjectResizing', false, 'false');
document.execCommand('enableInlineTableEditing', false, 'false');
} catch (_) {}
// Modern browsers let you override their default content editable
// handling!
this.addEventListener(
'beforeinput',
this._beforeInput as (e: Event) => void,
);
this.setHTML('');
}
destroy(): void {
this._events.forEach((_, type) => {
this.removeEventListener(type);
});
this._mutation.disconnect();
this._undoIndex = -1;
this._undoStack = [];
this._undoStackLength = 0;
}
_makeConfig(userConfig?: object): SquireConfig {
const config = {
blockTag: 'DIV',
blockAttributes: null,
tagAttributes: {},
classNames: {
color: 'color',
fontFamily: 'font',
fontSize: 'size',
highlight: 'highlight',
},
undo: {
documentSizeThreshold: -1, // -1 means no threshold
undoLimit: -1, // -1 means no limit
},
addLinks: true,
willCutCopy: null,
sanitizeToDOMFragment: (
html: string,
/* editor: Squire, */
): DocumentFragment => {
const frag = DOMPurify.sanitize(html, {
ALLOW_UNKNOWN_PROTOCOLS: true,
WHOLE_DOCUMENT: false,
RETURN_DOM: true,
RETURN_DOM_FRAGMENT: true,
FORCE_BODY: false,
});
return frag
? document.importNode(frag, true)
: document.createDocumentFragment();
},
didError: (error: any): void => console.log(error),
};
if (userConfig) {
Object.assign(config, userConfig);
config.blockTag = config.blockTag.toUpperCase();
}
return config;
}
setKeyHandler(key: number, fn: KeyHandlerFunction) {
this._keyHandlers[key] = fn;
return this;
}
_beforeInput(event: InputEvent): void {
switch (event.inputType) {
case 'insertText':
// Generally we let the browser handle text insertion, as it
// does so fine. However, the Samsung keyboard on Android with
// the Grammerly extension goes batshit crazy for some reason
// and will try to disastrously rewrite the whole data, without
// the user even doing anything (it can happen on first load
// before the user types anything). Fortunately we can detect
// this by looking for a new line in the data and if we see it,
// stop it by preventing default.
if (isAndroid && event.data && event.data.includes('\n')) {
event.preventDefault();
}
break;
case 'insertLineBreak':
event.preventDefault();
this.splitBlock(true);
break;
case 'insertParagraph':
event.preventDefault();
this.splitBlock(false);
break;
case 'insertOrderedList':
event.preventDefault();
this.makeOrderedList();
break;
case 'insertUnoderedList':
event.preventDefault();
this.makeUnorderedList();
break;
case 'historyUndo':
event.preventDefault();
this.undo();
break;
case 'historyRedo':
event.preventDefault();
this.redo();
break;
case 'formatBold':
event.preventDefault();
this.bold();
break;
case 'formaItalic':
event.preventDefault();
this.italic();
break;
case 'formatUnderline':
event.preventDefault();
this.underline();
break;
case 'formatStrikeThrough':
event.preventDefault();
this.strikethrough();
break;
case 'formatSuperscript':
event.preventDefault();
this.superscript();
break;
case 'formatSubscript':
event.preventDefault();
this.subscript();
break;
case 'formatJustifyFull':
case 'formatJustifyCenter':
case 'formatJustifyRight':
case 'formatJustifyLeft': {
event.preventDefault();
let alignment = event.inputType.slice(13).toLowerCase();
if (alignment === 'full') {
alignment = 'justify';
}
this.setTextAlignment(alignment);
break;
}
case 'formatRemove':
event.preventDefault();
this.removeAllFormatting();
break;
case 'formatSetBlockTextDirection': {
event.preventDefault();
let dir = event.data;
if (dir === 'null') {
dir = null;
}
this.setTextDirection(dir);
break;
}
case 'formatBackColor':
event.preventDefault();
this.setHighlightColor(event.data);
break;
case 'formatFontColor':
event.preventDefault();
this.setTextColor(event.data);
break;
case 'formatFontName':
event.preventDefault();
this.setFontFace(event.data);
break;
}
}
// --- Events
handleEvent(event: Event): void {
this.fireEvent(event.type, event);
}
fireEvent(type: string, detail?: Event | object): Squire {
let handlers = this._events.get(type);
// 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)) {
const isFocused = this._root === document.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) {
const event: Event =
detail instanceof Event
? detail
: new CustomEvent(type, {
detail,
});
// Clone handlers array, so any handlers added/removed do not
// affect it.
handlers = handlers.slice();
for (const handler of handlers) {
try {
if ('handleEvent' in handler) {
handler.handleEvent(event);
} else {
handler.call(this, event);
}
} catch (error) {
this._config.didError(error);
}
}
}
return this;
}
/**
* 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 = new Set([
'pathChange',
'select',
'input',
'pasteImage',
'undoStateChange',
]);
addEventListener(type: string, fn: EventHandler): Squire {
let handlers = this._events.get(type);
let target: Document | HTMLElement = this._root;
if (!handlers) {
handlers = [];
this._events.set(type, handlers);
if (!this.customEvents.has(type)) {
if (type === 'selectionchange') {
target = document;
}
target.addEventListener(type, this, true);
}
}
handlers.push(fn);
return this;
}
removeEventListener(type: string, fn?: EventHandler): Squire {
const handlers = this._events.get(type);
let target: Document | HTMLElement = this._root;
if (handlers) {
if (fn) {
let l = handlers.length;
while (l--) {
if (handlers[l] === fn) {
handlers.splice(l, 1);
}
}
} else {
handlers.length = 0;
}
if (!handlers.length) {
this._events.delete(type);
if (!this.customEvents.has(type)) {
if (type === 'selectionchange') {
target = document;
}
target.removeEventListener(type, this, true);
}
}
}
return this;
}
// --- Focus
focus(): Squire {
this._root.focus({ preventScroll: true });
return this;
}
blur(): Squire {
this._root.blur();
return this;
}
// --- Selection and bookmarking
_enableRestoreSelection(): void {
this._willRestoreSelection = true;
}
_disableRestoreSelection(): void {
this._willRestoreSelection = false;
}
_restoreSelection() {
if (this._willRestoreSelection) {
this.setSelection(this._lastSelection);
}
}
// ---
_removeZWS(): void {
if (!this._mayHaveZWS) {
return;
}
removeZWS(this._root);
this._mayHaveZWS = false;
}
// ---
startSelectionId = 'squire-selection-start';
endSelectionId = 'squire-selection-end';
_saveRangeToBookmark(range: Range): void {
let startNode = createElement('INPUT', {
id: this.startSelectionId,
type: 'hidden',
});
let endNode = createElement('INPUT', {
id: this.endSelectionId,
type: 'hidden',
});
let temp: HTMLElement;
insertNodeInRange(range, startNode);
range.collapse(false);
insertNodeInRange(range, endNode);
// In a collapsed range, the start is sometimes inserted after the end!
if (
startNode.compareDocumentPosition(endNode) &
Node.DOCUMENT_POSITION_PRECEDING
) {
startNode.id = this.endSelectionId;
endNode.id = this.startSelectionId;
temp = startNode;
startNode = endNode;
endNode = temp;
}
range.setStartAfter(startNode);
range.setEndBefore(endNode);
}
_getRangeAndRemoveBookmark(range?: Range): Range | null {
const root = this._root;
const start = root.querySelector('#' + this.startSelectionId);
const end = root.querySelector('#' + this.endSelectionId);
if (start && end) {
let startContainer: Node = start.parentNode!;
let endContainer: Node = end.parentNode!;
const startOffset = Array.from(startContainer.childNodes).indexOf(
start,
);
let endOffset = Array.from(endContainer.childNodes).indexOf(end);
if (startContainer === endContainer) {
endOffset -= 1;
}
start.remove();
end.remove();
if (!range) {
range = document.createRange();
}
range.setStart(startContainer, startOffset);
range.setEnd(endContainer, endOffset);
// Merge any text nodes we split
mergeInlines(startContainer, range);
if (startContainer !== endContainer) {
mergeInlines(endContainer, range);
}
// If we didn't split a text node, we should move into any adjacent
// text node to current selection point
if (range.collapsed) {
startContainer = range.startContainer;
if (startContainer instanceof Text) {
endContainer = startContainer.childNodes[range.startOffset];
if (!endContainer || !(endContainer instanceof Text)) {
endContainer =
startContainer.childNodes[range.startOffset - 1];
}
if (endContainer && endContainer instanceof Text) {
range.setStart(endContainer, 0);
range.collapse(true);
}
}
}
}
return range || null;
}
getSelection(): Range {
const selection = window.getSelection();
const root = this._root;
let range: Range | null = null;
// If not focused, always rely on cached selection; another function may
// have set it but the DOM is not modified until focus again
if (this._isFocused && selection && selection.rangeCount) {
range = selection.getRangeAt(0).cloneRange();
const startContainer = range.startContainer;
const endContainer = range.endContainer;
// FF can return the selection as being inside an <img>. WTF?
if (startContainer && isLeaf(startContainer)) {
range.setStartBefore(startContainer);
}
if (endContainer && isLeaf(endContainer)) {
range.setEndBefore(endContainer);
}
}
if (range && root.contains(range.commonAncestorContainer)) {
this._lastSelection = range;
} else {
range = this._lastSelection;
// Check the editor is in the live document; if not, the range has
// probably been rewritten by the browser and is bogus
if (!document.contains(range.commonAncestorContainer)) {
range = null;
}
}
if (!range) {
range = createRange(root.firstElementChild || root, 0);
}
return range;
}
setSelection(range: Range): Squire {
this._lastSelection = 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._enableRestoreSelection();
} else {
const selection = window.getSelection();
if (selection) {
if ('setBaseAndExtent' in Selection.prototype) {
selection.setBaseAndExtent(
range.startContainer,
range.startOffset,
range.endContainer,
range.endOffset,
);
} else {
selection.removeAllRanges();
selection.addRange(range);
}
}
}
return this;
}
// ---
_moveCursorTo(toStart: boolean): Squire {
const root = this._root;
const range = createRange(root, toStart ? 0 : root.childNodes.length);
moveRangeBoundariesDownTree(range);
this.setSelection(range);
return this;
}
moveCursorToStart(): Squire {
return this._moveCursorTo(true);
}
moveCursorToEnd(): Squire {
return this._moveCursorTo(false);
}
// ---
getCursorPosition(): DOMRect {
const range = this.getSelection();
let rect = range.getBoundingClientRect();
// If the range is outside of the viewport, some browsers at least
// will return 0 for all the values; need to get a DOM node to find
// the position instead.
if (rect && !rect.top) {
this._ignoreChange = true;
const node = createElement('SPAN');
node.textContent = ZWS;
insertNodeInRange(range, node);
rect = node.getBoundingClientRect();
const parent = node.parentNode!;
parent.removeChild(node);
mergeInlines(parent, range);
}
return rect;
}
// --- Path
getPath(): string {
return this._path;
}
_updatePathOnEvent(): void {
if (this._isFocused) {
this._updatePath(this.getSelection());
}
}
_updatePath(range: Range, force?: boolean): void {
const anchor = range.startContainer;
const focus = range.endContainer;
let newPath: string;
if (
force ||
anchor !== this._lastAnchorNode ||
focus !== this._lastFocusNode
) {
this._lastAnchorNode = anchor;
this._lastFocusNode = focus;
newPath =
anchor && focus
? anchor === focus
? this._getPath(focus)
: '(selection)'
: '';
if (this._path !== newPath) {
this._path = newPath;
this.fireEvent('pathChange', {
path: newPath,
});
}
}
this.fireEvent(range.collapsed ? 'cursor' : 'select', {
range: range,
});
}
_getPath(node: Node) {
const root = this._root;
const config = this._config;
let path = '';
if (node && node !== root) {
const parent = node.parentNode;
path = parent ? this._getPath(parent) : '';
if (node instanceof HTMLElement) {
const id = node.id;
const classList = node.classList;
const classNames = Array.from(classList).sort();
const dir = node.dir;
const styleNames = config.classNames;
path += (path ? '>' : '') + node.nodeName;
if (id) {
path += '#' + id;
}
if (classNames.length) {
path += '.';
path += classNames.join('.');
}
if (dir) {
path += '[dir=' + dir + ']';
}
if (classList.contains(styleNames.highlight)) {
path +=
'[backgroundColor=' +
node.style.backgroundColor.replace(/ /g, '') +
']';
}
if (classList.contains(styleNames.color)) {
path +=
'[color=' + node.style.color.replace(/ /g, '') + ']';
}
if (classList.contains(styleNames.fontFamily)) {
path +=
'[fontFamily=' +
node.style.fontFamily.replace(/ /g, '') +
']';
}
if (classList.contains(styleNames.fontSize)) {
path += '[fontSize=' + node.style.fontSize + ']';
}
}
}
return path;
}
// --- History
modifyDocument(modificationFn: () => void): Squire {
const mutation = this._mutation;
if (mutation) {
if (mutation.takeRecords().length) {
this._docWasChanged();
}
mutation.disconnect();
}
this._ignoreAllChanges = true;
modificationFn();
this._ignoreAllChanges = false;
if (mutation) {
mutation.observe(this._root, {
childList: true,
attributes: true,
characterData: true,
subtree: true,
});
this._ignoreChange = false;
}
return this;
}
_docWasChanged(): void {
resetNodeCategoryCache();
this._mayHaveZWS = true;
if (this._ignoreAllChanges) {
return;
}
if (this._ignoreChange) {
this._ignoreChange = false;
return;
}
if (this._isInUndoState) {
this._isInUndoState = false;
this.fireEvent('undoStateChange', {
canUndo: true,
canRedo: false,
});
}
this.fireEvent('input');
}
/**
* Leaves bookmark.
*/
_recordUndoState(range: Range, replace?: boolean): Squire {
// Don't record if we're already in an undo state
if (!this._isInUndoState || replace) {
// Advance pointer to new position
let undoIndex = this._undoIndex;
const undoStack = this._undoStack;
const undoConfig = this._config.undo;
const undoThreshold = undoConfig.documentSizeThreshold;
const undoLimit = undoConfig.undoLimit;
if (!replace) {
undoIndex += 1;
}
// Truncate stack if longer (i.e. if has been previously undone)
if (undoIndex < this._undoStackLength) {
undoStack.length = this._undoStackLength = undoIndex;
}
// Get data
if (range) {
this._saveRangeToBookmark(range);
}
const html = this._getRawHTML();
// If this document is above the configured size threshold,
// limit the number of saved undo states.
// Threshold is in bytes, JS uses 2 bytes per character
if (undoThreshold > -1 && html.length * 2 > undoThreshold) {
if (undoLimit > -1 && undoIndex > undoLimit) {
undoStack.splice(0, undoIndex - undoLimit);
undoIndex = undoLimit;
this._undoStackLength = undoLimit;
}
}
// Save data
undoStack[undoIndex] = html;
this._undoIndex = undoIndex;
this._undoStackLength += 1;
this._isInUndoState = true;
}
return this;
}
saveUndoState(range?: Range): Squire {
if (!range) {
range = this.getSelection();
}
this._recordUndoState(range, this._isInUndoState);
this._getRangeAndRemoveBookmark(range);
return this;
}
undo(): Squire {
// Sanity check: must not be at beginning of the history stack
if (this._undoIndex !== 0 || !this._isInUndoState) {
// Make sure any changes since last checkpoint are saved.
this._recordUndoState(this.getSelection(), false);
this._undoIndex -= 1;
this._setRawHTML(this._undoStack[this._undoIndex]);
const range = this._getRangeAndRemoveBookmark();
if (range) {
this.setSelection(range);
}
this._isInUndoState = true;
this.fireEvent('undoStateChange', {
canUndo: this._undoIndex !== 0,
canRedo: true,
});
this.fireEvent('input');
}
return this;
}
redo(): Squire {
// Sanity check: must not be at end of stack and must be in an undo
// state.
const undoIndex = this._undoIndex;
const undoStackLength = this._undoStackLength;
if (undoIndex + 1 < undoStackLength && this._isInUndoState) {
this._undoIndex += 1;
this._setRawHTML(this._undoStack[this._undoIndex]);
const range = this._getRangeAndRemoveBookmark();
if (range) {
this.setSelection(range);
}
this.fireEvent('undoStateChange', {
canUndo: true,
canRedo: undoIndex + 2 < undoStackLength,
});
this.fireEvent('input');
}
return this;
}
// --- Get and set data
getRoot(): HTMLElement {
return this._root;
}
_getRawHTML(): string {
return this._root.innerHTML;
}
_setRawHTML(html: string): Squire {
const root = this._root;
root.innerHTML = html;
let node: Element | null = root;
const child = node.firstChild;
if (!child || child.nodeName === 'BR') {
const block = this.createDefaultBlock();
if (child) {
node.replaceChild(block, child);
} else {
node.appendChild(block);
}
} else {
while ((node = getNextBlock(node, root))) {
fixCursor(node);
}
}
this._ignoreChange = true;
return this;
}
getHTML(withBookmark?: boolean): string {
let range: Range | undefined;
if (withBookmark) {
range = this.getSelection();
this._saveRangeToBookmark(range);
}
const html = this._getRawHTML().replace(/\u200B/g, '');
if (withBookmark) {
this._getRangeAndRemoveBookmark(range);
}
return html;
}
setHTML(html: string): Squire {
// Parse HTML into DOM tree
const frag = this._config.sanitizeToDOMFragment(html, this);
const root = this._root;
// Fixup DOM tree
cleanTree(frag, this._config);
cleanupBRs(frag, root, false);
fixContainer(frag, root);
// Fix cursor
let node: DocumentFragment | HTMLElement | null = frag;
let child = node.firstChild;
if (!child || child.nodeName === 'BR') {
const block = this.createDefaultBlock();
if (child) {
node.replaceChild(block, child);
} else {
node.appendChild(block);
}
} else {
while ((node = getNextBlock(node, root))) {
fixCursor(node);
}
}
// Don't fire an input event
this._ignoreChange = true;
// Remove existing root children and insert new content
while ((child = root.lastChild)) {
root.removeChild(child);
}
root.appendChild(frag);
// Reset the undo stack
this._undoIndex = -1;
this._undoStack.length = 0;
this._undoStackLength = 0;
this._isInUndoState = false;
// Record undo state
const range =
this._getRangeAndRemoveBookmark() ||
createRange(root.firstElementChild || root, 0);
this.saveUndoState(range);
// Set inital selection
this.setSelection(range);
this._updatePath(range, true);
return this;
}
/**
* 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: string, isPaste: boolean): Squire {
// Parse
const config = this._config;
let frag = config.sanitizeToDOMFragment(html, this);
// Record undo checkpoint
const range = this.getSelection();
this.saveUndoState(range);
try {
const root = this._root;
if (config.addLinks) {
this.addDetectedLinks(frag, frag);
}
cleanTree(frag, this._config);
cleanupBRs(frag, root, false);
removeEmptyInlines(frag);
frag.normalize();
let node: HTMLElement | DocumentFragment | null = frag;
while ((node = getNextBlock(node, frag))) {
fixCursor(node);
}
let doInsert = true;
if (isPaste) {
const event = new CustomEvent('willPaste', {
detail: {
fragment: frag,
},
});
this.fireEvent('willPaste', event);
frag = event.detail.fragment;
doInsert = !event.defaultPrevented;
}
if (doInsert) {
insertTreeFragmentIntoRange(range, frag, root);
range.collapse(false);
// After inserting the fragment, check whether the cursor is
// inside an <a> element and if so if there is an equivalent
// cursor position after the <a> 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.
if (isPaste) {
this.focus();
}
} catch (error) {
this._config.didError(error);
}
return this;
}
insertElement(el: Element, range?: Range): Squire {
if (!range) {
range = this.getSelection();
}
range.collapse(true);
if (isInline(el)) {
insertNodeInRange(range, el);
range.setStartAfter(el);
} else {
// Get containing block node.
const root = this._root;
const startNode: HTMLElement | null = getStartBlockOfRange(
range,
root,
);
let splitNode: Element | Node = startNode || root;
let nodeAfterSplit: Node | null = null;
// 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) {
const parent = splitNode.parentNode!;
nodeAfterSplit = split(
parent,
splitNode.nextSibling,
root,
root,
) as Node;
}
// If the startNode was empty remove it so that we don't end up
// with two blank lines.
if (startNode && isEmptyBlock(startNode)) {
detach(startNode);
}
// Insert element and blank line.
root.insertBefore(el, nodeAfterSplit);
const blankLine = this.createDefaultBlock();
root.insertBefore(blankLine, nodeAfterSplit);
// Move cursor to blank line after inserted element.
range.setStart(blankLine, 0);
range.setEnd(blankLine, 0);
moveRangeBoundariesDownTree(range);
}
this.focus();
this.setSelection(range);
this._updatePath(range);
return this;
}
insertImage(
src: string,
attributes: Record<string, string>,
): HTMLImageElement {
const img = createElement(
'IMG',
Object.assign(
{
src: src,
},
attributes,
),
) as HTMLImageElement;
this.insertElement(img);
return img;
}
insertPlainText(plainText: string, isPaste: boolean): Squire {
const range = this.getSelection();
if (
range.collapsed &&
getNearest(range.startContainer, this._root, 'PRE')
) {
const startContainer: Node = range.startContainer;
let offset = range.startOffset;
let textNode: Text;
if (!startContainer || !(startContainer instanceof Text)) {
const text = document.createTextNode('');
startContainer.insertBefore(
text,
startContainer.childNodes[offset],
);
textNode = text;
offset = 0;
} else {
textNode = startContainer;
}
let doInsert = true;
if (isPaste) {
const event = new CustomEvent('willPaste', {
detail: {
text: plainText,
},
});
this.fireEvent('willPaste', event);
plainText = event.detail.text;
doInsert = !event.defaultPrevented;
}
if (doInsert) {
textNode.insertData(offset, plainText);
range.setStart(textNode, offset + plainText.length);
range.collapse(true);
}
this.setSelection(range);
return this;
}
const lines = plainText.split('\n');
const config = this._config;
const tag = config.blockTag;
const attributes = config.blockAttributes;
const closeBlock = '</' + tag + '>';
let openBlock = '<' + tag;
for (const attr in attributes) {
openBlock += ' ' + attr + '="' + escapeHTML(attributes[attr]) + '"';
}
openBlock += '>';
for (let i = 0, l = lines.length; i < l; i += 1) {
let line = lines[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 <div></div>
if (i) {
line = openBlock + (line || '<BR>') + closeBlock;
}
lines[i] = line;
}
return this.insertHTML(lines.join(''), isPaste);
}
getSelectedText(): string {
const range = this.getSelection();
if (range.collapsed) {
return '';
}
const startContainer = range.startContainer;
const endContainer = range.endContainer;
const walker = new TreeIterator<Element | Text>(
range.commonAncestorContainer,
SHOW_ELEMENT_OR_TEXT,
(node) => {
return isNodeContainedInRange(range, node, true);
},
);
walker.currentNode = startContainer;
let node: Node | null = startContainer;
let textContent = '';
let addedTextInBlock = false;
let value: string;
if (
(!(node instanceof Element) && !(node instanceof Text)) ||
!walker.filter(node)
) {
node = walker.nextNode();
}
while (node) {
if (node instanceof Text) {
value = node.data;
if (value && /\S/.test(value)) {
if (node === endContainer) {
value = value.slice(0, range.endOffset);
}
if (node === startContainer) {
value = value.slice(range.startOffset);
}
textContent += value;
addedTextInBlock = true;
}
} else if (
node.nodeName === 'BR' ||
(addedTextInBlock && !isInline(node))
) {
textContent += '\n';
addedTextInBlock = false;
}
node = walker.nextNode();
}
return textContent;
}
// --- Inline formatting
/**
* Extracts the font-family and font-size (if any) of the element
* holding the cursor. If there's a selection, returns an empty object.
*/
getFontInfo(range?: Range): Record<string, string | undefined> {
const fontInfo = {
color: undefined,
backgroundColor: undefined,
fontFamily: undefined,
fontSize: undefined,
} as Record<string, string | undefined>;
if (!range) {
range = this.getSelection();
}
let seenAttributes = 0;
let element: Node | null = range.commonAncestorContainer;
if (range.collapsed || element instanceof Text) {
if (element instanceof Text) {
element = element.parentNode!;
}
while (seenAttributes < 4 && element) {
const style = (element as HTMLElement).style;
if (style) {
const color = style.color;
if (!fontInfo.color && color) {
fontInfo.color = color;
seenAttributes += 1;
}
const backgroundColor = style.backgroundColor;
if (!fontInfo.backgroundColor && backgroundColor) {
fontInfo.backgroundColor = backgroundColor;
seenAttributes += 1;
}
const fontFamily = style.fontFamily;
if (!fontInfo.fontFamily && fontFamily) {
fontInfo.fontFamily = fontFamily;
seenAttributes += 1;
}
const fontSize = style.fontSize;
if (!fontInfo.fontSize && fontSize) {
fontInfo.fontSize = fontSize;
seenAttributes += 1;
}
}
element = element.parentNode;
}
}
return fontInfo;
}
/**
* Looks for matching tag and attributes, so won't work if <strong>
* instead of <b> etc.
*/
hasFormat(
tag: string,
attributes?: Record<string, string> | null,
range?: Range,
): boolean {
// 1. Normalise the arguments and get selection
tag = tag.toUpperCase();
if (!attributes) {
attributes = {};
}
if (!range) {
range = this.getSelection();
}
// Move range up one level in the DOM tree if at the edge of a text
// node, so we don't consider it included when it's not really.
if (
!range.collapsed &&
range.startContainer instanceof Text &&
range.startOffset === range.startContainer.length &&
range.startContainer.nextSibling
) {
range.setStartBefore(range.startContainer.nextSibling);
}
if (
!range.collapsed &&
range.endContainer instanceof Text &&
range.endOffset === 0 &&
range.endContainer.previousSibling
) {
range.setEndAfter(range.endContainer.previousSibling);
}
// If the common ancestor is inside the tag we require, we definitely
// have the format.
const root = this._root;
const common = range.commonAncestorContainer;
if (getNearest(common, root, tag, attributes)) {
return true;
}
// If common ancestor is a text node and doesn't have the format, we
// definitely don't have it.
if (common instanceof Text) {
return false;
}
// Otherwise, check each text node at least partially contained within
// the selection and make sure all of them have the format we want.
const walker = new TreeIterator<Text>(common, SHOW_TEXT, (node) => {
return isNodeContainedInRange(range!, node, true);
});
let seenNode = false;
let node: Node | null;
while ((node = walker.nextNode())) {
if (!getNearest(node, root, tag, attributes)) {
return false;
}
seenNode = true;
}
return seenNode;
}
changeFormat(
add: { tag: string; attributes?: Record<string, string> } | null,
remove?: { tag: string; attributes?: Record<string, string> } | null,
range?: Range,
partial?: boolean,
): Squire {
// 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.focus();
}
_addFormat(
tag: string,
attributes: Record<string, string> | null,
range: Range,
): Range {
// If the range is collapsed we simply insert the node by wrapping
// it round the range and focus it.
const root = this._root;
if (range.collapsed) {
const el = fixCursor(createElement(tag, attributes));
insertNodeInRange(range, el);
const focusNode = el.firstChild || el;
// Focus after the ZWS if present
const focusOffset =
focusNode instanceof Text ? focusNode.length : 0;
range.setStart(focusNode, focusOffset);
range.collapse(true);
// Clean up any previous formats that may have been set on this
// block that are unused.
let block = el;
while (isInline(block)) {
block = block.parentNode!;
}
removeZWS(block, el);
// Otherwise we find all the textnodes in the range (splitting
// partially selected nodes) and if they're not already formatted
// correctly we wrap them in the appropriate tag.
} else {
// Create an iterator to walk over all the text nodes under this
// ancestor which are in the range and not already formatted
// correctly.
//
// In Blink/WebKit, empty blocks may have no text nodes, just a
// <br>. Therefore we wrap this in the tag as well, as this will
// then cause it to apply when the user types something in the
// block, which is presumably what was intended.
//
// IMG tags are included because we may want to create a link around
// them, and adding other styles is harmless.
const walker = new TreeIterator<Element | Text>(
range.commonAncestorContainer,
SHOW_ELEMENT_OR_TEXT,
(node: Node) => {
return (
(node instanceof Text ||
node.nodeName === 'BR' ||
node.nodeName === 'IMG') &&
isNodeContainedInRange(range, node, true)
);
},
);
// Start at the beginning node of the range and iterate through
// all the nodes in the range that need formatting.
let { startContainer, startOffset, endContainer, endOffset } =
range;
// Make sure we start with a valid node.
walker.currentNode = startContainer;
if (
(!(startContainer instanceof Element) &&
!(startContainer instanceof Text)) ||
!walker.filter(startContainer)
) {
const next = walker.nextNode();
// If there are no interesting nodes in the selection, abort
if (!next) {
return range;
}
startContainer = next;
startOffset = 0;
}
do {
let node = walker.currentNode;
const needsFormat = !getNearest(node, root, tag, attributes);
if (needsFormat) {
// <br> can never be a container node, so must have a text
// node if node == (end|start)Container
if (
node === endContainer &&
(node as Text).length > endOffset
) {
(node as Text).splitText(endOffset);
}
if (node === startContainer && startOffset) {
node = (node as Text).splitText(startOffset);
if (endContainer === startContainer) {
endContainer = node;
endOffset -= startOffset;
} else if (endContainer === startContainer.parentNode) {
endOffset += 1;
}
startContainer = node;
startOffset = 0;
}
const el = createElement(tag, attributes);
replaceWith(node, el);
el.appendChild(node);
}
} while (walker.nextNode());
// Now set the selection to as it was before
range = createRange(
startContainer,
startOffset,
endContainer,
endOffset,
);
}
return range;
}
_removeFormat(
tag: string,
attributes: Record<string, string>,
range: Range,
partial?: boolean,
): Range {
// Add bookmark
this._saveRangeToBookmark(range);
// We need a node in the selection to break the surrounding
// formatted text.
let fixer: Node | Text | undefined;
if (range.collapsed) {
if (cantFocusEmptyTextNodes) {
fixer = document.createTextNode(ZWS);
} else {
fixer = document.createTextNode('');
}
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.
const startContainer = range.startContainer;
const startOffset = range.startOffset;
const endContainer = range.endContainer;
const endOffset = range.endOffset;
const toWrap: [Node, Node][] = [];
const examineNode = (node: Node, exemplar: Node) => {
// 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 child: Node;
let next: Node;
// If not at least partially contained, wrap entire contents
// in a clone of the tag we're removing and we're done.
if (!isNodeContainedInRange(range, node, true)) {
// Ignore bookmarks and empty text nodes
if (
!(node instanceof HTMLInputElement) &&
(!(node instanceof Text) || node.data)
) {
toWrap.push([exemplar, node]);
}
return;
}
// Split any partially selected text nodes.
if (node instanceof Text) {
if (node === endContainer && endOffset !== node.length) {
toWrap.push([exemplar, node.splitText(endOffset)]);
}
if (node === startContainer && startOffset) {
node.splitText(startOffset);
toWrap.push([exemplar, node]);
}
} else {
// 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.
for (child = node.firstChild!; child; child = next) {
next = child.nextSibling!;
examineNode(child, exemplar);
}
}
};
const formatTags = Array.from(
(root as Element).getElementsByTagName(tag),
).filter((el: Node): boolean => {
return (
isNodeContainedInRange(range, el, true) &&
hasTagAttributes(el, tag, attributes)
);
});
if (!partial) {
formatTags.forEach((node: Node) => {
examineNode(node, node);
});
}
// Now wrap unselected nodes in the tag
toWrap.forEach(([el, node]) => {
el = el.cloneNode(false);
replaceWith(node, el);
el.appendChild(node);
});
// and remove old formatting tags.
formatTags.forEach((el: Element) => {
replaceWith(el, empty(el));
});
// Merge adjacent inlines:
this._getRangeAndRemoveBookmark(range);
if (fixer) {
range.collapse(false);
}
mergeInlines(root, range);
return range;
}
// ---
bold(): Squire {
return this.changeFormat({ tag: 'B' });
}
removeBold(): Squire {
return this.changeFormat(null, { tag: 'B' });
}
italic(): Squire {
return this.changeFormat({ tag: 'I' });
}
removeItalic(): Squire {
return this.changeFormat(null, { tag: 'I' });
}
underline(): Squire {
return this.changeFormat({ tag: 'U' });
}
removeUnderline(): Squire {
return this.changeFormat(null, { tag: 'U' });
}
strikethrough(): Squire {
return this.changeFormat({ tag: 'S' });
}
removeStrikethrough(): Squire {
return this.changeFormat(null, { tag: 'S' });
}
subscript(): Squire {
return this.changeFormat({ tag: 'SUB' }, { tag: 'SUP' });
}
removeSubscript(): Squire {
return this.changeFormat(null, { tag: 'SUB' });
}
superscript(): Squire {
return this.changeFormat({ tag: 'SUP' }, { tag: 'SUB' });
}
removeSuperscript(): Squire {
return this.changeFormat(null, { tag: 'SUP' });
}
// ---
makeLink(url: string, attributes?: Record<string, string>): Squire {
const range = this.getSelection();
if (range.collapsed) {
let protocolEnd = url.indexOf(':') + 1;
if (protocolEnd) {
while (url[protocolEnd] === '/') {
protocolEnd += 1;
}
}
insertNodeInRange(
range,
document.createTextNode(url.slice(protocolEnd)),
);
}
attributes = Object.assign(
{
href: url,
},
this._config.tagAttributes.a,
attributes,
);
return this.changeFormat(
{
tag: 'A',
attributes: attributes as Record<string, string>,
},
{
tag: 'A',
},
range,
);
}
removeLink(): Squire {
return this.changeFormat(
null,
{
tag: 'A',
},
this.getSelection(),
true,
);
}
/*
linkRegExp = new RegExp(
// Only look on boundaries
'\\b(?:' +
// Capture group 1: URLs
'(' +
// Add links to URLS
// Starts with:
'(?:' +
// http(s):// or ftp://
'(?:ht|f)tps?:\\/\\/' +
// or
'|' +
// www.
'www\\d{0,3}[.]' +
// or
'|' +
// foo90.com/
'[a-z0-9][a-z0-9.\\-]*[.][a-z]{2,}\\/' +
')' +
// Then we get one or more:
'(?:' +
// Run of non-spaces, non ()<>
'[^\\s()<>]+' +
// or
'|' +
// balanced parentheses (one level deep only)
'\\([^\\s()<>]+\\)' +
')+' +
// And we finish with
'(?:' +
// Not a space or punctuation character
'[^\\s?&`!()\\[\\]{};:\'".,<>«»“”‘’]' +
// or
'|' +
// Balanced parentheses.
'\\([^\\s()<>]+\\)' +
')' +
// Capture group 2: Emails
')|(' +
// Add links to emails
'[\\w\\-.%+]+@(?:[\\w\\-]+\\.)+[a-z]{2,}\\b' +
// Allow query parameters in the mailto: style
'(?:' +
'[?][^&?\\s]+=[^\\s?&`!()\\[\\]{};:\'".,<>«»“”‘’]+' +
'(?:&[^&?\\s]+=[^\\s?&`!()\\[\\]{};:\'".,<>«»“”‘’]+)*' +
')?' +
'))',
'i'
);
*/
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;
addDetectedLinks(
searchInNode: DocumentFragment | Node,
root?: DocumentFragment | HTMLElement,
): Squire {
const walker = new TreeIterator<Text>(
searchInNode,
SHOW_TEXT,
(node) => !getNearest(node, root || this._root, 'A'),
);
const linkRegExp = this.linkRegExp;
const defaultAttributes = this._config.tagAttributes.a;
let node: Text | null;
while ((node = walker.nextNode())) {
const parent = node.parentNode!;
let data = node.data;
let match: RegExpExecArray | null;
while ((match = linkRegExp.exec(data))) {
const index = match.index;
const endIndex = index + match[0].length;
if (index) {
parent.insertBefore(
document.createTextNode(data.slice(0, index)),
node,
);
}
const child = createElement(
'A',
Object.assign(
{
href: match[1]
? /^(?:ht|f)tps?:/i.test(match[1])
? match[1]
: 'http://' + match[1]
: 'mailto:' + match[0],
},
defaultAttributes,
),
);
child.textContent = data.slice(index, endIndex);
parent.insertBefore(child, node);
node.data = data = data.slice(endIndex);
}
}
return this;
}
// ---
setFontFace(name: string | null): Squire {
const className = this._config.classNames.fontFamily;
return this.changeFormat(
name
? {
tag: 'SPAN',
attributes: {
class: className,
style: 'font-family: ' + name + ', sans-serif;',
},
}
: null,
{
tag: 'SPAN',
attributes: { class: className },
},
);
}
setFontSize(size: string | null): Squire {
const className = this._config.classNames.fontSize;
return this.changeFormat(
size
? {
tag: 'SPAN',
attributes: {
class: className,
style:
'font-size: ' +
(typeof size === 'number' ? size + 'px' : size),
},
}
: null,
{
tag: 'SPAN',
attributes: { class: className },
},
);
}
setTextColor(color: string | null): Squire {
const className = this._config.classNames.color;
return this.changeFormat(
color
? {
tag: 'SPAN',
attributes: {
class: className,
style: 'color:' + color,
},
}
: null,
{
tag: 'SPAN',
attributes: { class: className },
},
);
}
setHighlightColor(color: string | null): Squire {
const className = this._config.classNames.highlight;
return this.changeFormat(
color
? {
tag: 'SPAN',
attributes: {
class: className,
style: 'background-color:' + color,
},
}
: null,
{
tag: 'SPAN',
attributes: { class: className },
},
);
}
// --- Block formatting
_ensureBottomLine(): void {
const root = this._root;
const last = root.lastElementChild;
if (
!last ||
last.nodeName !== this._config.blockTag ||
!isBlock(last)
) {
root.appendChild(this.createDefaultBlock());
}
}
createDefaultBlock(children?: Node[]): HTMLElement {
const config = this._config;
return fixCursor(
createElement(config.blockTag, config.blockAttributes, children),
) as HTMLElement;
}
tagAfterSplit: Record<string, string> = {
DT: 'DD',
DD: 'DT',
LI: 'LI',
PRE: 'PRE',
};
splitBlock(lineBreakOnly: boolean, range?: Range): Squire {
if (!range) {
range = this.getSelection();
}
const root = this._root;
let block: Node | Element | null;
let parent: Node | null;
let node: Node;
let nodeAfterSplit: Node;
// Save undo checkpoint and remove any zws so we don't think there's
// content in an empty block.
this._recordUndoState(range);
this._removeZWS();
this._getRangeAndRemoveBookmark(range);
// Selected text is overwritten, therefore delete the contents
// to collapse selection.
if (!range.collapsed) {
deleteContentsOfRange(range, root);
}
// Linkify text
if (this._config.addLinks) {
moveRangeBoundariesDownTree(range);
const textNode = range.startContainer as Text;
const offset = range.startOffset;
setTimeout(() => {
linkifyText(this, textNode, offset);
}, 0);
}
block = getStartBlockOfRange(range, root);
// Inside a PRE, insert literal newline, unless on blank line.
if (block && (parent = getNearest(block, root, 'PRE'))) {
moveRangeBoundariesDownTree(range);
node = range.startContainer;
const offset = range.startOffset;
if (!(node instanceof Text)) {
node = document.createTextNode('');
parent.insertBefore(node, parent.firstChild);
}
// If blank line: split and insert default block
if (
!lineBreakOnly &&
node instanceof Text &&
(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,
) as Node;
node = nodeAfterSplit.previousSibling!;
if (!node.textContent) {
detach(node);
}
node = this.createDefaultBlock();
nodeAfterSplit.parentNode!.insertBefore(node, nodeAfterSplit);
if (!nodeAfterSplit.textContent) {
detach(nodeAfterSplit);
}
range.setStart(node, 0);
} else {
(node as Text).insertData(offset, '\n');
fixCursor(parent);
// 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 as Text).length === offset + 1) {
range.setStartAfter(node);
} else {
range.setStart(node, offset + 1);
}
}
range.collapse(true);
this.setSelection(range);
this._updatePath(range, true);
this._docWasChanged();
return this;
}
// If this is a malformed bit of document or in a table;
// just play it safe and insert a <br>.
if (!block || lineBreakOnly || /^T[HD]$/.test(block.nodeName)) {
// If inside an <a>, move focus out
moveRangeBoundaryOutOf(range, 'A', root);
insertNodeInRange(range, createElement('BR'));
range.collapse(false);
this.setSelection(range);
this._updatePath(range, true);
return this;
}
// If in a list, we'll split the LI instead.
if ((parent = getNearest(block, root, 'LI'))) {
block = parent;
}
if (isEmptyBlock(block as Element)) {
if (
getNearest(block, root, 'UL') ||
getNearest(block, root, 'OL')
) {
// Break list
this.decreaseListLevel(range);
return this;
// Break blockquote
} else if (getNearest(block, root, 'BLOCKQUOTE')) {
this.removeQuote(range);
return this;
}
}
// Otherwise, split at cursor point.
node = range.startContainer;
const offset = range.startOffset;
let splitTag = this.tagAfterSplit[block.nodeName];
nodeAfterSplit = split(
node,
offset,
block.parentNode!,
this._root,
) as Node;
const config = this._config;
let splitProperties: Record<string, string> | null = null;
if (!splitTag) {
splitTag = config.blockTag;
splitProperties = config.blockAttributes;
}
// Make sure the new node is the correct type.
if (!hasTagAttributes(nodeAfterSplit, splitTag, splitProperties)) {
block = createElement(splitTag, splitProperties);
if ((nodeAfterSplit as HTMLElement).dir) {
(block as HTMLElement).dir = (
nodeAfterSplit as HTMLElement
).dir;
}
replaceWith(nodeAfterSplit, block);
block.appendChild(empty(nodeAfterSplit));
nodeAfterSplit = block;
}
// Clean up any empty inlines if we hit enter at the beginning of the
// block
removeZWS(block);
removeEmptyInlines(block);
fixCursor(block);
// Focus cursor
// If there's a <b>/<i> etc. at the beginning of the split
// make sure we focus inside it.
while (nodeAfterSplit instanceof Element) {
let child = nodeAfterSplit.firstChild;
let 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 = document.createTextNode('') as Text;
replaceWith(nodeAfterSplit, child);
nodeAfterSplit = child;
break;
}
while (child && child instanceof Text && !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 instanceof Text) {
break;
}
nodeAfterSplit = child;
}
range = createRange(nodeAfterSplit, 0);
this.setSelection(range);
this._updatePath(range, true);
return this;
}
forEachBlock(
fn: (el: HTMLElement) => any,
mutates: boolean,
range?: Range,
): Squire {
if (!range) {
range = this.getSelection();
}
// Save undo checkpoint
if (mutates) {
this.saveUndoState(range);
}
const root = this._root;
let start = getStartBlockOfRange(range, root);
const end = getEndBlockOfRange(range, root);
if (start && end) {
do {
if (fn(start) || start === end) {
break;
}
} while ((start = getNextBlock(start, root)));
}
if (mutates) {
this.setSelection(range);
// Path may have changed
this._updatePath(range, true);
}
return this;
}
modifyBlocks(modify: (x: DocumentFragment) => Node, range?: Range): Squire {
if (!range) {
range = this.getSelection();
}
// 1. Save undo checkpoint and bookmark selection
this._recordUndoState(range, this._isInUndoState);
// 2. Expand range to block boundaries
const root = this._root;
expandRangeToBlockBoundaries(range, root);
// 3. Remove range.
moveRangeBoundariesUpTree(range, root, root, root);
const frag = extractContentsOfRange(range, root, root);
// 4. Modify tree of fragment and reinsert.
if (!range.collapsed) {
// After extracting contents, the range edges will still be at the
// level we began the spilt. We want to insert directly in the
// root, so move the range up there.
let node = range.endContainer;
if (node === root) {
range.collapse(false);
} else {
while (node.parentNode !== root) {
node = node.parentNode!;
}
range.setStartBefore(node);
range.collapse(true);
}
}
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;
}
// ---
setTextAlignment(alignment: string): Squire {
this.forEachBlock((block: HTMLElement) => {
const className = block.className
.split(/\s+/)
.filter((klass) => {
return !!klass && !/^align/.test(klass);
})
.join(' ');
if (alignment) {
block.className = className + ' align-' + alignment;
block.style.textAlign = alignment;
} else {
block.className = className;
block.style.textAlign = '';
}
}, true);
return this.focus();
}
setTextDirection(direction: string | null): Squire {
this.forEachBlock((block: HTMLElement) => {
if (direction) {
block.dir = direction;
} else {
block.removeAttribute('dir');
}
}, true);
return this.focus();
}
// ---
_getListSelection(
range: Range,
root: Element,
): [Node, Node | null, Node | null] | null {
let list: Node | null = range.commonAncestorContainer;
let startLi: Node | null = range.startContainer;
let endLi: Node | null = 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];
}
increaseListLevel(range?: Range) {
if (!range) {
range = this.getSelection();
}
// Get start+end li in single common ancestor
const root = this._root;
const listSelection = this._getListSelection(range, root);
if (!listSelection) {
return this.focus();
}
// eslint-disable-next-line prefer-const
let [list, startLi, endLi] = listSelection;
if (!startLi || startLi === list.firstChild) {
return this.focus();
}
// Save undo checkpoint and bookmark selection
this._recordUndoState(range, this._isInUndoState);
// Increase list depth
const type = list.nodeName;
let newParent = startLi.previousSibling!;
let listAttrs: Record<string, string> | null;
let next: Node | null;
if (newParent.nodeName !== type) {
listAttrs = this._config.tagAttributes[type.toLowerCase()];
newParent = createElement(type, listAttrs);
list.insertBefore(newParent, startLi);
}
do {
next = startLi === endLi ? null : startLi.nextSibling;
newParent.appendChild(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?: Range) {
if (!range) {
range = this.getSelection();
}
const root = this._root;
const listSelection = this._getListSelection(range, root);
if (!listSelection) {
return this.focus();
}
// eslint-disable-next-line prefer-const
let [list, startLi, endLi] = listSelection;
if (!startLi) {
startLi = list.firstChild;
}
if (!endLi) {
endLi = list.lastChild!;
}
// Save undo checkpoint and bookmark selection
this._recordUndoState(range, this._isInUndoState);
let next: Node | null;
let insertBefore: Node | null = null;
if (startLi) {
// Find the new parent list node
let newParent = list.parentNode!;
// Split list if necessary
insertBefore = !endLi.nextSibling
? list.nextSibling
: (split(list, endLi.nextSibling, newParent, root) as Node);
if (newParent !== root && newParent.nodeName === 'LI') {
newParent = newParent.parentNode!;
while (insertBefore) {
next = insertBefore.nextSibling;
endLi.appendChild(insertBefore);
insertBefore = next;
}
insertBefore = list.parentNode!.nextSibling;
}
const makeNotList = !/^[OU]L$/.test(newParent.nodeName);
do {
next = startLi === endLi ? null : startLi.nextSibling;
list.removeChild(startLi);
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();
}
_makeList(frag: DocumentFragment, type: string): DocumentFragment {
const walker = getBlockWalker(frag, this._root);
const tagAttributes = this._config.tagAttributes;
const listAttrs = tagAttributes[type.toLowerCase()];
const listItemAttrs = tagAttributes.li;
let node: Node | null;
while ((node = walker.nextNode())) {
if (node.parentNode! instanceof HTMLLIElement) {
node = node.parentNode!;
walker.currentNode = node.lastChild!;
}
if (!(node instanceof HTMLLIElement)) {
const newLi = createElement('LI', listItemAttrs);
if ((node as HTMLElement).dir) {
newLi.dir = (node as HTMLElement).dir;
}
// Have we replaced the previous block with a new <ul>/<ol>?
const prev: ChildNode | null = node.previousSibling;
if (prev && prev.nodeName === type) {
prev.appendChild(newLi);
detach(node);
// Otherwise, replace this block with the <ul>/<ol>
} else {
replaceWith(node, createElement(type, listAttrs, [newLi]));
}
newLi.appendChild(empty(node));
walker.currentNode = newLi;
} else {
node = node.parentNode;
const tag = node!.nodeName;
if (tag !== type && /^[OU]L$/.test(tag)) {
replaceWith(
node!,
createElement(type, listAttrs, [empty(node!)]),
);
}
}
}
return frag;
}
makeUnorderedList(): Squire {
this.modifyBlocks((frag) => this._makeList(frag, 'UL'));
return this.focus();
}
makeOrderedList(): Squire {
this.modifyBlocks((frag) => this._makeList(frag, 'OL'));
return this.focus();
}
removeList(): Squire {
this.modifyBlocks((frag) => {
const lists = frag.querySelectorAll('UL, OL');
const items = frag.querySelectorAll('LI');
const root = this._root;
for (let i = 0, l = lists.length; i < l; i += 1) {
const list = lists[i];
const listFrag = empty(list);
fixContainer(listFrag, root);
replaceWith(list, listFrag);
}
for (let i = 0, l = items.length; i < l; i += 1) {
const item = items[i];
if (isBlock(item)) {
replaceWith(item, this.createDefaultBlock([empty(item)]));
} else {
fixContainer(item, root);
replaceWith(item, empty(item));
}
}
return frag;
});
return this.focus();
}
// ---
increaseQuoteLevel(range?: Range): Squire {
this.modifyBlocks(
(frag) =>
createElement(
'BLOCKQUOTE',
this._config.tagAttributes.blockquote,
[frag],
),
range,
);
return this.focus();
}
decreaseQuoteLevel(range?: Range): Squire {
this.modifyBlocks((frag) => {
Array.from(frag.querySelectorAll('blockquote'))
.filter((el: Node) => {
return !getNearest(el.parentNode, frag, 'BLOCKQUOTE');
})
.forEach((el: Node) => {
replaceWith(el, empty(el));
});
return frag;
}, range);
return this.focus();
}
removeQuote(range?: Range): Squire {
this.modifyBlocks(
(/* frag */) =>
this.createDefaultBlock([
createElement('INPUT', {
id: this.startSelectionId,
type: 'hidden',
}),
createElement('INPUT', {
id: this.endSelectionId,
type: 'hidden',
}),
]),
range,
);
return this.focus();
}
// ---
code(): Squire {
const range = this.getSelection();
if (range.collapsed || isContainer(range.commonAncestorContainer)) {
this.modifyBlocks((frag) => {
const root = this._root;
const output = document.createDocumentFragment();
const blockWalker = getBlockWalker(frag, root);
let node: Element | Text | null;
// 1. Extract inline content; drop all blocks and contains.
while ((node = blockWalker.nextNode())) {
// 2. Replace <br> with \n in content
let nodes = node.querySelectorAll('BR');
const brBreaksLine: boolean[] = [];
let l = nodes.length;
// Must calculate whether the <br> breaks a line first,
// because if we have two <br>s next to each other, after
// the first one is converted to a block split, the second
// will be at the end of a block and therefore seem to not
// be a line break. But in its original context it was, so
// we should also convert it to a block split.
for (let i = 0; i < l; i += 1) {
brBreaksLine[i] = isLineBreak(nodes[i], false);
}
while (l--) {
const br = nodes[l];
if (!brBreaksLine[l]) {
detach(br);
} else {
replaceWith(br, document.createTextNode('\n'));
}
}
// 3. Remove <code>; its format clashes with <pre>
nodes = node.querySelectorAll('CODE');
l = nodes.length;
while (l--) {
replaceWith(nodes[l], empty(nodes[l]));
}
if (output.childNodes.length) {
output.appendChild(document.createTextNode('\n'));
}
output.appendChild(empty(node));
}
// 4. Replace nbsp with regular sp
const textWalker = new TreeIterator<Text>(output, SHOW_TEXT);
while ((node = textWalker.nextNode())) {
// eslint-disable-next-line no-irregular-whitespace
node.data = node.data.replace(/ /g, ' '); // nbsp -> sp
}
output.normalize();
return fixCursor(
createElement('PRE', this._config.tagAttributes.pre, [
output,
]),
);
}, range);
this.focus();
} else {
this.changeFormat(
{
tag: 'CODE',
attributes: this._config.tagAttributes.code,
},
null,
range,
);
}
return this;
}
removeCode(): Squire {
const range = this.getSelection();
const ancestor = range.commonAncestorContainer;
const inPre = getNearest(ancestor, this._root, 'PRE');
if (inPre) {
this.modifyBlocks((frag) => {
const root = this._root;
const pres = frag.querySelectorAll('PRE');
let l = pres.length;
while (l--) {
const pre = pres[l];
const walker = new TreeIterator<Text>(pre, SHOW_TEXT);
let node: Text | null;
while ((node = walker.nextNode())) {
let value = node.data;
value = value.replace(/ (?= )/g, ' '); // sp -> nbsp
const contents = document.createDocumentFragment();
let index: number;
while ((index = value.indexOf('\n')) > -1) {
contents.appendChild(
document.createTextNode(value.slice(0, index)),
);
contents.appendChild(createElement('BR'));
value = value.slice(index + 1);
}
node.parentNode!.insertBefore(contents, node);
node.data = value;
}
fixContainer(pre, root);
replaceWith(pre, empty(pre));
}
return frag;
}, range);
this.focus();
} else {
this.changeFormat(null, { tag: 'CODE' }, range);
}
return this;
}
toggleCode(): Squire {
if (this.hasFormat('PRE') || this.hasFormat('CODE')) {
this.removeCode();
} else {
this.code();
}
return this;
}
// ---
_removeFormatting(
root: DocumentFragment | Element,
clean: DocumentFragment | Element,
): DocumentFragment | Element {
for (
let node = root.firstChild, next: ChildNode | null;
node;
node = next
) {
next = node.nextSibling;
if (isInline(node)) {
if (
node instanceof Text ||
node.nodeName === 'BR' ||
node.nodeName === 'IMG'
) {
clean.appendChild(node);
continue;
}
} else if (isBlock(node)) {
clean.appendChild(
this.createDefaultBlock([
this._removeFormatting(
node as Element,
document.createDocumentFragment(),
),
]),
);
continue;
}
this._removeFormatting(node as Element, clean);
}
return clean;
}
removeAllFormatting(range?: Range): Squire {
if (!range) {
range = this.getSelection();
}
if (range.collapsed) {
return this.focus();
}
const root = this._root;
let stopNode = range.commonAncestorContainer;
while (stopNode && !isBlock(stopNode)) {
stopNode = stopNode.parentNode!;
}
if (!stopNode) {
expandRangeToBlockBoundaries(range, root);
stopNode = root;
}
if (stopNode instanceof Text) {
return this.focus();
}
// Record undo point
this.saveUndoState(range);
// Avoid splitting where we're already at edges.
moveRangeBoundariesUpTree(range, stopNode, stopNode, root);
// Split the selection up to the block, or if whole selection in same
// block, expand range boundaries to ends of block and split up to root.
const startContainer = range.startContainer;
let startOffset = range.startOffset;
const endContainer = range.endContainer;
let endOffset = range.endOffset;
// Split end point first to avoid problems when end and start
// in same container.
const formattedNodes = document.createDocumentFragment();
const cleanNodes = document.createDocumentFragment();
const nodeAfterSplit = split(endContainer, endOffset, stopNode, root);
let nodeInSplit = split(startContainer, startOffset, stopNode, root);
let nextNode: ChildNode | null;
// Then replace contents in split with a cleaned version of the same:
// blocks become default blocks, text and leaf nodes survive, everything
// else is obliterated.
while (nodeInSplit !== nodeAfterSplit) {
nextNode = nodeInSplit!.nextSibling;
formattedNodes.appendChild(nodeInSplit!);
nodeInSplit = nextNode;
}
this._removeFormatting(formattedNodes, cleanNodes);
cleanNodes.normalize();
nodeInSplit = cleanNodes.firstChild;
nextNode = cleanNodes.lastChild;
// Restore selection
if (nodeInSplit) {
stopNode.insertBefore(cleanNodes, nodeAfterSplit);
const childNodes = Array.from(stopNode.childNodes) as Node[];
startOffset = childNodes.indexOf(nodeInSplit);
endOffset = nextNode ? childNodes.indexOf(nextNode) + 1 : 0;
} else if (nodeAfterSplit) {
const childNodes = Array.from(stopNode.childNodes) as Node[];
startOffset = childNodes.indexOf(nodeAfterSplit);
endOffset = startOffset;
}
// Merge text nodes at edges, if possible
range.setStart(stopNode, startOffset);
range.setEnd(stopNode, endOffset);
mergeInlines(stopNode, range);
// And move back down the tree
moveRangeBoundariesDownTree(range);
this.setSelection(range);
this._updatePath(range, true);
return this.focus();
}
}
// ---
export { Squire, SquireConfig };