PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Redo and fix trailing characters in user pills

Browse source 
This removes the handling of trailing chars from createMentionParts as we need to determine whether or not to insert the trailing char differently in different situations

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-04-07 11:52:07 +02:00
parent c2b66d0dbe
commit 715fff6f0c
No known key found for this signature in database
GPG key ID: 9760693FDD98A790
3 changed files with 6 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -502,10 +502,8 @@ export default class SendMessageComposer extends React.Component {
member.rawDisplayName : userId; member.rawDisplayName : userId;
const caret = this._editorRef.getCaret(); const caret = this._editorRef.getCaret();
const position = model.positionForOffset(caret.offset, caret.atNodeEnd); const position = model.positionForOffset(caret.offset, caret.atNodeEnd);
// createMentionParts() assumes that the mention already has it's own part // Insert suffix only if the caret is at the start of the composer
// which isn't true, therefore we increase the position.index by 1. This const parts = partCreator.createMentionParts(caret.offset === 0, displayName, userId);
// also solves the problem of the index being -1 when the composer is empty.
const parts = partCreator.createMentionParts(position.index + 1, displayName, userId);
model.transform(() => { model.transform(() => {
const addedLen = model.insert(parts, position); const addedLen = model.insert(parts, position);
return model.positionForOffset(caret.offset + addedLen, true); return model.positionForOffset(caret.offset + addedLen, true);

6
src/editor/autocomplete.ts
View file

@ -125,10 +125,8 @@ export default class AutocompleteWrapperModel {
case "at-room": case "at-room":
return [this.partCreator.atRoomPill(completionId), this.partCreator.plain(completion.suffix)]; return [this.partCreator.atRoomPill(completionId), this.partCreator.plain(completion.suffix)];
case "user": case "user":
// not using suffix here, because we also need to calculate // Insert suffix only if the pill is the part with index 0 - we are at the start of the composer
// the suffix when clicking a display name to insert a mention, return this.partCreator.createMentionParts(this.partIndex === 0, text, completionId);
// which happens in createMentionParts
return this.partCreator.createMentionParts(this.partIndex, text, completionId);
case "command": case "command":
// command needs special handling for auto complete, but also renders as plain texts // command needs special handling for auto complete, but also renders as plain texts
return [(this.partCreator as CommandPartCreator).command(text)]; return [(this.partCreator as CommandPartCreator).command(text)];

4
src/editor/parts.ts
View file

@ -543,9 +543,9 @@ export class PartCreator {
return new UserPillPart(userId, displayName, member); return new UserPillPart(userId, displayName, member);
} }
createMentionParts(partIndex: number, displayName: string, userId: string) { createMentionParts(insertTrailingCharacter: boolean, displayName: string, userId: string) {
const pill = this.userPill(displayName, userId); const pill = this.userPill(displayName, userId);
const postfix = this.plain(partIndex === 0 ? ": " : " "); const postfix = this.plain(insertTrailingCharacter ? ": " : " ");
return [pill, postfix]; return [pill, postfix];
} }
} }