CODEWITHSUNDEEP
javascriptelectron
Samira
Samira

Reputation: 31

Electron js With the right click, be able to perform a "Copy" and "Cut" if a selection has been made and "Paste" if the cursor is in input fields

I'm new at electron js I need to enable copy/paste in the webContents:

A right click in the webContents perform a "Copy" and "Cut" if a selection has been made and "Paste" the selection if the cursor is in input fields

here is part of my main.js

var menu = Menu.buildFromTemplate([
    {
        label: 'Aide',
        submenu: [
            {
                label: ....
            },
        ]
    }
])
Menu.setApplicationMenu(menu);
const createWindow = () => {
    let display = require('electron').screen.getPrimaryDisplay();```
    setTimeout(() => {
        // Create the browser window.
        win = new BrowserWindow({
           ...
        });

        // and load the app.
        var customUserAgent = 'example';
        win.loadURL(appUrl.toString(), { userAgent: customUserAgent });//appUrl is my angular app
        win.webContents.openDevTools();

        // Emitted when the window is closed.
        win.on('closed', () => {
            win = null;
        });

        win.on('minimize', function (event) {
            event.preventDefault();
            hide(display);
        });

        win.on('maximize', function (event) {
            ...
        });

        win.on('close', function (event) {
            ...
        });

    }, 10000);

}
app.on('ready', () => {
    createWindow();

    let display = require('electron').screen.getPrimaryDisplay();
    tray = new Tray(path.join(__dirname, 'avatar-cir.ico'));
    const contextMenu = Menu.buildFromTemplate([
        {
            label: 'Open', type: 'normal', click: function () {
                show(display);
            }
        },
        {
            label: 'Quit', type: 'normal', click: function () {
                app.isQuiting = true;
                app.quit();
            }
        }
    ])
    tray.setToolTip('My App');
    tray.setContextMenu(contextMenu);
    let timeCount = 0
    tray.on('click', () => {
        setTimeout(() => {
            if (timeCount === 0) {
                tray.popUpContextMenu();
            }

        }, 300)
        timeCount = 0
    });
    tray.on('double-click', () => {
        if (windowVisible == false) {
            show(display);
        }
        else {
            hide(display);
        }
        timeCount = 1
    });
 
});
app.on('window-all-closed', () => {
    ...
});

app.on('activate', () => {
    ...
});

I'm trying to enable the menu that enables copy and paste without loosing the menu declared when building the template.

Can anyone help me to find a why to enable edit mode?

Upvotes: 2

Views: 2284

Answers (1)

Samira
Samira

Reputation: 31

It works when I used the plugin electron-context-menu that enables the same menu of the browser (you can install and see more documentation in the github repo).

So I just added an extended menu in my code

const extendedContextMenu = require('electron-context-menu');

And I called extendedContextMenu({}); once my app is ready

app.on('ready', () => {
    createWindow();

    let display = require('electron').screen.getPrimaryDisplay();
    tray = new Tray(path.join(__dirname, 'avatar-cir.ico'));
    const contextMenu = Menu.buildFromTemplate([
        {
            label: 'Open', type: 'normal', click: function () {
                show(display);
            }
        },
        {
            label: 'Quit', type: 'normal', click: function () {
                app.isQuiting = true;
                app.quit();
            }
        }
    ])
    tray.setToolTip('My App');
    tray.setContextMenu(contextMenu);
    let timeCount = 0
    tray.on('click', () => {
        setTimeout(() => {
            if (timeCount === 0) {
                tray.popUpContextMenu();
            }

        }, 300)
        timeCount = 0
    });
    tray.on('double-click', () => {
        if (windowVisible == false) {
            show(display);
        }
        else {
            hide(display);
        }
        timeCount = 1
    });
    //add the context menu implemented in the plugin 
    extendedContextMenu({});
});

Upvotes: 1

Related Questions