suppport disabling context menu in custom elements

src/components/App.tsx

@@ -129,6 +129,7 @@ import {
   isBindingElement,
   isBindingElementType,
   isBoundToContainer,
+  isCustomElement,
   isImageElement,
   isInitializedImageElement,
   isLinearElement,
@@ -3158,6 +3159,7 @@ class App extends React.Component<AppProps, AppState> {
     }
 
     if (
+      event.button !== POINTER_BUTTON.SECONDARY &&
       this.state.activeTool.type === "selection" &&
       this.props.onElementClick &&
       hitElement
@@ -5416,7 +5418,6 @@ class App extends React.Component<AppProps, AppState> {
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {
     event.preventDefault();
-
     if (
       (event.nativeEvent.pointerType === "touch" ||
         (event.nativeEvent.pointerType === "pen" &&
@@ -5433,6 +5434,18 @@ class App extends React.Component<AppProps, AppState> {
       includeLockedElements: true,
     });
 
+    let disableContextMenu = false;
+    if (element && isCustomElement(element)) {
+      const config = getCustomElementConfig(
+        this.props.customElementsConfig,
+        element.customType,
+      );
+      disableContextMenu = !!config?.disableContextMenu;
+    }
+    if (disableContextMenu) {
+      this.contextMenuOpen = true;
+      return false;
+    }
     const type = element ? "element" : "canvas";
 
     const container = this.excalidrawContainerRef.current!;

src/constants.ts

@@ -161,6 +161,7 @@ export const DEFAULT_CUSTOM_ELEMENT_CONFIG: Required<CustomElementConfig> = {
   height: 40,
   stackedOnTop: false,
   onCreate: () => {},
+  disableContextMenu: false,
 };
 export const MQ_MAX_WIDTH_PORTRAIT = 730;
 export const MQ_MAX_WIDTH_LANDSCAPE = 1000;

src/packages/excalidraw/example/App.js

@@ -211,6 +211,7 @@ export default function App() {
       </svg>`)}`,
         width: 60,
         height: 60,
+        disableContextMenu: true,
       },
       {
         type: "custom",
@@ -223,6 +224,7 @@ export default function App() {
         transformHandles: false,
         stackedOnTop: true,
         onCreate,
+        disableContextMenu: true,
       },
       {
         type: "custom",

src/scene/selection.ts

@@ -3,14 +3,14 @@ import {
   NonDeletedExcalidrawElement,
 } from "../element/types";
 import { getElementAbsoluteCoords, getElementBounds } from "../element";
-import { AppState, ExcalidrawProps } from "../types";
+import { AppProps, AppState } from "../types";
 import { isBoundToContainer } from "../element/typeChecks";
 import { getCustomElementConfig } from "../utils";
 
 export const getElementsWithinSelection = (
   elements: readonly NonDeletedExcalidrawElement[],
   selection: NonDeletedExcalidrawElement,
-  customElementConfig: ExcalidrawProps["customElementsConfig"],
+  customElementConfig: AppProps["customElementsConfig"],
 ) => {
   const [selectionX1, selectionY1, selectionX2, selectionY2] =
     getElementAbsoluteCoords(selection);

src/scene/types.ts

@@ -1,5 +1,5 @@
 import { ExcalidrawTextElement } from "../element/types";
-import { AppClassProperties, AppState, ExcalidrawProps } from "../types";
+import { AppClassProperties, AppProps, AppState } from "../types";
 
 export type RenderConfig = {
   // AppState values
@@ -27,7 +27,7 @@ export type RenderConfig = {
   /** when exporting the behavior is slightly different (e.g. we can't use
     CSS filters), and we disable render optimizations for best output */
   isExporting: boolean;
-  customElementsConfig?: ExcalidrawProps["customElementsConfig"];
+  customElementsConfig?: AppProps["customElementsConfig"];
 };
 
 export type SceneScroll = {

src/types.ts

@@ -233,6 +233,7 @@ export type CustomElementConfig = {
   height?: number;
   stackedOnTop: boolean;
   onCreate?: (element: ExcalidrawElement) => void;
+  disableContextMenu: boolean;
 };
 export type ExcalidrawInitialDataState = Merge<
   ImportedDataState,

src/utils.ts

@@ -11,7 +11,7 @@ import {
   WINDOWS_EMOJI_FALLBACK_FONT,
 } from "./constants";
 import { FontFamilyValues, FontString } from "./element/types";
-import { AppState, DataURL, ExcalidrawProps, Zoom } from "./types";
+import { AppProps, AppState, DataURL, Zoom } from "./types";
 import { unstable_batchedUpdates } from "react-dom";
 import { isDarwin } from "./keys";
 
@@ -627,7 +627,7 @@ export const getFrame = () => {
 };
 
 export const getCustomElementConfig = (
-  customElementConfig: ExcalidrawProps["customElementsConfig"],
+  customElementConfig: AppProps["customElementsConfig"],
   customType: string,
 ) => {
   if (!customElementConfig) {