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

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
res/css/views/rooms/_MessageComposer.scss
View file

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

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

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