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

Merge pull request #1159 from matrix-org/luke/fix-rte-history-vs-autocomplete

Browse source 
Be sensible about handling up/down vs tab/tab-shift
This commit is contained in:
Luke Barnard 2017-06-29 16:59:30 +01:00 committed by GitHub
commit 6ab691d334
1 changed files with 50 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -558,55 +558,64 @@ export default class MessageComposerInput extends React.Component {
return true; return true;
} }
selectHistory = async (completion, delta) => { onUpArrow = (e) => {
if (completion == null) { this.onVerticalArrow(e, true);
const newContent = this.historyManager.getItem(delta, this.state.isRichtextEnabled ? 'html' : 'markdown');
if (!newContent) return false;
let editorState = EditorState.push(
this.state.editorState,
newContent,
'insert-characters',
);
// Move selection to the end of the selected history
let newSelection = SelectionState.createEmpty(newContent.getLastBlock().getKey());
newSelection = newSelection.merge({
focusOffset: newContent.getLastBlock().getLength(),
anchorOffset: newContent.getLastBlock().getLength(),
});
editorState = EditorState.forceSelection(editorState, newSelection);
this.setState({editorState});
return true;
}
return await this.setDisplayedCompletion(completion);
}; };
onUpArrow = async (e) => { onDownArrow = (e) => {
this.onVerticalArrow(e, false);
};
onVerticalArrow = (e, up) => {
e.preventDefault(); e.preventDefault();
const completion = this.autocomplete.onUpArrow(); // Select history only if we are not currently auto-completing
return this.selectHistory(completion, -1);
};
onDownArrow = async (e) => {
e.preventDefault();
const completion = this.autocomplete.onDownArrow();
return this.selectHistory(completion, -1);
};
// tab and shift-tab are mapped to down and up arrow respectively
onTab = async (e) => {
e.preventDefault(); // we *never* want tab's default to happen, but we do want up/down sometimes
if (this.autocomplete.state.completionList.length === 0) { if (this.autocomplete.state.completionList.length === 0) {
// XXX THIS IS EVIL. We should not be emulating other keys when pressing other keys return this.selectHistory(up);
// This causes issues such as https://github.com/vector-im/riot-web/issues/4445
await this.autocomplete.forceComplete();
this.onDownArrow(e);
} else { } else {
await (e.shiftKey ? this.onUpArrow : this.onDownArrow)(e); return this.moveAutocompleteSelection(up);
} }
}; };
selectHistory = async (up) => {
const delta = up ? -1 : 1;
const newContent = this.historyManager.getItem(delta, this.state.isRichtextEnabled ? 'html' : 'markdown');
if (!newContent) return false;
let editorState = EditorState.push(
this.state.editorState,
newContent,
'insert-characters',
);
// Move selection to the end of the selected history
let newSelection = SelectionState.createEmpty(newContent.getLastBlock().getKey());
newSelection = newSelection.merge({
focusOffset: newContent.getLastBlock().getLength(),
anchorOffset: newContent.getLastBlock().getLength(),
});
editorState = EditorState.forceSelection(editorState, newSelection);
this.setState({editorState});
return true;
};
onTab = async (e) => {
e.preventDefault();
if (this.autocomplete.state.completionList.length === 0) {
// Force completions to show for the text currently entered
await this.autocomplete.forceComplete();
// Select the first item by moving "down"
await this.moveAutocompleteSelection(false);
} else {
await this.moveAutocompleteSelection(e.shiftKey);
}
};
moveAutocompleteSelection = (up) => {
const completion = up ? this.autocomplete.onUpArrow() : this.autocomplete.onDownArrow();
return this.setDisplayedCompletion(completion);
};
onEscape = async (e) => { onEscape = async (e) => {
e.preventDefault(); e.preventDefault();
if (this.autocomplete) { if (this.autocomplete) {