fix: emoji parse for 🏖️ (#1587)

* fix: emoji parse for 🏖️

Signed-off-by: Adam Setch <[email protected]>

* fix: emoji parse for 🏖️

Signed-off-by: Adam Setch <[email protected]>

* fix: emoji parse for 🏖️

Signed-off-by: Adam Setch <[email protected]>

* fix: emoji parse for 🏖️

Signed-off-by: Adam Setch <[email protected]>

---------

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

config/webpack.config.renderer.base.ts

@@ -7,7 +7,7 @@ import { merge } from 'webpack-merge';
 import baseConfig from './webpack.config.common';
 import webpackPaths from './webpack.paths';
 
-import { EMOJI_CODE_POINTS } from '../src/renderer/utils/emojis';
+import { ALL_EMOJI_SVG_FILENAMES } from '../src/renderer/utils/emojis';
 
 const configuration: webpack.Configuration = {
   devtool: 'inline-source-map',
@@ -76,8 +76,8 @@ const configuration: webpack.Configuration = {
           to: 'images/twemoji',
           // Only copy the SVGs for the emojis we use
           filter: (resourcePath) => {
-            return EMOJI_CODE_POINTS.some((svg) =>
-              resourcePath.endsWith(`/${svg}.svg`),
+            return ALL_EMOJI_SVG_FILENAMES.some((filename) =>
+              resourcePath.endsWith(`/${filename}`),
             );
           },
         },

src/renderer/components/EmojiText.tsx

@@ -1,33 +1,16 @@
-import path from 'node:path';
-import twemoji from '@discordapp/twemoji';
 import { type FC, useEffect, useRef } from 'react';
+import { convertTextToEmojiImgHtml } from '../utils/emojis';
 
 export interface IEmojiText {
   text: string;
 }
 
-type TwemojiOptions = {
-  base: string;
-  size: string;
-  ext: string;
-};
-
 export const EmojiText: FC<IEmojiText> = ({ text }) => {
   const ref = useRef(null);
 
   useEffect(() => {
     if (ref.current) {
-      ref.current.innerHTML = twemoji.parse(text, {
-        folder: 'svg',
-        ext: '.svg',
-        callback: (
-          icon: string,
-          _options: TwemojiOptions,
-          _variant: string,
-        ) => {
-          return path.join('images', 'twemoji', `${icon}.svg`);
-        },
-      });
+      ref.current.innerHTML = convertTextToEmojiImgHtml(text);
     }
   }, [text]);
 

src/renderer/utils/__snapshots__/emojis.test.ts.snap

@@ -1,8 +1,8 @@
-import { EMOJI_CODE_POINTS } from './emojis';
+import { ALL_EMOJI_SVG_FILENAMES } from './emojis';
 
 describe('renderer/utils/emojis.ts', () => {
-  it('emoji code points', () => {
-    expect(EMOJI_CODE_POINTS).toHaveLength(20);
-    expect(EMOJI_CODE_POINTS).toMatchSnapshot();
+  it('emoji svg filenames', () => {
+    expect(ALL_EMOJI_SVG_FILENAMES).toHaveLength(20);
+    expect(ALL_EMOJI_SVG_FILENAMES).toMatchSnapshot();
   });
 });

src/renderer/utils/emojis.test.ts

@@ -1,7 +1,10 @@
-import twemoji from '@discordapp/twemoji';
+import path from 'node:path';
+import twemoji, { type TwemojiOptions } from '@discordapp/twemoji';
 import { Constants } from './constants';
 import { Errors } from './errors';
 
+const EMOJI_FORMAT = 'svg';
+
 const ALL_EMOJIS = [
   ...Constants.ALL_READ_EMOJIS,
   ...Errors.BAD_CREDENTIALS.emojis,
@@ -11,6 +14,21 @@ const ALL_EMOJIS = [
   ...Errors.UNKNOWN.emojis,
 ];
 
-export const EMOJI_CODE_POINTS = ALL_EMOJIS.map((emoji) =>
-  twemoji.convert.toCodePoint(emoji),
-);
+export const ALL_EMOJI_SVG_FILENAMES = ALL_EMOJIS.map((emoji) => {
+  const imgHtml = convertTextToEmojiImgHtml(emoji);
+  return extractSvgFilename(imgHtml);
+});
+
+export function convertTextToEmojiImgHtml(text: string): string {
+  return twemoji.parse(text, {
+    folder: EMOJI_FORMAT,
+    callback: (icon: string, _options: TwemojiOptions) => {
+      return path.join('images', 'twemoji', `${icon}.${EMOJI_FORMAT}`);
+    },
+  });
+}
+
+function extractSvgFilename(imgHtml: string): string {
+  const srcMatch = imgHtml.match(/src="(.*)"/);
+  return path.basename(srcMatch[1]);
+}