electron#MenuItemConstructorOptions TypeScript Examples

function makeViewMenu(): MenuItemConstructorOptions {
	return { 
		label: "View",
		submenu: [
			{ label: "Toggle Sidebar" },
			{ label: "Document Outline" },
			{ label: "File Tree View" },
			{ label: "File List View" },
			{ type: "separator" },
			{ role: "reload" },
			{ role: "forceReload" },
			{ role: "toggleDevTools" },
			{ type: "separator" },
			{ role: "resetZoom" },
			{ role: "zoomIn" },
			{ role: "zoomOut" },
			{ type: "separator" },
			{ label: "Toggle Side Panel" },
			{ label: "Focus Mode" },
			{ label: "Typewriter Mode" },
			{ type: "separator" },
			{ role: "togglefullscreen" }
		]
	};
}

constructor(
    capacitorFileConfig: CapacitorElectronConfig,
    trayMenuTemplate?: (MenuItemConstructorOptions | MenuItem)[],
    appMenuBarMenuTemplate?: (MenuItemConstructorOptions | MenuItem)[]
  ) {
    this.CapacitorFileConfig = capacitorFileConfig;

    this.customScheme = this.CapacitorFileConfig.electron?.customUrlScheme ?? 'capacitor-electron';

    if (trayMenuTemplate) {
      this.TrayMenuTemplate = trayMenuTemplate;
    }

    if (appMenuBarMenuTemplate) {
      this.AppMenuBarMenuTemplate = appMenuBarMenuTemplate;
    }

    // Setup our web app loader, this lets us load apps like react, vue, and angular without changing their build chains.
    this.loadWebApp = electronServe({
      directory: join(app.getAppPath(), 'app'),
      scheme: this.customScheme,
    });
  }

function createMenuItems(win: BrowserWindow, config?: MenuConfig): Array<MenuItemConstructorOptions | MenuItem> {
  if (!config) {
    return [];
  }

  if (platform.isWin) {
    return createWindowsMenuItems(win, config);
  } else if (platform.isMac) {
    return createMacMenuItems(win, config);
  } else if (platform.isLinux) {
    return createLinuxMenuItems(win, config);
  }

  return [];
}

export async function makeAppMenuTemplate(app:NoteworthyApp, themeService:ThemeService): Promise<MenuItemConstructorOptions[]> {
	return [
		makeFileMenu(app),
		makeEditMenu(),
		makeParagraphMenu(),
		makeViewMenu(),
		await makeThemeMenu(themeService),
		makeWindowMenu(app),
		makeHelpMenu()
	];
}

constructor(
    capacitorFileConfig: CapacitorElectronConfig,
    trayMenuTemplate?: (MenuItemConstructorOptions | MenuItem)[],
    appMenuBarMenuTemplate?: (MenuItemConstructorOptions | MenuItem)[],
  ) {
    this.CapacitorFileConfig = capacitorFileConfig;

    this.customScheme =
      this.CapacitorFileConfig.electron?.customUrlScheme ??
      'capacitor-electron';

    if (trayMenuTemplate) {
      this.TrayMenuTemplate = trayMenuTemplate;
    }

    if (appMenuBarMenuTemplate) {
      this.AppMenuBarMenuTemplate = appMenuBarMenuTemplate;
    }

    // Setup our web app loader, this lets us load apps like react, vue, and angular without changing their build chains.
    this.loadWebApp = electronServe({
      directory: join(app.getAppPath(), 'app'),
      scheme: this.customScheme,
    });
  }

function makeHelpMenu(): MenuItemConstructorOptions {
	return {
		label: "Help",
		submenu: [
			{
				label: "About Noteworthy",
				click: () => console.log("about")
			},{
				label: "View Documentation",
				click: () => console.error("unhandled menu option!")
			},
			{ type: "separator" },
			{
				/** @todo (9/14/20) eletron-util openGitHubIssue https://github.com/sindresorhus/electron-util#opennewgithubissueoptions*/
				label: "Report a Problem...",
				click: () => console.error("unhandled menu option!")
			},{
				label: "Submit Feature Request...",
				click: () => console.error("unhandled menu option!")
			}
		]
	};
}

