Search code examples
angularelectronelectron-packager

How to copy and paste outside an Electron app?


Sorry in advance if my question was already answered, as for me i didn't found any answer when I searched. I'm currently building an Angular Desktop app, using Electron and so electron-packager. I need to be able to copy and paste text from inside the app to another window, and same in he other way. I can already copy and paste if I stay inside the app. I already tried many solutions suggested by the community, as you'll see in my code, by adding a Menu to my app, with the copy and paste shortcuts.

Here is my code below launching the electron window (main.js) :

const { app, BrowserWindow, Menu} = require("electron");
const path = require("path");
const url = require("url");

let win;

function createWindow() {
  win = new BrowserWindow({icon:  path.join(__dirname, `/src/logo4.ico`)});
  win.maximize();

  // Create the Application's main menu
  const template = [{
    label: "Application",
    submenu: [
      {label: "About Application", selector: "orderFrontStandardAboutPanel:"},
      {type: "separator"},
      {
        label: "Quit", accelerator: "Command+Q", click: function () {
          app.quit();
        }
      }
    ]
  }, {
    label: "Edit",
    submenu: [
      {label: "Undo", accelerator: "Ctrl+Z", selector: "undo:"},
      {label: "Redo", accelerator: "Shift+Ctrl+Z", selector: "redo:"},
      {type: "separator"},
      {label: "Cut", accelerator: "Ctrl+X", selector: "cut:"},
      {label: "Copy", accelerator: "Ctrl+C", selector: "copy:"},
      {label: "Paste", accelerator: "Ctrl+V", selector: "paste:"},
      {label: "Select All", accelerator: "Ctrl+A", selector: "selectAll:"}
    ]
  }
  ];

  Menu.setApplicationMenu(Menu.buildFromTemplate(template));
  // Menu.setApplicationMenu(null);

  // load the dist folder from Angular
  win.loadURL(
    url.format({
      pathname: path.join(__dirname, `/dist/index.html`),
      protocol: "file:",
      slashes: true
    })
  );

  // The following is optional and will open the DevTools:
  // win.webContents.openDevTools()

  win.on("closed", () => {
    win = null;
  });
}

app.on("ready", createWindow);

// on macOS, closing the window doesn't quit the app
app.on("window-all-closed", () => {
  if (process.platform !== "darwin") {
    app.quit();
  }
});

// initialize the app's main window
app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

As you can see i tried to add the menu and the shortcuts to the app. It works fine to copy and paste within the app but not more, even though the sources I found indicates that it's supposed to work outside too. Hope you'll be able to help me :) I'm already sure the problem has nothing to do with angular or the packager, as I tried to copy and paste from the window opened by electron ., on a simple html form, and it was still not working. Here is the form below, just in case you need it :

<div class="login-wrapper" fxLayout="row" fxLayoutAlign="center center">

  <mat-card class="box">
    <mat-card-header>
      <mat-card-title>Log in</mat-card-title>
    </mat-card-header>

    <form class="example-form" [formGroup]="loginForm" (ngSubmit)="onSubmit()">
      <mat-card-content>
        <mat-form-field class="example-full-width" [ngClass]="{'error': loginForm.controls['username'].errors && !loginForm.controls['username'].pristine}" dividerColor="{{loginForm.controls['username'].errors && !loginForm.controls['username'].pristine ? 'warn' : 'primary'}}">
          <input type="text" matInput placeholder="Username" formControlName="username" required>
          <mat-error *ngIf="loginForm.controls['username'].errors && !loginForm.hasError('required')" class="error-msg">
             Username is required !
          </mat-error>
        </mat-form-field>

        <mat-form-field class="example-full-width">
          <input type="password" matInput placeholder="Password" formControlName="password" required>
          <mat-error *ngIf="loginForm.controls['password'].errors && !loginForm.hasError('required')" class="error-msg">
            Password is required
          </mat-error>
        </mat-form-field>
      </mat-card-content>
      <button type="submit"  [disabled]="!loginForm.valid" class="btn-block" color="accent" mat-stroked-button><span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
        Log in</button>
    </form>
      <mat-checkbox [(ngModel)]="remember" (change)="rememberChange()"> Remember 
         me</mat-checkbox>
      </mat-card>

    </div>

Have a great day and thanks in advance to the community

I'm using Angular 8.2.13, electron 7.1.1 and electron-packager 13.1.1. I package my app for Windows.

N.B : i'm new to posting on StackOverflow, sorry if my post is not on the right place


Solution

  • For those who could have the same issue as me, I fixed it. In fact it had nothing to do with the code, just the company antivirus which was putting my app in quarantine everytime I was starting it. Whitelisted it,n and everything worked for copy and paste. Just sad I didn't figured it out earlier