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

Author: ebkr

src-electron/ipcListeners.ts

@@ -1,4 +1,4 @@
-import { ipcMain, dialog, App, BrowserWindow } from 'electron';
+import { ipcMain, dialog, App, BrowserWindow, Menu, MenuItem } from 'electron';
 import electronUpdater from 'electron-updater';
 import os from 'os';
 import { fileURLToPath } from 'url';
@@ -75,3 +75,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 …electron/preload/electron-ipc-preload.tssrc-electron/preload/electron-preload.ts renamed to src-electron/preload/electron-ipc-preload.ts src-electron/preload/electron-preload.ts renamed to src-electron/preload/electron-ipc-preload.ts

@@ -30,3 +30,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

@@ -6,7 +6,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

@@ -52,6 +52,7 @@ import { NodeFsImplementation } from './providers/node/fs/NodeFsImplementation';
 import { useRouter } from 'vue-router';
 import { ProtocolProviderImplementation } from './providers/generic/protocol/ProtocolProviderImplementation';
 import { provideProtocolImplementation } from './providers/generic/protocol/ProtocolProvider';
+import contextMenu from './providers/node/context_menu/context_menu';
 
 const store = baseStore;
 const router = useRouter();
@@ -142,6 +143,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/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;