mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web.git synced 2024-12-16 05:01:41 +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 => {
if (payload.action === 'ignore_state_changed') {
this.forceUpdate();
}
if (payload.action === "edit_event") {
const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
this.setState({editState}, () => {
if (payload.event && this._messagePanel.current) {
this._messagePanel.current.scrollToEventIfNeeded(
payload.event.getId(),
);
switch (payload.action) {
case "ignore_state_changed":
this.forceUpdate();
break;
case "edit_event": {
const editState = payload.event ? new EditorStateTransfer(payload.event) : null;
this.setState({editState}, () => {
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",
});
}
});
}
if (payload.action === "scroll_to_bottom") {
this.jumpToLiveTimeline();
break;
}
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() {
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,
};
this._createEditorModel();
this.dispatcherRef = dis.register(this.onAction);
}
_setEditorRef = ref => {
@ -235,6 +236,7 @@ export default class EditMessageComposer extends React.Component {
// then when mounting the editor again with the same editor state,
// it will set the cursor at the end.
this.props.editState.setEditorState(caret, parts);
dis.unregister(this.dispatcherRef);
}
_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() {
const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
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:
this._editorRef && this._editorRef.focus();
break;
case 'insert_mention':
this._insertMention(payload.user_id);
case 'insert_mention_send_composer':
this._editorRef && this._editorRef.insertMention(payload.user_id);
break;
case 'quote':
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) {
const {model} = this;
const {partCreator} = model;