Message: Make some elements unselectable (#5707)

src/components/common/Audio.tsx

@@ -412,7 +412,7 @@ const Audio: FC<OwnProps> = ({
   return (
     <div className={fullClassName} dir={lang.isRtl ? 'rtl' : 'ltr'}>
       {isSelectable && (
-        <div className="message-select-control">
+        <div className="message-select-control no-selection">
           {isSelected && <Icon name="select" />}
         </div>
       )}

src/components/common/File.tsx

@@ -103,7 +103,7 @@ const File: FC<OwnProps> = ({
   return (
     <div ref={elementRef} className={fullClassName} dir={lang.isRtl ? 'rtl' : undefined}>
       {isSelectable && (
-        <div className="message-select-control">
+        <div className="message-select-control no-selection">
           {isSelected && <Icon name="select" />}
         </div>
       )}

src/components/common/FullNameTitle.tsx

@@ -148,6 +148,7 @@ const FullNameTitle: FC<OwnProps> = ({
             >
               <CustomEmoji
                 forceAlways
+                className="no-selection"
                 withSparkles={emojiStatus.type === 'collectible'}
                 sparklesClassName="statusSparkles"
                 sparklesStyle={buildStyle(statusSparklesColor && `color: ${statusSparklesColor}`)}

src/components/common/embedded/EmbeddedMessage.tsx

@@ -231,6 +231,7 @@ const EmbeddedMessage: FC<OwnProps> = ({
         className,
         isQuote && 'is-quote',
         mediaThumbnail && 'with-thumb',
+        'no-selection',
       )}
       dir={lang.isRtl ? 'rtl' : undefined}
       onClick={handleClick}

src/components/middle/message/ContextMenuContainer.tsx

@@ -365,9 +365,11 @@ const ContextMenuContainer: FC<OwnProps & StateProps> = ({
 
     const selectionText = getSelectionAsFormattedText(selectionRange);
 
+    const messageText = message.content.text!.text!.replace(/\u00A0/g, ' ');
+
     setCanQuoteSelection(
       selectionText.text.trim().length > 0
-      && message.content.text!.text!.includes(selectionText.text),
+      && messageText.includes(selectionText.text),
     );
   }, [
     selectionRange, selectionRange?.collapsed, selectionRange?.startOffset, selectionRange?.endOffset,

src/components/middle/message/Message.tsx

@@ -1513,6 +1513,7 @@ const Message: FC<OwnProps & StateProps> = ({
               {!asForwarded && senderEmojiStatus && (
                 <CustomEmoji
                   documentId={senderEmojiStatus.documentId}
+                  className="no-selection"
                   loopLimit={EMOJI_STATUS_LOOP_LIMIT}
                   observeIntersectionForLoading={observeIntersectionForLoading}
                   observeIntersectionForPlaying={observeIntersectionForPlaying}
@@ -1587,13 +1588,15 @@ const Message: FC<OwnProps & StateProps> = ({
         data-should-update-views={message.viewsCount !== undefined}
       />
       {!isInDocumentGroup && (
-        <div className="message-select-control">
+        <div className="message-select-control no-selection">
           {isSelected && <Icon name="select" />}
         </div>
       )}
       {isLastInDocumentGroup && (
         <div
-          className={buildClassName('message-select-control group-select', isGroupSelected && 'is-selected')}
+          className={buildClassName(
+            'message-select-control group-select no-selection', isGroupSelected && 'is-selected',
+          )}
           onClick={handleDocumentGroupSelectAll}
         >
           {isGroupSelected && (

src/styles/_common.scss

@@ -3,6 +3,7 @@
 // Common styles for all media-type components across the app.
 .media-inner {
   position: relative;
+  user-select: none;
 
   video.full-media,
   img.full-media,