ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Composer: Fix custom emoji leftovers when opening attachments (#2506)

Browse Source
This commit is contained in:
Alexander Zinchuk 2023-02-08 00:47:29 +01:00
parent 28dc43ab4a
commit 0c57ef9c48
2 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/middle/composer/MessageInput.tsx
View File

@ -146,7 +146,15 @@ const MessageInput: FC<OwnProps & StateProps> = ({
const [isTextFormatterDisabled, setIsTextFormatterDisabled] = useState<boolean>(false); const [isTextFormatterDisabled, setIsTextFormatterDisabled] = useState<boolean>(false);
const { isMobile } = useAppLayout(); const { isMobile } = useAppLayout();
useInputCustomEmojis(getHtml, inputRef, sharedCanvasRef, sharedCanvasHqRef, absoluteContainerRef); useInputCustomEmojis(
getHtml,
inputRef,
sharedCanvasRef,
sharedCanvasHqRef,
absoluteContainerRef,
isAttachmentModalInput ? 'attachment' : undefined,
isActive,
);
const maxInputHeight = isMobile ? 256 : 416; const maxInputHeight = isMobile ? 256 : 416;
const updateInputHeight = useCallback((willSend = false) => { const updateInputHeight = useCallback((willSend = false) => {

13
src/components/middle/composer/hooks/useInputCustomEmojis.ts
View File

@ -37,6 +37,8 @@ export default function useInputCustomEmojis(
sharedCanvasRef: React.RefObject<HTMLCanvasElement>, sharedCanvasRef: React.RefObject<HTMLCanvasElement>,
sharedCanvasHqRef: React.RefObject<HTMLCanvasElement>, sharedCanvasHqRef: React.RefObject<HTMLCanvasElement>,
absoluteContainerRef: React.RefObject<HTMLElement>, absoluteContainerRef: React.RefObject<HTMLElement>,
prefixId?: string,
isActive?: boolean,
) { ) {
const mapRef = useRef<Map<string, CustomEmojiPlayer>>(new Map()); const mapRef = useRef<Map<string, CustomEmojiPlayer>>(new Map());
@ -59,7 +61,7 @@ export default function useInputCustomEmojis(
const customEmojies = Array.from(inputRef.current.querySelectorAll<HTMLElement>('.custom-emoji')); const customEmojies = Array.from(inputRef.current.querySelectorAll<HTMLElement>('.custom-emoji'));
customEmojies.forEach((element) => { customEmojies.forEach((element) => {
const id = element.dataset.uniqueId!; const id = `${prefixId || ''}${element.dataset.uniqueId!}`;
const documentId = element.dataset.documentId!; const documentId = element.dataset.documentId!;
if (!id) { if (!id) {
return; return;
@ -105,7 +107,10 @@ export default function useInputCustomEmojis(
}); });
removeContainers(Array.from(removedContainers)); removeContainers(Array.from(removedContainers));
}, [absoluteContainerRef, inputRef, isMobile, removeContainers, sharedCanvasHqRef, sharedCanvasRef]); }, [
absoluteContainerRef, inputRef, prefixId, isMobile, removeContainers, sharedCanvasHqRef,
sharedCanvasRef,
]);
useEffect(() => { useEffect(() => {
addCustomEmojiInputRenderCallback(synchronizeElements); addCustomEmojiInputRenderCallback(synchronizeElements);
@ -116,13 +121,13 @@ export default function useInputCustomEmojis(
}, [synchronizeElements]); }, [synchronizeElements]);
useEffect(() => { useEffect(() => {
if (!getHtml() || !inputRef.current || !sharedCanvasRef.current) { if (!getHtml() || !inputRef.current || !sharedCanvasRef.current || !isActive) {
removeContainers(Array.from(mapRef.current.keys())); removeContainers(Array.from(mapRef.current.keys()));
return; return;
} }
synchronizeElements(); synchronizeElements();
}, [getHtml, synchronizeElements, inputRef, removeContainers, sharedCanvasRef]); }, [getHtml, synchronizeElements, inputRef, removeContainers, sharedCanvasRef, isActive]);
useResizeObserver(sharedCanvasRef, synchronizeElements, true); useResizeObserver(sharedCanvasRef, synchronizeElements, true);