Custom Emoji: Fix editing message, resize (#2138)

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({

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 {
+export function getCustomEmojiSize(maxEmojisInLine?: number): number | undefined {
-  if (maxEmojisInLine > EMOJI_SIZES) return 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;
 }

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) {

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};
     }

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;