Frontend: Display missing emoji as raw text

fe_calckey/frontend/client/src/components/mfm.ts

@@ -1,6 +1,6 @@
+import type { VNode } from "vue";
 import { defineComponent, h } from "vue";
 import * as mfm from "mfm-js";
-import type { VNode } from "vue";
 import MkUrl from "@/components/global/MkUrl.vue";
 import MkLink from "@/components/MkLink.vue";
 import MagMention from "@/components/MagMention.vue";
@@ -11,12 +11,11 @@ import MkSparkle from "@/components/MkSparkle.vue";
 import MkA from "@/components/global/MkA.vue";
 import { host } from "@/config";
 import { reducedMotion } from "@/scripts/reduced-motion";
-import { defaultStore } from "@/store";
 import MagEmoji from "@/components/global/MagEmoji.vue";
 import {
     magConvertReaction,
+    magIsMissingEmoji,
     magReactionEquals,
-    magReactionToLegacy,
     magTransProperty,
 } from "@/scripts-mag/mag-util";
 
@@ -542,11 +541,9 @@ export default defineComponent({
                         }
 
                         case "emojiCode": {
-                            return [
-                                h(MagEmoji, {
-                                    key: Math.random(),
-                                    emoji: magConvertReaction(
-                                        `:${token.props.name}:`,
+                            const shortcode = `:${token.props.name}:`;
+                            const emoji = magConvertReaction(
+                                shortcode,
                                 (name, host) =>
                                     this.customEmojis.find((e) =>
                                         magReactionEquals(
@@ -560,7 +557,16 @@ export default defineComponent({
                                             { name, host, url: null! }
                                         )
                                     )?.url ?? null
-                                    ),
+                            );
+
+                            if (magIsMissingEmoji(emoji)) {
+                                return [shortcode];
+                            }
+
+                            return [
+                                h(MagEmoji, {
+                                    key: Math.random(),
+                                    emoji,
                                     normal: this.plain,
                                 }),
                             ];

fe_calckey/frontend/client/src/scripts-mag/mag-util.ts

@@ -226,6 +226,10 @@ export function magIsCustomEmoji(
     );
 }
 
+export function magIsMissingEmoji(emoji: types.Reaction): boolean {
+    return magIsCustomEmoji(emoji) && !emoji["url"];
+}
+
 export function magIsUnicodeEmoji(
     emoji: types.Reaction
 ): emoji is types.ReactionUnicode {