Added copy/paste context menu to inputs and code/pre blocks

Author: ebkr

src-electron/ipcListeners.ts

@@ -1,4 +1,4 @@
-import { ipcMain, dialog } from 'electron';
+import { ipcMain, dialog, Menu, MenuItem } from 'electron';
 import electronUpdater from 'electron-updater';
 import os from 'os';
 import {fileURLToPath} from "url";
@@ -80,3 +80,19 @@ ipcMain.on('get-statics-directory', (event) => {
     const __dirname = path.dirname(__filename);
     event.returnValue = __dirname;
 })
+
+ipcMain.on('electron:showContextMenu', (event, options: any) => {
+    const templateItems: MenuItem[] = [];
+    templateItems.push(new MenuItem({
+        label: 'Copy',
+        role: 'copy'
+    }));
+    if (!options.readonly) {
+        templateItems.push(new MenuItem({
+            label: 'Paste',
+            role: 'paste'
+        }));
+    }
+    const menu = Menu.buildFromTemplate(templateItems);
+    menu.popup();
+})

src-electron/preload/electron-preload.ts renamed to src-electron/preload/electron-ipc-preload.ts

@@ -38,3 +38,7 @@ export async function selectFileDialog(options: any) {
 export function copyToClipboard(value: string) {
     ipcRenderer.sendSync('electron:clipboard:copyText', value);
 }
+
+export function showContextMenu(options: any) {
+    ipcRenderer.send('electron:showContextMenu', options);
+}

src-electron/preload/expose-preload.ts

@@ -7,7 +7,7 @@ import * as buffer from './node-buffer';
 import * as os from './node-os';
 import * as zip from './zip-preload';
 import * as appGlobals from "./app-preload-globals";
-import * as electron from "./electron-preload";
+import * as electron from "./electron-ipc-preload";
 
 contextBridge.exposeInMainWorld('node', {
     path: path,

src/App.vue

@@ -29,7 +29,6 @@ import FileUtils from './utils/FileUtils';
 import LinkProvider from './providers/components/LinkProvider';
 import LinkImpl from './r2mm/component_override/LinkImpl';
 import FsProvider from './providers/generic/file/FsProvider';
-import NodeFs from './providers/generic/file/NodeFs';
 import { DataFolderProvider } from './providers/ror2/system/DataFolderProvider';
 import { DataFolderProviderImpl } from './r2mm/system/DataFolderProviderImpl';
 import InteractionProvider from './providers/ror2/system/InteractionProvider';
@@ -48,8 +47,9 @@ import { provideStoreImplementation } from './providers/generic/store/StoreProvi
 import baseStore from './store';
 import { getCurrentInstance, onMounted, ref, watchEffect } from 'vue';
 import { useUtilityComposable } from './components/composables/UtilityComposable';
-import { Dark, useQuasar } from 'quasar';
+import { useQuasar } from 'quasar';
 import { NodeFsImplementation } from 'src/providers/node/fs/NodeFsImplementation';
+import contextMenu from 'src/providers/node/context_menu/context_menu';
 
 const store = baseStore;
 provideStoreImplementation(() => store);
@@ -139,6 +139,23 @@ onMounted(async () => {
 
 watchEffect(() => {
     document.documentElement.classList.toggle('html--dark', quasar.dark.isActive);
+});
+
+document.addEventListener('contextmenu', e => {
+    if (e.target) {
+        const target = e.target as HTMLElement;
+        switch (true) {
+            case target instanceof HTMLInputElement: {
+                contextMenu.showContextMenu({ readonly: false });
+                break;
+            }
+            case ['code', 'pre'].includes(target.tagName.toLowerCase()): {
+                contextMenu.showContextMenu({ readonly: true });
+                break;
+            }
+            default: { break; }
+        }
+    }
 })
 </script>
 

src/providers/node/child_process/child_process.ts

@@ -1,4 +1,4 @@
-import { NodeChildProcessImplementation } from 'src/providers/node/child_process/ChildProcessImplementation';
+import { NodeChildProcessImplementation } from './ChildProcessImplementation';
 
 export type NodeChildProcessProvider = {
     execSync: (path: string, options?: any) => string;

src/providers/node/context_menu/ContextMenuImplementation.ts

@@ -0,0 +1,7 @@
+import { ContextMenuProcessProvider } from './context_menu';
+
+let execIdentifier = 0;
+
+export const ContextMenuProcessImplementation: ContextMenuProcessProvider = {
+    showContextMenu: (options) => window.electron.showContextMenu(options),
+}

src/providers/node/context_menu/context_menu.ts

@@ -0,0 +1,28 @@
+import { ContextMenuProcessImplementation } from './ContextMenuImplementation';
+
+export type ContextMenuOptions = {
+    readonly: boolean
+}
+
+export type ContextMenuProcessProvider = {
+    showContextMenu: (options: ContextMenuOptions) => Promise<void>;
+}
+
+let implementation: () => ContextMenuProcessProvider;
+
+function getImplementation(): ContextMenuProcessProvider {
+    if (!implementation) {
+        return ContextMenuProcessImplementation;
+    }
+    return implementation();
+}
+
+export function provideContextMenuImplementation(provider: () => ContextMenuProcessProvider) {
+    implementation = provider;
+}
+
+const contextMenu: ContextMenuProcessProvider = {
+    showContextMenu: (options) => getImplementation().showContextMenu(options),
+};
+
+export default contextMenu;