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

Composer: Various fixes for switching message lists (#1807)

Browse Source
This commit is contained in:
Alexander Zinchuk 2022-04-01 20:43:54 +02:00
parent e54bf92a1f
commit 27b9ea53b2
6 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/middle/MiddleHeader.tsx
View File

@ -10,7 +10,7 @@ import {
} from '../../api/types'; } from '../../api/types';
import { import {
EDITABLE_INPUT_ID, EDITABLE_INPUT_CSS_SELECTOR,
MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN, MIN_SCREEN_WIDTH_FOR_STATIC_LEFT_COLUMN,
MIN_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN, MIN_SCREEN_WIDTH_FOR_STATIC_RIGHT_COLUMN,
MOBILE_SCREEN_MAX_WIDTH, MOBILE_SCREEN_MAX_WIDTH,
@ -190,10 +190,8 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
// Workaround for missing UI when quickly clicking the Back button // Workaround for missing UI when quickly clicking the Back button
isBackButtonActive.current = false; isBackButtonActive.current = false;
if (IS_SINGLE_COLUMN_LAYOUT) { if (IS_SINGLE_COLUMN_LAYOUT) {
const messageInput = document.getElementById(EDITABLE_INPUT_ID); const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (messageInput) { messageInput?.blur();
messageInput.blur();
}
} }
if (isSelectModeActive) { if (isSelectModeActive) {

26
src/components/middle/composer/Composer.tsx
View File

@ -23,6 +23,7 @@ import { InlineBotSettings } from '../../../types';
import { import {
BASE_EMOJI_KEYWORD_LANG, EDITABLE_INPUT_ID, REPLIES_USER_ID, SEND_MESSAGE_ACTION_INTERVAL, BASE_EMOJI_KEYWORD_LANG, EDITABLE_INPUT_ID, REPLIES_USER_ID, SEND_MESSAGE_ACTION_INTERVAL,
EDITABLE_INPUT_CSS_SELECTOR,
} from '../../../config'; } from '../../../config';
import { IS_VOICE_RECORDING_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT, IS_IOS } from '../../../util/environment'; import { IS_VOICE_RECORDING_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT, IS_IOS } from '../../../util/environment';
import { MEMO_EMPTY_ARRAY } from '../../../util/memo'; import { MEMO_EMPTY_ARRAY } from '../../../util/memo';
@ -398,7 +399,12 @@ const Composer: FC<OwnProps & StateProps> = ({
const insertTextAndUpdateCursor = useCallback((text: string, inputId: string = EDITABLE_INPUT_ID) => { const insertTextAndUpdateCursor = useCallback((text: string, inputId: string = EDITABLE_INPUT_ID) => {
const selection = window.getSelection()!; const selection = window.getSelection()!;
const messageInput = document.getElementById(inputId)!; let messageInput: HTMLDivElement;
if (inputId === EDITABLE_INPUT_ID) {
messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR)!;
} else {
messageInput = document.getElementById(inputId) as HTMLDivElement;
}
const newHtml = renderText(text, ['escape_html', 'emoji_html', 'br_html']) const newHtml = renderText(text, ['escape_html', 'emoji_html', 'br_html'])
.join('') .join('')
.replace(/\u200b+/g, '\u200b'); .replace(/\u200b+/g, '\u200b');
@ -543,7 +549,7 @@ const Composer: FC<OwnProps & StateProps> = ({
return; return;
} }
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!; const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (currentAttachments.length || text) { if (currentAttachments.length || text) {
if (slowMode && !isAdmin) { if (slowMode && !isAdmin) {
@ -567,7 +573,7 @@ const Composer: FC<OwnProps & StateProps> = ({
}, },
}); });
messageInput.blur(); messageInput?.blur();
return; return;
} }
@ -593,7 +599,7 @@ const Composer: FC<OwnProps & StateProps> = ({
clearDraft({ chatId, localOnly: true }); clearDraft({ chatId, localOnly: true });
if (IS_IOS && messageInput === document.activeElement) { if (IS_IOS && messageInput && messageInput === document.activeElement) {
applyIosAutoCapitalizationFix(messageInput); applyIosAutoCapitalizationFix(messageInput);
} }
@ -723,8 +729,8 @@ const Composer: FC<OwnProps & StateProps> = ({
}); });
} }
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!; const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (IS_IOS && messageInput === document.activeElement) { if (IS_IOS && messageInput && messageInput === document.activeElement) {
applyIosAutoCapitalizationFix(messageInput); applyIosAutoCapitalizationFix(messageInput);
} }
@ -777,14 +783,14 @@ const Composer: FC<OwnProps & StateProps> = ({
}, [setStickerSearchQuery, setGifSearchQuery]); }, [setStickerSearchQuery, setGifSearchQuery]);
const handleSymbolMenuOpen = useCallback(() => { const handleSymbolMenuOpen = useCallback(() => {
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!; const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (!IS_SINGLE_COLUMN_LAYOUT || messageInput !== document.activeElement) { if (!IS_SINGLE_COLUMN_LAYOUT || messageInput !== document.activeElement) {
openSymbolMenu(); openSymbolMenu();
return; return;
} }
messageInput.blur(); messageInput?.blur();
setTimeout(() => { setTimeout(() => {
closeBotCommandMenu(); closeBotCommandMenu();
openSymbolMenu(); openSymbolMenu();
@ -792,7 +798,7 @@ const Composer: FC<OwnProps & StateProps> = ({
}, [openSymbolMenu, closeBotCommandMenu]); }, [openSymbolMenu, closeBotCommandMenu]);
const handleSendAsMenuOpen = useCallback(() => { const handleSendAsMenuOpen = useCallback(() => {
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!; const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (!IS_SINGLE_COLUMN_LAYOUT || messageInput !== document.activeElement) { if (!IS_SINGLE_COLUMN_LAYOUT || messageInput !== document.activeElement) {
closeBotCommandMenu(); closeBotCommandMenu();
@ -801,7 +807,7 @@ const Composer: FC<OwnProps & StateProps> = ({
return; return;
} }
messageInput.blur(); messageInput?.blur();
setTimeout(() => { setTimeout(() => {
closeBotCommandMenu(); closeBotCommandMenu();
closeSymbolMenu(); closeSymbolMenu();

8
src/components/middle/composer/hooks/useDraft.ts
View File

@ -3,7 +3,7 @@ import { getActions } from '../../../../global';
import { ApiFormattedText, ApiMessage } from '../../../../api/types'; import { ApiFormattedText, ApiMessage } from '../../../../api/types';
import { DRAFT_DEBOUNCE, EDITABLE_INPUT_ID } from '../../../../config'; import { DRAFT_DEBOUNCE, EDITABLE_INPUT_CSS_SELECTOR } from '../../../../config';
import usePrevious from '../../../../hooks/usePrevious'; import usePrevious from '../../../../hooks/usePrevious';
import { debounce } from '../../../../util/schedulers'; import { debounce } from '../../../../util/schedulers';
import focusEditableElement from '../../../../util/focusEditableElement'; import focusEditableElement from '../../../../util/focusEditableElement';
@ -70,8 +70,10 @@ const useDraft = (
if (!IS_TOUCH_ENV) { if (!IS_TOUCH_ENV) {
requestAnimationFrame(() => { requestAnimationFrame(() => {
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!; const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
focusEditableElement(messageInput, true); if (messageInput) {
focusEditableElement(messageInput, true);
}
}); });
} }
}, [chatId, threadId, draft, setHtml, updateDraft, prevChatId, prevThreadId, editedMessage]); }, [chatId, threadId, draft, setHtml, updateDraft, prevChatId, prevThreadId, editedMessage]);

18
src/components/middle/composer/hooks/useEditing.ts
View File

@ -5,7 +5,7 @@ import { ApiFormattedText, ApiMessage } from '../../../../api/types';
import { MessageListType } from '../../../../global/types'; import { MessageListType } from '../../../../global/types';
import useEffectWithPrevDeps from '../../../../hooks/useEffectWithPrevDeps'; import useEffectWithPrevDeps from '../../../../hooks/useEffectWithPrevDeps';
import { EDITABLE_INPUT_ID } from '../../../../config'; import { EDITABLE_INPUT_CSS_SELECTOR } from '../../../../config';
import parseMessageInput from '../../../../util/parseMessageInput'; import parseMessageInput from '../../../../util/parseMessageInput';
import focusEditableElement from '../../../../util/focusEditableElement'; import focusEditableElement from '../../../../util/focusEditableElement';
import { hasMessageMedia } from '../../../../global/helpers'; import { hasMessageMedia } from '../../../../global/helpers';
@ -40,8 +40,10 @@ const useEditing = (
setHtml(html); setHtml(html);
// `fastRaf` would execute syncronously in this case // `fastRaf` would execute syncronously in this case
requestAnimationFrame(() => { requestAnimationFrame(() => {
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!; const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
focusEditableElement(messageInput, true); if (messageInput) {
focusEditableElement(messageInput, true);
}
}); });
}, [editedMessage, setHtml] as const); }, [editedMessage, setHtml] as const);
@ -62,10 +64,12 @@ const useEditing = (
// Run 1 frame after editing draft reset // Run 1 frame after editing draft reset
fastRaf(() => { fastRaf(() => {
setHtml(getTextWithEntitiesAsHtml(draft)); setHtml(getTextWithEntitiesAsHtml(draft));
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!; const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
requestAnimationFrame(() => { if (messageInput) {
focusEditableElement(messageInput, true); requestAnimationFrame(() => {
}); focusEditableElement(messageInput, true);
});
}
}); });
}, [draft, setHtml]); }, [draft, setHtml]);

9
src/components/middle/composer/hooks/useEmojiTooltip.ts
View File

@ -2,7 +2,7 @@ import {
useCallback, useEffect, useState, useCallback, useEffect, useState,
} from '../../../../lib/teact/teact'; } from '../../../../lib/teact/teact';
import { EDITABLE_INPUT_ID } from '../../../../config'; import { EDITABLE_INPUT_CSS_SELECTOR, EDITABLE_INPUT_ID } from '../../../../config';
import { MEMO_EMPTY_ARRAY } from '../../../../util/memo'; import { MEMO_EMPTY_ARRAY } from '../../../../util/memo';
import { prepareForRegExp } from '../helpers/prepareForRegExp'; import { prepareForRegExp } from '../helpers/prepareForRegExp';
import { import {
@ -117,7 +117,12 @@ export default function useEmojiTooltip(
const atIndex = currentHtml.lastIndexOf(':', isForce ? currentHtml.lastIndexOf(':') - 1 : undefined); const atIndex = currentHtml.lastIndexOf(':', isForce ? currentHtml.lastIndexOf(':') - 1 : undefined);
if (atIndex !== -1) { if (atIndex !== -1) {
onUpdateHtml(`${currentHtml.substr(0, atIndex)}${renderText(textEmoji, ['emoji_html'])}`); onUpdateHtml(`${currentHtml.substr(0, atIndex)}${renderText(textEmoji, ['emoji_html'])}`);
const messageInput = document.getElementById(inputId)!; let messageInput: HTMLDivElement;
if (inputId === EDITABLE_INPUT_ID) {
messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR)!;
} else {
messageInput = document.getElementById(inputId) as HTMLDivElement;
}
requestAnimationFrame(() => { requestAnimationFrame(() => {
focusEditableElement(messageInput, true, true); focusEditableElement(messageInput, true, true);
}); });

2
src/config.ts
View File

@ -84,6 +84,8 @@ export const SEND_MESSAGE_ACTION_INTERVAL = 3000; // 3s
export const EDITABLE_INPUT_ID = 'editable-message-text'; export const EDITABLE_INPUT_ID = 'editable-message-text';
export const EDITABLE_INPUT_MODAL_ID = 'editable-message-text-modal'; export const EDITABLE_INPUT_MODAL_ID = 'editable-message-text-modal';
// eslint-disable-next-line max-len
export const EDITABLE_INPUT_CSS_SELECTOR = `.Transition__slide--active #${EDITABLE_INPUT_ID}, .Transition > .to #${EDITABLE_INPUT_ID}`;
export const CUSTOM_APPENDIX_ATTRIBUTE = 'data-has-custom-appendix'; export const CUSTOM_APPENDIX_ATTRIBUTE = 'data-has-custom-appendix';