@@ -32,6 +32,7 @@ import SettingsStore from "../settings/SettingsStore";
32
32
import { EMOJI , IEmoji , getEmojiFromUnicode } from '../emoji' ;
33
33
import { TimelineRenderingType } from '../contexts/RoomContext' ;
34
34
import * as recent from '../emojipicker/recent' ;
35
+ import { mediaFromMxc } from "../customisations/Media" ;
35
36
36
37
const LIMIT = 20 ;
37
38
@@ -75,9 +76,15 @@ export default class EmojiProvider extends AutocompleteProvider {
75
76
matcher : QueryMatcher < ISortedEmoji > ;
76
77
nameMatcher : QueryMatcher < ISortedEmoji > ;
77
78
private readonly recentlyUsed : IEmoji [ ] ;
78
-
79
+ emotes : Dictionary < string > ;
79
80
constructor ( room : Room , renderingType ?: TimelineRenderingType ) {
80
81
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
+ }
81
88
this . matcher = new QueryMatcher < ISortedEmoji > ( SORTED_EMOJI , {
82
89
keys : [ ] ,
83
90
funcs : [ o => o . emoji . shortcodes . map ( s => `:${ s } :` ) ] ,
@@ -102,7 +109,20 @@ export default class EmojiProvider extends AutocompleteProvider {
102
109
if ( ! SettingsStore . getValue ( "MessageComposerInput.suggestEmoji" ) ) {
103
110
return [ ] ; // don't give any suggestions if the user doesn't want them
104
111
}
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 ) ;
106
126
let completions = [ ] ;
107
127
const { command, range } = this . getCurrentCommand ( query , selection ) ;
108
128
@@ -146,8 +166,8 @@ export default class EmojiProvider extends AutocompleteProvider {
146
166
completions = completions . map ( c => ( {
147
167
completion : c . emoji . unicode ,
148
168
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 >
151
171
</ PillCompletion >
152
172
) ,
153
173
range,
0 commit comments