createMenu = (): Menu => {
    const template: MenuItemConstructorOptions[] = [
        {
            label: packageJson.productName,
            submenu: [
                { role: "about" },
                { type: "separator" },
                { role: "hide" },
                { role: "hideOthers" },
                { role: "unhide" },
                { type: "separator" },
                { role: "quit" },
            ],
        },
        {
            label: "Edit",
            submenu: [{ role: "copy" }, { role: "paste" }],
        },
        {
            role: "window",
            submenu: [{ role: "minimize" }, { role: "close" }],
        },
    ]
    return Menu.buildFromTemplate(template)
}

/**
   * Items to add to the machine menu
   */
  provideMachineMenuItems(): MenuItemConstructorOptions[] | null {
    return [
      {
        id: TOGGLE_FAST_LOAD,
        label: "Fast load from tape",
        type: "checkbox",
        checked: true,
        click: (mi) => {
          dispatch(spectrumFastLoadAction(mi.checked));
          emuWindow.saveKliveProject();
        },
      },
      {
        id: SET_TAPE_FILE,
        label: "Set tape file...",
        click: async () => {
          await this.selectTapeFile();
          emuWindow.saveKliveProject();
        },
      },
    ];
  }

export function setupMenu() {
  type MenuItemsType = MenuItemConstructorOptions[]
  const menuOption: MenuItemsType = [
    {
      label: '操作',
      submenu: [
        { role: 'about' },
        {
          label: 'check update',
          click() {
            appUpdater.manualCheck()
          },
        },
        { role: 'hide' },
        { role: 'hideOthers' },
        { role: 'quit' },
      ],
    },
    {role: 'editMenu'},
    {role: 'fileMenu'},
    {role: 'viewMenu'},
    {role: 'windowMenu'},
    // TODO: 待添加，访问官网文档，访问github，上报issue等
    // {
    //   label: 'Help',
    //   submenu: [
    //   ]
    // },
  ]
  const handleOption = Menu.buildFromTemplate(menuOption) // 构造MenuItem的选项数组。
  // 设置菜单
  // Menu.setApplicationMenu(null)
  Menu.setApplicationMenu(handleOption)

}

remoteMethods = {
  buildContextMenuAndPopup: async (menus: MenuItemConstructorOptions[], parameters: IOnContextMenuInfo): Promise<() => void> => {
    const [ipcSafeMenus, unregister] = rendererMenuItemProxy(menus);
    await service.menu.buildContextMenuAndPopup(ipcSafeMenus, parameters, windowName);
    return unregister;
  },
  closeCurrentWindow: async (): Promise<void> => {
    await service.window.close(windowName);
  },
  /** call NodeJS.path */
  getBaseName: (pathString?: string): string | undefined => {
    if (typeof pathString === 'string') return path.basename(pathString);
  },
  getDirectoryName: (pathString?: string): string | undefined => {
    if (typeof pathString === 'string') return path.dirname(pathString);
  },
  joinPath: (...paths: string[]): string => {
    return path.join(...paths);
  },
  getLocalHostUrlWithActualIP,
  /**
   * an wrapper around setVisualZoomLevelLimits
   */
  setVisualZoomLevelLimits: (minimumLevel: number, maximumLevel: number): void => {
    webFrame.setVisualZoomLevelLimits(minimumLevel, maximumLevel);
  },
  registerOpenFindInPage: (handleOpenFindInPage: () => void): void => void ipcRenderer.on(WindowChannel.openFindInPage, handleOpenFindInPage),
  unregisterOpenFindInPage: (handleOpenFindInPage: () => void): void => void ipcRenderer.removeListener(WindowChannel.openFindInPage, handleOpenFindInPage),
  registerCloseFindInPage: (handleCloseFindInPage: () => void): void => void ipcRenderer.on(WindowChannel.closeFindInPage, handleCloseFindInPage),
  unregisterCloseFindInPage: (handleCloseFindInPage: () => void): void => void ipcRenderer.removeListener(WindowChannel.closeFindInPage, handleCloseFindInPage),
  registerUpdateFindInPageMatches: (updateFindInPageMatches: (event: Electron.IpcRendererEvent, activeMatchOrdinal: number, matches: number) => void): void =>
    void ipcRenderer.on(ViewChannel.updateFindInPageMatches, updateFindInPageMatches),
  unregisterUpdateFindInPageMatches: (updateFindInPageMatches: (event: Electron.IpcRendererEvent, activeMatchOrdinal: number, matches: number) => void): void =>
    void ipcRenderer.removeListener(ViewChannel.updateFindInPageMatches, updateFindInPageMatches),
}

