path: root/app/assets/javascripts/emoji/index.js

import fuzzaldrinPlus from 'fuzzaldrin-plus';
import emojiAliases from 'emojis/aliases.json';
import axios from '../lib/utils/axios_utils';
import AccessorUtilities from '../lib/utils/accessor';

let emojiMap = null;
let validEmojiNames = null;

export const EMOJI_VERSION = '1';

const isLocalStorageAvailable = AccessorUtilities.isLocalStorageAccessSafe();

async function loadEmoji() {
  if (
    isLocalStorageAvailable &&
    window.localStorage.getItem('gl-emoji-map-version') === EMOJI_VERSION &&
    window.localStorage.getItem('gl-emoji-map')
  ) {
    return JSON.parse(window.localStorage.getItem('gl-emoji-map'));
  }

  // We load the JSON file direct from the server
  // because it can't be loaded from a CDN due to
  // cross domain problems with JSON
  const { data } = await axios.get(
    `${gon.relative_url_root || ''}/-/emojis/${EMOJI_VERSION}/emojis.json`,
  );
  window.localStorage.setItem('gl-emoji-map-version', EMOJI_VERSION);
  window.localStorage.setItem('gl-emoji-map', JSON.stringify(data));
  return data;
}

async function prepareEmojiMap() {
  emojiMap = await loadEmoji();

  validEmojiNames = [...Object.keys(emojiMap), ...Object.keys(emojiAliases)];

  Object.keys(emojiMap).forEach(name => {
    emojiMap[name].aliases = [];
    emojiMap[name].name = name;
  });
  Object.entries(emojiAliases).forEach(([alias, name]) => {
    // This check, `if (name in emojiMap)` is necessary during testing. In
    // production, it shouldn't be necessary, because at no point should there
    // be an entry in aliases.json with no corresponding entry in emojis.json.
    // However, during testing, the endpoint for emojis.json is mocked with a
    // small dataset, whereas aliases.json is always `import`ed directly.
    if (name in emojiMap) emojiMap[name].aliases.push(alias);
  });
}

export function initEmojiMap() {
  initEmojiMap.promise = initEmojiMap.promise || prepareEmojiMap();
  return initEmojiMap.promise;
}

export function normalizeEmojiName(name) {
  return Object.prototype.hasOwnProperty.call(emojiAliases, name) ? emojiAliases[name] : name;
}

export function getValidEmojiNames() {
  return validEmojiNames;
}

export function isEmojiNameValid(name) {
  return validEmojiNames.indexOf(name) >= 0;
}

export function getAllEmoji() {
  return emojiMap;
}

/**
 * Retrieves an emoji by name or alias.
 *
 * Note: `initEmojiMap` must have been called and completed before this method
 * can safely be called.
 *
 * @param {String} query The emoji name
 * @param {Boolean} fallback If true, a fallback emoji will be returned if the
 * named emoji does not exist. Defaults to false.
 * @returns {Object} The matching emoji.
 */
export function getEmoji(query, fallback = false) {
  // TODO https://gitlab.com/gitlab-org/gitlab/-/issues/268208
  const fallbackEmoji = emojiMap.grey_question;
  if (!query) {
    return fallback ? fallbackEmoji : null;
  }

  if (!emojiMap) {
    // eslint-disable-next-line @gitlab/require-i18n-strings
    throw new Error('The emoji map is uninitialized or initialization has not completed');
  }

  const lowercaseQuery = query.toLowerCase();
  const name = normalizeEmojiName(lowercaseQuery);

  if (name in emojiMap) {
    return emojiMap[name];
  }

  return fallback ? fallbackEmoji : null;
}

const searchMatchers = {
  // Fuzzy matching compares using a fuzzy matching library
  fuzzy: (value, query) => {
    const score = fuzzaldrinPlus.score(value, query) > 0;
    return { score, success: score > 0 };
  },
  // Contains matching compares by indexOf
  contains: (value, query) => {
    const index = value.indexOf(query.toLowerCase());
    return { index, success: index >= 0 };
  },
  // Exact matching compares by equality
  exact: (value, query) => {
    return { success: value === query.toLowerCase() };
  },
};

