diff --git a/src/autocomplete/UserProvider.js b/src/autocomplete/UserProvider.js index c17d56312b..0a262d30cf 100644 --- a/src/autocomplete/UserProvider.js +++ b/src/autocomplete/UserProvider.js @@ -55,6 +55,7 @@ export default class UserProvider extends AutocompleteProvider { const displayName = (user.name || user.userId || '').replace(' (IRC)', ''); // FIXME when groups are done return { completion: displayName, + suffix: range.start === 0 ? ': ' : ' ', entity: { type: 'LINK', mutability: 'IMMUTABLE', diff --git a/src/components/views/rooms/MessageComposerInput.js b/src/components/views/rooms/MessageComposerInput.js index 48e22ca831..d5a486bb39 100644 --- a/src/components/views/rooms/MessageComposerInput.js +++ b/src/components/views/rooms/MessageComposerInput.js @@ -928,7 +928,7 @@ export default class MessageComposerInput extends React.Component { return false; } - const {range = {}, completion = '', entity = null} = displayedCompletion; + const {range = {}, completion = '', entity = null, suffix = ''} = displayedCompletion; let entityKey; if (entity) { entityKey = Entity.create( @@ -938,7 +938,7 @@ export default class MessageComposerInput extends React.Component { ); } - const contentState = Modifier.replaceText( + let contentState = Modifier.replaceText( activeEditorState.getCurrentContent(), RichText.textOffsetsToSelectionState( range, activeEditorState.getCurrentContent().getBlocksAsArray(), @@ -948,6 +948,12 @@ export default class MessageComposerInput extends React.Component { entityKey, ); + // Move the selection to the end of the block + const afterSelection = contentState.getSelectionAfter(); + if (suffix) { + contentState = Modifier.replaceText(contentState, afterSelection, suffix); + } + let editorState = EditorState.push(activeEditorState, contentState, 'insert-characters'); editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter()); this.setState({editorState, originalEditorState: activeEditorState});