mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-02-23 23:54:13 +08:00
fix(focus): Always set selection range into editor on focus
This commit is contained in:
parent
3f6c2b5f55
commit
3d18241ea1
1 changed files with 25 additions and 31 deletions
|
@ -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)
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue