PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

navigateHistory only when at edges of document, to prevent Firefox bug

Browse source 
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2018-07-10 10:28:17 +01:00
parent 51591a4d62
commit 58301e5dd4
No known key found for this signature in database
GPG key ID: 3F879DA5AD802A5E
1 changed files with 8 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/components/views/rooms/MessageComposerInput.js
View file

@ -1140,41 +1140,18 @@ export default class MessageComposerInput extends React.Component {
// Select history only if we are not currently auto-completing // Select history only if we are not currently auto-completing
if (this.autocomplete.state.completionList.length === 0) { if (this.autocomplete.state.completionList.length === 0) {
const selection = this.state.editorState.selection;
// determine whether our cursor is at the top or bottom of the multiline // selection must be collapsed
// input box by just looking at the position of the plain old DOM selection. if (!selection.isCollapsed) return;
const selection = window.getSelection(); const document = this.state.editorState.document;
const range = selection.getRangeAt(0);
const cursorRect = range.getBoundingClientRect();
const editorNode = ReactDOM.findDOMNode(this.refs.editor); // and we must be at the edge of the document (up=start, down=end)
const editorRect = editorNode.getBoundingClientRect();
// heuristic to handle tall emoji, pills, etc pushing the cursor away from the top
// or bottom of the page.
// XXX: is this going to break on large inline images or top-to-bottom scripts?
const EDGE_THRESHOLD = 15;
let navigateHistory = false;
if (up) { if (up) {
const scrollCorrection = editorNode.scrollTop; if (!selection.isAtStartOf(document)) return;
const distanceFromTop = cursorRect.top - editorRect.top + scrollCorrection; } else {
console.log(`Cursor distance from editor top is ${distanceFromTop}`); if (!selection.isAtEndOf(document)) return;
if (distanceFromTop < EDGE_THRESHOLD) {
navigateHistory = true;
} }
}
else {
const scrollCorrection =
editorNode.scrollHeight - editorNode.clientHeight - editorNode.scrollTop;
const distanceFromBottom = editorRect.bottom - cursorRect.bottom + scrollCorrection;
console.log(`Cursor distance from editor bottom is ${distanceFromBottom}`);
if (distanceFromBottom < EDGE_THRESHOLD) {
navigateHistory = true;
}
}
if (!navigateHistory) return;
const selected = this.selectHistory(up); const selected = this.selectHistory(up);
if (selected) { if (selected) {