diff --git a/docs/source/developer/extension_points.rst b/docs/source/developer/extension_points.rst index f7ab6d9aa345..93838f03086a 100644 --- a/docs/source/developer/extension_points.rst +++ b/docs/source/developer/extension_points.rst @@ -125,6 +125,22 @@ right-clicks on a DOM element matching ``.jp-Notebook`` (that is to say, a noteb The selector can be any valid CSS selector, and may target your own UI elements, or existing ones. A list of CSS selectors currently used by context menu commands is given in :ref:`css-selectors`. +If you don't want JupyterLab's custom context menu to appear for your element, because you have +your own right click behavior that you want to trigger, you can add the `data-jp-suppress-context-menu` data attribute +to any node to have it and its children not trigger it. + +For example, if you are building a custom React element, it would look like this: + +.. code:: + + function MyElement(props: {}) { + return ( +
+

Hi

+

{console.log("right clicked")}}>There

+
+ ) + } .. _copy_shareable_link: diff --git a/packages/application/src/frontend.ts b/packages/application/src/frontend.ts index bcfb589dad7a..078e34729a2b 100644 --- a/packages/application/src/frontend.ts +++ b/packages/application/src/frontend.ts @@ -156,7 +156,10 @@ export abstract class JupyterFrontEnd< */ protected evtContextMenu(event: MouseEvent): void { this._contextMenuEvent = event; - if (event.shiftKey) { + if ( + event.shiftKey || + Private.suppressContextMenu(event.target as HTMLElement) + ) { return; } const opened = this.contextMenu.open(event); @@ -355,4 +358,11 @@ namespace Private { * ersatz command. */ export const CONTEXT_MENU_INFO = '__internal:context-menu-info'; + + /** + * Returns whether the element is itself, or a child of, an element with the `jp-suppress-context-menu` data attribute. + */ + export function suppressContextMenu(element: HTMLElement): boolean { + return element.closest('[data-jp-suppress-context-menu]') !== null; + } }