async function makeThemeMenu(themeService:ThemeService): Promise<MenuItemConstructorOptions> {
	// fetch themes
	let themes = await themeService.getThemes();

	let defaultThemeSubmenu: MenuItemConstructorOptions[] = themes.default.map(theme => ({
		label: theme.title,
		click: () => { themeService.setTheme({ type: "default", id: theme.id }); }
	}));

	let customThemeSubmenu: MenuItemConstructorOptions[] = themes.custom.map(theme => ({
		label: theme.title,
		click: () => { themeService.setTheme({ type: "custom", path: theme.path }); }
	}));

	let submenu: MenuItemConstructorOptions[] = [
		{
			label: "Open Themes Folder...",
			click: () => { shell.openPath(themeService.getThemeFolder()); }
		},
		{
			label: "Refresh Custom Themes",
			click: () => { themeService.refreshCustomThemes(); } },
		{ type: "separator" }
	];

	submenu = submenu.concat(
		defaultThemeSubmenu,
		[ { type: "separator" } ],
		customThemeSubmenu,
	);

	return { 
		label: "Theme",
		submenu
	};
}

/**
   * We have some value in template that need to get latest value, they are functions, we execute every functions in the template
   * @param submenu menu options to get latest value
   * @returns MenuTemplate that `Menu.buildFromTemplate` wants
   */
  private async getCurrentMenuItemConstructorOptions(
    submenu?: Array<DeferredMenuItemConstructorOptions | MenuItemConstructorOptions>,
  ): Promise<MenuItemConstructorOptions[] | undefined> {
    if (submenu === undefined) return;
    return await Promise.all(
      submenu
        .filter((item) => Object.keys(item).length > 0)
        .map(async (item) => ({
          ...item,
          /** label sometimes is null, causing  */
          label: typeof item.label === 'function' ? item.label() ?? undefined : item.label,
          checked: typeof item.checked === 'function' ? await item.checked() : item.checked,
          enabled: typeof item.enabled === 'function' ? await item.enabled() : item.enabled,
          submenu: !Array.isArray(item.submenu) ? item.submenu : await this.getCurrentMenuItemConstructorOptions(compact(item.submenu)),
        })),
    );
  }

function makeWindowMenu(app:NoteworthyApp): MenuItemConstructorOptions {
	return { 
		label: "Window",
		submenu: [
			{ role: "minimize" },
			{
				label: "Close",
				click: () => { app.handle("lifecycle", "requestAppQuit") }
			},
			{ role: "zoom", visible: is.macos }
		]
	};
}

trayMenuTemplate: (MenuItemConstructorOptions | MenuItem)[] = [
  new MenuItem({ label: 'Quit App', role: 'quit' }),
]

