From 0ae64c0c541f2da352a5967638d419276fb7a98a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 16 Nov 2022 16:16:44 +0400
Subject: [PATCH] Custom Emoji: Fix editing message, resize (#2138)

---
 src/api/gramjs/methods/messages.ts                   |  3 +++
 .../middle/composer/helpers/customEmoji.ts           |  8 +++++---
 src/components/middle/message/Message.tsx            |  2 +-
 src/components/middle/message/_message-content.scss  |  4 ++--
 src/util/parseEmojiOnlyString.ts                     | 12 ++++++++++--
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/api/gramjs/methods/messages.ts b/src/api/gramjs/methods/messages.ts
index c3cc4d935..92dffdd31 100644
--- a/src/api/gramjs/methods/messages.ts
+++ b/src/api/gramjs/methods/messages.ts
@@ -63,6 +63,7 @@ import {
 } from '../helpers';
 import { interpolateArray } from '../../../util/waveform';
 import { requestChatUpdate } from './chats';
+import parseEmojiOnlyString from '../../../util/parseEmojiOnlyString';
 
 const FAST_SEND_TIMEOUT = 1000;
 const INPUT_WAVEFORM_LENGTH = 63;
@@ -486,6 +487,7 @@ export async function editMessage({
   serverTimeOffset: number;
 }) {
   const isScheduled = message.date * 1000 > Date.now() + serverTimeOffset * 1000;
+  const emojiOnlyCount = text ? parseEmojiOnlyString(text) : undefined;
   const messageUpdate: Partial<ApiMessage> = {
     content: {
       ...message.content,
@@ -496,6 +498,7 @@ export async function editMessage({
         },
       }),
     },
+    emojiOnlyCount: emojiOnlyCount || undefined,
   };
 
   onUpdate({
diff --git a/src/components/middle/composer/helpers/customEmoji.ts b/src/components/middle/composer/helpers/customEmoji.ts
index 1295ed690..e67303579 100644
--- a/src/components/middle/composer/helpers/customEmoji.ts
+++ b/src/components/middle/composer/helpers/customEmoji.ts
@@ -35,8 +35,10 @@ export function buildCustomEmojiHtmlFromEntity(rawText: string, entity: ApiMessa
   />`;
 }
 
-export function getCustomEmojiSize(maxEmojisInLine: number): number | undefined {
-  if (maxEmojisInLine > EMOJI_SIZES) return undefined;
+export function getCustomEmojiSize(maxEmojisInLine?: number): number | undefined {
+  if (!maxEmojisInLine) return undefined;
 
-  return (6 - (maxEmojisInLine * 0.625)) * REM; // Should be the same as in _message-content.scss
+  // Should be the same as in _message-content.scss
+  if (maxEmojisInLine > EMOJI_SIZES) return REM * 2.25;
+  return (6 - (maxEmojisInLine * 0.5)) * REM;
 }
diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index 87a0f6490..d59def1bd 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -523,7 +523,7 @@ const Message: FC<OwnProps & StateProps> = ({
 
   const withAppendix = contentClassName.includes('has-appendix');
   const hasText = hasMessageText(message);
-  const emojiSize = message.emojiOnlyCount && getCustomEmojiSize(message.emojiOnlyCount);
+  const emojiSize = getCustomEmojiSize(message.emojiOnlyCount);
 
   let metaPosition!: MetaPosition;
   if (phoneCall) {
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index 51935416b..5b5c392ae 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -706,7 +706,7 @@
   }
 
   &.emoji-only {
-    --emoji-only-size: 1.25rem;
+    --emoji-only-size: 2.25rem;
     font-size: var(--emoji-only-size);
     min-width: 6rem;
 
@@ -738,7 +738,7 @@
 
   @for $i from 1 through 7 {
     &.emoji-only-#{$i} {
-      $size: 6 - ($i * 0.625) + rem;
+      $size: 6 - ($i * 0.5) + rem;
 
       --emoji-only-size: #{$size};
     }
diff --git a/src/util/parseEmojiOnlyString.ts b/src/util/parseEmojiOnlyString.ts
index 59011b902..e3eac977c 100644
--- a/src/util/parseEmojiOnlyString.ts
+++ b/src/util/parseEmojiOnlyString.ts
@@ -29,9 +29,17 @@ const parseEmojiOnlyString = (text: string): number | false => {
     return emojiCount;
   });
 
-  if (countPerLine.some((count) => count === -1)) return false;
+  let max = lines.length;
+  for (let i = 0; i < countPerLine.length; i++) {
+    if (countPerLine[i] === -1) {
+      return false;
+    }
+    if (countPerLine[i] > max) {
+      max = countPerLine[i];
+    }
+  }
 
-  return Math.max(...countPerLine);
+  return max;
 };
 
 export default parseEmojiOnlyString;