Mastodon/app/javascript/flavours/glitch/features/emoji/emoji_picker.tsx

import type { FC } from 'react';
import { useEffect, useState } from 'react';

import type {
  CategoryName,
  CustomEmoji,
  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 { autoPlayGif } from '@/flavours/glitch/initial_state';
import { assetHost } from 'flavours/glitch/utils/config';

import { EMOJI_MODE_NATIVE } from './constants';
import EmojiData from './emoji_data.json';
import { useEmojiAppState } from './mode';
import { emojiLogger } from './utils';

const backgroundImageFnDefault = () => `${assetHost}/emoji/sheet_16_0.png`;

let customEmojis: CustomEmoji[] | null = null;
let customCategories = [
  'recent',
  'people',
  'nature',
  'foods',
  'activity',
  'places',
  'objects',
  'symbols',
  'flags',
] as CategoryName[];

const log = emojiLogger('picker');

export const Picker: FC<PickerProps> = ({
  set = 'twitter',
  sheetSize = 32,
  sheetColumns = 62,
  sheetRows = 62,
  backgroundImageFn = backgroundImageFnDefault,
  ...props
}) => {
  const { mode } = useEmojiAppState();
  const [isLoaded, setLoaded] = useState(customEmojis !== null);

  useEffect(() => {
    if (customEmojis === null) {
      void loadCustomEmojiData().then(() => {
        setLoaded(true);
      });
    }
  }, []);

  if (!isLoaded) {
    return null;
  }

  return (
    <PickerRaw
      data={EmojiData}
      custom={customEmojis ?? []}
      include={customCategories}
      set={set}
      sheetSize={sheetSize}
      sheetColumns={sheetColumns}
      sheetRows={sheetRows}
      native={mode === EMOJI_MODE_NATIVE}
      backgroundImageFn={backgroundImageFn}
      {...props}
    />
  );
};

export async function loadCustomEmojiData() {
  const { loadAllCustomEmoji } = await import('./database');
  const emojisRaw = await loadAllCustomEmoji();
  if (emojisRaw.length === 0) {
    return;
  }

  const categories = new Set(['custom']);
  const emojis = [];
  for (const emoji of emojisRaw) {
    const name = emoji.shortcode.replaceAll(':', '');
    emojis.push({
      name,
      id: name,
      custom: true,
      short_names: [name],
      imageUrl: autoPlayGif ? emoji.url : emoji.static_url,
      customCategory: emoji.category,
    });

    if (emoji.category) {
      categories.add(`custom-${emoji.category}`);
    }
  }

  customEmojis = emojis.toSorted((a, b) => {
    return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
  });
  customCategories = customCategories.toSpliced(
    1,
    0,
    ...(Array.from(categories).toSorted() as CategoryName[]),
  );
  log(
    'loaded %d custom emojis in %d categories',
    customEmojis.length,
    categories.size,
  );
}

export const Emoji: FC<EmojiProps> = ({
  set = 'twitter',
  sheetSize = 32,
  sheetColumns = 62,
  sheetRows = 62,
  backgroundImageFn = backgroundImageFnDefault,
  ...props
}) => {
  const { mode } = useEmojiAppState();
  return (
    <EmojiRaw
      data={EmojiData}
      set={set}
      sheetSize={sheetSize}
      sheetColumns={sheetColumns}
      sheetRows={sheetRows}
      backgroundImageFn={backgroundImageFn}
      native={mode === EMOJI_MODE_NATIVE}
      {...props}
    />
  );
};