async function createMenu() {
  await i18n.loadNamespaces('applicationMenu')

  const template: MenuItemConstructorOptions[] = [
    {
      label: 'Rocketredis',
      submenu: [
        {
          label: i18n.t('applicationMenu:newConnection'),
          accelerator: 'CmdOrCtrl+N',
          click: () => {
            mainWindow?.webContents.send('newConnection')
          }
        },
        {
          type: 'separator'
        },
        {
          label: i18n.t('applicationMenu:exit'),
          role: 'quit',
          accelerator: 'CmdOrCtrl+Q'
        }
      ]
    },
    {
      label: 'View',
      submenu: [
        { role: 'reload' },
        { role: 'forceReload' },
        { role: 'toggleDevTools' },
        { type: 'separator' },
        { role: 'resetZoom' },
        { role: 'zoomIn' },
        { role: 'zoomOut' },
        { type: 'separator' },
        { role: 'togglefullscreen' }
      ]
    },
    {
      role: 'help',
      submenu: [
        {
          label: 'Learn More',
          click: () => {
            shell.openExternal('https://github.com/diego3g/rocketredis/')
          }
        }
      ]
    }
  ]

  const menu = Menu.buildFromTemplate(template)
  Menu.setApplicationMenu(menu)
}

trayMenuTemplate: (MenuItemConstructorOptions | MenuItem)[] = [new MenuItem({ label: 'Quit App', role: 'quit' })]

private mountTrayMenuItems(): (MenuItemConstructorOptions | MenuItem)[] {
    const header: (MenuItemConstructorOptions | MenuItem)[] = [
      {
        label: "Open Wire GUI",
        type: "normal",
        click: () => {
          this.window.show();
          this.window.focus();
        },
      },
    ];

    const body: (MenuItemConstructorOptions | MenuItem)[] = this.tunnels.map(
      (tunnel) => {
        return {
          label: tunnel.active ? `${tunnel.name} (active)` : tunnel.name,
          type: "normal",
          click: () => {
            this.window.webContents.send("toggleTunnel", tunnel);
          },
        };
      }
    );

    const footer: (MenuItemConstructorOptions | MenuItem)[] = [
      {
        label: "Quit",
        type: "normal",
        click: () => {
          this.isQuitting = true;
          app.quit();
        },
      },
    ];

    header.push({ type: "separator" });
    if (body.length > 0) {
      footer.unshift({ type: "separator" });
    }

    return header.concat(body, footer);
  }

appMenuBarMenuTemplate: (MenuItemConstructorOptions | MenuItem)[] = [
  { role: process.platform === 'darwin' ? 'appMenu' : 'fileMenu' },
  { role: 'viewMenu' },
]

private updateMenuPartRecord(
    menuPartKey: string,
    menuID: string,
    newSubMenuItems: Array<DeferredMenuItemConstructorOptions | MenuItemConstructorOptions>,
  ): void {
    this.menuPartRecord[menuPartKey] = newSubMenuItems.filter((item) => item.id !== undefined).map((item) => [menuID, item.id!] as [string, string]);
  }

////////////////////////////////////////////////////////////

function makeFileMenu(app:NoteworthyApp): MenuItemConstructorOptions {
	/** @todo (9/13/20) don't keep `app` arg in closures!! */
	return {
		label: "File",
		submenu: [
			{
				label: "Open Folder...",
				click: () => { app.handle("dialog", "dialogFolderOpen"); }
			},
			{
				label: "Open File...",
				click: () => { app.handle("dialog", "dialogFileOpen"); }
			},
			{
				label: "Close All",
				click: () => { }
			},
			{
				type: "separator"
			},
			{
				label: "Save",
				click: () => {
					if(!app._renderProxy){ console.error("no proxy!"); return; }
					app._renderProxy.menuFileSave()
				}
			},
			{
				label: "Save As...",
				click: () => {
					if(!app._renderProxy){ console.error("no proxy!"); return; }
					app._renderProxy.menuFileSaveAs()
				}
			},
			{
				type: "separator"
			},
			{	label: "Export File...",
				submenu: [
					{ label: "PDF" },
					{ label: "HTML" },
					{ label: "HTML (without styles)" },
					{ type: "separator" },
					{ label: "LaTeX" },
					{ label: "Word" },
					{ label: "OpenOffice" },
					{ label: "RTF" },
					{ label: "epub" },
					{ type: "separator" },
					{ label: "Export Options..." },
				]
			},
			{	label: "Export Workspace...",
				submenu: [
					{ label: "HTML" },
					{ label: "HTML (without styles)" },
					{ label: "LaTeX" },
					{ type: "separator" },
					{ label: "Export Options..." },
				]
			},
			{
				label: "Exit",
				click: () => { }
			}
		]
	}
}

