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

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

@ -23,6 +23,7 @@ import { InlineBotSettings } from '../../../types';
import {
BASE_EMOJI_KEYWORD_LANG, EDITABLE_INPUT_ID, REPLIES_USER_ID, SEND_MESSAGE_ACTION_INTERVAL,
EDITABLE_INPUT_CSS_SELECTOR,
} from '../../../config';
import { IS_VOICE_RECORDING_SUPPORTED, IS_SINGLE_COLUMN_LAYOUT, IS_IOS } from '../../../util/environment';
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 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'])
.join('')
.replace(/\u200b+/g, '\u200b');
@ -543,7 +549,7 @@ const Composer: FC<OwnProps & StateProps> = ({
return;
}
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (currentAttachments.length || text) {
if (slowMode && !isAdmin) {
@ -567,7 +573,7 @@ const Composer: FC<OwnProps & StateProps> = ({
},
});
messageInput.blur();
messageInput?.blur();
return;
}
@ -593,7 +599,7 @@ const Composer: FC<OwnProps & StateProps> = ({
clearDraft({ chatId, localOnly: true });
if (IS_IOS && messageInput === document.activeElement) {
if (IS_IOS && messageInput && messageInput === document.activeElement) {
applyIosAutoCapitalizationFix(messageInput);
}
@ -723,8 +729,8 @@ const Composer: FC<OwnProps & StateProps> = ({
});
}
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
if (IS_IOS && messageInput === document.activeElement) {
const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (IS_IOS && messageInput && messageInput === document.activeElement) {
applyIosAutoCapitalizationFix(messageInput);
}
@ -777,14 +783,14 @@ const Composer: FC<OwnProps & StateProps> = ({
}, [setStickerSearchQuery, setGifSearchQuery]);
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) {
openSymbolMenu();
return;
}
messageInput.blur();
messageInput?.blur();
setTimeout(() => {
closeBotCommandMenu();
openSymbolMenu();
@ -792,7 +798,7 @@ const Composer: FC<OwnProps & StateProps> = ({
}, [openSymbolMenu, closeBotCommandMenu]);
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) {
closeBotCommandMenu();
@ -801,7 +807,7 @@ const Composer: FC<OwnProps & StateProps> = ({
return;
}
messageInput.blur();
messageInput?.blur();
setTimeout(() => {
closeBotCommandMenu();
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 { DRAFT_DEBOUNCE, EDITABLE_INPUT_ID } from '../../../../config';
import { DRAFT_DEBOUNCE, EDITABLE_INPUT_CSS_SELECTOR } from '../../../../config';
import usePrevious from '../../../../hooks/usePrevious';
import { debounce } from '../../../../util/schedulers';
import focusEditableElement from '../../../../util/focusEditableElement';
@ -70,8 +70,10 @@ const useDraft = (
if (!IS_TOUCH_ENV) {
requestAnimationFrame(() => {
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
focusEditableElement(messageInput, true);
const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (messageInput) {
focusEditableElement(messageInput, true);
}
});
}
}, [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 useEffectWithPrevDeps from '../../../../hooks/useEffectWithPrevDeps';
import { EDITABLE_INPUT_ID } from '../../../../config';
import { EDITABLE_INPUT_CSS_SELECTOR } from '../../../../config';
import parseMessageInput from '../../../../util/parseMessageInput';
import focusEditableElement from '../../../../util/focusEditableElement';
import { hasMessageMedia } from '../../../../global/helpers';
@ -40,8 +40,10 @@ const useEditing = (
setHtml(html);
// `fastRaf` would execute syncronously in this case
requestAnimationFrame(() => {
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
focusEditableElement(messageInput, true);
const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (messageInput) {
focusEditableElement(messageInput, true);
}
});
}, [editedMessage, setHtml] as const);
@ -62,10 +64,12 @@ const useEditing = (
// Run 1 frame after editing draft reset
fastRaf(() => {
setHtml(getTextWithEntitiesAsHtml(draft));
const messageInput = document.getElementById(EDITABLE_INPUT_ID)!;
requestAnimationFrame(() => {
focusEditableElement(messageInput, true);
});
const messageInput = document.querySelector<HTMLDivElement>(EDITABLE_INPUT_CSS_SELECTOR);
if (messageInput) {
requestAnimationFrame(() => {
focusEditableElement(messageInput, true);
});
}
});
}, [draft, setHtml]);

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

@ -2,7 +2,7 @@ import {
useCallback, useEffect, useState,
} 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 { prepareForRegExp } from '../helpers/prepareForRegExp';
import {
@ -117,7 +117,12 @@ export default function useEmojiTooltip(
const atIndex = currentHtml.lastIndexOf(':', isForce ? currentHtml.lastIndexOf(':') - 1 : undefined);
if (atIndex !== -1) {
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(() => {
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_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';