expand composer input focus region and apply cursor:text to it

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2018-06-23 16:40:53 +01:00
parent eb80022991
commit e1ba6949d0
No known key found for this signature in database
GPG key ID: 3F879DA5AD802A5E
2 changed files with 9 additions and 4 deletions

View file

@ -70,6 +70,7 @@ limitations under the License.
flex: 1;
display: flex;
flex-direction: column;
cursor: text;
}
.mx_MessageComposer_input {

View file

@ -157,6 +157,7 @@ export default class MessageComposerInput extends React.Component {
this.setDisplayedCompletion = this.setDisplayedCompletion.bind(this);
this.onMarkdownToggleClicked = this.onMarkdownToggleClicked.bind(this);
this.onTextPasted = this.onTextPasted.bind(this);
this.focusComposer = this.focusComposer.bind(this);
const isRichtextEnabled = SettingsStore.getValue('MessageComposerInput.isRichTextEnabled');
@ -270,13 +271,12 @@ export default class MessageComposerInput extends React.Component {
}
onAction = (payload) => {
const editor = this.refs.editor;
let contentState = this.state.editorState.getCurrentContent();
switch (payload.action) {
case 'reply_to_event':
case 'focus_composer':
editor.focus();
this.focusComposer();
break;
case 'insert_mention': {
// Pretend that we've autocompleted this user because keeping two code
@ -319,7 +319,7 @@ export default class MessageComposerInput extends React.Component {
let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
editorState = EditorState.moveSelectionToEnd(editorState);
this.onEditorContentChanged(editorState);
editor.focus();
this.focusComposer();
}
}
break;
@ -1155,6 +1155,10 @@ export default class MessageComposerInput extends React.Component {
this.handleKeyCommand('toggle-mode');
};
focusComposer() {
this.refs.editor.focus();
}
render() {
const activeEditorState = this.state.originalEditorState || this.state.editorState;
@ -1179,7 +1183,7 @@ export default class MessageComposerInput extends React.Component {
activeEditorState.getCurrentContent().getBlocksAsArray());
return (
<div className="mx_MessageComposer_input_wrapper">
<div className="mx_MessageComposer_input_wrapper" onClick={this.focusComposer}>
<div className="mx_MessageComposer_autocomplete_wrapper">
<ReplyPreview />
<Autocomplete