Message: Show context menu hint when selecting

src/components/main/Notifications.tsx

@@ -24,7 +24,7 @@ const Notifications: FC<StateProps & DispatchProps> = ({ notifications, dismissN
     <div id="Notifications">
       {notifications.map(({ message }) => (
         <Notification
-          message={renderText(message, ['emoji', 'br', 'links'])}
+          message={renderText(message, ['emoji', 'br', 'links', 'simple_markdown'])}
           onDismiss={dismissNotification}
         />
       ))}

src/components/middle/message/Message.tsx

@@ -148,7 +148,7 @@ type DispatchProps = Pick<GlobalActions, (
   'openUserInfo' | 'openChat' |
   'cancelSendingMessage' | 'markMessagesRead' |
   'sendPollVote' | 'toggleMessageSelection' | 'setReplyingToId' | 'openForwardMenu' |
-  'clickInlineButton'
+  'clickInlineButton' | 'disableContextMenuHint'
 )>;
 
 const NBSP = '\u00A0';
@@ -215,6 +215,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
   setReplyingToId,
   openForwardMenu,
   clickInlineButton,
+  disableContextMenuHint,
 }) => {
   // eslint-disable-next-line no-null/no-null
   const ref = useRef<HTMLDivElement>(null);
@@ -233,6 +234,12 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
     handleContextMenuClose, handleContextMenuHide,
   } = useContextMenuHandlers(ref, false, true);
 
+  useEffect(() => {
+    if (isContextMenuOpen) {
+      disableContextMenuHint();
+    }
+  }, [isContextMenuOpen, disableContextMenuHint]);
+
   const noAppearanceAnimation = appearanceOrder <= 0;
   const [isShown, markShown] = useFlag(noAppearanceAnimation);
   useEffect(() => {
@@ -931,5 +938,6 @@ export default memo(withGlobal<OwnProps>(
     'setReplyingToId',
     'openForwardMenu',
     'clickInlineButton',
+    'disableContextMenuHint',
   ]),
 )(Message));

src/global/cache.ts

@@ -118,6 +118,7 @@ function updateCache() {
         'recentEmojis',
         'emojiKeywords',
         'push',
+        'shouldShowContextMenuHint',
       ]),
       isChatInfoShown: reduceShowChatInfo(global),
       users: reduceUsers(global),

src/global/initial.ts

@@ -133,4 +133,6 @@ export const INITIAL_STATE: GlobalState = {
   },
 
   twoFaSettings: {},
+
+  shouldShowContextMenuHint: true,
 };

src/global/types.ts

@@ -390,6 +390,9 @@ export type GlobalState = {
 
   safeLinkModalUrl?: string;
   historyCalendarSelectedAt?: number;
+
+  // TODO To be removed in August 2021
+  shouldShowContextMenuHint?: boolean;
 };
 
 export type ActionTypes = (
@@ -398,7 +401,7 @@ export type ActionTypes = (
   'showNotification' | 'dismissNotification' | 'showError' | 'dismissError' |
   // ui
   'toggleChatInfo' | 'setIsUiReady' | 'addRecentEmoji' | 'addRecentSticker' | 'toggleLeftColumn' |
-  'toggleSafeLinkModal' | 'openHistoryCalendar' | 'closeHistoryCalendar' |
+  'toggleSafeLinkModal' | 'openHistoryCalendar' | 'closeHistoryCalendar' | 'disableContextMenuHint' |
   // auth
   'setAuthPhoneNumber' | 'setAuthCode' | 'setAuthPassword' | 'signUp' | 'returnToAuthPhoneNumber' | 'signOut' |
   'setAuthRememberMe' | 'clearAuthError' | 'uploadProfilePhoto' | 'goToAuthQrCode' | 'clearCache' |

src/modules/actions/ui/messages.ts

@@ -24,6 +24,7 @@ import {
   selectForwardedMessageIdsByGroupId, selectIsViewportNewest, selectReplyingToId,
 } from '../../selectors';
 import { findLast } from '../../../util/iteratees';
+import { IS_TOUCH_ENV } from '../../../util/environment';
 
 const FOCUS_DURATION = 2000;
 const POLL_RESULT_OPEN_DELAY_MS = 450;
@@ -371,16 +372,36 @@ addReducer('toggleMessageSelection', (global, actions, payload) => {
   } = payload!;
   const currentMessageList = selectCurrentMessageList(global);
   if (!currentMessageList) {
-    return undefined;
+    return;
   }
 
   const { chatId, threadId, type: messageListType } = currentMessageList;
 
-  return toggleMessageSelection(
+  global = toggleMessageSelection(
     global, chatId, threadId, messageListType, messageId, groupedId, childMessageIds, withShift,
   );
+
+  setGlobal(global);
+
+  if (global.shouldShowContextMenuHint) {
+    actions.disableContextMenuHint();
+    actions.showNotification({
+      // eslint-disable-next-line max-len
+      message: `To **edit** or **reply**, close this menu. Then ${IS_TOUCH_ENV ? 'long tap' : 'right click'} on a message.`,
+    });
+  }
 });
 
+addReducer('disableContextMenuHint', (global) => {
+  if (!global.shouldShowContextMenuHint) {
+    return undefined;
+  }
+
+  return {
+    ...global,
+    shouldShowContextMenuHint: false,
+  };
+});
 
 addReducer('exitMessageSelectMode', exitMessageSelectMode);