diff --git a/packages/pl-fe/src/components/announcements/emoji.tsx b/packages/pl-fe/src/components/announcements/emoji.tsx index cf2017072..96f28f012 100644 --- a/packages/pl-fe/src/components/announcements/emoji.tsx +++ b/packages/pl-fe/src/components/announcements/emoji.tsx @@ -13,10 +13,12 @@ interface IEmoji { } const Emoji: React.FC = ({ emoji, emojiMap, hovered }) => { - const { autoPlayGif } = useSettings(); + const { autoPlayGif, systemEmojiFont } = useSettings(); // @ts-ignore if (unicodeMapping[emoji]) { + if (systemEmojiFont) return <>{emoji}; + // @ts-ignore const { filename, shortCode } = unicodeMapping[emoji]; const title = shortCode ? `:${shortCode}:` : ''; diff --git a/packages/pl-fe/src/components/autosuggest-emoji.tsx b/packages/pl-fe/src/components/autosuggest-emoji.tsx index bacb56d1a..fb9d44b8d 100644 --- a/packages/pl-fe/src/components/autosuggest-emoji.tsx +++ b/packages/pl-fe/src/components/autosuggest-emoji.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { isCustomEmoji } from 'pl-fe/features/emoji'; import unicodeMapping from 'pl-fe/features/emoji/mapping'; +import { useSettings } from 'pl-fe/hooks/use-settings'; import { joinPublicPath } from 'pl-fe/utils/static'; import type { Emoji } from 'pl-fe/features/emoji'; @@ -11,29 +12,39 @@ interface IAutosuggestEmoji { } const AutosuggestEmoji: React.FC = ({ emoji }) => { - let url, alt; + const { systemEmojiFont } = useSettings(); + + let emojiElement; if (isCustomEmoji(emoji)) { - url = emoji.imageUrl; - alt = emoji.colons; + emojiElement = ( + {emoji.colons} + ); } else { + if (systemEmojiFont) emojiElement = <>{emoji.native}; + const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')]; if (!mapping) { return null; } - url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`); - alt = emoji.native; + emojiElement = ( + {emoji.native} + ); } return (
- {alt} + {emojiElement} {emoji.colons}
diff --git a/packages/pl-fe/src/components/ui/emoji.tsx b/packages/pl-fe/src/components/ui/emoji.tsx index 652e92b5e..84b820e8c 100644 --- a/packages/pl-fe/src/components/ui/emoji.tsx +++ b/packages/pl-fe/src/components/ui/emoji.tsx @@ -13,7 +13,7 @@ interface IEmoji extends Pick, 'alt' | /** A single emoji image. */ const Emoji: React.FC = (props): JSX.Element | null => { - const { disableUserProvidedMedia } = useSettings(); + const { disableUserProvidedMedia, systemEmojiFont } = useSettings(); const { emoji, alt, src, noGroup, ...rest } = props; let filename; @@ -39,6 +39,8 @@ const Emoji: React.FC = (props): JSX.Element | null => { ); } + if (systemEmojiFont) return <>{emoji}; + return ( = React.memo(({ text, emojis = {} }) => { - const { disableUserProvidedMedia } = useSettings(); + const { disableUserProvidedMedia, systemEmojiFont } = useSettings(); if (Array.isArray(emojis)) emojis = makeEmojiMap(emojis); @@ -63,7 +63,7 @@ const Emojify: React.FC = React.memo(({ text, emojis = {} }) => { // unqualified emojis aren't in emoji-mart's mappings so we just add FEOF const unqualified = c + String.fromCodePoint(65039); - if (c in unicodeMapping) { + if (!systemEmojiFont && c in unicodeMapping) { clearStack(); const { unified, shortcode } = unicodeMapping[c]; @@ -71,7 +71,7 @@ const Emojify: React.FC = React.memo(({ text, emojis = {} }) => { nodes.push( {c}, ); - } else if (unqualified in unicodeMapping) { + } else if (!systemEmojiFont && unqualified in unicodeMapping) { clearStack(); const { unified, shortcode } = unicodeMapping[unqualified]; diff --git a/packages/pl-fe/src/features/preferences/index.tsx b/packages/pl-fe/src/features/preferences/index.tsx index 763f0900e..9aeaa3d89 100644 --- a/packages/pl-fe/src/features/preferences/index.tsx +++ b/packages/pl-fe/src/features/preferences/index.tsx @@ -331,6 +331,10 @@ const Preferences = () => { + }> + + + }> diff --git a/packages/pl-fe/src/locales/en.json b/packages/pl-fe/src/locales/en.json index 02590534e..1e65973e3 100644 --- a/packages/pl-fe/src/locales/en.json +++ b/packages/pl-fe/src/locales/en.json @@ -1355,6 +1355,7 @@ "preferences.fields.privacy_label": "Default post privacy", "preferences.fields.reduce_motion_label": "Reduce motion in animations", "preferences.fields.spoilers_display_label": "Automatically expand text behind spoilers", + "preferences.fields.system_emoji_font_label": "Use system emoji font", "preferences.fields.system_font_label": "Use system's default font", "preferences.fields.theme": "Theme", "preferences.fields.theme_reset": "Reset theme", diff --git a/packages/pl-fe/src/schemas/pl-fe/settings.ts b/packages/pl-fe/src/schemas/pl-fe/settings.ts index ad78489c0..fc9577aaa 100644 --- a/packages/pl-fe/src/schemas/pl-fe/settings.ts +++ b/packages/pl-fe/src/schemas/pl-fe/settings.ts @@ -59,6 +59,7 @@ const settingsSchema = v.object({ })), undefined), systemFont: v.fallback(v.boolean(), false), + systemEmojiFont: v.fallback(v.boolean(), false), demetricator: v.fallback(v.boolean(), false), chats: coerceObject({