Prevent accidentally entering select mode when selecting text

This commit is contained in:
Jamie Kyle 2023-04-11 15:34:07 -07:00 committed by GitHub
parent ea2083cd11
commit ec1246f60a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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();