public generateTemplate(): MenuItemConstructorOptions[] | MenuItem[] {
    return [
      {
        label: "File",
        submenu: [
          {
            label: "Import",
            accelerator: "Ctrl+O",
            click: this.import,
          },
          {
            type: "separator",
          },
          {
            label: "Quit",
            accelerator: "Ctrl+Q",
            click: this.quit,
          },
        ],
      },
      {
        label: "Edit",
        submenu: [
          { role: "undo" },
          { role: "redo" },
          { type: "separator" },
          { role: "cut" },
          { role: "copy" },
          { role: "paste" },
          { role: "delete" },
          { type: "separator" },
          { role: "selectAll" },
        ],
      },
      {
        label: "View",
        submenu: [
          { role: "resetZoom" },
          { role: "zoomIn" },
          { role: "zoomOut" },
          { type: "separator" },
          { role: "togglefullscreen" },
        ],
      },
      {
        label: "Window",
        submenu: [{ role: "minimize" }, { role: "close" }],
      },
      {
        role: "help",
        submenu: [
          {
            label: "Learn More",
            click: async () => {
              (await import("electron")).shell.openExternal(
                "https://github.com/Devsfy/wiregui"
              );
            },
          },
        ],
      },
    ];
  }

/**
   * Items to add to the Show menu
   */
  provideViewMenuItems(): MenuItemConstructorOptions[] | null {
    return null;
  }

function setupMenu() {
    const template: MenuItemConstructorOptions[] = [
        {
            label: 'SideQuest',
            submenu: [
                {
                    label: 'Quit',
                    accelerator: 'Command+Q',
                    click: function() {
                        // Mac users expect an application to quit immediately with Command+Q. However, app.quit() is
                        // being interrupted by the main window while it's closing. So instead, let's asynchronously
                        // trigger the quit once the main window is done closing.
                        mainWindow.once('closed', app.quit);
                        mainWindow.close();
                    },
                },
            ],
        },
        {
            label: 'Edit',
            submenu: [
                {
                    label: 'Undo',
                    accelerator: 'CmdOrCtrl+Z',
                    role: 'undo',
                },
                {
                    label: 'Redo',
                    accelerator: 'Shift+CmdOrCtrl+Z',
                    role: 'redo',
                },
                { type: 'separator' },
                {
                    label: 'Cut',
                    accelerator: 'CmdOrCtrl+X',
                    role: 'cut',
                },
                {
                    label: 'Copy',
                    accelerator: 'CmdOrCtrl+C',
                    role: 'copy',
                },
                {
                    label: 'Paste',
                    accelerator: 'CmdOrCtrl+V',
                    role: 'paste',
                },
                {
                    label: 'Select All',
                    accelerator: 'CmdOrCtrl+A',
                    role: 'selectAll',
                },
            ],
        },
    ];
    if (process.platform === 'darwin') {
        Menu.setApplicationMenu(Menu.buildFromTemplate(template));
    } else {
        Menu.setApplicationMenu(null);
    }
}

function createMacMenuItems(win: BrowserWindow, config?: MenuConfig): Array<MenuItemConstructorOptions | MenuItem> {
  const viewMenu: MenuItemConstructorOptions = {
    label: config.viewLabel,
    submenu: [
      { label: config.reloadLabel, role: "reload" },
      { label: config.forceReloadLabel, role: "forceReload" },
      { label: config.toggleDevToolsLabel, role: "toggleDevTools", accelerator: "CommandOrControl+Shift+I" },
      { type: "separator" },
    ],
  };

  const viewMenuArr = viewMenu.submenu as MenuItemConstructorOptions[];
  createViewMenu(viewMenuArr, win, config);

  viewMenuArr.push({ type: "separator" }, { label: config.toggleFullScreenLabel, role: "togglefullscreen" });

  return [
    {
      label: app.name,
      submenu: [{ label: config.quitLabel, role: "quit" }],
    },
    {
      label: config.editLabel,
      submenu: [
        { label: config.undoLabel, role: "undo" },
        { label: config.redoLabel, role: "redo" },
        { type: "separator" },
        { label: config.cutLabel, role: "cut" },
        { label: config.copyLabel, role: "copy" },
        { label: config.pasteLabel, role: "paste" },
        { label: config.selectAllLabel, role: "selectAll" },
      ],
    },
    viewMenu,
    {
      label: config.windowLabel,
      submenu: [
        {
          label: config.windowCloseLabel,
          role: "close" /*click: () => win?.close(), accelerator: "CommandOrControl+w"*/,
        },
      ],
    },
  ];
}

