fix(msc4459): emoji discoverable as per MSC4459

Author: dozro

.changeset/initial_msc4459_support.md

@@ -0,0 +1,5 @@
+---
+default: minor
+---
+
+# add initial support for sending discoverable emojis and sticker

src/app/features/room/RoomInput.tsx

@@ -60,6 +60,7 @@ import {
   ANYWHERE_AUTOCOMPLETE_PREFIXES,
   BEGINNING_AUTOCOMPLETE_PREFIXES,
   getLinks,
+  replaceWithElement,
 } from '$components/editor';
 import { EmojiBoard, EmojiBoardTab } from '$components/emoji-board';
 import { UseStateProvider } from '$components/UseStateProvider';
@@ -129,8 +130,11 @@ import { sanitizeText } from '$utils/sanitize';
 import { PKitCommandMessageHandler } from '$plugins/pluralkit-handler/PKitCommandMessageHandler';
 import { PKitProxyMessageHandler } from '$plugins/pluralkit-handler/PKitProxyMessageHandler';
 import { MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME } from '$types/matrix/common';
-import type {IGenericMSC4459, MSC4459ImagePackReference} from '$types/matrix/common'
-import { getImagePackReferencesForMxc } from '$utils/msc4459helper';
+import type { IGenericMSC4459, MSC4459ImagePackReference } from '$types/matrix/common';
+import {
+  getImagePackReferencesForMxc,
+  getImagePackReferencesForMxcWrappedInMap,
+} from '$utils/msc4459helper';
 import { ImageUsage } from '$plugins/custom-emoji';
 import { SerializableMap } from '$types/wrapper/SerializableMap';
 import { useSettingsLinkBaseUrl } from '$features/settings/useSettingsLinkBaseUrl';
@@ -171,7 +175,7 @@ const getLatestThreadEventId = (room: Room, threadRootId: string): string => {
         ev.threadRootId === threadRootId && ev.getId() !== threadRootId && !reactionOrEditEvent(ev)
     );
   if (liveEvents.length > 0) {
-    return liveEvents[liveEvents.length - 1]!.getId() ?? threadRootId;
+    return liveEvents.at(-1)!.getId() ?? threadRootId;
   }
   return threadRootId;
 };
@@ -749,6 +753,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           nickNameReplacement: nicknameReplacement,
         })
       );
+
       let msgType = MsgType.Text;
 
       // quick text react
@@ -809,6 +814,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       }
 
       content['m.mentions'] = getMentionContent(Array.from(mentionData.users), mentionData.room);
+      content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = imagePacksUsedRef.current.toJSON();
 
       const links = getLinks(serializedChildren);
       content['com.beeper.linkpreviews'] = [];
@@ -1122,8 +1128,19 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
     );
 
     const handleEmoticonSelect = (key: string, shortcode: string) => {
-      editor.insertNode(createEmoticonElement(key, shortcode));
+      const emoticonEl = createEmoticonElement(key, shortcode);
+      if (autocompleteQuery) {
+        replaceWithElement(editor, autocompleteQuery.range, emoticonEl);
+      } else {
+        editor.insertNode(emoticonEl);
+      }
+      if (!imagePacksUsedRef.current.has(key))
+        imagePacksUsedRef.current.set(
+          key,
+          getImagePackReferencesForMxc(key, mx, ImageUsage.Emoticon)
+        );
       moveCursor(editor);
+      handleCloseAutocomplete();
     };
 
     const handleStickerSelect = async (mxc: string, shortcode: string, label: string) => {
@@ -1142,7 +1159,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       };
 
       // add the image pack reference
-      content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = getImagePackReferencesForMxc(
+      content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = getImagePackReferencesForMxcWrappedInMap(
         mxc,
         mx,
         ImageUsage.Sticker
@@ -1161,6 +1178,11 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           false
         );
       }
