mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-16 07:41:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Allow click inserting mentions into the edit composer too

Browse source
This commit is contained in:
Michael Telatynski 2021-04-13 14:52:26 +01:00
parent ee9e1a72cb
commit ace3a62bac
4 changed files with 63 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/components/structures/TimelinePanel.js
View file

@ -450,21 +450,41 @@ class TimelinePanel extends React.Component {
}; };
onAction = payload => { onAction = payload => {
if (payload.action === 'ignore_state_changed') { switch (payload.action) {
this.forceUpdate(); case "ignore_state_changed":
} this.forceUpdate();
if (payload.action === "edit_event") { break;
const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
this.setState({editState}, () => { case "edit_event": {
if (payload.event && this._messagePanel.current) { const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
this._messagePanel.current.scrollToEventIfNeeded( this.setState({editState}, () => {
payload.event.getId(), if (payload.event && this._messagePanel.current) {
); this._messagePanel.current.scrollToEventIfNeeded(
payload.event.getId(),
);
}
});
break;
}
case "insert_mention": {
if (this.state.editState) {
dis.dispatch({
...payload,
action: "insert_mention_edit_composer",
});
} else {
dis.dispatch({
...payload,
action: "insert_mention_send_composer",
});
} }
}); break;
} }
if (payload.action === "scroll_to_bottom") {
this.jumpToLiveTimeline(); case "scroll_to_bottom":
this.jumpToLiveTimeline();
break;
} }
}; };

19
src/components/views/rooms/BasicMessageComposer.tsx
View file

@ -713,4 +713,23 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
focus() { focus() {
this.editorRef.current.focus(); this.editorRef.current.focus();
} }
public insertMention(userId: string) {
const {model} = this.props;
const {partCreator} = model;
const member = this.props.room.getMember(userId);
const displayName = member ?
member.rawDisplayName : userId;
const caret = this.getCaret();
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
// index is -1 if there are no parts but we only care for if this would be the part in position 0
const insertIndex = position.index > 0 ? position.index : 0;
const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
model.transform(() => {
const addedLen = model.insert(parts, position);
return model.positionForOffset(caret.offset + addedLen, true);
});
// refocus on composer, as we just clicked "Mention"
this.focus();
}
} }

8
src/components/views/rooms/EditMessageComposer.js
View file

@ -120,6 +120,7 @@ export default class EditMessageComposer extends React.Component {
saveDisabled: true, saveDisabled: true,
}; };
this._createEditorModel(); this._createEditorModel();
this.dispatcherRef = dis.register(this.onAction);
} }
_setEditorRef = ref => { _setEditorRef = ref => {
@ -235,6 +236,7 @@ export default class EditMessageComposer extends React.Component {
// then when mounting the editor again with the same editor state, // then when mounting the editor again with the same editor state,
// it will set the cursor at the end. // it will set the cursor at the end.
this.props.editState.setEditorState(caret, parts); this.props.editState.setEditorState(caret, parts);
dis.unregister(this.dispatcherRef);
} }
_createEditorModel() { _createEditorModel() {
@ -278,6 +280,12 @@ export default class EditMessageComposer extends React.Component {
}); });
}; };
onAction = payload => {
if (payload.action === "insert_mention_edit_composer" && this._editorRef) {
this._editorRef.insertMention(payload.user_id);
}
};
render() { render() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton'); const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}> return (<div className={classNames("mx_EditMessageComposer", this.props.className)} onKeyDown={this._onKeyDown}>

23
src/components/views/rooms/SendMessageComposer.js
View file

@ -482,8 +482,8 @@ export default class SendMessageComposer extends React.Component {
case Action.FocusComposer: case Action.FocusComposer:
this._editorRef && this._editorRef.focus(); this._editorRef && this._editorRef.focus();
break; break;
case 'insert_mention': case 'insert_mention_send_composer':
this._insertMention(payload.user_id); this._editorRef && this._editorRef.insertMention(payload.user_id);
break; break;
case 'quote': case 'quote':
this._insertQuotedMessage(payload.event); this._insertQuotedMessage(payload.event);
@ -494,25 +494,6 @@ export default class SendMessageComposer extends React.Component {
} }
}; };
_insertMention(userId) {
const {model} = this;
const {partCreator} = model;
const member = this.props.room.getMember(userId);
const displayName = member ?
member.rawDisplayName : userId;
const caret = this._editorRef.getCaret();
const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
// index is -1 if there are no parts but we only care for if this would be the part in position 0
const insertIndex = position.index > 0 ? position.index : 0;
const parts = partCreator.createMentionParts(insertIndex, displayName, userId);
model.transform(() => {
const addedLen = model.insert(parts, position);
return model.positionForOffset(caret.offset + addedLen, true);
});
// refocus on composer, as we just clicked "Mention"
this._editorRef && this._editorRef.focus();
}
_insertQuotedMessage(event) { _insertQuotedMessage(event) {
const {model} = this; const {model} = this;
const {partCreator} = model; const {partCreator} = model;