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:
parent
563f5f7bac
commit
0419eff230
3 changed files with 16 additions and 9 deletions
|
@ -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(),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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(),
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
@ -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);
|
||||||
|
|
Loading…
Reference in a new issue