mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-11-30 23:31:28 +03:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #1239 from matrix-org/luke/feature-rte-insert-pills-on-click-tl-profile

Browse source 
Insert pill onClick of timeline profile
This commit is contained in:
Luke Barnard 2017-07-21 10:42:48 +01:00 committed by GitHub
commit 8c531a85e9
4 changed files with 32 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/autocomplete/Autocompleter.js
View file

@ -34,12 +34,9 @@ export type Completion = {
component: ?Component, component: ?Component,
range: SelectionRange, range: SelectionRange,
command: ?string, command: ?string,
// An entity applied during the replacement (using draftjs@0.8.1 Entity.create) // If provided, apply a LINK entity to the completion with the
entity: ? { // data = { url: href }.
type: string, href: ?string,
mutability: string,
data: ?Object,
},
}; };
const PROVIDERS = [ const PROVIDERS = [

5
src/components/views/messages/TextualBody.js
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_mention',
displayname: name.replace(' (IRC)', ''), user_id: mxEvent.getSender(),
}); });
}, },

6
src/components/views/rooms/EventTile.js
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_mention',
displayname: (mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()).replace(' (IRC)', ''), user_id: mxEvent.getSender(),
}); });
}, },

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

@ -285,22 +285,20 @@ export default class MessageComposerInput extends React.Component {
case 'focus_composer': case 'focus_composer':
editor.focus(); editor.focus();
break; break;
case 'insert_mention': {
// TODO change this so we insert a complete user alias // Pretend that we've autocompleted this user because keeping two code
// paths for inserting a user pill is not fun
case 'insert_displayname': { const selection = this.state.editorState.getSelection();
contentState = Modifier.replaceText( const member = this.props.room.getMember(payload.user_id);
contentState, const completion = member ? member.name.replace(' (IRC)', '') : payload.user_id;
this.state.editorState.getSelection(), this.setDisplayedCompletion({
`${payload.displayname}: `, completion,
); selection,
let editorState = EditorState.push(this.state.editorState, contentState, 'insert-characters'); href: `https://matrix.to/#/${payload.user_id}`,
editorState = EditorState.forceSelection(editorState, contentState.getSelectionAfter()); suffix: selection.getStartOffset() === 0 ? ': ' : ' ',
this.onEditorContentChanged(editorState); });
editor.focus();
} }
break; break;
case 'quote': { case 'quote': {
let {body, formatted_body} = payload.event.getContent(); let {body, formatted_body} = payload.event.getContent();
formatted_body = formatted_body || escape(body); formatted_body = formatted_body || escape(body);
@ -938,7 +936,8 @@ export default class MessageComposerInput extends React.Component {
return false; return false;
} }
const {range = {}, completion = '', href = null, suffix = ''} = displayedCompletion; const {range = null, completion = '', href = null, suffix = ''} = displayedCompletion;
let entityKey; let entityKey;
let mdCompletion; let mdCompletion;
if (href) { if (href) {
@ -948,11 +947,18 @@ export default class MessageComposerInput extends React.Component {
} }
} }
let selection;
if (range) {
selection = RichText.textOffsetsToSelectionState(
range, activeEditorState.getCurrentContent().getBlocksAsArray(),
);
} else {
selection = activeEditorState.getSelection();
}
let contentState = Modifier.replaceText( let contentState = Modifier.replaceText(
activeEditorState.getCurrentContent(), activeEditorState.getCurrentContent(),
RichText.textOffsetsToSelectionState( selection,
range, activeEditorState.getCurrentContent().getBlocksAsArray(),
),
mdCompletion || completion, mdCompletion || completion,
null, null,
entityKey, entityKey,