Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Commit

Permalink
Enable the message right-click context menu in the browser (#8336)
Browse files Browse the repository at this point in the history
* Enable the message right-click context menu in the browser

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Move `getSelectedText()` to `strings.ts`

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Move `canCancel()` to `EventUtils.ts`

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
  • Loading branch information
SimonBrandner authored Apr 15, 2022
1 parent 1afecc4 commit 11e0a3a
Show file tree
Hide file tree
Showing 5 changed files with 32 additions and 15 deletions.
14 changes: 3 additions & 11 deletions src/components/views/context_menus/MessageContextMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ import { ReadPinsEventId } from "../right_panel/types";
import { Action } from "../../../dispatcher/actions";
import { RoomPermalinkCreator } from '../../../utils/permalinks/Permalinks';
import { ButtonEvent } from '../elements/AccessibleButton';
import { copyPlaintext } from '../../../utils/strings';
import { copyPlaintext, getSelectedText } from '../../../utils/strings';
import ContextMenu, { toRightOf } from '../../structures/ContextMenu';
import ReactionPicker from '../emojipicker/ReactionPicker';
import ViewSource from '../../structures/ViewSource';
Expand All @@ -54,10 +54,6 @@ import { OpenForwardDialogPayload } from "../../../dispatcher/payloads/OpenForwa
import { OpenReportEventDialogPayload } from "../../../dispatcher/payloads/OpenReportEventDialogPayload";
import { createMapSiteLink } from '../../../utils/location';

export function canCancel(status: EventStatus): boolean {
return status === EventStatus.QUEUED || status === EventStatus.NOT_SENT || status === EventStatus.ENCRYPTING;
}

export interface IEventTileOps {
isWidgetHidden(): boolean;
unhideWidget(): void;
Expand Down Expand Up @@ -263,7 +259,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
};

private onCopyClick = (): void => {
copyPlaintext(this.getSelectedText());
copyPlaintext(getSelectedText());
this.closeMenu();
};

Expand Down Expand Up @@ -310,10 +306,6 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
});
}

private getSelectedText(): string {
return window.getSelection().toString();
}

private getPermalink(): string {
if (!this.props.permalinkCreator) return;
return this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
Expand Down Expand Up @@ -539,7 +531,7 @@ export default class MessageContextMenu extends React.Component<IProps, IState>
);
}

if (rightClick && this.getSelectedText()) {
if (rightClick && getSelectedText()) {
copyButton = (
<IconizedContextMenuOption
iconClassName="mx_MessageContextMenu_iconCopy"
Expand Down
4 changes: 2 additions & 2 deletions src/components/views/messages/MessageActionBar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ import type { Relations } from 'matrix-js-sdk/src/models/relations';
import { _t } from '../../../languageHandler';
import dis from '../../../dispatcher/dispatcher';
import ContextMenu, { aboveLeftOf, ContextMenuTooltipButton, useContextMenu } from '../../structures/ContextMenu';
import { isContentActionable, canEditContent, editEvent } from '../../../utils/EventUtils';
import { isContentActionable, canEditContent, editEvent, canCancel } from '../../../utils/EventUtils';
import RoomContext, { TimelineRenderingType } from "../../../contexts/RoomContext";
import Toolbar from "../../../accessibility/Toolbar";
import { RovingAccessibleTooltipButton, useRovingTabIndex } from "../../../accessibility/RovingTabIndex";
import MessageContextMenu, { canCancel } from "../context_menus/MessageContextMenu";
import MessageContextMenu from "../context_menus/MessageContextMenu";
import Resend from "../../../Resend";
import { MatrixClientPeg } from "../../../MatrixClientPeg";
import { MediaEventHelper } from "../../../utils/MediaEventHelper";
Expand Down
17 changes: 15 additions & 2 deletions src/components/views/rooms/EventTile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ import { RoomNotificationStateStore } from '../../../stores/notifications/RoomNo
import { NotificationStateEvents } from '../../../stores/notifications/NotificationState';
import { NotificationColor } from '../../../stores/notifications/NotificationColor';
import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
import { copyPlaintext } from '../../../utils/strings';
import { copyPlaintext, getSelectedText } from '../../../utils/strings';
import { DecryptionFailureTracker } from '../../../DecryptionFailureTracker';
import RedactedBody from '../messages/RedactedBody';
import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
Expand Down Expand Up @@ -947,13 +947,26 @@ export class UnwrappedEventTile extends React.Component<IProps, IState> {
};

private showContextMenu(ev: React.MouseEvent, showPermalink?: boolean): void {
// Return if message right-click context menu isn't enabled
if (!SettingsStore.getValue("feature_message_right_click_context_menu")) return;

// Return if we're in a browser and click either an a tag or we have
// selected text, as in those cases we want to use the native browser
// menu
const clickTarget = ev.target as HTMLElement;
if (
!PlatformPeg.get().allowOverridingNativeContextMenus() &&
(clickTarget.tagName === "a" || clickTarget.closest("a") || getSelectedText())
) return;

// There is no way to copy non-PNG images into clipboard, so we can't
// have our own handling for copying images, so we leave it to the
// Electron layer (webcontents-handler.ts)
if (ev.target instanceof HTMLImageElement) return;
if (!PlatformPeg.get().allowOverridingNativeContextMenus()) return;

// We don't want to show the menu when editing a message
if (this.props.editState) return;

ev.preventDefault();
ev.stopPropagation();
this.setState({
Expand Down
4 changes: 4 additions & 0 deletions src/utils/EventUtils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -258,3 +258,7 @@ export function editEvent(
});
}
}

export function canCancel(status: EventStatus): boolean {
return status === EventStatus.QUEUED || status === EventStatus.NOT_SENT || status === EventStatus.ENCRYPTING;
}
8 changes: 8 additions & 0 deletions src/utils/strings.ts
Original file line number Diff line number Diff line change
Expand Up @@ -84,3 +84,11 @@ const collator = new Intl.Collator();
export function compare(a: string, b: string): number {
return collator.compare(a, b);
}

/**
* Returns text which has been selected by the user
* @returns the selected text
*/
export function getSelectedText(): string {
return window.getSelection().toString();
}

0 comments on commit 11e0a3a

Please sign in to comment.