Migrate ReportActionCompose to function

desktop/main.js

@@ -1,4 +1,4 @@
-const {app, dialog, BrowserWindow, Menu, MenuItem, shell, ipcMain} = require('electron');
+const {app, dialog, clipboard, BrowserWindow, Menu, MenuItem, shell, ipcMain} = require('electron');
 const _ = require('underscore');
 const serve = require('electron-serve');
 const contextMenu = require('electron-context-menu');
@@ -12,6 +12,7 @@ const CONST = require('../src/CONST').default;
 const Localize = require('../src/libs/Localize');
 
 const port = process.env.PORT || 8080;
+const {DESKTOP_SHORTCUT_ACCELERATOR} = CONST;
 
 app.setName('New Expensify');
 
@@ -25,16 +26,32 @@ app.setName('New Expensify');
 // See: https://github.com/electron/electron/issues/22597
 app.commandLine.appendSwitch('enable-network-information-downlink-max');
 
+/**
+ * Inserts the plain text from the clipboard into the provided browser window's web contents.
+ *
+ * @param {BrowserWindow} browserWindow - The Electron BrowserWindow instance where the text should be inserted.
+ */
+function pasteAsPlainText(browserWindow) {
+    const text = clipboard.readText();
+    browserWindow.webContents.insertText(text);
+}
+
 // Initialize the right click menu
 // See https://github.com/sindresorhus/electron-context-menu
 // Add the Paste and Match Style command to the context menu
 contextMenu({
-    append: (defaultActions, parameters) => [
+    append: (defaultActions, parameters, browserWindow) => [
         new MenuItem({
             // Only enable the menu item for Editable context which supports paste
             visible: parameters.isEditable && parameters.editFlags.canPaste,
             role: 'pasteAndMatchStyle',
-            accelerator: 'CmdOrCtrl+Shift+V',
+            accelerator: DESKTOP_SHORTCUT_ACCELERATOR.PASTE_AND_MATCH_STYLE,
+        }),
+        new MenuItem({
+            label: Localize.translate(CONST.LOCALES.DEFAULT, 'desktopApplicationMenu.pasteAsPlainText'),
+            visible: parameters.isEditable && parameters.editFlags.canPaste && clipboard.readText().length > 0,
+            accelerator: DESKTOP_SHORTCUT_ACCELERATOR.PASTE_AS_PLAIN_TEXT,
+            click: () => pasteAsPlainText(browserWindow),
         }),
     ],
 });
@@ -323,7 +340,16 @@ const mainWindow = () => {
                             {id: 'cut', role: 'cut'},
                             {id: 'copy', role: 'copy'},
                             {id: 'paste', role: 'paste'},
-                            {id: 'pasteAndMatchStyle', role: 'pasteAndMatchStyle'},
+                            {
+                                id: 'pasteAndMatchStyle',
+                                role: 'pasteAndMatchStyle',
+                                accelerator: DESKTOP_SHORTCUT_ACCELERATOR.PASTE_AND_MATCH_STYLE,
+                            },
+                            {
+                                id: 'pasteAsPlainText',
+                                accelerator: DESKTOP_SHORTCUT_ACCELERATOR.PASTE_AS_PLAIN_TEXT,
+                                click: () => pasteAsPlainText(browserWindow),
+                            },
                             {id: 'delete', role: 'delete'},
                             {id: 'selectAll', role: 'selectAll'},
                             {type: 'separator'},

src/CONST.js

@@ -141,6 +141,11 @@ const CONST = {
         MAX_AGE: 150,
     },
 
+    DESKTOP_SHORTCUT_ACCELERATOR: {
+        PASTE_AND_MATCH_STYLE: 'Option+Shift+CmdOrCtrl+V',
+        PASTE_AS_PLAIN_TEXT: 'CmdOrCtrl+Shift+V',
+    },
+
     // This is used to enable a rotation/transform style to any component.
     DIRECTION: {
         LEFT: 'left',

src/components/EmojiPicker/EmojiPicker.js

@@ -28,7 +28,7 @@ const EmojiPicker = forwardRef((props, ref) => {
         vertical: 0,
     });
     const [reportAction, setReportAction] = useState({});
-    const emojiPopoverAnchorOrigin = useRef(DEFAULT_ANCHOR_ORIGIN);
+    const [emojiPopoverAnchorOrigin, setEmojiPopoverAnchorOrigin] = useState(DEFAULT_ANCHOR_ORIGIN);
     const emojiPopoverAnchor = useRef(null);
     const onModalHide = useRef(() => {});
     const onEmojiSelected = useRef(() => {});
@@ -58,7 +58,7 @@ const EmojiPicker = forwardRef((props, ref) => {
             onWillShow();
             setIsEmojiPickerVisible(true);
             setEmojiPopoverAnchorPosition(value);
-            emojiPopoverAnchorOrigin.current = anchorOrigin || DEFAULT_ANCHOR_ORIGIN;
+            setEmojiPopoverAnchorOrigin(anchorOrigin || DEFAULT_ANCHOR_ORIGIN);
             setReportAction(reportActionValue);
         });
     };
@@ -161,7 +161,7 @@ const EmojiPicker = forwardRef((props, ref) => {
                 width: CONST.EMOJI_PICKER_SIZE.WIDTH,
                 height: CONST.EMOJI_PICKER_SIZE.HEIGHT,
             }}
-            anchorAlignment={emojiPopoverAnchorOrigin.current}
+            anchorAlignment={emojiPopoverAnchorOrigin}
             outerStyle={StyleUtils.getOuterModalStyle(props.windowHeight, props.viewportOffsetTop)}
             innerContainerStyle={styles.popoverInnerContainer}
             avoidKeyboard

src/languages/en.js

@@ -1427,6 +1427,7 @@ export default {
         copy: 'Copy',
         paste: 'Paste',
         pasteAndMatchStyle: 'Paste and Match Style',
+        pasteAsPlainText: 'Paste as Plain Text',
         delete: 'Delete',
         selectAll: 'Select All',
         speechSubmenu: 'Speech',

src/languages/es.js

@@ -1438,6 +1438,7 @@ export default {
         copy: 'Copiar',
         paste: 'Pegar',
         pasteAndMatchStyle: 'Pegar adaptando el estilo',
+        pasteAsPlainText: 'Pegar como texto sin formato',
         delete: 'Eliminar',
         selectAll: 'Seleccionar todo',
         speechSubmenu: 'Voz',