chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 14 Wiki Activity

Emoji: Picker native rendering (#36454)

Browse source
This commit is contained in:
Echo 2025-10-13 17:29:39 +02:00 • committed by GitHub
commit edd7fd9872
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 14 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
app/javascript/mastodon/features/emoji/emoji_picker.tsx
View file

@ -2,9 +2,12 @@ import type { EmojiProps, PickerProps } from 'emoji-mart';
import EmojiRaw from 'emoji-mart/dist-es/components/emoji/nimble-emoji';
import PickerRaw from 'emoji-mart/dist-es/components/picker/nimble-picker';
import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
import { assetHost } from 'mastodon/utils/config';
import { EMOJI_MODE_NATIVE } from './constants';
import EmojiData from './emoji_data.json';
import { useEmojiAppState } from './hooks';
const backgroundImageFnDefault = () => `${assetHost}/emoji/sheet_15_1.png`;
@ -16,6 +19,7 @@ const Emoji = ({
backgroundImageFn = backgroundImageFnDefault,
...props
}: EmojiProps) => {
const { mode } = useEmojiAppState();
return (
<EmojiRaw
data={EmojiData}
@ -23,6 +27,7 @@ const Emoji = ({
sheetSize={sheetSize}
sheetColumns={sheetColumns}
sheetRows={sheetRows}
native={mode === EMOJI_MODE_NATIVE && isModernEmojiEnabled()}
backgroundImageFn={backgroundImageFn}
{...props}
/>
@ -37,6 +42,7 @@ const Picker = ({
backgroundImageFn = backgroundImageFnDefault,
...props
}: PickerProps) => {
const { mode } = useEmojiAppState();
return (
<PickerRaw
data={EmojiData}
@ -45,6 +51,7 @@ const Picker = ({
sheetColumns={sheetColumns}
sheetRows={sheetRows}
backgroundImageFn={backgroundImageFn}
native={mode === EMOJI_MODE_NATIVE && isModernEmojiEnabled()}
{...props}
/>
);

11
app/javascript/mastodon/features/emoji/hooks.ts
View file

@ -1,6 +1,6 @@
import { useCallback, useLayoutEffect, useMemo, useState } from 'react';
import { useAppSelector } from '@/mastodon/store';
import { createAppSelector, useAppSelector } from '@/mastodon/store';
import { isModernEmojiEnabled } from '@/mastodon/utils/environment';
import { toSupportedLocale } from './locale';
@ -58,13 +58,16 @@ export function useEmojify({
return emojifiedText;
}
const modeSelector = createAppSelector(
[(state) => state.meta.get('emoji_style') as string],
(emoji_style) => determineEmojiMode(emoji_style),
);
export function useEmojiAppState(): EmojiAppState {
const locale = useAppSelector((state) =>
toSupportedLocale(state.meta.get('locale') as string),
);
const mode = useAppSelector((state) =>
determineEmojiMode(state.meta.get('emoji_style') as string),
);
const mode = useAppSelector(modeSelector);
return {
currentLocale: locale,