import Parchment from 'parchment'; import clone from 'clone'; import equal from 'deep-equal'; import Emitter from './emitter'; import logger from './logger'; let debug = logger('quill:selection'); class Range { constructor(index, length = 0) { this.index = index; this.length = length; } } class Selection { constructor(scroll, emitter) { this.emitter = emitter; this.scroll = scroll; this.composing = false; this.mouseDown = false; this.root = this.scroll.domNode; this.cursor = Parchment.create('cursor', this); // savedRange is last non-null range this.lastRange = this.savedRange = new Range(0, 0); this.handleComposition(); this.handleDragging(); this.emitter.listenDOM('selectionchange', document, () => { if (!this.mouseDown) { setTimeout(this.update.bind(this, Emitter.sources.USER), 1); } }); this.emitter.on(Emitter.events.EDITOR_CHANGE, (type, delta) => { if (type === Emitter.events.TEXT_CHANGE && delta.length() > 0) { this.update(Emitter.sources.SILENT); } }); this.emitter.on(Emitter.events.SCROLL_BEFORE_UPDATE, () => { if (!this.hasFocus()) return; let native = this.getNativeRange(); if (native == null) return; if (native.start.node === this.cursor.textNode) return; // cursor.restore() will handle // TODO unclear if this has negative side effects this.emitter.once(Emitter.events.SCROLL_UPDATE, () => { try { this.setNativeRange(native.start.node, native.start.offset, native.end.node, native.end.offset); } catch (ignored) {} }); }); this.emitter.on(Emitter.events.SCROLL_OPTIMIZE, (mutations, context) => { if (context.range) { const { startNode, startOffset, endNode, endOffset } = context.range; this.setNativeRange(startNode, startOffset, endNode, endOffset); } }); this.update(Emitter.sources.SILENT); } handleComposition() { this.root.addEventListener('compositionstart', () => { this.composing = true; }); this.root.addEventListener('compositionend', () => { this.composing = false; if (this.cursor.parent) { const range = this.cursor.restore(); if (!range) return; setTimeout(() => { this.setNativeRange(range.startNode, range.startOffset, range.endNode, range.endOffset); }, 1); } }); } handleDragging() { this.emitter.listenDOM('mousedown', document.body, () => { this.mouseDown = true; }); this.emitter.listenDOM('mouseup', document.body, () => { this.mouseDown = false; this.update(Emitter.sources.USER); }); } focus() { if (this.hasFocus()) return; this.root.focus(); this.setRange(this.savedRange); } format(format, value) { if (this.scroll.whitelist != null && !this.scroll.whitelist[format]) return; this.scroll.update(); let nativeRange = this.getNativeRange(); if (nativeRange == null || !nativeRange.native.collapsed || Parchment.query(format, Parchment.Scope.BLOCK)) return; if (nativeRange.start.node !== this.cursor.textNode) { let blot = Parchment.find(nativeRange.start.node, false); if (blot == null) return; // TODO Give blot ability to not split if (blot instanceof Parchment.Leaf) { let after = blot.split(nativeRange.start.offset); blot.parent.insertBefore(this.cursor, after); } else { blot.insertBefore(this.cursor, nativeRange.start.node); // Should never happen } this.cursor.attach(); } this.cursor.format(format, value); this.scroll.optimize(); this.setNativeRange(this.cursor.textNode, this.cursor.textNode.data.length); this.update(); } getBounds(index, length = 0) { let scrollLength = this.scroll.length(); index = Math.min(index, scrollLength - 1); length = Math.min(index + length, scrollLength - 1) - index; let node, [leaf, offset] = this.scroll.leaf(index); if (leaf == null) return null; [node, offset] = leaf.position(offset, true); let range = document.createRange(); if (length > 0) { range.setStart(node, offset); [leaf, offset] = this.scroll.leaf(index + length); if (leaf == null) return null; [node, offset] = leaf.position(offset, true); range.setEnd(node, offset); return range.getBoundingClientRect(); } else { let side = 'left'; let rect; if (node instanceof Text) { if (offset < node.data.length) { range.setStart(node, offset); range.setEnd(node, offset + 1); } else { range.setStart(node, offset - 1); range.setEnd(node, offset); side = 'right'; } rect = range.getBoundingClientRect(); } else { rect = leaf.domNode.getBoundingClientRect(); if (offset > 0) side = 'right'; } return { bottom: rect.top + rect.height, height: rect.height, left: rect[side], right: rect[side], top: rect.top, width: 0 }; } } getNativeRange() { let selection = document.getSelection(); if (selection == null || selection.rangeCount <= 0) return null; let nativeRange = selection.getRangeAt(0); if (nativeRange == null) return null; let range = this.normalizeNative(nativeRange); debug.info('getNativeRange', range); return range; } getRange() { let normalized = this.getNativeRange(); if (normalized == null) return [null, null]; let range = this.normalizedToRange(normalized); return [range, normalized]; } hasFocus() { return document.activeElement === this.root; } normalizedToRange(range) { let positions = [[range.start.node, range.start.offset]]; if (!range.native.collapsed) { positions.push([range.end.node, range.end.offset]); } let indexes = positions.map((position) => { let [node, offset] = position; let blot = Parchment.find(node, true); let index = blot.offset(this.scroll); if (offset === 0) { return index; } else if (blot instanceof Parchment.Container) { return index + blot.length(); } else { return index + blot.index(node, offset); } }); let end = Math.min(Math.max(...indexes), this.scroll.length() - 1); let start = Math.min(end, ...indexes); return new Range(start, end-start); } normalizeNative(nativeRange) { if (!contains(this.root, nativeRange.startContainer) || (!nativeRange.collapsed && !contains(this.root, nativeRange.endContainer))) { return null; } let range = { start: { node: nativeRange.startContainer, offset: nativeRange.startOffset }, end: { node: nativeRange.endContainer, offset: nativeRange.endOffset }, native: nativeRange }; [range.start, range.end].forEach(function(position) { let node = position.node, offset = position.offset; while (!(node instanceof Text) && node.childNodes.length > 0) { if (node.childNodes.length > offset) { node = node.childNodes[offset]; offset = 0; } else if (node.childNodes.length === offset) { node = node.lastChild; offset = node instanceof Text ? node.data.length : node.childNodes.length + 1; } else { break; } } position.node = node, position.offset = offset; }); return range; } rangeToNative(range) { let indexes = range.collapsed ? [range.index] : [range.index, range.index + range.length]; let args = []; let scrollLength = this.scroll.length(); indexes.forEach((index, i) => { index = Math.min(scrollLength - 1, index); let node, [leaf, offset] = this.scroll.leaf(index); [node, offset] = leaf.position(offset, i !== 0); args.push(node, offset); }); if (args.length < 2) { args = args.concat(args); } return args; } scrollIntoView(scrollingContainer) { let range = this.lastRange; if (range == null) return; let bounds = this.getBounds(range.index, range.length); if (bounds == null) return; let limit = this.scroll.length()-1; let [first, ] = this.scroll.line(Math.min(range.index, limit)); let last = first; if (range.length > 0) { [last, ] = this.scroll.line(Math.min(range.index + range.length, limit)); } if (first == null || last == null) return; let scrollBounds = scrollingContainer.getBoundingClientRect(); if (bounds.top < scrollBounds.top) { scrollingContainer.scrollTop -= (scrollBounds.top - bounds.top); } else if (bounds.bottom > scrollBounds.bottom) { scrollingContainer.scrollTop += (bounds.bottom - scrollBounds.bottom); } } setNativeRange(startNode, startOffset, endNode = startNode, endOffset = startOffset, force = false) { debug.info('setNativeRange', startNode, startOffset, endNode, endOffset); if (startNode != null && (this.root.parentNode == null || startNode.parentNode == null || endNode.parentNode == null)) { return; } let selection = document.getSelection(); if (selection == null) return; if (startNode != null) { if (!this.hasFocus()) this.root.focus(); let native = (this.getNativeRange() || {}).native; if (native == null || force || startNode !== native.startContainer || startOffset !== native.startOffset || endNode !== native.endContainer || endOffset !== native.endOffset) { if (startNode.tagName == "BR") { startOffset = [].indexOf.call(startNode.parentNode.childNodes, startNode); startNode = startNode.parentNode; } if (endNode.tagName == "BR") { endOffset = [].indexOf.call(endNode.parentNode.childNodes, endNode); endNode = endNode.parentNode; } let range = document.createRange(); range.setStart(startNode, startOffset); range.setEnd(endNode, endOffset); selection.removeAllRanges(); selection.addRange(range); } } else { selection.removeAllRanges(); this.root.blur(); document.body.focus(); // root.blur() not enough on IE11+Travis+SauceLabs (but not local VMs) } } setRange(range, force = false, source = Emitter.sources.API) { if (typeof force === 'string') { source = force; force = false; } debug.info('setRange', range); if (range != null) { let args = this.rangeToNative(range); this.setNativeRange(...args, force); } else { this.setNativeRange(null); } this.update(source); } update(source = Emitter.sources.USER) { let oldRange = this.lastRange; let [lastRange, nativeRange] = this.getRange(); this.lastRange = lastRange; if (this.lastRange != null) { this.savedRange = this.lastRange; } if (!equal(oldRange, this.lastRange)) { if (!this.composing && nativeRange != null && nativeRange.native.collapsed && nativeRange.start.node !== this.cursor.textNode) { this.cursor.restore(); } let args = [Emitter.events.SELECTION_CHANGE, clone(this.lastRange), clone(oldRange), source]; this.emitter.emit(Emitter.events.EDITOR_CHANGE, ...args); if (source !== Emitter.sources.SILENT) { this.emitter.emit(...args); } } } } function contains(parent, descendant) { try { // Firefox inserts inaccessible nodes around video elements descendant.parentNode; } catch (e) { return false; } // IE11 has bug with Text nodes // https://connect.microsoft.com/IE/feedback/details/780874/node-contains-is-incorrect if (descendant instanceof Text) { descendant = descendant.parentNode; } return parent.contains(descendant); } export { Range, Selection as default };