fix: Display native context menu on image, video preview modals (#6756)

app/javascript/dashboard/components/widgets/conversation/Message.vue

@@ -1,7 +1,11 @@
 <template>
   <li v-if="shouldRenderMessage" :class="alignBubble">
-    <div :class="wrapClass" @contextmenu="openContextMenu($event)">
-      <div v-tooltip.top-start="messageToolTip" :class="bubbleClass">
+    <div :class="wrapClass">
+      <div
+        v-tooltip.top-start="messageToolTip"
+        :class="bubbleClass"
+        @contextmenu="openContextMenu($event)"
+      >
         <bubble-mail-head
           :email-attributes="contentAttributes.email"
           :cc="emailHeadAttributes.cc"
@@ -32,7 +36,11 @@
               :url="attachment.data_url"
               @error="onImageLoadError"
             />
-            <audio v-else-if="attachment.file_type === 'audio'" controls>
+            <audio
+              v-else-if="attachment.file_type === 'audio'"
+              controls
+              class="skip-context-menu"
+            >
               <source :src="attachment.data_url" />
             </audio>
             <bubble-video
@@ -429,9 +437,13 @@ export default {
       this.hasImageError = true;
     },
     openContextMenu(e) {
-      if (getSelection().toString()) {
+      const shouldSkipContextMenu = e.target?.classList.contains(
+        'skip-context-menu'
+      );
+      if (shouldSkipContextMenu || getSelection().toString()) {
         return;
       }
+
       e.preventDefault();
       if (e.type === 'contextmenu') {
         this.$track(ACCOUNT_EVENTS.OPEN_MESSAGE_CONTEXT_MENU);
@@ -479,7 +491,8 @@ export default {
       }
     }
 
-    &.is-image.is-text > .message-text__wrap {
+    &.is-image.is-text > .message-text__wrap,
+    &.is-video.is-text > .message-text__wrap {
       max-width: 32rem;
       padding: var(--space-small) var(--space-normal);
     }

app/javascript/dashboard/components/widgets/conversation/bubble/Image.vue

@@ -2,7 +2,7 @@
   <div class="image message-text__wrap">
     <img :src="url" @click="onClick" @error="onImgError()" />
     <woot-modal :full-width="true" :show.sync="show" :on-close="onClose">
-      <img :src="url" class="modal-image" />
+      <img :src="url" class="modal-image skip-context-menu" />
     </woot-modal>
   </div>
 </template>

app/javascript/dashboard/components/widgets/conversation/bubble/Video.vue

@@ -2,7 +2,12 @@
   <div class="video message-text__wrap">
     <video :src="url" muted playsInline @click="onClick" />
     <woot-modal :show.sync="show" :on-close="onClose">
-      <video :src="url" controls playsInline class="modal-video" />
+      <video
+        :src="url"
+        controls
+        playsInline
+        class="modal-video skip-context-menu"
+      />
     </woot-modal>
   </div>
 </template>