Custom emotes

res/css/_components.pcss

@@ -273,6 +273,7 @@
 @import "./views/rooms/_E2EIcon.pcss";
 @import "./views/rooms/_EditMessageComposer.pcss";
 @import "./views/rooms/_EmojiButton.pcss";
+@import "./views/rooms/_Emotes.pcss";
 @import "./views/rooms/_EntityTile.pcss";
 @import "./views/rooms/_EventBubbleTile.pcss";
 @import "./views/rooms/_EventTile.pcss";
@@ -321,6 +322,7 @@
 @import "./views/settings/_AvatarSetting.pcss";
 @import "./views/settings/_CrossSigningPanel.pcss";
 @import "./views/settings/_CryptographyPanel.pcss";
+@import "./views/settings/_EmoteSettings.pcss";
 @import "./views/settings/_FontScalingPanel.pcss";
 @import "./views/settings/_ImageSizePanel.pcss";
 @import "./views/settings/_IntegrationManager.pcss";

res/css/views/dialogs/_RoomSettingsDialog.pcss

@@ -49,6 +49,9 @@ limitations under the License.
 .mx_RoomSettingsDialog_warningIcon::before {
     mask-image: url("$(res)/img/element-icons/room/settings/advanced.svg");
 }
+.mx_RoomSettingsDialog_emotesIcon::before {
+    mask-image: url("$(res)/img/element-icons/room/message-bar/emoji.svg");
+}
 
 .mx_RoomSettingsDialog_peopleIcon::before {
     mask-image: url("$(res)/img/element-icons/group-members.svg");

res/css/views/rooms/_Emotes.pcss

@@ -0,0 +1,19 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_Emote {
+    height: 32px;
+}

res/css/views/settings/_EmoteSettings.pcss

@@ -0,0 +1,78 @@
+/*
+Copyright 2023 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_EmoteSettings {
+    margin-inline-end: var(--SettingsTab_fullWidthField-margin-inline-end);
+    border-bottom: 1px solid $quinary-content;
+
+    .mx_EmoteSettings_emoteUpload {
+        display: none;
+    }
+    .mx_EmoteSettings_addEmoteField {
+        display: flex;
+        width: 100%;
+    }
+    .mx_EmoteSettings_uploadButton {
+        margin-left: auto;
+        align-self: center;
+    }
+    .mx_EmoteSettings_deleteButton {
+        margin-left: auto;
+        align-self: center;
+    }
+    .mx_EmoteSettings_uploadedEmoteImage {
+        height: 30px;
+        width: var(--emote-image-width) * 30 / var(--emote-image-height); // Sets emote height to 30px and scales the width accordingly
+        margin-left: 30px;
+        align-self: center;
+    }
+    .mx_EmoteSettings_Emote {
+        display: flex;
+
+        .mx_EmoteSettings_Emote_controls {
+            flex-grow: 1;
+            margin-inline-end: 54px;
+
+            .mx_Field:first-child {
+                margin-top: 0;
+            }
+
+            .mx_EmoteSettings_Emote_controls_topic {
+                & > textarea {
+                    font-family: inherit;
+                    resize: vertical;
+                }
+
+                &.mx_EmoteSettings_Emote_controls_topic--room textarea {
+                    min-height: 4em;
+                }
+            }
+
+            .mx_EmoteSettings_Emote_controls_userId {
+                margin-inline-end: $spacing-20;
+            }
+        }
+    }
+
+    .mx_EmoteSettings_buttons {
+        margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
+
+        > .mx_AccessibleButton_kind_link {
+            font-size: $font-14px;
+            margin-inline-end: 10px;
+        }
+    }
+}

src/HtmlUtils.tsx

@@ -60,6 +60,8 @@ const BIGEMOJI_REGEX = new RegExp(`^(${EMOJIBASE_REGEX.source})+$`, "i");
 
 const COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
 
+const CUSTOM_EMOTES_REGEX = /:[\w+-]+:/g;
+
 const MEDIA_API_MXC_REGEX = /\/_matrix\/media\/r0\/(?:download|thumbnail)\/(.+?)\/(.+?)(?:[?/]|$)/;
 
 /*
@@ -412,6 +414,7 @@ interface IOpts {
     returnString?: boolean;
     forComposerQuote?: boolean;
     ref?: React.Ref<HTMLSpanElement>;
+    emotes?: Map<string, string>;
 }
 
 export interface IOptsReturnNode extends IOpts {
@@ -522,6 +525,12 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
                 // by an attempt to search for 'foobar'.  Then again, the search query probably wouldn't work either
                 // XXX: hacky bodge to temporarily apply a textFilter to the sanitizeParams structure.
                 sanitizeParams.textFilter = function (safeText) {
+                    if (opts.emotes) {
+                        return highlighter
+                            .applyHighlights(safeText, safeHighlights!)
+                            .join("")
+                            .replace(CUSTOM_EMOTES_REGEX, (m) => (opts?.emotes?.has(m) ? opts.emotes.get(m)! : m));
+                    }
                     return highlighter.applyHighlights(safeText, safeHighlights!).join("");
                 };
             }
@@ -584,7 +593,12 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
         "mx_EventTile_bigEmoji": emojiBody,
         "markdown-body": isHtmlMessage && !emojiBody,
     });
-
+    if (opts.emotes) {
+        const tmp = strippedBody?.replace(CUSTOM_EMOTES_REGEX, (m) => (opts?.emotes?.has(m) ? opts.emotes.get(m)! : m));
+        if (tmp !== strippedBody) {
+            safeBody = tmp;
+        }
+    }
     let emojiBodyElements: JSX.Element[] | undefined;
     if (!safeBody && bodyHasEmoji) {
         emojiBodyElements = formatEmojis(strippedBody, false) as JSX.Element[];

src/autocomplete/Components.tsx

@@ -59,6 +59,8 @@ export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref)
         className,
         children,
         "aria-selected": ariaSelectedAttribute,
+        isEmote,
+        titleComponent,
         ...restProps
     } = props;
     return (
@@ -70,7 +72,9 @@ 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">
+                {isEmote ? <img className="mx_Emote" src={titleComponent} alt="" /> : title}
+            </span>
             <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
             <span className="mx_Autocomplete_Completion_description">{description}</span>
         </div>

src/autocomplete/EmojiProvider.tsx

@@ -22,8 +22,10 @@ import React from "react";
 import { uniq, sortBy, uniqBy, ListIteratee } from "lodash";
 import EMOTICON_REGEX from "emojibase-regex/emoticon";
 import { Room } from "matrix-js-sdk/src/matrix";
+import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 import { EMOJI, Emoji, getEmojiFromUnicode } from "@matrix-org/emojibase-bindings";
 
+import { MatrixClientPeg } from "../MatrixClientPeg";
 import { _t } from "../languageHandler";
 import AutocompleteProvider from "./AutocompleteProvider";
 import QueryMatcher from "./QueryMatcher";
@@ -33,12 +35,16 @@ import SettingsStore from "../settings/SettingsStore";
 import { TimelineRenderingType } from "../contexts/RoomContext";
 import * as recent from "../emojipicker/recent";
 import { filterBoolean } from "../utils/arrays";
+import { decryptFile } from "../utils/DecryptFile";
+import { mediaFromMxc } from "../customisations/Media";
+import { EncryptedFile } from "../customisations/models/IMediaEventContent";
 
 const LIMIT = 20;
 
 // Match for ascii-style ";-)" emoticons or ":wink:" shortcodes provided by emojibase
 // anchored to only match from the start of parts otherwise it'll show emoji suggestions whilst typing matrix IDs
 const EMOJI_REGEX = new RegExp("(" + EMOTICON_REGEX.source + "|(?:^|\\s):[+-\\w]*:?)$", "g");
+const EMOTES_STATE = new UnstableValue("m.room.emotes", "org.matrix.msc3892.emotes");
 
 interface ISortedEmoji {
     emoji: Emoji;
@@ -80,9 +86,21 @@ export default class EmojiProvider extends AutocompleteProvider {
     public matcher: QueryMatcher<ISortedEmoji>;
     public nameMatcher: QueryMatcher<ISortedEmoji>;
     private readonly recentlyUsed: Emoji[];
+    private emotes: Map<string, string> = new Map();
+    private emotesPromise?: Promise<Map<string, string>>;
 
     public constructor(room: Room, renderingType?: TimelineRenderingType) {
         super({ commandRegex: EMOJI_REGEX, renderingType });
+        const emotesEvent = room?.currentState.getStateEvents(EMOTES_STATE.name, "");
+        const rawEmotes = emotesEvent ? emotesEvent.getContent() || {} : {};
+        const emotesMap = new Map();
+        const customEmotesEnabled = SettingsStore.getValue("feature_custom_emotes");
+        for (const shortcode in rawEmotes) {
+            emotesMap.set(shortcode, rawEmotes[shortcode]);
+        }
+        if (room && customEmotesEnabled) {
+            this.emotesPromise = this.decryptEmotes(emotesMap, room?.roomId);
+        }
         this.matcher = new QueryMatcher<ISortedEmoji>(SORTED_EMOJI, {
             keys: [],
             funcs: [(o) => o.emoji.shortcodes.map((s) => `:${s}:`)],
@@ -98,6 +116,25 @@ export default class EmojiProvider extends AutocompleteProvider {
         this.recentlyUsed = Array.from(new Set(filterBoolean(recent.get().map(getEmojiFromUnicode))));
     }
 
+    private async decryptEmotes(
+        emotes: Map<string, string | EncryptedFile>,
+        roomId: string,
+    ): Promise<Map<string, string>> {
+        const decryptedEmoteMap = new Map<string, string>();
+        let decryptedurl = "";
+        const isEnc = MatrixClientPeg.get()?.isRoomEncrypted(roomId);
+        for (const [shortcode, val] of emotes) {
+            if (isEnc) {
+                const blob = await decryptFile(val as EncryptedFile);
+                decryptedurl = URL.createObjectURL(blob);
+            } else {
+                decryptedurl = mediaFromMxc(val as string).srcHttp!;
+            }
+            decryptedEmoteMap.set(":" + shortcode + ":", decryptedurl);
+        }
+        return decryptedEmoteMap;
+    }
+
     public async getCompletions(
         query: string,
         selection: ISelectionRange,
@@ -108,6 +145,21 @@ export default class EmojiProvider extends AutocompleteProvider {
             return []; // don't give any suggestions if the user doesn't want them
         }
 
+        const returnedEmotes = await this.emotesPromise;
+        if (!returnedEmotes) {
+            this.emotes = new Map();
+        } else {
+            this.emotes = returnedEmotes;
+        }
+        const emojisAndEmotes = [...SORTED_EMOJI];
+        for (const [key, val] of this.emotes) {
+            emojisAndEmotes.push({
+                emoji: { label: key, shortcodes: [key], hexcode: key, unicode: val as string, order: 0, group: 0 },
+                _orderBy: 0,
+            });
+        }
+        this.matcher.setObjects(emojisAndEmotes);
+        this.nameMatcher.setObjects(emojisAndEmotes);
         let completions: ISortedEmoji[] = [];
         const { command, range } = this.getCurrentCommand(query, selection);
 
@@ -163,10 +215,15 @@ export default class EmojiProvider extends AutocompleteProvider {
             completions = uniqBy(completions, "emoji");
 
             return completions.map((c) => ({
-                completion: c.emoji.unicode,
+                completion: this.emotes.get(c.emoji.hexcode) ? c.emoji.hexcode : c.emoji.unicode,
                 component: (
-                    <PillCompletion title={`:${c.emoji.shortcodes[0]}:`} aria-label={c.emoji.unicode}>
-                        <span>{c.emoji.unicode}</span>
+                    <PillCompletion
+                        isEmote={this.emotes.get(c.emoji.hexcode) ? true : false}
+                        titleComponent={c.emoji.unicode}
+                        title={`:${c.emoji.shortcodes[0]}:`}
+                        aria-label={c.emoji.unicode}
+                    >
+                        <span>{this.emotes.get(c.emoji.hexcode) ? c.emoji.hexcode : c.emoji.unicode}</span>
                     </PillCompletion>
                 ),
                 range: range!,

src/components/views/dialogs/RoomSettingsDialog.tsx

@@ -28,6 +28,7 @@ import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab
 import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab";
 import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsTab";
 import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
+import EmoteSettingsTab from "../settings/tabs/room/EmoteSettingsTab";
 import { MatrixClientPeg } from "../../../MatrixClientPeg";
 import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -50,6 +51,7 @@ export const enum RoomSettingsTab {
     Notifications = "ROOM_NOTIFICATIONS_TAB",
     Bridges = "ROOM_BRIDGES_TAB",
     Advanced = "ROOM_ADVANCED_TAB",
+    Emotes = "ROOM_EMOTES_TAB",
     PollHistory = "ROOM_POLL_HISTORY_TAB",
 }
 
@@ -193,6 +195,17 @@ class RoomSettingsDialog extends React.Component<IProps, IState> {
             ),
         );
 
+        if (SettingsStore.getValue("feature_custom_emotes")) {
+            tabs.push(
+                new Tab(
+                    RoomSettingsTab.Emotes,
+                    _td("Emotes"),
+                    "mx_RoomSettingsDialog_emotesIcon",
+                    <EmoteSettingsTab roomId={this.props.roomId} />,
+                ),
+            );
+        }
+
         if (SettingsStore.getValue("feature_bridge_state")) {
             tabs.push(
                 new Tab(

src/components/views/emojipicker/Category.tsx

@@ -25,7 +25,7 @@ import { ButtonEvent } from "../elements/AccessibleButton";
 
 const OVERFLOW_ROWS = 3;
 
-export type CategoryKey = keyof typeof DATA_BY_CATEGORY | "recent";
+export type CategoryKey = keyof typeof DATA_BY_CATEGORY | "recent" | "custom";
 
 export interface ICategory {
     id: CategoryKey;

src/components/views/emojipicker/Emoji.tsx

@@ -22,7 +22,7 @@ import { ButtonEvent } from "../elements/AccessibleButton";
 import { RovingAccessibleButton } from "../../../accessibility/RovingTabIndex";
 
 interface IProps {
-    emoji: IEmoji;
+    emoji: EmojiandEmotes;
     selectedEmojis?: Set<string>;
     onClick(ev: ButtonEvent, emoji: IEmoji): void;
     onMouseEnter(emoji: IEmoji): void;
@@ -31,7 +31,10 @@ interface IProps {
     id?: string;
     role?: string;
 }
-
+interface EmojiandEmotes extends IEmoji {
+    customLabel?: string; // Custom label for custom emotes in emojipicker
+    customComponent?: JSX.Element; // Custom react component for rendering custom emotes in emojipicker
+}
 class Emoji extends React.PureComponent<IProps> {
     public render(): React.ReactNode {
         const { onClick, onMouseEnter, onMouseLeave, emoji, selectedEmojis } = this.props;
@@ -48,7 +51,7 @@ class Emoji extends React.PureComponent<IProps> {
                 focusOnMouseOver
             >
                 <div className={`mx_EmojiPicker_item ${isSelected ? "mx_EmojiPicker_item_selected" : ""}`}>
-                    {emoji.unicode}
+                    {emoji.customComponent ?? emoji.unicode}
                 </div>
             </RovingAccessibleButton>
         );