Protected Messages: Allow copy link action (#3725)

src/components/middle/message/Message.tsx

@@ -585,9 +585,9 @@ const Message: FC<OwnProps & StateProps> = ({
   }, [focusLastMessage, isLastInList, transcribedText, withVoiceTranscription]);
 
   const containerClassName = buildClassName(
-    'Message message-list-item allow-selection',
+    'Message message-list-item',
     isFirstInGroup && 'first-in-group',
-    isProtected && 'is-protected',
+    isProtected ? 'is-protected' : 'allow-selection',
     isLastInGroup && 'last-in-group',
     isFirstInDocumentGroup && 'first-in-document-group',
     isLastInDocumentGroup && 'last-in-document-group',

src/components/middle/message/MessageContextMenu.tsx

@@ -250,7 +250,13 @@ const MessageContextMenu: FC<OwnProps> = ({
   const copyOptions = isSponsoredMessage
     ? []
     : getMessageCopyOptions(
-      message, targetHref, handleAfterCopy, canCopyLink ? onCopyLink : undefined, onCopyMessages, onCopyNumber,
+      message,
+      targetHref,
+      canCopy,
+      handleAfterCopy,
+      canCopyLink ? onCopyLink : undefined,
+      onCopyMessages,
+      onCopyNumber,
     );
 
   const getTriggerElement = useLastCallback(() => {
@@ -372,7 +378,7 @@ const MessageContextMenu: FC<OwnProps> = ({
         {canSelectLanguage && (
           <MenuItem icon="web" onClick={onSelectLanguage}>{lang('lng_settings_change_lang')}</MenuItem>
         )}
-        {canCopy && copyOptions.map((option) => (
+        {copyOptions.map((option) => (
           <MenuItem key={option.label} icon={option.icon} onClick={option.handler}>{lang(option.label)}</MenuItem>
         ))}
         {canPin && <MenuItem icon="pin" onClick={onPin}>{lang('DialogPin')}</MenuItem>}

src/components/middle/message/helpers/copyOptions.ts

@@ -30,6 +30,7 @@ type ICopyOptions = {
 export function getMessageCopyOptions(
   message: ApiMessage,
   href?: string,
+  canCopy?: boolean,
   afterEffect?: () => void,
   onCopyLink?: () => void,
   onCopyMessages?: (messageIds: number[]) => void,
@@ -41,7 +42,8 @@ export function getMessageCopyOptions(
     || (!getMessageWebPageVideo(message) ? getMessageWebPagePhoto(message) : undefined);
   const contact = getMessageContact(message);
   const mediaHash = getMessageMediaHash(message, 'inline');
-  const canImageBeCopied = photo && (mediaHash || hasMessageLocalBlobUrl(message)) && CLIPBOARD_ITEM_SUPPORTED;
+  const canImageBeCopied = canCopy && photo && (mediaHash || hasMessageLocalBlobUrl(message))
+    && CLIPBOARD_ITEM_SUPPORTED;
   const selection = window.getSelection();
 
   if (canImageBeCopied) {
@@ -57,7 +59,7 @@ export function getMessageCopyOptions(
     });
   }
 
-  if (href) {
+  if (canCopy && href) {
     options.push({
       label: 'lng_context_copy_link',
       icon: 'copy',
@@ -67,7 +69,7 @@ export function getMessageCopyOptions(
         afterEffect?.();
       },
     });
-  } else if (text) {
+  } else if (canCopy && text) {
     // Detect if the user has selection in the current message
     const hasSelection = Boolean((
       selection?.anchorNode?.parentNode

src/hooks/useContextMenuHandlers.ts

@@ -33,14 +33,14 @@ const useContextMenuHandlers = (
   const handleBeforeContextMenu = useLastCallback((e: React.MouseEvent) => {
     if (!isMenuDisabled && e.button === 2) {
       requestMutation(() => {
-        removeExtraClass(e.target as HTMLElement, 'allow-selection');
+        addExtraClass(e.target as HTMLElement, 'no-selection');
       });
     }
   });
 
   const handleContextMenu = useLastCallback((e: React.MouseEvent) => {
     requestMutation(() => {
-      addExtraClass(e.target as HTMLElement, 'allow-selection');
+      removeExtraClass(e.target as HTMLElement, 'no-selection');
     });
 
     if (isMenuDisabled || (shouldDisableOnLink && (e.target as HTMLElement).matches('a[href]'))) {

src/styles/index.scss

@@ -120,6 +120,11 @@ body.cursor-ew-resize {
   user-select: text;
 }
 
+.no-selection {
+  user-select: none !important;
+  -webkit-user-select: none !important;
+}
+
 .clearfix::after {
   content: "";
   clear: both;