Also add Emote Cloner to Emote picker rightclick menu (#664)

src/api/ContextMenu.ts

@@ -122,6 +122,8 @@ export function _patchContextMenu(props: ContextMenuProps) {
     props.contextMenuApiArguments ??= [];
     const contextMenuPatches = navPatches.get(props.navId);
 
+    if (!Array.isArray(props.children)) props.children = [props.children];
+
     if (contextMenuPatches) {
         for (const patch of contextMenuPatches) {
             try {

src/plugins/emoteCloner.tsx

@@ -17,7 +17,6 @@
 */
 
 import { addContextMenuPatch, findGroupChildrenByChildId, NavContextMenuPatchCallback, removeContextMenuPatch } from "@api/ContextMenu";
-import { migratePluginSettings } from "@api/settings";
 import { CheckedTextInput } from "@components/CheckedTextInput";
 import { Devs } from "@utils/constants";
 import Logger from "@utils/Logger";
@@ -176,25 +175,12 @@ function CloneModal({ id, name: emojiName, isAnimated }: { id: string; name: str
     );
 }
 
-const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+function buildMenuItem(id: string, name: string, isAnimated: boolean) {
-    if (!props) return;
+    return (
-    const { favoriteableId, emoteClonerDataAlt, itemHref, itemSrc, favoriteableType } = props;
-
-    if (!emoteClonerDataAlt || favoriteableType !== "emoji") return;
-
-    const name = emoteClonerDataAlt.match(/:(.*)(?:~\d+)?:/)?.[1];
-    if (!name || !favoriteableId) return;
-
-    const src = itemHref ?? itemSrc;
-    const isAnimated = new URL(src).pathname.endsWith(".gif");
-
-    const group = findGroupChildrenByChildId("copy-link", children);
-    if (group && !group.some(child => child?.props?.id === "emote-cloner")) {
-        group.push((
         <Menu.MenuItem
             id="emote-cloner"
             key="emote-cloner"
-                label="Clone"
+            label="Clone Emote"
             action={() =>
                 openModal(modalProps => (
                     <ModalRoot {...modalProps}>
@@ -202,7 +188,7 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =
                             <img
                                 role="presentation"
                                 aria-hidden
-                                    src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${favoriteableId}.${isAnimated ? "gif" : "png"}`}
+                                src={`${location.protocol}//${window.GLOBAL_ENV.CDN_HOST}/emojis/${id}.${isAnimated ? "gif" : "png"}`}
                                 alt=""
                                 height={24}
                                 width={24}
@@ -211,39 +197,56 @@ const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) =
                             <Forms.FormText>Clone {name}</Forms.FormText>
                         </ModalHeader>
                         <ModalContent>
-                                <CloneModal id={favoriteableId} name={name} isAnimated={isAnimated} />
+                            <CloneModal id={id} name={name} isAnimated={isAnimated} />
                         </ModalContent>
                     </ModalRoot>
                 ))
             }
-            >
+        />
-            </Menu.MenuItem>
+    );
-        ));
 }
+
+function isGifUrl(url: string) {
+    return new URL(url).pathname.endsWith(".gif");
+}
+
+const messageContextMenuPatch: NavContextMenuPatchCallback = (children, props) => {
+    const { favoriteableId, itemHref, itemSrc, favoriteableType } = props ?? {};
+
+    if (!favoriteableId || favoriteableType !== "emoji") return;
+
+    const match = props.message.content.match(RegExp(`<a?:(\\w+)(?:~\\d+)?:${favoriteableId}>|https://cdn\\.discordapp\\.com/emojis/${favoriteableId}\\.`));
+    if (!match) return;
+    const name = match[1] ?? "FakeNitroEmoji";
+
+    const group = findGroupChildrenByChildId("copy-link", children);
+    if (group && !group.some(child => child?.props?.id === "emote-cloner"))
+        group.push(buildMenuItem(favoriteableId, name, isGifUrl(itemHref ?? itemSrc)));
+};
+
+const expressionPickerPatch: NavContextMenuPatchCallback = (children, props: { target: HTMLElement; }) => {
+    const { id, name, type } = props?.target?.dataset ?? {};
+    if (!id || !name || type !== "emoji") return;
+
+    const firstChild = props.target.firstChild as HTMLImageElement;
+
+    if (!children.some(c => c?.props?.id === "emote-cloner"))
+        children.push(buildMenuItem(id, name, firstChild && isGifUrl(firstChild.src)));
 };
 
-migratePluginSettings("EmoteCloner", "EmoteYoink");
 export default definePlugin({
     name: "EmoteCloner",
     description: "Adds a Clone context menu item to emotes to clone them your own server",
     authors: [Devs.Ven, Devs.Nuckyz],
     dependencies: ["MenuItemDeobfuscatorAPI", "ContextMenuAPI"],
 
-    patches: [
-        {
-            find: ".Messages.MESSAGE_ACTIONS_MENU_LABEL",
-            replacement: {
-                match: /favoriteableType:\i,(?<=(\i)\.getAttribute\("data-type"\).+?)/,
-                replace: (m, target) => `${m}emoteClonerDataAlt:${target}.alt,`
-            }
-        }
-    ],
-
     start() {
         addContextMenuPatch("message", messageContextMenuPatch);
+        addContextMenuPatch("expression-picker", expressionPickerPatch);
     },
 
     stop() {
         removeContextMenuPatch("message", messageContextMenuPatch);
+        removeContextMenuPatch("expression-picker", expressionPickerPatch);
     }
 });