Merge pull request #19518 from burczu/18343_icons-inside-copied-messages

Preventing from copying contents of the Mini Report Action Context Menu
Expensify · Jun 10, 2023 · 035783a · 035783a
2 parents 9f1c0e0 + 441e45d
commit 035783a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 8 deletions.
diff --git a/src/CONST.js b/src/CONST.js
@@ -2437,9 +2437,9 @@ const CONST = {
     },
     SPACE_CHARACTER_WIDTH: 4,
 
-    // This ID is used in SelectionScraper.js to query the DOM for UnreadActionIndicator's
-    // div and then remove it from copied contents in the getHTMLOfSelection() method.
-    UNREAD_ACTION_INDICATOR_ID: 'no-copy-area-unread-action-indicator',
+    // The attribute used in the SelectionScraper.js helper to query all the DOM elements
+    // that should be removed from the copied contents in the getHTMLOfSelection() method
+    SELECTION_SCRAPER_HIDDEN_ELEMENT: 'selection-scrapper-hidden-element',
     MODERATION: {
         MODERATOR_DECISION_PENDING: 'pending',
         MODERATOR_DECISION_PENDING_HIDE: 'pendingHide',

diff --git a/src/components/UnreadActionIndicator.js b/src/components/UnreadActionIndicator.js
@@ -10,7 +10,7 @@ const UnreadActionIndicator = (props) => (
         accessibilityLabel={props.translate('accessibilityHints.newMessageLineIndicator')}
         data-action-id={props.reportActionID}
         style={[styles.unreadIndicatorContainer, styles.userSelectNone]}
-        nativeID={CONST.UNREAD_ACTION_INDICATOR_ID}
+        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
     >
         <View style={styles.unreadIndicatorLine} />
         <Text style={styles.unreadIndicatorText}>{props.translate('common.new')}</Text>

diff --git a/src/libs/SelectionScraper/index.js b/src/libs/SelectionScraper/index.js
@@ -83,10 +83,12 @@ const getHTMLOfSelection = () => {
 
     // Find and remove the div housing the UnreadActionIndicator because we don't want
     // the 'New/Nuevo' text inside it being copied.
-    const newMessageLineIndicatorDiv = div.querySelector(`#${CONST.UNREAD_ACTION_INDICATOR_ID}`);
+    const divsToRemove = div.querySelectorAll(`[data-${CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT}=true]`);
 
-    if (newMessageLineIndicatorDiv) {
-        newMessageLineIndicatorDiv.remove();
+    if (divsToRemove && divsToRemove.length > 0) {
+        divsToRemove.forEach((element) => {
+            element.remove();
+        });
     }
 
     return div.innerHTML;

diff --git a/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js b/src/pages/home/report/ContextMenu/MiniReportActionContextMenu/index.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import {propTypes as genericReportActionContextMenuPropTypes, defaultProps as GenericReportActionContextMenuDefaultProps} from '../genericReportActionContextMenuPropTypes';
 import * as StyleUtils from '../../../../../styles/StyleUtils';
 import BaseReportActionContextMenu from '../BaseReportActionContextMenu';
+import CONST from '../../../../../CONST';
 
 const propTypes = {
     ..._.omit(genericReportActionContextMenuPropTypes, ['isMini']),
@@ -20,7 +21,10 @@ const defaultProps = {
 };
 
 const MiniReportActionContextMenu = (props) => (
-    <View style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}>
+    <View
+        style={StyleUtils.getMiniReportActionContextMenuWrapperStyle(props.displayAsGroup)}
+        dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: props.isVisible}}
+    >
         <BaseReportActionContextMenu
             isMini
             // eslint-disable-next-line react/jsx-props-no-spreading