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

Composer: Fix space when editing text (#5862)

Browse Source
This commit is contained in:
Alexander Zinchuk 2025-04-23 18:59:43 +02:00
parent 888e740b39
commit a72abc5cbc
1 changed files with 29 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,7 +25,7 @@ import captureKeyboardListeners from '../../../util/captureKeyboardListeners';
import { getIsDirectTextInputDisabled } from '../../../util/directInputManager'; import { getIsDirectTextInputDisabled } from '../../../util/directInputManager';
import parseEmojiOnlyString from '../../../util/emoji/parseEmojiOnlyString'; import parseEmojiOnlyString from '../../../util/emoji/parseEmojiOnlyString';
import focusEditableElement from '../../../util/focusEditableElement'; import focusEditableElement from '../../../util/focusEditableElement';
import { debounce } from '../../../util/schedulers'; import { debounce, fastRaf } from '../../../util/schedulers';
import renderText from '../../common/helpers/renderText'; import renderText from '../../common/helpers/renderText';
import { isSelectionInsideInput } from './helpers/selection'; import { isSelectionInsideInput } from './helpers/selection';
@ -208,35 +208,38 @@ const MessageInput: FC<OwnProps & StateProps> = ({
? MAX_ATTACHMENT_MODAL_INPUT_HEIGHT ? MAX_ATTACHMENT_MODAL_INPUT_HEIGHT
: isStoryInput ? MAX_STORY_MODAL_INPUT_HEIGHT : (isMobile ? 256 : 416); : isStoryInput ? MAX_STORY_MODAL_INPUT_HEIGHT : (isMobile ? 256 : 416);
const updateInputHeight = useLastCallback((willSend = false) => { const updateInputHeight = useLastCallback((willSend = false) => {
requestForcedReflow(() => { // Defer to avoid animation/layout conflicts during DOM updates
const scroller = inputRef.current!.closest<HTMLDivElement>(`.${SCROLLER_CLASS}`)!; fastRaf(() => {
const currentHeight = Number(scroller.style.height.replace('px', '')); requestForcedReflow(() => {
const clone = scrollerCloneRef.current!; const scroller = inputRef.current!.closest<HTMLDivElement>(`.${SCROLLER_CLASS}`)!;
const { scrollHeight } = clone; const currentHeight = Number(scroller.style.height.replace('px', ''));
const newHeight = Math.min(scrollHeight, maxInputHeight); const clone = scrollerCloneRef.current!;
const { scrollHeight } = clone;
const newHeight = Math.min(scrollHeight, maxInputHeight);
if (newHeight === currentHeight) { if (newHeight === currentHeight) {
return undefined; return undefined;
} }
const isOverflown = scrollHeight > maxInputHeight; const isOverflown = scrollHeight > maxInputHeight;
function exec() { function exec() {
const transitionDuration = Math.round( const transitionDuration = Math.round(
TRANSITION_DURATION_FACTOR * Math.log(Math.abs(newHeight - currentHeight)), TRANSITION_DURATION_FACTOR * Math.log(Math.abs(newHeight - currentHeight)),
); );
scroller.style.height = `${newHeight}px`; scroller.style.height = `${newHeight}px`;
scroller.style.transitionDuration = `${transitionDuration}ms`; scroller.style.transitionDuration = `${transitionDuration}ms`;
scroller.classList.toggle('overflown', isOverflown); scroller.classList.toggle('overflown', isOverflown);
} }
if (willSend) { if (willSend) {
// Delay to next frame to sync with sending animation // Delay to next frame to sync with sending animation
requestMutation(exec); requestMutation(exec);
return undefined; return undefined;
} else { } else {
return exec; return exec;
} }
});
}); });
}); });