Custom emotes

res/css/_components.pcss

@@ -325,6 +325,7 @@
 @import "./views/settings/_Notifications.pcss";
 @import "./views/settings/_PhoneNumbers.pcss";
 @import "./views/settings/_ProfileSettings.pcss";
+@import "./views/settings/_EmoteSettings.pcss";
 @import "./views/settings/_SecureBackupPanel.pcss";
 @import "./views/settings/_SetIdServer.pcss";
 @import "./views/settings/_SetIntegrationManager.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 .mx_Dialog_title {
     -ms-text-overflow: ellipsis;

res/css/views/rooms/_EventTile.pcss

@@ -827,6 +827,9 @@ $left-gutter: 64px;
     }
 }
 
+.mx_Emote {
+    height: 30px;
+}
 .mx_EventTile_e2eIcon {
     position: relative;
     width: 14px;

res/css/views/settings/_EmoteSettings.pcss

@@ -0,0 +1,74 @@
+/*
+Copyright 2019, 2020 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_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; /* TODO: Use a spacing variable */
+        }
+    }
+}

src/HtmlUtils.tsx

@@ -28,7 +28,6 @@ import { IContent } from "matrix-js-sdk/src/models/event";
 import { Optional } from "matrix-events-sdk";
 import _Linkify from "linkify-react";
 import escapeHtml from "escape-html";
-import GraphemeSplitter from "graphemer";
 
 import {
     _linkifyElement,
@@ -438,6 +437,7 @@ interface IOpts {
     returnString?: boolean;
     forComposerQuote?: boolean;
     ref?: React.Ref<HTMLSpanElement>;
+    emotes?: Map<string, string>;
 }
 
 export interface IOptsReturnNode extends IOpts {
@@ -473,20 +473,85 @@ export function formatEmojis(message: string | undefined, isHtmlMessage: boolean
 
     let text = "";
     let key = 0;
+    let cleanmsg = '';
+    let titles = [];
+    let alts = [];
+    let spoilers=[];
+    const $ = cheerio.load(message, {
+        // @ts-ignore: The `_useHtmlParser2` internal option is the
+        // simplest way to both parse and render using `htmlparser2`.
+        _useHtmlParser2: true,
+        decodeEntities: false,
+    });
+    if (isHtmlMessage) {
+
+        $("img").each(function (i, elm) {
+
+            titles.push($(this).attr("title") ? $(this).attr("title") : null)
+            alts.push($(this).attr("alt") ? $(this).attr("alt") : null)
+            $(this).attr("title", "placeholder")
+            $(this).attr("alt", "placeholder")
+        }
+        )
+
+        $("span").each(function (i, elm) {  
+            if($(this).attr("data-mx-spoiler")){
+                spoilers.push($(this).attr("data-mx-spoiler"))
+                $(this).attr("data-mx-spoiler", "placeholder")
+            }
+
+        })
+        cleanmsg = $.html()
+    }
+    else {
+        cleanmsg = message;
 
-    const splitter = new GraphemeSplitter();
-    for (const char of splitter.iterateGraphemes(message)) {
+    }
+    // We use lodash's grapheme splitter to avoid breaking apart compound emojis
+    for (const char of split(cleanmsg, '')) {
         if (EMOJIBASE_REGEX.test(char)) {
-            if (text) {
-                result.push(text);
-                text = "";
+            if (!isHtmlMessage) {
+                if (text) {
+                    result.push(text);
+                    text = '';
+                }
+
+                result.push(emojiToSpan(char, key));
+                key++;
+            } else {
+                text += emojiToSpan(char, key);
             }
-            result.push(emojiToSpan(char, key));
-            key++;
         } else {
             text += char;
         }
     }
+    if (isHtmlMessage) {
+        console.log("text ",text)
+        const $ = cheerio.load(text, {
+            // @ts-ignore: The `_useHtmlParser2` internal option is the
+            // simplest way to both parse and render using `htmlparser2`.
+            _useHtmlParser2: true,
+            decodeEntities: false,
+        });
+        let cnt = 0;
+        let cntalt = 0;
+        let splrcnt = 0;
+        $("img").each(function (i, elm) {
+            $(this).attr("title", titles[cnt])
+            cnt = cnt + 1;
+            $(this).attr("alt", alts[cntalt])
+            cntalt += 1;
+        }
+        )
+        $("span").each(function (i, elm) {
+            if($(this).attr("data-mx-spoiler")){
+                $(this).attr("data-mx-spoiler", spoilers[splrcnt])
+                splrcnt+=1;
+            }
+
+        })
+        text = $.html()
+    }
     if (text) {
         result.push(text);
     }
@@ -517,7 +582,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
     if (opts.forComposerQuote) {
         sanitizeParams = composerSanitizeHtmlParams;
     }
-
+    
     let strippedBody: string;
     let safeBody: string | undefined; // safe, sanitised HTML, preferred over `strippedBody` which is fully plaintext
 
@@ -539,16 +604,16 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
         const highlighter = safeHighlights?.length
             ? new HtmlHighlighter("mx_EventTile_searchHighlight", opts.highlightLink)
             : null;
-
         if (isFormattedBody) {
             if (highlighter) {
                 // XXX: We sanitize the HTML whilst also highlighting its text nodes, to avoid accidentally trying
                 // to highlight HTML tags themselves. However, this does mean that we don't highlight textnodes which
                 // are interrupted by HTML tags (not that we did before) - e.g. foo<span/>bar won't get highlighted
                 // 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) {
-                    return highlighter.applyHighlights(safeText, safeHighlights!).join("");
+                sanitizeParams.textFilter = function(safeText) {
+                    return highlighter.applyHighlights(safeText, safeHighlights).join('')
+                        .replace(/:[\w+-]+:/g, m => opts.emotes[m] ? opts.emotes[m] : m);
                 };
             }
 
@@ -574,6 +639,11 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
         delete sanitizeParams.textFilter;
     }
 
+    let contentBody = safeBody ?? strippedBody;
+    if (opts.returnString) {
+        return contentBody;
+    }
+
     let emojiBody = false;
     if (!opts.disableBigEmoji && bodyHasEmoji) {
         const contentBody = safeBody ?? strippedBody;
@@ -610,13 +680,17 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
         "mx_EventTile_bigEmoji": emojiBody,
         "markdown-body": isHtmlMessage && !emojiBody,
     });
+    const tmp = strippedBody?.replace(/:[\w+-]+:/g, m => opts.emotes[m] ? opts.emotes[m] : m);
+    if (tmp !== strippedBody) {
+        safeBody=tmp;
+    }
 
-    let emojiBodyElements: JSX.Element[] | undefined;
+    let emojiBodyElements: JSX.Element[];
     if (!safeBody && bodyHasEmoji) {
         emojiBodyElements = formatEmojis(strippedBody, false) as JSX.Element[];
     }
 
-    return safeBody ? (
+    return safeBody ?
         <span
             key="body"
             ref={opts.ref}

src/autocomplete/Components.tsx

@@ -69,10 +69,10 @@ export const PillCompletion = forwardRef<IPillCompletionProps, any>((props, ref)
             aria-selected={ariaSelectedAttribute}
             ref={ref}
         >
-            {children}
-            <span className="mx_Autocomplete_Completion_title">{title}</span>
-            <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
-            <span className="mx_Autocomplete_Completion_description">{description}</span>
+            { children }
+            <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>
     );
 });