const searchPredicates = {
  // Search by name
  name: (matcher, query) => emoji => {
    const m = matcher(emoji.name, query);
    return [{ ...m, emoji, field: emoji.name }];
  },
  // Search by alias
  alias: (matcher, query) => emoji =>
    emoji.aliases.map(alias => {
      const m = matcher(alias, query);
      return { ...m, emoji, field: alias };
    }),
  // Search by description
  description: (matcher, query) => emoji => {
    const m = matcher(emoji.d, query);
    return [{ ...m, emoji, field: emoji.d }];
  },
  // Search by unicode value (always exact)
  unicode: (matcher, query) => emoji => {
    return [{ emoji, field: emoji.e, success: emoji.e === query }];
  },
};

/**
 * Searches emoji by name, aliases, description, and unicode value and returns
 * an array of matches.
 *
 * Behavior is undefined if `opts.fields` is empty or if `opts.match` is fuzzy
 * and the query is empty.
 *
 * Note: `initEmojiMap` must have been called and completed before this method
 * can safely be called.
 *
 * @param {String} query Search query.
 * @param {Object} opts Search options (optional).
 * @param {String[]} opts.fields Fields to search. Choices are 'name', 'alias',
 * 'description', and 'unicode' (value). Default is all (four) fields.
 * @param {String} opts.match Search method to use. Choices are 'exact',
 * 'contains', or 'fuzzy'. All methods are case-insensitive. Exact matching (the
 * default) compares by equality. Contains matching compares by indexOf. Fuzzy
 * matching compares using a fuzzy matching library.
 * @param {Boolean} opts.fallback If true, a fallback emoji will be returned if
 * the result set is empty. Defaults to false.
 * @param {Boolean} opts.raw Returns the raw match data instead of just the
 * matching emoji.
 * @returns {Object[]} A list of emoji that match the query.
 */
export function searchEmoji(query, opts) {
  if (!emojiMap) {
    // eslint-disable-next-line @gitlab/require-i18n-strings
    throw new Error('The emoji map is uninitialized or initialization has not completed');
  }

  const {
    fields = ['name', 'alias', 'description', 'unicode'],
    match = 'exact',
    fallback = false,
    raw = false,
  } = opts || {};

  const fallbackEmoji = emojiMap.grey_question;
  if (!query) {
    if (fallback) {
      return raw ? [{ emoji: fallbackEmoji }] : [fallbackEmoji];
    }

    return [];
  }

  // optimization for an exact match in name and alias
  if (match === 'exact' && new Set([...fields, 'name', 'alias']).size === 2) {
    const emoji = getEmoji(query, fallback);
    return emoji ? [emoji] : [];
  }

  const matcher = searchMatchers[match] || searchMatchers.exact;
  const predicates = fields.map(f => searchPredicates[f](matcher, query));

  const results = Object.values(emojiMap)
    .flatMap(emoji => predicates.flatMap(predicate => predicate(emoji)))
    .filter(r => r.success);

  // Fallback to question mark for unknown emojis
  if (fallback && results.length === 0) {
    return raw ? [{ emoji: fallbackEmoji }] : [fallbackEmoji];
  }

  return raw ? results : results.map(r => r.emoji);
}

let emojiCategoryMap;
export function getEmojiCategoryMap() {
  if (!emojiCategoryMap) {
    emojiCategoryMap = {
      activity: [],
      people: [],
      nature: [],
      food: [],
      travel: [],
      objects: [],
      symbols: [],
      flags: [],
    };
    Object.keys(emojiMap).forEach(name => {
      const emoji = emojiMap[name];
      if (emojiCategoryMap[emoji.c]) {
        emojiCategoryMap[emoji.c].push(name);
      }
    });
  }
  return emojiCategoryMap;
}

export function getEmojiInfo(query) {
  return searchEmoji(query, {
    fields: ['name', 'alias'],
    fallback: true,
  })[0];
}

export function emojiFallbackImageSrc(inputName) {
  const { name } = getEmojiInfo(inputName);
  return `${gon.asset_host || ''}${gon.relative_url_root ||
    ''}/-/emojis/${EMOJI_VERSION}/${name}.png`;
}

export function emojiImageTag(name, src) {
  return `<img class="emoji" title=":${name}:" alt=":${name}:" src="${src}" width="20" height="20" align="absmiddle" />`;
}

export function glEmojiTag(inputName, options) {
  const opts = { sprite: false, ...options };
  const name = normalizeEmojiName(inputName);
  const fallbackSpriteClass = `emoji-${name}`;

  const fallbackSpriteAttribute = opts.sprite
    ? `data-fallback-sprite-class="${fallbackSpriteClass}"`
    : '';

  return `
    <gl-emoji
      ${fallbackSpriteAttribute}
      data-name="${name}"></gl-emoji>
  `;
}