From bb1b0734fae01095663c9caaf5cead10e68a923f Mon Sep 17 00:00:00 2001 From: Jari Date: Tue, 9 Apr 2019 10:52:30 +0200 Subject: [PATCH] Add `menu` option (#44) Fixes #14 Fixes #43 Co-authored-by: Joni Van Roost --- fixture.js | 29 ++++--- index.d.ts | 28 ++++++- index.js | 223 +++++++++++++++++++++++++++-------------------------- readme.md | 38 ++++++++- 4 files changed, 189 insertions(+), 129 deletions(-) diff --git a/fixture.js b/fixture.js index ea4794f..2584676 100644 --- a/fixture.js +++ b/fixture.js @@ -1,5 +1,8 @@ 'use strict'; -const {app, BrowserWindow} = require('electron'); +const { + app, + BrowserWindow +} = require('electron'); const contextMenu = require('.'); contextMenu({ @@ -10,30 +13,26 @@ contextMenu({ save: 'Configured Save Image', saveImageAs: 'Configured Save Image As…', copyLink: 'Configured Copy Link', + copyImageAddress: 'Configured Copy Image Address', inspect: 'Configured Inspect' }, - prepend: () => [ + prepend: actions => [actions.cut({transform: content => 'modified_cut_' + content})], + menu: actions => [ + actions.separator(), + actions.copyLink({transform: content => 'modified_link_' + content}), + actions.separator(), { label: 'Unicorn' }, - { - type: 'separator' - }, - { - type: 'separator' - }, + actions.separator(), + actions.copy({transform: content => 'modified_copy_' + content}), { label: 'Invisible', visible: false }, - { - type: 'separator' - }, - { - type: 'separator' - } + actions.paste({transform: content => 'modified_paste_' + content}) ], - append: () => {}, + append: actions => [actions.saveImage(), actions.saveImageAs(), actions.copyImageAddress(), actions.separator(), actions.inspect()], showCopyImageAddress: true, showSaveImageAs: true }); diff --git a/index.d.ts b/index.d.ts index ae720c5..be758d7 100644 --- a/index.d.ts +++ b/index.d.ts @@ -48,6 +48,24 @@ export interface Labels { readonly inspect?: string; } +export interface ActionOptions { + /** + * Apply transformation function to the content of the action + */ + readonly transform?: (content: string) => string; +} + +export interface Actions { + readonly separator: () => MenuItem; + readonly inspect: () => MenuItem; + readonly cut: (options: ActionOptions) => MenuItem; + readonly copy: (options: ActionOptions) => MenuItem; + readonly paste: (options: ActionOptions) => MenuItem; + readonly saveImage: (options: ActionOptions) => MenuItem; + readonly saveImageAs: (options: ActionOptions) => MenuItem; + readonly copyImageAddress: (options: ActionOptions) => MenuItem; +} + export interface Options { /** * Window or WebView to add the context menu to. @@ -58,12 +76,18 @@ export interface Options { /** * Should return an array of [menu items](https://electronjs.org/docs/api/menu-item) to be prepended to the context menu. */ - readonly prepend?: (params: ContextMenuParams, browserWindow: BrowserWindow | WebviewTag) => MenuItem[]; + readonly prepend?: (defaultActions: Actions, params: ContextMenuParams, browserWindow: BrowserWindow | WebviewTag) => MenuItem[]; + + /** + * Should return an array of [menu items](https://electronjs.org/docs/api/menu-item) to override the default context menu. + * @default [defaultActions.cut(), defaultActions.copy(), defaultActions.paste(), defaultActions.separator(), defaultActions.saveImage(), defaultActions.saveImageAs(), defaultActions.copyImageAddress(), defaultActions.separator(), defaultActions.copyLink(), defaultActions.separator(), defaultActions.inspect()] + */ + readonly menu?: (defaultActions: Actions, params: ContextMenuParams, browserWindow: BrowserWindow | WebviewTag) => MenuItem[]; /** * Should return an array of [menu items](https://electronjs.org/docs/api/menu-item) to be appended to the context menu. */ - readonly append?: (param: ContextMenuParams, browserWindow: BrowserWindow | WebviewTag) => MenuItem[]; + readonly append?: (defaultActions: Actions, param: ContextMenuParams, browserWindow: BrowserWindow | WebviewTag) => MenuItem[]; /** * Show the `Copy Image Address` menu item when right-clicking on an image. diff --git a/index.js b/index.js index b9c76a0..bfce5de 100644 --- a/index.js +++ b/index.js @@ -15,111 +15,126 @@ function create(win, options) { const hasText = props.selectionText.trim().length > 0; const can = type => editFlags[`can${type}`] && hasText; - let menuTpl = [ - { - type: 'separator' - }, - { + const defaultActions = { + cut: decorateMenuItem({ id: 'cut', label: 'Cut', - // Needed because of macOS limitation: - // https://github.com/electron/electron/issues/5860 - role: can('Cut') ? 'cut' : '', enabled: can('Cut'), - visible: props.isEditable - }, - { + visible: props.isEditable, + click(menuItem) { + props.selectionText = menuItem.transform ? menuItem.transform(props.selectionText) : props.selectionText; + electron.clipboard.writeText(props.selectionText); + win.webContents.delete(); + } + }), + copy: decorateMenuItem({ id: 'copy', label: 'Copy', - role: can('Copy') ? 'copy' : '', enabled: can('Copy'), - visible: props.isEditable || hasText - }, - { + visible: props.isEditable || hasText, + click(menuItem) { + props.selectionText = menuItem.transform ? menuItem.transform(props.selectionText) : props.selectionText; + electron.clipboard.writeText(props.selectionText); + } + }), + paste: decorateMenuItem({ id: 'paste', label: 'Paste', - role: editFlags.canPaste ? 'paste' : '', enabled: editFlags.canPaste, - visible: props.isEditable - }, - { - type: 'separator' - } - ]; - - if (props.mediaType === 'image') { - menuTpl = [ - { - type: 'separator' - }, - { - id: 'save', - label: 'Save Image', - click(item, win) { - download(win, props.srcURL); - } + visible: props.isEditable, + click(menuItem) { + let clipboardContent = electron.clipboard.readText(props.selectionText); + clipboardContent = menuItem.transform ? menuItem.transform(clipboardContent) : clipboardContent; + win.webContents.insertText(clipboardContent); } - ]; - - if (options.showSaveImageAs) { - menuTpl.push({ - id: 'saveImageAs', - label: 'Save Image As…', - click(item, win) { - download(win, props.srcURL, {saveAs: true}); - } - }); - } - - menuTpl.push({ - type: 'separator' - }); - } - - if (props.linkURL && props.mediaType === 'none') { - menuTpl = [ - { - type: 'separator' - }, - { - id: 'copyLink', - label: 'Copy Link', + }), + inspect: () => { + return { + id: 'inspect', + label: 'Inspect Element', + enabled: options.showInspectElement || (options.showInspectElement !== false && isDev), click() { - electron.clipboard.write({ - bookmark: props.linkText, - text: props.linkURL - }); - } - }, - { - type: 'separator' - } - ]; - } + win.inspectElement(props.x, props.y); - if (options.showCopyImageAddress && props.mediaType === 'image') { - menuTpl.push( - { - type: 'separator' - }, - { - id: 'copyImageAddress', - label: 'Copy Image Address', - click() { - electron.clipboard.write({ - bookmark: props.srcURL, - text: props.srcURL - }); + if (webContents(win).isDevToolsOpened()) { + webContents(win).devToolsWebContents.focus(); + } } - }, - { + }; + }, + separator: () => { + return { type: 'separator' + }; + }, + saveImage: decorateMenuItem({ + id: 'save', + label: 'Save Image', + visible: props.mediaType === 'image', + click(menuItem) { + props.srcURL = menuItem.transform ? menuItem.transform(props.srcURL) : props.srcURL; + download(win, props.srcURL); + } + }), + saveImageAs: decorateMenuItem({ + id: 'saveImageAs', + label: 'Save Image As…', + visible: options.showSaveImageAs && props.mediaType === 'image', + click(menuItem) { + props.srcURL = menuItem.transform ? menuItem.transform(props.srcURL) : props.srcURL; + download(win, props.srcURL, {saveAs: true}); } - ); + }), + copyLink: decorateMenuItem({ + id: 'copyLink', + label: 'Copy Link', + visible: props.linkURL.length !== 0 && props.mediaType === 'none', + click(menuItem) { + props.linkURL = menuItem.transform ? menuItem.transform(props.linkURL) : props.linkURL; + + electron.clipboard.write({ + bookmark: props.linkText, + text: props.linkURL + }); + } + }), + copyImageAddress: decorateMenuItem({ + id: 'copyImageAddress', + label: 'Copy Image Address', + visible: options.showCopyImageAddress && props.mediaType === 'image', + click(menuItem) { + props.srcURL = menuItem.transform ? menuItem.transform(props.srcURL) : props.srcURL; + + electron.clipboard.write({ + bookmark: props.srcURL, + text: props.srcURL + }); + } + }) + }; + + let menuTpl = [ + defaultActions.separator(), + defaultActions.cut(), + defaultActions.copy(), + defaultActions.paste(), + defaultActions.separator(), + defaultActions.saveImage(), + defaultActions.saveImageAs(), + defaultActions.copyImageAddress(), + defaultActions.separator(), + defaultActions.copyLink(), + defaultActions.separator(), + defaultActions.inspect(), + defaultActions.separator() + ]; + + if (options.menu) { + menuTpl = options.menu(defaultActions, props, win); } if (options.prepend) { - const result = options.prepend(props, win); + const result = options.prepend(defaultActions, props, win); if (Array.isArray(result)) { menuTpl.unshift(...result); @@ -127,35 +142,13 @@ function create(win, options) { } if (options.append) { - const result = options.append(props, win); + const result = options.append(defaultActions, props, win); if (Array.isArray(result)) { menuTpl.push(...result); } } - if (options.showInspectElement || (options.showInspectElement !== false && isDev)) { - menuTpl.push( - { - type: 'separator' - }, - { - id: 'inspect', - label: 'Inspect Element', - click() { - win.inspectElement(props.x, props.y); - - if (webContents(win).isDevToolsOpened()) { - webContents(win).devToolsWebContents.focus(); - } - } - }, - { - type: 'separator' - } - ); - } - // Apply custom labels for default menu items if (options.labels) { for (const menuItem of menuTpl) { @@ -184,6 +177,16 @@ function create(win, options) { }); } +function decorateMenuItem(menuItem) { + return (options = {}) => { + if (options.transform && !options.click) { + menuItem.transform = options.transform; + } + + return menuItem; + }; +} + function delUnusedElements(menuTpl) { let notDeletedPrevEl; return menuTpl.filter(el => el.visible !== false).filter((el, i, array) => { diff --git a/readme.md b/readme.md index fd580a1..53337be 100644 --- a/readme.md +++ b/readme.md @@ -60,17 +60,51 @@ Window or WebView to add the context menu to. When not specified, the context menu will be added to all existing and new windows. +#### menu +Type: `Function` + +Should return an array of [MenuItem](https://electronjs.org/docs/api/menu-item/)'s to be shown in the context menu. The first argument is an array of default actions that can be used. These actions are functions that can take an object with a transform property. The transform function will be passed the content of the action and can modify it if needed. If no menu property is defined, the default menu will be used. + +Default actions: +- `cut` +- `copy` +- `paste` +- `inspect` +- `separator` +- `saveImage` +- `saveImageAs` +- `copyLink` +- `copyImageAddress` + +```js +menu: (actions) => [ + actions.separator(), + actions.copyLink({transform: (content) => "modified_link_" + content}), + actions.separator(), + { + label: 'Unicorn' + }, + actions.separator(), + actions.copy({transform: (content) => "modified_copy_" + content}), + { + label: 'Invisible', + visible: false + }, + actions.paste({transform: (content) => "modified_paste_" + content}) + ] +``` + #### prepend Type: `Function` -Should return an array of [MenuItem](https://electronjs.org/docs/api/menu-item)'s to be prepended to the context menu. The first argument is [this `params` object](https://electronjs.org/docs/api/web-contents#event-context-menu). The second argument is the [BrowserWindow](https://electronjs.org/docs/api/browser-window) the context menu was requested for. +Should return an array of [MenuItem](https://electronjs.org/docs/api/menu-item/)'s to be prepended to the context menu. The first argument is an array of default actions that can be used. The second argument is [this `params` object](https://electronjs.org/docs/api/web-contents/#event-context-menu). The third argument is the [BrowserWindow](https://electronjs.org/docs/api/browser-window/) the context menu was requested for. #### append Type: `Function` -Should return an array of [MenuItem](https://electronjs.org/docs/api/menu-item)'s to be appended to the context menu. The first argument is [this `params` object](https://electronjs.org/docs/api/web-contents#event-context-menu). The second argument is the [BrowserWindow](https://electronjs.org/docs/api/browser-window) the context menu was requested for. +Should return an array of [MenuItem](https://electronjs.org/docs/api/menu-item/)'s to be appended to the context menu. The first argument is an array of default actions that can be used. The second argument is [this `params` object](https://electronjs.org/docs/api/web-contents/#event-context-menu). The third argument is the [BrowserWindow](https://electronjs.org/docs/api/browser-window/) the context menu was requested for. #### showCopyImageAddress