make them clickable

Author: AndrewRyanChama

src/HtmlUtils.tsx

@@ -617,7 +617,7 @@ export function bodyToHtml(content: IContent, highlights: Optional<string[]>, op
 
         const match = BIGEMOJI_REGEX.exec(contentBodyTrimmed);
         const matched = match && match[0] && match[0].length === contentBodyTrimmed.length;
-        emojiBody = (matched || isAllHtmlEmoji);
+        emojiBody = matched || isAllHtmlEmoji;
     }
 
     const className = classNames({

src/autocomplete/Autocompleter.ts

@@ -27,6 +27,7 @@ import { timeout } from "../utils/promise";
 import AutocompleteProvider, { ICommand } from "./AutocompleteProvider";
 import SpaceProvider from "./SpaceProvider";
 import { TimelineRenderingType } from "../contexts/RoomContext";
+import { ICustomEmoji } from "../emojipicker/customemoji";
 
 export interface ISelectionRange {
     beginning?: boolean; // whether the selection is in the first block of the editor or not

src/components/views/messages/TextualBody.tsx

@@ -439,6 +439,13 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
         let target = e.target as HTMLLinkElement;
         // links processed by linkifyjs have their own handler so don't handle those here
         if (target.classList.contains(linkifyOpts.className as string)) return;
+        // handle clicking packs
+        const packUrl = target.getAttribute("data-mx-pack-url");
+        if (packUrl) {
+            // it could be converted to a localHref -> therefore handle locally
+            e.preventDefault();
+            window.location.hash = tryTransformPermalinkToLocalHref(packUrl);
+        }
         if (target.nodeName !== "A") {
             // Jump to parent as the `<a>` may contain children, e.g. an anchor wrapping an inline code section
             target = target.closest<HTMLLinkElement>("a");

src/editor/autocomplete.ts

@@ -109,7 +109,14 @@ export default class AutocompleteWrapperModel {
                 // command needs special handling for auto complete, but also renders as plain texts
                 return [(this.partCreator as CommandPartCreator).command(text)];
             case "customEmoji":
-                return [this.partCreator.customEmoji(text, completionId, completion.customEmoji?.roomId, completion.customEmoji?.eventId)];
+                return [
+                    this.partCreator.customEmoji(
+                        text,
+                        completionId,
+                        completion.customEmoji?.roomId,
+                        completion.customEmoji?.eventId,
+                    ),
+                ];
             default:
                 // used for emoji and other plain text completion replacement
                 return this.partCreator.plainWithEmoji(text);

src/editor/parts.ts

@@ -466,7 +466,7 @@ class CustomEmojiPart extends PillPart implements ICustomEmojiPart {
         return {
             ...super.serialize(),
             roomId: this.roomId,
-            eventId: this.eventId
+            eventId: this.eventId,
         };
     }
 }

src/editor/serialize.ts

@@ -53,9 +53,11 @@ export function mdSerialize(model: EditorModel): string {
                     `[${part.text.replace(/[[\\\]]/g, (c) => "\\" + c)}](${makeGenericPermalink(part.resourceId)})`
                 );
             case Type.CustomEmoji:
-                const customEmojiPart : ICustomEmojiPart = part;
-                if (customEmojiPart.roomId) {
-                    const permalink = makeRoomPermalink(customEmojiPart.roomId, customEmojiPart.eventId);
+                if ((part as ICustomEmojiPart).roomId) {
+                    const permalink = makeRoomPermalink(
+                        (part as ICustomEmojiPart).roomId,
+                        (part as ICustomEmojiPart).eventId,
+                    );
                     return (
                         html +
                         `<img data-mx-emoticon height="18" src="${encodeURI(part.resourceId)}"` +

src/emojipicker/customemoji.ts

@@ -19,8 +19,8 @@ import { JoinRule, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
 export function loadImageSet(imageSetEvent: MatrixEvent, room?: Room): ICustomEmoji[] {
     const loadedImages: ICustomEmoji[] = [];
     const images = imageSetEvent.getContent().images;
-    let eventId : string | undefined;
-    let roomId : string | undefined;
+    let eventId: string | undefined;
+    let roomId: string | undefined;
     if (!images) {
         return [];
     }

src/utils/permalinks/Permalinks.ts

@@ -282,12 +282,17 @@ export function makeRoomPermalink(roomId: string, eventId?: string): string {
 
     // If the roomId isn't actually a room ID, don't try to list the servers.
     // Aliases are already routable, and don't need extra information.
-    if (roomId[0] !== "!") return eventId ? getPermalinkConstructor().forRoom(roomId, []) : getPermalinkConstructor().forEvent(roomId, eventId, []);
+    if (roomId[0] !== "!")
+        return eventId
+            ? getPermalinkConstructor().forRoom(roomId, [])
+            : getPermalinkConstructor().forEvent(roomId, eventId, []);
 
     const client = MatrixClientPeg.get();
     const room = client.getRoom(roomId);
     if (!room) {
-        return eventId ? getPermalinkConstructor().forRoom(roomId, []) : getPermalinkConstructor().forEvent(roomId, eventId, []);
+        return eventId
+            ? getPermalinkConstructor().forRoom(roomId, [])
+            : getPermalinkConstructor().forEvent(roomId, eventId, []);
     }
     const permalinkCreator = new RoomPermalinkCreator(room);
     permalinkCreator.load();