diff --git a/config/webpack.config.renderer.base.ts b/config/webpack.config.renderer.base.ts index e4d931b3c..f1dc7e4bd 100644 --- a/config/webpack.config.renderer.base.ts +++ b/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}`), ); }, }, diff --git a/src/renderer/components/EmojiText.tsx b/src/renderer/components/EmojiText.tsx index d87121701..c75362566 100644 --- a/src/renderer/components/EmojiText.tsx +++ b/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 = ({ 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]); diff --git a/src/renderer/utils/__snapshots__/emojis.test.ts.snap b/src/renderer/utils/__snapshots__/emojis.test.ts.snap index 2e0c08668..b44d00299 100644 --- a/src/renderer/utils/__snapshots__/emojis.test.ts.snap +++ b/src/renderer/utils/__snapshots__/emojis.test.ts.snap @@ -1,26 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`renderer/utils/emojis.ts emoji code points 1`] = ` +exports[`renderer/utils/emojis.ts emoji svg filenames 1`] = ` [ - "1f389", - "1f38a", - "1f973", - "1f44f", - "1f64c", - "1f60e", - "1f3d6-fe0f", - "1f680", - "2728", - "1f3c6", - "1f513", - "1f52d", - "1f6dc", - "1f62e-200d-1f4a8", - "1f914", - "1f972", - "1f633", - "1fae0", - "1f643", - "1f648", + "1f389.svg", + "1f38a.svg", + "1f973.svg", + "1f44f.svg", + "1f64c.svg", + "1f60e.svg", + "1f3d6.svg", + "1f680.svg", + "2728.svg", + "1f3c6.svg", + "1f513.svg", + "1f52d.svg", + "1f6dc.svg", + "1f62e-200d-1f4a8.svg", + "1f914.svg", + "1f972.svg", + "1f633.svg", + "1fae0.svg", + "1f643.svg", + "1f648.svg", ] `; diff --git a/src/renderer/utils/emojis.test.ts b/src/renderer/utils/emojis.test.ts index 62f5736a5..92d6d1b5a 100644 --- a/src/renderer/utils/emojis.test.ts +++ b/src/renderer/utils/emojis.test.ts @@ -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(); }); }); diff --git a/src/renderer/utils/emojis.ts b/src/renderer/utils/emojis.ts index a733bf4a0..81632aebd 100644 --- a/src/renderer/utils/emojis.ts +++ b/src/renderer/utils/emojis.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]); +}