fix(focus): Always set selection range into editor on focus

This commit is contained in:
Ben Gotow 2016-05-05 11:44:52 -07:00
parent 3f6c2b5f55
commit 3d18241ea1

View file

@ -26,6 +26,9 @@ import {DropZone, ScrollRegion, Contenteditable} from 'nylas-component-kit';
* @class ComposerEditor * @class ComposerEditor
*/ */
const NODE_END = false;
const NODE_BEGINNING = true;
class ComposerEditor extends Component { class ComposerEditor extends Component {
static displayName = 'ComposerEditor'; static displayName = 'ComposerEditor';
@ -117,20 +120,32 @@ class ComposerEditor extends Component {
// the body. Be sure to choose the last node /above/ the signature and any // the body. Be sure to choose the last node /above/ the signature and any
// quoted text that is visible. (as in forwarded messages.) // quoted text that is visible. (as in forwarded messages.)
// //
this.refs.contenteditable.atomicEdit( ({editor})=> { this.refs.contenteditable.atomicEdit(({editor}) => {
editor.rootNode.focus(); editor.rootNode.focus();
const lastNode = this._findLastNodeBeforeQuoteOrSignature(editor) const lastNode = this._findLastNodeBeforeQuoteOrSignature(editor)
this._selectEndOfNode(lastNode) if (lastNode) {
this._selectNode(lastNode, {collapseTo: NODE_END});
} else {
this._selectNode(editor.rootNode, {collapseTo: NODE_BEGINNING});
}
}); });
} }
focusAbsoluteEnd() {
this.refs.contenteditable.atomicEdit(({editor}) => {
editor.rootNode.focus();
this._selectNode(editor.rootNode, {collapseTo: NODE_END});
});
}
// Note: This method returns null for new drafts, because the leading
// <br> tags contain no text nodes.
_findLastNodeBeforeQuoteOrSignature(editor) { _findLastNodeBeforeQuoteOrSignature(editor) {
const walker = document.createTreeWalker(editor.rootNode, NodeFilter.SHOW_TEXT); const walker = document.createTreeWalker(editor.rootNode, NodeFilter.SHOW_TEXT);
const nodesBelowUserBody = editor.rootNode.querySelectorAll('signature, .gmail_quote, blockquote'); const nodesBelowUserBody = editor.rootNode.querySelectorAll('signature, .gmail_quote, blockquote');
let lastNode = null; let lastNode = null;
let node = walker.nextNode(); let node = walker.nextNode();
while (node != null) { while (node != null) {
let belowUserBody = false; let belowUserBody = false;
for (let i = 0; i < nodesBelowUserBody.length; ++i) { for (let i = 0; i < nodesBelowUserBody.length; ++i) {
@ -148,34 +163,13 @@ class ComposerEditor extends Component {
return lastNode return lastNode
} }
_findAbsoluteLastNode(editor) { _selectNode(node, {collapseTo} = {}) {
const walker = document.createTreeWalker(editor.rootNode, NodeFilter.SHOW_TEXT); const range = document.createRange();
let lastNode = null; range.selectNodeContents(node);
let node = walker.nextNode(); range.collapse(collapseTo);
while (node) { const selection = window.getSelection();
lastNode = node; selection.removeAllRanges();
node = walker.nextNode(); selection.addRange(range);
}
return lastNode;
}
_selectEndOfNode(node) {
if (node) {
const range = document.createRange();
range.selectNodeContents(node);
range.collapse(false);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
}
focusAbsoluteEnd() {
this.refs.contenteditable.atomicEdit( ({editor})=> {
editor.rootNode.focus();
const lastNode = this._findAbsoluteLastNode(editor)
this._selectEndOfNode(lastNode)
});
} }
/** /**