Message: Fix editing while receiving message update (#1755)

src/components/middle/composer/hooks/useEditing.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect } from '../../../../lib/teact/teact';
+import { useCallback } from '../../../../lib/teact/teact';
 import { getDispatch } from '../../../../lib/teact/teactn';
 
 import { ApiMessage } from '../../../../api/types';
@@ -8,6 +8,7 @@ import parseMessageInput from '../../../../util/parseMessageInput';
 import focusEditableElement from '../../../../util/focusEditableElement';
 import { hasMessageMedia } from '../../../../modules/helpers';
 import { getTextWithEntitiesAsHtml } from '../../../common/helpers/renderTextWithEntities';
+import useOnChange from '../../../../hooks/useOnChange';
 
 const useEditing = (
   htmlRef: { current: string },
@@ -18,21 +19,21 @@ const useEditing = (
 ) => {
   const { editMessage } = getDispatch();
 
-  // TODO useOnChange
-  // Handle editing message
-  useEffect(() => {
+  useOnChange(([prevEditedMessage]) => {
     if (!editedMessage) {
       setHtml('');
       return;
     }
-
+    if (prevEditedMessage?.id === editedMessage.id) {
+      return;
+    }
     setHtml(getTextWithEntitiesAsHtml(editedMessage.content.text));
 
     requestAnimationFrame(() => {
       const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
       focusEditableElement(messageInput, true);
     });
-  }, [editedMessage, setHtml]);
+  }, [editedMessage, setHtml] as const);
 
   const handleEditComplete = useCallback(() => {
     const { text, entities } = parseMessageInput(htmlRef.current!);

src/hooks/useOnChange.ts

@@ -1,6 +1,6 @@
 import usePrevious from './usePrevious';
 
-const useOnChange = <T extends any[]>(cb: (args: T | []) => void, dependencies: T) => {
+const useOnChange = <T extends readonly any[]>(cb: (args: T | readonly []) => void, dependencies: T) => {
   const prevDeps = usePrevious<T>(dependencies);
   if (!prevDeps || dependencies.some((d, i) => d !== prevDeps[i])) {
     cb(prevDeps || []);