[WIKI-775] fix: remove fallback image from emojis #8130

This commit is contained in:
Vipin Chaudhary
2025-11-18 13:53:04 +05:30
committed by GitHub
parent 69323f4164
commit f34ca18a34
3 changed files with 7 additions and 24 deletions

View File

@@ -10,7 +10,6 @@ export type EmojiItem = {
emoji: string;
shortcodes: string[];
tags: string[];
fallbackImage?: string;
};
export type EmojiListRef = {
@@ -156,13 +155,7 @@ export const EmojisListDropdown = forwardRef<EmojiListRef, EmojisListDropdownPro
onClick={() => selectItem(index)}
onMouseEnter={() => setSelectedIndex(index)}
>
<span className="size-5 grid place-items-center flex-shrink-0 text-base">
{item.fallbackImage ? (
<img src={item.fallbackImage} alt={item.name} className="size-4 object-contain" />
) : (
item.emoji
)}
</span>
<span className="size-5 grid place-items-center flex-shrink-0 text-base">{item.emoji}</span>
<span className="flex-grow truncate">
<span className="font-medium">:{item.name}:</span>
</span>

View File

@@ -16,8 +16,6 @@ export const EmojiExtension = Emoji.extend({
const emojiItem = shortcodeToEmoji(node.attrs.name, extensionOptions.emojis);
if (emojiItem?.emoji) {
state.write(emojiItem?.emoji);
} else if (emojiItem?.fallbackImage) {
state.write(`\n![${emojiItem.name}-${emojiItem.shortcodes[0]}](${emojiItem?.fallbackImage})\n`);
} else {
state.write(`:${node.attrs.name}:`);
}
@@ -26,7 +24,9 @@ export const EmojiExtension = Emoji.extend({
};
},
}).configure({
emojis: gitHubEmojis,
// Filter out emojis without emoji value and remove fallbackImage property to prevent CDN calls
// eslint-disable-next-line @typescript-eslint/no-unused-vars
emojis: gitHubEmojis.filter((item) => item.emoji).map(({ fallbackImage, ...emoji }) => emoji),
suggestion: emojiSuggestion,
enableEmoticons: true,
});

View File

@@ -16,27 +16,17 @@ const DEFAULT_EMOJIS = ["+1", "-1", "smile", "orange_heart", "eyes"];
export const emojiSuggestion: EmojiOptions["suggestion"] = {
items: ({ editor, query }: { editor: Editor; query: string }): EmojiItem[] => {
const { emojis, isSupported } = editor.storage.emoji as EmojiStorage;
const filteredEmojis = emojis.filter((emoji) => {
const hasEmoji = !!emoji?.emoji;
const hasFallbackImage = !!emoji?.fallbackImage;
const renderFallbackImage =
(emoji.forceFallbackImages && !hasEmoji) ||
(emoji.forceFallbackImages && hasFallbackImage) ||
(emoji.forceFallbackImages && !isSupported(emoji) && hasFallbackImage) ||
((!isSupported(emoji) || !hasEmoji) && hasFallbackImage);
return !renderFallbackImage;
});
const { emojis } = editor.storage.emoji as EmojiStorage;
if (query.trim() === "") {
const defaultEmojis = DEFAULT_EMOJIS.map((name) =>
filteredEmojis.find((emoji) => emoji.shortcodes.includes(name) || emoji.name === name)
emojis.find((emoji) => emoji.shortcodes.includes(name) || emoji.name === name)
)
.filter(Boolean)
.slice(0, 5);
return defaultEmojis as EmojiItem[];
}
return filteredEmojis
return emojis
.filter(({ shortcodes, tags }) => {
const lowerQuery = query.toLowerCase();
return (