How Lepton Uses electron-context-menu for Context-Specific User Actions

Lepton integrates electron-context-menu in main.js to automatically attach native right-click menus to all renderer windows, providing context-sensitive actions like Copy, Paste, and Inspect Element based on the clicked element type.

The open-source snippet manager Lepton leverages the electron-context-menu package to deliver native right-click functionality across its Electron interface. By implementing a minimal configuration in the main process, the application ensures users receive appropriate context menu options whether they click on text, links, or images. This integration demonstrates how lightweight dependencies can significantly enhance desktop application usability without complex boilerplate code.

Integrating electron-context-menu in the Main Process

Lepton's implementation resides entirely within the main process bootstrap code. The integration requires only three lines of code in main.js (lines 186-188), making it one of the most concise feature implementations in the codebase.

Loading the Library

The application imports the package using a standard CommonJS require statement:

const ContextMenu = require('electron-context-menu')

This loads the helper library that automatically attaches context-menu handlers to BrowserWindow instances without manual webContents event wiring.

Configuring the Context Menu

Immediately after requiring the library, Lepton invokes the configuration function:

ContextMenu({
  prepend: (params, mainWindow) => []
})

The prepend callback accepts two parameters: params containing metadata about the clicked element, and mainWindow referencing the active BrowserWindow instance. Currently, Lepton returns an empty array, meaning no custom items are added beyond the library's defaults. However, this hook remains available for future domain-specific actions such as "Open Snippet in Editor" or "Copy Gist URL."

How Context-Specific Actions Work in Lepton

The electron-context-menu library provides intelligent, element-aware menu generation that adapts to user interactions without additional configuration from Lepton's developers.

When a user right-clicks within the application window, the library analyzes the params object to determine the element type under the cursor:

• Text selections trigger options for Copy, Cut, and Select All
• Editable fields add Paste functionality
• Hyperlinks expose Open Link and Copy Link Address
• Images provide Save Image and Copy Image options
• Any context includes Inspect Element for development debugging

This behavior occurs automatically across all renderer windows created by Lepton's main process, ensuring consistent UX throughout the application lifecycle.

Extending the Menu with Custom Actions

While Lepton currently uses the default menu configuration, the prepend callback structure supports seamless extension for snippet-management workflows.

Developers could implement custom actions by modifying the return array in main.js:

ContextMenu({
  prepend: (params, mainWindow) => [
    {
      label: 'Open Snippet in New Window',
      visible: params.mediaType === 'none' && params.selectionText,
      click: () => {
        mainWindow.webContents.send('open-snippet', params.selectionText)
      }
    },
    {
      label: 'Copy Gist URL',
      visible: params.linkURL && params.linkURL.includes('gist.github.com'),
      click: () => {
        require('electron').clipboard.writeText(params.linkURL)
      }
    }
  ]
})

This pattern allows Lepton to inject domain-specific commands that appear only in relevant contexts—such as when users select snippet text or click gist links—while maintaining the library's automatic handling of standard browser actions.

Summary

Lepton's integration of electron-context-menu demonstrates efficient use of specialized npm packages to enhance Electron applications:

• Minimal implementation: Three lines of code in main.js (lines 186-188) activate context menus across all windows
• Automatic context detection: The library intelligently displays relevant actions based on clicked element types (text, links, images, editable fields)
• Extension readiness: The prepend callback provides a hook for future Lepton-specific actions without refactoring the core menu logic
• Zero boilerplate: No manual webContents event listeners or menu template construction required

Frequently Asked Questions

Where does Lepton configure the electron-context-menu package?

Lepton configures electron-context-menu in the main process entry point at main.js (lines 186-188). The configuration occurs during application startup before any renderer windows are created, ensuring all windows inherit the context menu functionality automatically.

What default actions does electron-context-menu provide in Lepton?

The package provides standard browser context actions including Copy, Cut, Paste, Select All, Open Link, Copy Link Address, Save Image, Copy Image, and Inspect Element. These appear contextually based on the element type under the cursor—text selections show editing commands, links show navigation options, and images show save options.

Can developers add custom actions to Lepton's context menu?

Yes, developers can extend the menu by modifying the prepend callback in main.js. Currently, Lepton returns an empty array [], but developers can return an array of menu item objects to inject custom actions such as "Copy Gist URL" or "Open Snippet in Editor" that appear only when specific conditions are met.

Does Lepton use electron-context-menu for all application windows?

Yes, the single ContextMenu({...}) call in the main process automatically attaches context menus to all BrowserWindow instances created during the application lifecycle. This includes the primary window loading index.html and any auxiliary windows spawned for snippet editing or preview, ensuring consistent right-click behavior throughout the application.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}