function makeParagraphMenu(): MenuItemConstructorOptions {
	return {
		label: "Paragraph",
		submenu: [
			{ label: "TODO" },
		]
	};
}

createSubmenu = (
  context: BrowserWindow
): MenuItemConstructorOptions[] => {
  if (isMac) {
    return [
      {
        label: 'About Image Optimizer',
        role: 'about'
      },
      {
        type: 'separator'
      },
      {
        label: 'Preferences',
        accelerator: 'CommandOrControl+,',
        click () {
          context.webContents.send('menu:preferences')
        }
      },
      {
        type: 'separator'
      },
      {
        label: 'Hide Image Optimizer',
        accelerator: 'Command+H'
      },
      {
        label: 'Hide Others',
        accelerator: 'Command+Shift+H'
      },
      {
        label: 'Show All'
      },
      {
        type: 'separator'
      },
      {
        label: 'Quit Image Optimizer',
        role: 'quit',
        accelerator: 'CommandOrControl+Q'
      }
    ]
  }
  return []
}

template: (MenuItemConstructorOptions | MenuItem)[] = [
  {
    label: 'Edit',
    submenu: [
      {
        role: 'undo'
      },
      {
        role: 'redo'
      },
      {
        type: 'separator'
      },
      {
        role: 'cut'
      },
      {
        role: 'copy'
      },
      {
        role: 'paste'
      }
    ]
  },
  {
    label: 'Debug',
    submenu: [
      {
        role: 'toggleDevTools'
      },
      {
        label: 'Open log folder',
        click: () => {
          shell.openPath(path.join(getDataDirectory(), 'logs'));
        }
      },
      {
        role: 'forceReload'
      }
    ]
  },
  {
    label: 'Settings',
    submenu: [
      {
        label: 'Open settings folder',
        click: () => {
          shell.openPath(path.join(getDataDirectory(), 'config'));
        }
      },
      {
        label: 'Open settings file...',
        submenu: [
          {
            label: 'FFmpeg/Mkvmerge path',
            click: () => {
              shell.openPath(path.join(getDataDirectory(), 'config', 'bin-path.yml'));
            }
          },
          {
            label: 'Advanced options',
            sublabel: 'See the documention for the options you may enter here',
            click: () => {
              shell.openPath(path.join(getDataDirectory(), 'config', 'cli-defaults.yml'));
            }
          },
          {
            label: 'Output path',
            click: () => {
              shell.openPath(path.join(getDataDirectory(), 'config', 'dir-path.yml'));
            }
          }
        ]
      }
    ]
  },
  {
    label: 'Help',
    submenu: [
      {
        label: 'Version',
        sublabel: json.version
      },
      {
        label: 'GitHub',
        click: () => {
          shell.openExternal('https://github.com/anidl/multi-downloader-nx');
        }
      },
      {
        label: 'Report a Bug',
        click: () => {
          shell.openExternal(`https://github.com/anidl/multi-downloader-nx/issues/new?assignees=izu-co&labels=bug&template=bug.yml&title=BUG&version=${json.version}`);
        }
      },
      {
        type: 'separator'
      },
      {
        label: 'Contributors',
        click: () => {
          shell.openExternal('https://github.com/anidl/multi-downloader-nx/graphs/contributors');
        }
      },
      {
        label: 'Discord',
        click: () => {
          shell.openExternal('https://discord.gg/qEpbWen5vq');
        }
      }
    ]
  }
]

