Prevent accidentally entering select mode when selecting text
This commit is contained in:
parent
ea2083cd11
commit
ec1246f60a
1 changed files with 27 additions and 4 deletions
|
@ -377,6 +377,10 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
public reactionsContainerRef: React.RefObject<HTMLDivElement> =
|
public reactionsContainerRef: React.RefObject<HTMLDivElement> =
|
||||||
React.createRef();
|
React.createRef();
|
||||||
|
|
||||||
|
private hasSelectedTextRef: React.MutableRefObject<boolean> = {
|
||||||
|
current: false,
|
||||||
|
};
|
||||||
|
|
||||||
public reactionsContainerRefMerger = createRefMerger();
|
public reactionsContainerRefMerger = createRefMerger();
|
||||||
|
|
||||||
public expirationCheckInterval: NodeJS.Timeout | undefined;
|
public expirationCheckInterval: NodeJS.Timeout | undefined;
|
||||||
|
@ -503,6 +507,8 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
if (contact && contact.firstNumber && !contact.uuid) {
|
if (contact && contact.firstNumber && !contact.uuid) {
|
||||||
checkForAccount(contact.firstNumber);
|
checkForAccount(contact.firstNumber);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.addEventListener('selectionchange', this.handleSelectionChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
public override componentWillUnmount(): void {
|
public override componentWillUnmount(): void {
|
||||||
|
@ -512,6 +518,7 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
clearTimeoutIfNecessary(this.deleteForEveryoneTimeout);
|
clearTimeoutIfNecessary(this.deleteForEveryoneTimeout);
|
||||||
clearTimeoutIfNecessary(this.giftBadgeInterval);
|
clearTimeoutIfNecessary(this.giftBadgeInterval);
|
||||||
this.toggleReactionViewer(true);
|
this.toggleReactionViewer(true);
|
||||||
|
document.removeEventListener('selectionchange', this.handleSelectionChange);
|
||||||
}
|
}
|
||||||
|
|
||||||
public override componentDidUpdate(prevProps: Readonly<Props>): void {
|
public override componentDidUpdate(prevProps: Readonly<Props>): void {
|
||||||
|
@ -747,6 +754,13 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
|
private handleSelectionChange = () => {
|
||||||
|
const selection = document.getSelection();
|
||||||
|
if (selection != null && !selection.isCollapsed) {
|
||||||
|
this.hasSelectedTextRef.current = true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
private renderMetadata(): ReactNode {
|
private renderMetadata(): ReactNode {
|
||||||
let isInline: boolean;
|
let isInline: boolean;
|
||||||
const metadataPlacement = this.getMetadataPlacement();
|
const metadataPlacement = this.getMetadataPlacement();
|
||||||
|
@ -2626,19 +2640,28 @@ export class Message extends React.PureComponent<Props, State> {
|
||||||
};
|
};
|
||||||
} else {
|
} else {
|
||||||
wrapperProps = {
|
wrapperProps = {
|
||||||
|
onMouseDown: () => {
|
||||||
|
this.hasSelectedTextRef.current = false;
|
||||||
|
},
|
||||||
// We use `onClickCapture` here and preven default/stop propagation to
|
// We use `onClickCapture` here and preven default/stop propagation to
|
||||||
// prevent other click handlers from firing.
|
// prevent other click handlers from firing.
|
||||||
onClickCapture: event => {
|
onClickCapture: event => {
|
||||||
if (isMacOS ? event.metaKey : event.ctrlKey) {
|
if (isMacOS ? event.metaKey : event.ctrlKey) {
|
||||||
|
if (this.hasSelectedTextRef.current) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
const target = event.target as HTMLElement;
|
const target = event.target as HTMLElement;
|
||||||
const link = target.closest('a[href], [role=link]');
|
const link = target.closest('a[href], [role=link]');
|
||||||
|
|
||||||
if (!event.currentTarget.contains(link)) {
|
if (event.currentTarget.contains(link)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
onToggleSelect(true, false);
|
onToggleSelect(true, false);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
},
|
},
|
||||||
onDoubleClick: event => {
|
onDoubleClick: event => {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue