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

Composer: Fix missing context menu on Android (#1421)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-09-03 18:31:21 +03:00
parent e88de90ac7
commit 4a6dc47be0
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -142,13 +142,13 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
function checkSelection() { function checkSelection() {
// Disable the formatter on iOS devices for now. // Disable the formatter on iOS devices for now.
if (IS_IOS) { if (IS_IOS) {
return; return false;
} }
const selection = window.getSelection(); const selection = window.getSelection();
if (!selection || !selection.rangeCount || isContextMenuOpenRef.current) { if (!selection || !selection.rangeCount || isContextMenuOpenRef.current) {
closeTextFormatter(); closeTextFormatter();
return; return false;
} }
const selectionRange = selection.getRangeAt(0); const selectionRange = selection.getRangeAt(0);
@ -161,9 +161,18 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
|| !selectionRange.START_TO_END || !selectionRange.START_TO_END
) { ) {
closeTextFormatter(); closeTextFormatter();
return false;
}
return true;
}
function processSelection() {
if (!checkSelection()) {
return; return;
} }
const selectionRange = window.getSelection()!.getRangeAt(0);
const selectionRect = selectionRange.getBoundingClientRect(); const selectionRect = selectionRange.getBoundingClientRect();
const inputRect = inputRef.current!.getBoundingClientRect(); const inputRect = inputRef.current!.getBoundingClientRect();
@ -186,7 +195,7 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
function handleMouseDown(event: React.MouseEvent<HTMLDivElement, MouseEvent>) { function handleMouseDown(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
function handleMouseUp() { function handleMouseUp() {
checkSelection(); processSelection();
event.target.removeEventListener('mouseup', handleMouseUp); event.target.removeEventListener('mouseup', handleMouseUp);
} }
@ -228,7 +237,7 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) { function handleKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
function handleKeyUp() { function handleKeyUp() {
checkSelection(); processSelection();
e.target.removeEventListener('keyup', handleKeyUp); e.target.removeEventListener('keyup', handleKeyUp);
} }
@ -264,14 +273,6 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
} }
} }
function handleTouchSelection() {
if (!IS_ANDROID) {
return;
}
checkSelection();
}
function handleChange(e: ChangeEvent<HTMLDivElement>) { function handleChange(e: ChangeEvent<HTMLDivElement>) {
const { innerHTML, textContent } = e.currentTarget; const { innerHTML, textContent } = e.currentTarget;
@ -289,7 +290,7 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
} }
function stopEvent(e: React.MouseEvent<HTMLDivElement, MouseEvent>) { function stopEvent(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
if (!IS_ANDROID) { if (!checkSelection()) {
return; return;
} }
@ -383,8 +384,8 @@ const MessageInput: FC<OwnProps & StateProps & DispatchProps> = ({
onChange={handleChange} onChange={handleChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onMouseDown={handleMouseDown} onMouseDown={handleMouseDown}
onContextMenu={stopEvent} onContextMenu={IS_ANDROID ? stopEvent : undefined}
onTouchCancel={handleTouchSelection} onTouchCancel={IS_ANDROID ? processSelection : undefined}
/> />
<div ref={cloneRef} className={buildClassName(className, 'clone')} dir="auto" /> <div ref={cloneRef} className={buildClassName(className, 'clone')} dir="auto" />
{!forcedPlaceholder && <span className="placeholder-text" dir="auto">{placeholder}</span>} {!forcedPlaceholder && <span className="placeholder-text" dir="auto">{placeholder}</span>}