Merge pull request #7877 from saulshanabrook/right-click-option

Add support for disabling JupyterLab's context menu

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 (
+        <div data-jp-suppress-context-menu>
+          <p>Hi</p>
+          <p onContextMenu={() => {console.log("right clicked")}}>There</p>
+        </div>
+      )
+    }
 
 .. _copy_shareable_link:
 

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;
+  }
 }