Samuel AttardandClaude
ad3a896a52
* build: check the formatting of docs code blocks with oxfmt lint-roller 4 splits the old `lint-roller-markdown-standard` into an oxlint half and an oxfmt half. This wires up the second one: `lint:fmt-in-markdown` runs `lint-roller-markdown-oxfmt` over docs/ as part of `lint:docs`, using docs/.oxfmtrc.json, which matches the repo's .oxfmtrc.json except that docs snippets keep their semicolon-free style. `--fix` writes the formatted blocks back, and a block can opt out with `@noformat` in its info string. * docs: format code blocks with oxfmt Result of `lint-roller-markdown-oxfmt --fix` with docs/.oxfmtrc.json, plus the @ts-expect-error line anchors (and one Docusaurus highlight marker) that moved with the reformat. The Babel output sample in the ESM guide and the two excerpts of repo source in creating-api.md are marked @noformat, and the contentTracing example passes an async callback instead of wrapping an IIFE so that it does not need a leading semicolon. --------- Co-authored-by: Claude <noreply@anthropic.com>
2.9 KiB
title, description, slug, hide_title
| title | description | slug | hide_title |
|---|---|---|---|
| Context Menu | Configure cross-platform native OS menus with the Menu API. | context-menu | true |
Context Menu
Context menus are pop-up menus that appear when right-clicking (or pressing a shortcut such as Shift + F10 on Windows) somewhere in an app's interface.
No context menu will appear by default in Electron. However, context menus can be created by using
the menu.popup function on an instance of the
Menu class. You will need to listen for specific context menu events and set up
the trigger for menu.popup manually.
There are two ways of listening for context menu events in Electron: either via the main process
through webContents or in the renderer process via the
contextmenu web event.
Using the context-menu event (main)
Whenever a right-click is detected within the bounds of a specific WebContents instance, a
context-menu event is triggered. The params object
passed to the listener provides an extensive list of attributes to distinguish which type of element
is receiving the event.
For example, if you want to provide a context menu for links, check for the linkURL parameter.
If you want to check for editable elements such as <textarea/>, check for the isEditable parameter.
Using the contextmenu event (renderer)
Alternatively, you can also listen to the contextmenu
event available on DOM elements in the renderer process and call the menu.popup function via IPC.
Tip
To learn more about IPC basics in Electron, see the Inter-Process Communication guide.
Additional macOS menu items (e.g. Writing Tools)
On macOS, the Writing Tools,
AutoFill, and
Services menu items
are disabled by default for context menus in Electron. To enable these features, pass the
WebFrameMain associated to the target webContents to the frame
parameter in menu.popup.
const { BrowserWindow, Menu } = require('electron/main')
const menu = Menu.buildFromTemplate([{ role: 'editMenu' }])
const win = new BrowserWindow()
win.webContents.on('context-menu', (_event, params) => {
// Whether the context is editable.
if (params.isEditable) {
menu.popup({
// highlight-next-line
frame: params.frame
})
}
})