fix: room list rendering wrong built-in emoji when a custom emoji shares its shortcode

app/containers/message/Reactions.test.tsx

@@ -6,8 +6,11 @@ import Reactions from './Reactions';
 import MessageContext from './Context';
 import { setUser } from '../../actions/login';
 import { mockedStore } from '../../reducers/mockedStore';
+import { initStore } from '../../lib/store/auxStore';
 import { type IReaction } from '../../definitions';
 
+initStore(mockedStore);
+
 const initialMockedStoreState = () => {
 	mockedStore.dispatch(
 		setUser({

app/lib/hooks/usePreviewFormatText/usePreviewFormatText.test.ts

@@ -1,11 +1,15 @@
 import { mockedStore } from '../../../reducers/mockedStore';
 import { setUser } from '../../../actions/login';
+import { setCustomEmojis } from '../../../actions/customEmojis';
+import { initStore } from '../../store/auxStore';
 import usePreviewFormatText from './index';
 
 jest.mock('../useAppSelector', () => ({
-	useAppSelector: () => mockedStore.getState().login.user.settings?.preferences?.convertAsciiEmoji
+	useAppSelector: (selector: (state: ReturnType<typeof mockedStore.getState>) => unknown) => selector(mockedStore.getState())
 }));
 
+initStore(mockedStore);
+
 const initialMockedStoreState = () => {
 	mockedStore.dispatch(
 		setUser({
@@ -126,3 +130,18 @@ describe('convertAsciiEmoji = false', () => {
 		expect(formattedText).toBe('Hello World :)');
 	});
 });
+
+describe('shortcode collides with a custom emoji name', () => {
+	beforeAll(() => {
+		mockedStore.dispatch(setCustomEmojis({ no: { name: 'no', extension: 'png' } }));
+	});
+
+	afterAll(() => {
+		mockedStore.dispatch(setCustomEmojis({}));
+	});
+
+	test('does not resolve :no: to the Norway flag when a custom "no" emoji exists', () => {
+		const formattedText = usePreviewFormatText(':no:');
+		expect(formattedText).toBe(':no:');
+	});
+});

app/lib/hooks/useShortnameToUnicode/index.tsx

@@ -2,9 +2,9 @@ import emojis from './emojis';
 import ascii, { asciiRegexp } from './ascii';
 import { useAppSelector } from '../useAppSelector';
 import { getUserSelector } from '../../../selectors/login';
+import { store as reduxStore } from '../../store/auxStore';
 
 const shortnamePattern = new RegExp(/:[-+_a-z0-9]+:/, 'gi');
-const replaceShortNameWithUnicode = (shortname: string) => emojis[shortname] || shortname;
 const regAscii = new RegExp(`((\\s|^)${asciiRegexp}(?=\\s|$|[!,.?]))`, 'gi');
 
 const unescapeHTML = (string: string) => {
@@ -31,8 +31,16 @@ const unescapeHTML = (string: string) => {
 
 const useShortnameToUnicode = (isEmojiPicker?: boolean) => {
 	const convertAsciiEmoji = useAppSelector(state => getUserSelector(state)?.settings?.preferences?.convertAsciiEmoji);
+	const replaceShortnameWithUnicode = (shortname: string) => {
+		const name = shortname.replace(/:/g, '');
+		// a custom emoji sharing a built-in shortcode/alias must win
+		if (reduxStore.getState().customEmojis[name]) {
+			return shortname;
+		}
+		return emojis[shortname] || shortname;
+	};
 	const formatShortnameToUnicode = (str: string) => {
-		str = str.replace(shortnamePattern, replaceShortNameWithUnicode);
+		str = str.replace(shortnamePattern, replaceShortnameWithUnicode);
 		str = str.replace(regAscii, (entire, _m1, m2, m3) => {
 			if (!m3 || !(unescapeHTML(m3) in ascii)) {
 				// if the ascii doesnt exist just return the entire match

app/lib/hooks/useShortnameToUnicode/useShortnameToUnicode.test.ts

@@ -1,11 +1,15 @@
 import useShortnameToUnicode from './index';
 import { setUser } from '../../../actions/login';
+import { setCustomEmojis } from '../../../actions/customEmojis';
 import { mockedStore } from '../../../reducers/mockedStore';
+import { initStore } from '../../store/auxStore';
 
 jest.mock('../useAppSelector', () => ({
-	useAppSelector: () => mockedStore.getState().login.user.settings?.preferences?.convertAsciiEmoji
+	useAppSelector: (selector: (state: ReturnType<typeof mockedStore.getState>) => unknown) => selector(mockedStore.getState())
 }));
 
+initStore(mockedStore);
+
 const initialMockedStoreState = () => {
 	mockedStore.dispatch(
 		setUser({
@@ -32,6 +36,20 @@ test('render several emojis', () => {
 	expect(unicodeEmoji).toBe('🐶🐱🍔🍦🚀');
 });
 
+test('render flag_no emoji as the Norway flag', () => {
+	const { formatShortnameToUnicode } = useShortnameToUnicode();
+	const unicodeEmoji = formatShortnameToUnicode(':flag_no:');
+	expect(unicodeEmoji).toBe('🇳🇴');
+});
+
+test('do NOT resolve a shortcode that collides with a custom emoji name', () => {
+	mockedStore.dispatch(setCustomEmojis({ no: { name: 'no', extension: 'png' } }));
+	const { formatShortnameToUnicode } = useShortnameToUnicode();
+	const unicodeEmoji = formatShortnameToUnicode(':no:');
+	expect(unicodeEmoji).toBe(':no:');
+	mockedStore.dispatch(setCustomEmojis({}));
+});
+
 test('render unknown emoji', () => {
 	const { formatShortnameToUnicode } = useShortnameToUnicode();
 	const unicodeEmoji = formatShortnameToUnicode(':unknown:');