added autocomplete custom emote functionality

Author: nmscode

src/autocomplete/Components.tsx

@@ -46,7 +46,7 @@ export const TextualCompletion = forwardRef<ITextualCompletionProps, any>((props
             aria-selected={ariaSelectedAttribute}
             ref={ref}
         >
-            <span className="mx_Autocomplete_Completion_title">{ title }</span>
+            <span className="mx_Autocomplete_Completion_title">{title}</span>
             <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
             <span className="mx_Autocomplete_Completion_description">{ description }</span>
         </div>
@@ -75,7 +75,7 @@ export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref)
             ref={ref}
         >
             { children }
-            <span className="mx_Autocomplete_Completion_title">{ title }</span>
+            <span className="mx_Autocomplete_Completion_title" dangerouslySetInnerHTML={{ __html: title }}>{}</span>
             <span className="mx_Autocomplete_Completion_subtitle">{ subtitle }</span>
             <span className="mx_Autocomplete_Completion_description">{ description }</span>
         </div>

src/autocomplete/EmojiProvider.tsx

@@ -32,6 +32,7 @@ import SettingsStore from "../settings/SettingsStore";
 import { EMOJI, IEmoji, getEmojiFromUnicode } from '../emoji';
 import { TimelineRenderingType } from '../contexts/RoomContext';
 import * as recent from '../emojipicker/recent';
+import { mediaFromMxc } from "../customisations/Media";
 
 const LIMIT = 20;
 
@@ -75,9 +76,15 @@ export default class EmojiProvider extends AutocompleteProvider {
     matcher: QueryMatcher<ISortedEmoji>;
     nameMatcher: QueryMatcher<ISortedEmoji>;
     private readonly recentlyUsed: IEmoji[];
-
+    emotes:Dictionary<string>;
     constructor(room: Room, renderingType?: TimelineRenderingType) {
         super({ commandRegex: EMOJI_REGEX, renderingType });
+        let emotesEvent = room?.currentState.getStateEvents("m.room.emotes", "");
+        let rawEmotes = emotesEvent ? (emotesEvent.getContent() || {}) : {};
+        this.emotes = {};
+        for (let key in rawEmotes) {
+            this.emotes[key] = "<img class='mx_Emote' title=':"+key+ ":'src=" + mediaFromMxc(rawEmotes[key]).srcHttp + "/>";
+        }
         this.matcher = new QueryMatcher<ISortedEmoji>(SORTED_EMOJI, {
             keys: [],
             funcs: [o => o.emoji.shortcodes.map(s => `:${s}:`)],
@@ -102,7 +109,20 @@ export default class EmojiProvider extends AutocompleteProvider {
         if (!SettingsStore.getValue("MessageComposerInput.suggestEmoji")) {
             return []; // don't give any suggestions if the user doesn't want them
         }
-
+        let emojisAndEmotes=[...SORTED_EMOJI];
+        for(let key in this.emotes){
+            emojisAndEmotes.push({
+                emoji:{label:key,
+                    shortcodes:[this.emotes[key]],
+                    hexcode:"",
+                    unicode:":"+key+":",
+
+                },
+                _orderBy:0
+            })
+        }
+        this.matcher.setObjects(emojisAndEmotes);
+        this.nameMatcher.setObjects(emojisAndEmotes);
         let completions = [];
         const { command, range } = this.getCurrentCommand(query, selection);
 
@@ -146,8 +166,8 @@ export default class EmojiProvider extends AutocompleteProvider {
             completions = completions.map(c => ({
                 completion: c.emoji.unicode,
                 component: (
-                    <PillCompletion title={`:${c.emoji.shortcodes[0]}:`} aria-label={c.emoji.unicode}>
-                        <span>{ c.emoji.unicode }</span>
+                    <PillCompletion title={c.emoji.shortcodes[0]} aria-label={c.emoji.unicode}>
+                        <span>{ this.emotes[c.emoji.shortcodes[0]]? this.emotes[c.emoji.shortcodes[0]]:c.emoji.unicode }</span>
                     </PillCompletion>
                 ),
                 range,