+      content[MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME] = getImagePackReferencesForMxcWrappedInMap(
+        mxc,
+        mx,
+        ImageUsage.Sticker
+      );
 
       if (replyDraft) {
         content['m.relates_to'] = getReplyContent(replyDraft, room);
@@ -1259,6 +1281,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             editor={editor}
             query={autocompleteQuery}
             requestClose={handleCloseAutocomplete}
+            onEmoticonSelected={handleEmoticonSelect}
           />
         )}
         {autocompleteQuery?.prefix === AutocompletePrefix.Reaction &&

src/app/utils/messageReaction.ts

@@ -2,7 +2,7 @@ import { MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME } from '$types/matrix/common';
 import type { MatrixReactionEvent } from '$types/matrix/common';
 import type { MatrixClient } from 'matrix-js-sdk';
 import { ImageUsage } from '$plugins/custom-emoji';
-import { getImagePackReferencesForMxc } from './msc4459helper';
+import { getImagePackReferencesForMxcWrappedInMap } from './msc4459helper';
 
 export const getReactionContent = (
   eventId: string,
@@ -17,7 +17,7 @@ export const getReactionContent = (
   },
   shortcode,
   'com.beeper.reaction.shortcode': shortcode,
-  [MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME]: getImagePackReferencesForMxc(
+  [MATRIX_IMAGE_SOURCE_PACK_PROPERTY_NAME]: getImagePackReferencesForMxcWrappedInMap(
     key,
     matrixClient,
     ImageUsage.Emoticon

src/app/utils/msc4459helper.ts

@@ -9,17 +9,26 @@ import { getViaServers } from '$plugins/via-servers';
 import { getMxIdServer } from './mxIdHelper';
 import { isRoomPrivate } from './roomVisibility';
 
-export function getImagePackReferencesForMxc(
+export function getImagePackReferencesForMxcWrappedInMap(
   mxcUrl: string,
   matrixClient: MatrixClient,
   imageUsage: ImageUsage
 ): SerializableMap<string, MSC4459ImagePackReference> {
+  const retMap = new SerializableMap<string, MSC4459ImagePackReference>();
+  retMap.set(mxcUrl, getImagePackReferencesForMxc(mxcUrl, matrixClient, imageUsage));
+  return retMap;
+}
+
+export function getImagePackReferencesForMxc(
+  mxcUrl: string,
+  matrixClient: MatrixClient,
+  imageUsage: ImageUsage
+): MSC4459ImagePackReference {
   const globalImgPacks: ImagePack[] = getGlobalImagePacks(matrixClient);
-  if (!mxcUrl.startsWith('mxc')) return new SerializableMap<string, MSC4459ImagePackReference>();
-  const imagePackReferences = new SerializableMap<string, MSC4459ImagePackReference>();
-  globalImgPacks
+  if (!mxcUrl.startsWith('mxc')) return {};
+  const imgPkRef = globalImgPacks
     .filter((val) => val.getImages(imageUsage).find((img) => img.url === mxcUrl))
-    .forEach((pack) => {
+    .map((pack) => {
       const img = pack.getImages(imageUsage).find((val) => val.url === mxcUrl);
       const room = matrixClient.getRoom(pack.address?.roomId);
       if (!room || isRoomPrivate(matrixClient, room)) return;
@@ -31,13 +40,13 @@ export function getImagePackReferencesForMxc(
       // add ones own hs as via server, as that server evidently is alive
       const ownViaHS = getMxIdServer(matrixClient.getSafeUserId());
       if (ownViaHS) viaServers.add(ownViaHS);
-      const imgPkRef = {
+      return {
         room_id: pack.address?.roomId,
         state_key: pack.address?.stateKey,
         via: viaServers,
         shortcode: img?.shortcode,
       } satisfies MSC4459ImagePackReference;
-      imagePackReferences.set(mxcUrl, imgPkRef);
-    });
-  return imagePackReferences;
+    })
+    .at(0);
+  return imgPkRef ?? {};
 }