export async function getWorkspaceMenuTemplate(
  workspace: IWorkspace,
  t: TFunction,
  service: IWorkspaceMenuRequiredServices,
): Promise<MenuItemConstructorOptions[]> {
  const { active, id, hibernated, tagName, isSubWiki, wikiFolderLocation, gitUrl, storageService } = workspace;
  /* eslint-disable @typescript-eslint/no-misused-promises */
  const template: MenuItemConstructorOptions[] = [
    {
      label: t('WorkspaceSelector.OpenWorkspaceTagTiddler', { tagName }),
      click: async () => {
        await openWorkspaceTagTiddler(workspace, service);
      },
    },
    {
      label: t('WorkspaceSelector.EditWorkspace'),
      click: async () => {
        await service.window.open(WindowNames.editWorkspace, { workspaceID: id });
      },
    },
    {
      label: t('WorkspaceSelector.RemoveWorkspace'),
      click: async () => await service.wikiGitWorkspace.removeWorkspace(id),
    },
    {
      label: t('WorkspaceSelector.OpenWorkspaceFolder'),
      click: async () => await service.native.open(wikiFolderLocation, true),
    },
    {
      label: t('WorkspaceSelector.OpenWorkspaceFolderInEditor'),
      click: async () => await service.native.openInEditor(wikiFolderLocation),
    },
    {
      label: t('WorkspaceSelector.OpenWorkspaceFolderInGitGUI'),
      click: async () => await service.native.openInGitGuiApp(wikiFolderLocation),
    },
  ];

  if (gitUrl !== null && gitUrl.length > 0 && storageService !== SupportedStorageServices.local) {
    const userInfo = await service.auth.getStorageServiceUserInfo(storageService);
    if (userInfo !== undefined) {
      const isOnline = await service.context.isOnline();
      template.push({
        label: t('ContextMenu.SyncNow') + (isOnline ? '' : `(${t('ContextMenu.NoNetworkConnection')})`),
        enabled: isOnline,
        click: async () => {
          await service.git.commitAndSync(workspace, { remoteUrl: gitUrl, userInfo });
          await service.workspaceView.restartWorkspaceViewService(id);
          await service.view.reloadViewsWebContents(id);
        },
      });
    }
  }
  if (storageService === SupportedStorageServices.local) {
    template.push({
      label: t('ContextMenu.BackupNow'),
      click: async () => {
        await service.git.commitAndSync(workspace, { commitOnly: true });
      },
    });
  }

  if (!isSubWiki) {
    template.push(
      {
        label: t('ContextMenu.RestartService'),
        click: async () => {
          await service.workspaceView.restartWorkspaceViewService(id);
          await service.workspaceView.realignActiveWorkspace(id);
        },
      },
      {
        label: t('ContextMenu.Reload'),
        click: async () => await service.view.reloadViewsWebContents(id),
      },
    );
  }

  if (!active && !isSubWiki) {
    template.splice(1, 0, {
      label: hibernated ? t('WorkspaceSelector.WakeUpWorkspace') : t('WorkspaceSelector.HibernateWorkspace'),
      click: async () => {
        if (hibernated) {
          return await service.workspaceView.wakeUpWorkspaceView(id);
        }
        return await service.workspaceView.hibernateWorkspaceView(id);
      },
    });
  }
  /* eslint-enable @typescript-eslint/no-misused-promises */

  return template;
}

