Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit ea2375d

Browse files
committed
added autocomplete custom emote functionality
1 parent 84d5020 commit ea2375d

File tree

2 files changed

+26
-6
lines changed

2 files changed

+26
-6
lines changed

src/autocomplete/Components.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props
4646
aria-selected={ariaSelectedAttribute}
4747
ref={ref}
4848
>
49-
<span className="mx_Autocomplete_Completion_title">{ title }</span>
49+
<span className="mx_Autocomplete_Completion_title">{title}</span>
5050
<span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
5151
<span className="mx_Autocomplete_Completion_description">{ description }</span>
5252
</div>
@@ -75,7 +75,7 @@ export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref)
7575
ref={ref}
7676
>
7777
{ children }
78-
<span className="mx_Autocomplete_Completion_title">{ title }</span>
78+
<span className="mx_Autocomplete_Completion_title" dangerouslySetInnerHTML={{ __html: title }}>{}</span>
7979
<span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
8080
<span className="mx_Autocomplete_Completion_description">{ description }</span>
8181
</div>

src/autocomplete/EmojiProvider.tsx

Lines changed: 24 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ import SettingsStore from "../settings/SettingsStore";
3232
import { EMOJI, IEmoji, getEmojiFromUnicode } from '../emoji';
3333
import { TimelineRenderingType } from '../contexts/RoomContext';
3434
import * as recent from '../emojipicker/recent';
35+
import { mediaFromMxc } from "../customisations/Media";
3536

3637
const LIMIT = 20;
3738

@@ -75,9 +76,15 @@ export default class EmojiProvider extends AutocompleteProvider {
7576
matcher: QueryMatcher<ISortedEmoji>;
7677
nameMatcher: QueryMatcher<ISortedEmoji>;
7778
private readonly recentlyUsed: IEmoji[];
78-
79+
emotes:Dictionary<string>;
7980
constructor(room: Room, renderingType?: TimelineRenderingType) {
8081
super({ commandRegex: EMOJI_REGEX, renderingType });
82+
let emotesEvent = room?.currentState.getStateEvents("m.room.emotes", "");
83+
let rawEmotes = emotesEvent ? (emotesEvent.getContent() || {}) : {};
84+
this.emotes = {};
85+
for (let key in rawEmotes) {
86+
this.emotes[key] = "<img class='mx_Emote' title=':"+key+ ":'src=" + mediaFromMxc(rawEmotes[key]).srcHttp + "/>";
87+
}
8188
this.matcher = new QueryMatcher<ISortedEmoji>(SORTED_EMOJI, {
8289
keys: [],
8390
funcs: [o => o.emoji.shortcodes.map(s => `:${s}:`)],
@@ -102,7 +109,20 @@ export default class EmojiProvider extends AutocompleteProvider {
102109
if (!SettingsStore.getValue("MessageComposerInput.suggestEmoji")) {
103110
return []; // don't give any suggestions if the user doesn't want them
104111
}
105-
112+
let emojisAndEmotes=[...SORTED_EMOJI];
113+
for(let key in this.emotes){
114+
emojisAndEmotes.push({
115+
emoji:{label:key,
116+
shortcodes:[this.emotes[key]],
117+
hexcode:"",
118+
unicode:":"+key+":",
119+
120+
},
121+
_orderBy:0
122+
})
123+
}
124+
this.matcher.setObjects(emojisAndEmotes);
125+
this.nameMatcher.setObjects(emojisAndEmotes);
106126
let completions = [];
107127
const { command, range } = this.getCurrentCommand(query, selection);
108128

@@ -146,8 +166,8 @@ export default class EmojiProvider extends AutocompleteProvider {
146166
completions = completions.map(c => ({
147167
completion: c.emoji.unicode,
148168
component: (
149-
<PillCompletion title={`:${c.emoji.shortcodes[0]}:`} aria-label={c.emoji.unicode}>
150-
<span>{ c.emoji.unicode }</span>
169+
<PillCompletion title={c.emoji.shortcodes[0]} aria-label={c.emoji.unicode}>
170+
<span>{ this.emotes[c.emoji.shortcodes[0]]? this.emotes[c.emoji.shortcodes[0]]:c.emoji.unicode }</span>
151171
</PillCompletion>
152172
),
153173
range,

0 commit comments

Comments
 (0)