Message: Fix custom emoji position after editing (#2703)

src/components/common/MessageText.tsx

@@ -1,4 +1,6 @@
-import React, { memo, useMemo, useRef } from '../../lib/teact/teact';
+import React, {
+  memo, useMemo, useRef,
+} from '../../lib/teact/teact';
 
 import type { ApiFormattedText, ApiMessage } from '../../api/types';
 import type { ObserveFn } from '../../hooks/useIntersectionObserver';
@@ -7,6 +9,7 @@ import { ApiMessageEntityTypes } from '../../api/types';
 import trimText from '../../util/trimText';
 import { getMessageText, stripCustomEmoji } from '../../global/helpers';
 import { renderTextWithEntities } from './helpers/renderTextWithEntities';
+import useSyncEffect from '../../hooks/useSyncEffect';
 
 interface OwnProps {
   message: ApiMessage;
@@ -44,12 +47,18 @@ function MessageText({
   // eslint-disable-next-line no-null/no-null
   const sharedCanvasHqRef = useRef<HTMLCanvasElement>(null);
 
+  const textCacheBusterRef = useRef(0);
+
   const formattedText = translatedText || message.content.text || undefined;
 
   const adaptedFormattedText = isForAnimation && formattedText ? stripCustomEmoji(formattedText) : formattedText;
 
   const { text, entities } = adaptedFormattedText || {};
 
+  useSyncEffect(() => {
+    textCacheBusterRef.current += 1;
+  }, [text, entities]);
+
   const withSharedCanvas = useMemo(() => {
     const hasSpoilers = entities?.some((e) => e.type === ApiMessageEntityTypes.Spoiler);
     if (hasSpoilers) {
@@ -84,6 +93,7 @@ function MessageText({
           withTranslucentThumbs,
           sharedCanvasRef,
           sharedCanvasHqRef,
+          textCacheBusterRef.current.toString(),
         ),
       ].flat().filter(Boolean)}
     </>

src/components/common/helpers/renderTextWithEntities.tsx

@@ -41,6 +41,7 @@ export function renderTextWithEntities(
   withTranslucentThumbs?: boolean,
   sharedCanvasRef?: React.RefObject<HTMLCanvasElement>,
   sharedCanvasHqRef?: React.RefObject<HTMLCanvasElement>,
+  cacheBuster?: string,
 ) {
   if (!entities || !entities.length) {
     return renderMessagePart(text, highlight, emojiSize, shouldRenderAsHtml, isSimple);
@@ -129,6 +130,7 @@ export function renderTextWithEntities(
         emojiSize,
         sharedCanvasRef,
         sharedCanvasHqRef,
+        cacheBuster,
       );
 
     if (Array.isArray(newEntity)) {
@@ -311,6 +313,7 @@ function processEntity(
   emojiSize?: number,
   sharedCanvasRef?: React.RefObject<HTMLCanvasElement>,
   sharedCanvasHqRef?: React.RefObject<HTMLCanvasElement>,
+  cacheBuster?: string,
 ) {
   const entityText = typeof entityContent === 'string' && entityContent;
   const renderedContent = nestedEntityContent.length ? nestedEntityContent : entityContent;
@@ -334,6 +337,7 @@ function processEntity(
     if (entity.type === ApiMessageEntityTypes.CustomEmoji) {
       return (
         <CustomEmoji
+          key={cacheBuster ? `${cacheBuster}-${entity.offset}` : undefined}
           documentId={entity.documentId}
           size={emojiSize}
           withSharedAnimation
@@ -458,6 +462,7 @@ function processEntity(
     case ApiMessageEntityTypes.CustomEmoji:
       return (
         <CustomEmoji
+          key={cacheBuster ? `${cacheBuster}-${entity.offset}` : undefined}
           documentId={entity.documentId}
           size={emojiSize}
           withSharedAnimation

src/hooks/useCacheBuster.ts

@@ -1,10 +1,10 @@
 import { useCallback, useState } from '../lib/teact/teact';
 
 const useCacheBuster = () => {
-  const [cacheBuster, setCacheBuster] = useState<boolean>(false);
+  const [cacheBuster, setCacheBuster] = useState(0);
 
   const updateCacheBuster = useCallback(() => {
-    setCacheBuster((current) => !current);
+    setCacheBuster((current) => current + 1);
   }, []);
 
   return [cacheBuster, updateCacheBuster] as const;