ElectronってDeveloper Toolでのコピペがそのままじゃできないんですね。

メニューにコピーペーストなど、必要な「編集」機能は実施しておかないといけないみたいです。

よくある「編集メニュー」にある機能というと、

  • コピー
  • ペースト
  • カット
  • アンドゥ
  • リドゥ

あたりでしょうか。Developer Toolの用途だけでもあったほうがよさそうなのでこれを実装してみます。

普通に実装してみる

メニューのテンプレートに編集メニューとサブメニューを実装します。

labelとかacceleratorを指定するやり方ですね。

 1const template = [
 2  {
 3    label: "Electron",
 4    submenu: [
 5    ]
 6  },
 7  {
 8    label: "編集",
 9    submenu: [
10      { label: "コピー", accelerator: "CmdOrCtrl+C", selector: "copy:" },
11      { label: "ペースト", accelerator: "CmdOrCtrl+V", selector: "paste:" },
12    ]
13  }
14];
15const menu = Menu.buildFromTemplate(template);
16Menu.setApplicationMenu(menu);

もっと楽に書く

ドキュメントを見たらroleというのを使えることがわかりました。

Menu | Electron
Create application menus and context menus.
electronjs.org

例えば

 1const template = [
 2  {
 3    label: 'Edit',
 4    submenu: [
 5      {role: 'undo'},
 6      {role: 'redo'},
 7      {type: 'separator'},
 8      {role: 'cut'},
 9      {role: 'copy'},
10      {role: 'paste'},
11      {role: 'pasteandmatchstyle'},
12      {role: 'delete'},
13      {role: 'selectall'}
14    ]
15  }
16]
17const menu = Menu.buildFromTemplate(template);
18Menu.setApplicationMenu(menu);

とすると、こんなメニューになります。

Developer Toolでエラーメッセージを一部コピーするとか、コードを貼り付けて確認するとかは絶対すると思うので、開発効率のためにも編集メニューは必要そうですね〜