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

app/javascript/dashboard/components/Modal.vue

@@ -47,7 +47,7 @@ export default {
   },
   computed: {
     modalContainerClassName() {
-      let className = 'modal-container';
+      let className = 'modal-container skip-context-menu';
       if (this.fullWidth) {
         return `${className} modal-container--full-width`;
       }
@@ -60,7 +60,9 @@ export default {
         'right-aligned': 'right-aligned',
       };
 
-      return `modal-mask ${modalClassNameMap[this.modalType] || ''}`;
+      return `modal-mask skip-context-menu ${modalClassNameMap[
+        this.modalType
+      ] || ''}`;
     },
   },
   mounted() {

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>

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -54,6 +54,7 @@
           @click="handleCopy"
         />
         <menu-item
+          v-if="enabledOptions['copy']"
           :option="{
             icon: 'translate',
             label: this.$t('CONVERSATION.CONTEXT_MENU.TRANSLATE'),
@@ -214,6 +215,10 @@ export default {
   box-shadow: var(--shadow-context-menu);
   border-radius: var(--border-radius-normal);
 
+  hr:first-child {
+    display: none;
+  }
+
   hr {
     border-bottom: 1px solid var(--color-border-light);
     margin: var(--space-smaller);