buildDarwinTemplate() {
    const subMenuAbout: MenuItemConstructorOptions = {
      label: 'Electron',
      submenu: [
        {
          label: 'About ElectronReact',
          // @ts-ignore
          selector: 'orderFrontStandardAboutPanel:'
        },
        { type: 'separator' },
        { label: 'Services', submenu: [] },
        { type: 'separator' },
        {
          label: 'Hide ElectronReact',
          accelerator: 'Command+H',
          selector: 'hide:'
        },
        {
          label: 'Hide Others',
          accelerator: 'Command+Shift+H',
          selector: 'hideOtherApplications:'
        },
        { label: 'Show All', selector: 'unhideAllApplications:' },
        { type: 'separator' },
        {
          label: 'Quit',
          accelerator: 'Command+Q',
          click: () => {
            app.quit();
          }
        }
      ]
    };
    const subMenuEdit: MenuItemConstructorOptions = {
      label: 'Edit',
      submenu: [
        // @ts-ignore
        { label: 'Undo', accelerator: 'Command+Z', selector: 'undo:' },
        { label: 'Redo', accelerator: 'Shift+Command+Z', selector: 'redo:' },
        { type: 'separator' },
        { label: 'Cut', accelerator: 'Command+X', selector: 'cut:' },
        { label: 'Copy', accelerator: 'Command+C', selector: 'copy:' },
        { label: 'Paste', accelerator: 'Command+V', selector: 'paste:' },
        {
          label: 'Select All',
          accelerator: 'Command+A',
          selector: 'selectAll:'
        }
      ]
    };
    const subMenuViewDev: MenuItemConstructorOptions = {
      label: 'View',
      submenu: [
        {
          label: 'Reload',
          accelerator: 'Command+R',
          click: () => {
            this.mainWindow.webContents.reload();
          }
        },
        {
          label: 'Toggle Full Screen',
          accelerator: 'Ctrl+Command+F',
          click: () => {
            this.mainWindow.setFullScreen(!this.mainWindow.isFullScreen());
          }
        },
        {
          label: 'Toggle Developer Tools',
          accelerator: 'Alt+Command+I',
          click: () => {
            this.mainWindow.webContents.toggleDevTools();
          }
        },
        {
          label: 'Toggle CPU Usage',
          accelerator: 'Alt+Command+C',
          click: () => {
            this.mainWindow.webContents.send(
              'chime-toggle-cpu-usage',
              !this.isCpuUsageVisible
            );
            this.isCpuUsageVisible = !this.isCpuUsageVisible;
          }
        }
      ]
    };
    const subMenuViewProd: MenuItemConstructorOptions = {
      label: 'View',
      submenu: [
        {
          label: 'Toggle Developer Tools',
          accelerator: 'Alt+Command+I',
          click: () => {
            this.mainWindow.webContents.toggleDevTools();
          }
        },
        {
          label: 'Toggle CPU Usage',
          accelerator: 'Alt+Command+C',
          click: () => {
            this.mainWindow.webContents.send(
              'chime-toggle-cpu-usage',
              !this.isCpuUsageVisible
            );
            this.isCpuUsageVisible = !this.isCpuUsageVisible;
          }
        }
      ]
    };
    const subMenuWindow: MenuItemConstructorOptions = {
      label: 'Window',
      submenu: [
        {
          label: 'Minimize',
          accelerator: 'Command+M',
          // @ts-ignore
          selector: 'performMiniaturize:'
        },
        { label: 'Close', accelerator: 'Command+W', selector: 'performClose:' },
        { type: 'separator' },
        { label: 'Bring All to Front', selector: 'arrangeInFront:' }
      ]
    };
    const subMenuHelp: MenuItemConstructorOptions = {
      label: 'Help',
      submenu: [
        {
          label: 'Learn More',
          click() {
            shell.openExternal('https://electronjs.org');
          }
        },
        {
          label: 'Documentation',
          click() {
            shell.openExternal(
              'https://github.com/electron/electron/tree/master/docs#readme'
            );
          }
        },
        {
          label: 'Community Discussions',
          click() {
            shell.openExternal('https://www.electronjs.org/community');
          }
        },
        {
          label: 'Search Issues',
          click() {
            shell.openExternal('https://github.com/electron/electron/issues');
          }
        }
      ]
    };

    const subMenuView =
      process.env.NODE_ENV === 'development' ||
      process.env.DEBUG_PROD === 'true'
        ? subMenuViewDev
        : subMenuViewProd;

    return [subMenuAbout, subMenuEdit, subMenuView, subMenuWindow, subMenuHelp];
  }