Insert pill onClick of timeline profile

When clicking someone in the timeline, insert a user pill instead of the plaintext "displayname:"
This commit is contained in:
Luke Barnard 2017-07-20 15:46:36 +01:00
parent 563f5f7bac
commit 0419eff230
3 changed files with 16 additions and 9 deletions

View file

@ -297,10 +297,9 @@ module.exports = React.createClass({
onEmoteSenderClick: function(event) { onEmoteSenderClick: function(event) {
const mxEvent = this.props.mxEvent; const mxEvent = this.props.mxEvent;
const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
dis.dispatch({ dis.dispatch({
action: 'insert_displayname', action: 'insert_displayname',
displayname: name.replace(' (IRC)', ''), user_id: mxEvent.getSender(),
}); });
}, },

View file

@ -357,10 +357,10 @@ module.exports = withMatrixClient(React.createClass({
}, },
onSenderProfileClick: function(event) { onSenderProfileClick: function(event) {
var mxEvent = this.props.mxEvent; const mxEvent = this.props.mxEvent;
dis.dispatch({ dis.dispatch({
action: 'insert_displayname', action: 'insert_displayname',
displayname: (mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()).replace(' (IRC)', ''), user_id: mxEvent.getSender(),
}); });
}, },

View file

@ -275,15 +275,23 @@ export default class MessageComposerInput extends React.Component {
case 'focus_composer': case 'focus_composer':
editor.focus(); editor.focus();
break; break;
// TODO change this so we insert a complete user alias
case 'insert_displayname': { case 'insert_displayname': {
const entityKey = Entity.create(
'LINK', 'IMMUTABLE',
{ url: `https://matrix.to/#/${payload.user_id}`},
);
const selection = this.state.editorState.getSelection();
contentState = Modifier.replaceText( contentState = Modifier.replaceText(
contentState, contentState,
this.state.editorState.getSelection(), selection,
`${payload.displayname}: `, `${payload.user_id}`,
null,
entityKey,
); );
const suffix = selection.getStartOffset() === 0 ? ': ' : ' ';
contentState = Modifier.replaceText(contentState, contentState.getSelectionAfter(), suffix);
let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters'); let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters');
editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter()); editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter());
this.onEditorContentChanged(editorState); this.onEditorContentChanged(editorState);