fix: Emoji being rendered as big (#29493)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
RocketChat · Jun 15, 2023 · 734db1d · 734db1d
1 parent 9da856c
commit 734db1d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 56 deletions.
diff --git a/.changeset/gorgeous-lamps-tan.md b/.changeset/gorgeous-lamps-tan.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+fix emoji being rendered as big on headers and other places than message text
diff --git a/apps/meteor/app/emoji-emojione/client/emojione-sprites.css b/apps/meteor/app/emoji-emojione/client/emojione-sprites.css
@@ -28,8 +28,3 @@
 	image-rendering: -webkit-optimize-contrast;
 	image-rendering: optimizeQuality;
 }
-
-.big > .emojione {
-	width: 44px;
-	height: 44px;
-}
diff --git a/apps/meteor/app/emoji-emojione/lib/generateEmojiIndex.mjs b/apps/meteor/app/emoji-emojione/lib/generateEmojiIndex.mjs
@@ -9,11 +9,11 @@ import _ from 'underscore';
 import gm from 'gm'; // lgtm[js/unused-local-variable]
 
 const assetFolder = '../../../node_modules/emojione-assets';
-const emojiJsonFile = `${ assetFolder }/emoji.json`;
+const emojiJsonFile = `${assetFolder}/emoji.json`;
 
 if (!fs.existsSync(emojiJsonFile)) {
-	console.error(`${ emojiJsonFile } doesn't exist.`);
-	console.error('Maybe you need to run \'meteor npm install emojione-assets\' or \'meteor npm install\'?');
+	console.error(`${emojiJsonFile} doesn't exist.`);
+	console.error("Maybe you need to run 'meteor npm install emojione-assets' or 'meteor npm install'?");
 } else {
 	const emojiJson = fs.readFileSync(emojiJsonFile);
 	generateEmojiPicker(emojiJson);
@@ -51,7 +51,6 @@ function generateEmojiPicker(data) {
  * Mapping category hashes into human readable and translated names
  */\n\n`;
 
-
 	const emojiCategoriesMapping = [
 		{ key: 'people', i18n: 'Smileys_and_People' },
 		{ key: 'nature', i18n: 'Animals_and_Nature' },
@@ -66,11 +65,11 @@ function generateEmojiPicker(data) {
 	// emojiCategories
 	output += `export const emojiCategories = [\n`;
 	for (let category in emojisByCategory) {
-		const map = emojiCategoriesMapping.find(o => o.key === category);
+		const map = emojiCategoriesMapping.find((o) => o.key === category);
 		if (map) {
 			output += `\t{ key: '${category}', i18n: '${map.i18n}' },\n`;
 		} else {
-			if(category !== 'modifier' || category !== 'regional'){
+			if (category !== 'modifier' || category !== 'regional') {
 				console.error(`No emojiCategory mapping for ${category}`);
 			}
 		}
@@ -86,7 +85,6 @@ function generateEmojiPicker(data) {
 		} else {
 			output += `\t${toneList[tone]}: 1,\n`;
 		}
-
 	}
 	output += `};\n`;
 
@@ -96,16 +94,16 @@ function generateEmojiPicker(data) {
 		output += `\t${category}: [\n`;
 
 		for (let emoji in emojisByCategory[category]) {
-			output += `\t\t'${emojiList[emojisByCategory[category][emoji]].shortname.replace(/:/g,'')}',\n`;
+			output += `\t\t'${emojiList[emojisByCategory[category][emoji]].shortname.replace(/:/g, '')}',\n`;
 		}
 
 		output += `\t],\n`;
 	}
 	output += `};\n`;
 
-	fs.writeFileSync("emojiPicker.js", output, {
+	fs.writeFileSync('emojiPicker.js', output, {
 		encoding: 'utf8',
-		flag: 'w'
+		flag: 'w',
 	});
 	console.log('Generated emojiPicker.js!');
 
@@ -116,41 +114,44 @@ function generateEmojiPicker(data) {
 	for (let category in emojisByCategory) {
 		let srcList = [];
 		let diversityList = [];
-		const emojis = _.filter(emojiList, x => x.category === category);
-		const spritePath = `../../../public/packages/emojione/${ category }-sprites.png`;
+		const emojis = _.filter(emojiList, (x) => x.category === category);
+		const spritePath = `../../../public/packages/emojione/${category}-sprites.png`;
 
 		_.each(emojis, function (emoji) {
-			srcList.push(`${ assetFolder }/png/64/${ emoji.code_points.base }.png`);
-			if(emoji.diversity){
+			srcList.push(`${assetFolder}/png/64/${emoji.code_points.base}.png`);
+			if (emoji.diversity) {
 				diversityList[emoji.code_points.base] = true;
 			}
 		});
-		spriteCss += `@import './${ category }-sprites.css';\n`;
-
-		nsg({
-			src: srcList,
-			spritePath: spritePath,
-			layout: 'packed',
-			stylesheet: 'emojione.tpl',
-			stylesheetPath: `../client/${ category }-sprites.css`,
-			compositor: 'gm',
-			layoutOptions: {
-				scaling: 1,
+		spriteCss += `@import './${category}-sprites.css';\n`;
+
+		nsg(
+			{
+				src: srcList,
+				spritePath: spritePath,
+				layout: 'packed',
+				stylesheet: 'emojione.tpl',
+				stylesheetPath: `../client/${category}-sprites.css`,
+				compositor: 'gm',
+				layoutOptions: {
+					scaling: 1,
+				},
+				stylesheetOptions: {
+					prefix: '',
+					diversityList: diversityList,
+					category: category,
+					spritePath: `/packages/emojione/${category}-sprites.png`,
+					pixelRatio: 1,
+				},
 			},
-			stylesheetOptions: {
-				prefix: '',
-				diversityList: diversityList,
-				category: category,
-				spritePath: `/packages/emojione/${ category }-sprites.png`,
-				pixelRatio: 1
-			}
-		}, function (err) {
-			if (err) {
-				console.error(err);
-				return;
-			}
-			console.log(`${ category }'s sprite generated!`);
-		});
+			function (err) {
+				if (err) {
+					console.error(err);
+					return;
+				}
+				console.log(`${category}'s sprite generated!`);
+			},
+		);
 	}
 
 	spriteCss += `
@@ -173,14 +174,9 @@ function generateEmojiPicker(data) {
 	image-rendering: -webkit-optimize-contrast;
 	image-rendering: optimizeQuality;
 }
-
-.emojione.big {
-	width: 44px;
-	height: 44px;
-}
 `;
-	fs.writeFileSync("../client/emojione-sprites.css", spriteCss, {
+	fs.writeFileSync('../client/emojione-sprites.css', spriteCss, {
 		encoding: 'utf8',
-		flag: 'w'
+		flag: 'w',
 	});
 }
diff --git a/apps/meteor/app/theme/client/imports/components/emoji.css b/apps/meteor/app/theme/client/imports/components/emoji.css
@@ -20,8 +20,3 @@
 	line-height: normal;
 	image-rendering: auto;
 }
-
-.emoji.big {
-	width: 44px;
-	height: 44px;
-}