Simplify per review comments.

src/actions/register.ts

@@ -1,14 +1,8 @@
-import { Action, isActionName } from "./types";
+import { Action } from "./types";
 
-let actions: readonly Action[] = [];
-let customActions: readonly Action[] = [];
-export const getCustomActions = () => customActions;
-export const getActions = () => actions;
+export let actions: readonly Action[] = [];
 
 export const register = <T extends Action>(action: T) => {
-  if (!isActionName(action.name)) {
-    customActions = customActions.concat(action);
-  }
   actions = actions.concat(action);
   return action as T & {
     keyTest?: unknown extends T["keyTest"] ? never : T["keyTest"];

src/components/Actions.tsx

@@ -212,14 +212,12 @@ export const ShapesSwitcher = ({
   setAppState,
   onImageAction,
   appState,
-  onContextMenu,
 }: {
   canvas: HTMLCanvasElement | null;
   activeTool: AppState["activeTool"];
   setAppState: React.Component<any, AppState>["setState"];
   onImageAction: (data: { pointerType: PointerType | null }) => void;
   appState: AppState;
-  onContextMenu?: (event: React.MouseEvent, source: string) => void;
 }) => (
   <>
     {SHAPES.map(({ value, icon, key, numericKey, fillable }, index) => {
@@ -270,9 +268,6 @@ export const ShapesSwitcher = ({
               onImageAction({ pointerType });
             }
           }}
-          onContextMenu={(event, source) => {
-            onContextMenu && onContextMenu(event, source);
-          }}
         />
       );
     })}

src/components/App.tsx

@@ -38,7 +38,7 @@ import {
 } from "../actions";
 import { createRedoAction, createUndoAction } from "../actions/actionHistory";
 import { ActionManager } from "../actions/manager";
-import { getActions } from "../actions/register";
+import { actions } from "../actions/register";
 import { ActionResult } from "../actions/types";
 import { trackEvent } from "../analytics";
 import {
@@ -479,7 +479,7 @@ class App extends React.Component<AppProps, AppState> {
       onSceneUpdated: this.onSceneUpdated,
     });
     this.history = new History();
-    this.actionManager.registerAll(getActions());
+    this.actionManager.registerAll(actions);
     this.actionManager.registerActionGuards();
 
     this.actionManager.registerAction(createUndoAction(this.history));
@@ -595,7 +595,6 @@ class App extends React.Component<AppProps, AppState> {
                       renderTopRightUI={renderTopRightUI}
                       renderCustomStats={renderCustomStats}
                       renderCustomSidebar={this.props.renderSidebar}
-                      onContextMenu={this.handleCustomContextMenu}
                       showExitZenModeBtn={
                         typeof this.props?.zenModeEnabled === "undefined" &&
                         this.state.zenModeEnabled
@@ -5994,28 +5993,6 @@ class App extends React.Component<AppProps, AppState> {
     }
   };
 
-  private handleCustomContextMenu = (
-    event: React.MouseEvent,
-    source: string,
-  ) => {
-    event.preventDefault();
-
-    const container = this.excalidrawContainerRef.current!;
-    const { top: offsetTop, left: offsetLeft } =
-      container.getBoundingClientRect();
-    const left = event.clientX - offsetLeft;
-    const top = event.clientY - offsetTop;
-    this.setState({}, () => {
-      this.setState({
-        contextMenu: {
-          top,
-          left,
-          items: this.getContextMenuItems("custom", source),
-        },
-      });
-    });
-  };
-
   private handleCanvasContextMenu = (
     event: React.PointerEvent<HTMLCanvasElement>,
   ) => {

src/components/LayerUI.tsx

@@ -79,7 +79,6 @@ interface LayerUIProps {
   onImageAction: (data: { insertOnCanvasDirectly: boolean }) => void;
   renderWelcomeScreen: boolean;
   children?: React.ReactNode;
-  onContextMenu?: (event: React.MouseEvent, source: string) => void;
 }
 
 const LayerUI = ({
@@ -106,7 +105,6 @@ const LayerUI = ({
   onImageAction,
   renderWelcomeScreen,
   children,
-  onContextMenu,
 }: LayerUIProps) => {
   const device = useDevice();
 
@@ -335,7 +333,6 @@ const LayerUI = ({
                                 insertOnCanvasDirectly: pointerType !== "mouse",
                               });
                             }}
-                            onContextMenu={onContextMenu}
                           />
                         </Stack.Row>
                       </Island>
@@ -431,7 +428,6 @@ const LayerUI = ({
           renderSidebars={renderSidebars}
           device={device}
           renderMenu={renderMenu}
-          onContextMenu={onContextMenu}
           welcomeScreenCenter={WelcomeScreenComponents.Center}
         />
       )}

src/components/MobileMenu.tsx

@@ -46,7 +46,6 @@ type MobileMenuProps = {
   renderSidebars: () => JSX.Element | null;
   device: Device;
   renderMenu: () => React.ReactNode;
-  onContextMenu?: (event: React.MouseEvent, source: string) => void;
   welcomeScreenCenter: UIWelcomeScreenComponents["Center"];
 };
 
@@ -65,7 +64,6 @@ export const MobileMenu = ({
   renderSidebars,
   device,
   renderMenu,
-  onContextMenu,
   welcomeScreenCenter,
 }: MobileMenuProps) => {
   const renderToolbar = () => {
@@ -89,7 +87,6 @@ export const MobileMenu = ({
                           insertOnCanvasDirectly: pointerType !== "mouse",
                         });
                       }}
-                      onContextMenu={onContextMenu}
                     />
                   </Stack.Row>
                 </Island>

src/components/ToolButton.tsx

@@ -26,7 +26,6 @@ type ToolButtonBaseProps = {
   selected?: boolean;
   className?: string;
   isLoading?: boolean;
-  onContextMenu?(event: React.MouseEvent, source: string): void;
 };
 
 type ToolButtonProps =
@@ -158,11 +157,6 @@ export const ToolButton = React.forwardRef((props: ToolButtonProps, ref) => {
           lastPointerTypeRef.current = null;
         });
       }}
-      onContextMenu={(event) => {
-        if (props.onContextMenu !== undefined) {
-          props.onContextMenu(event, props.name ?? "");
-        }
-      }}
     >
       <input
         className={`ToolIcon_type_radio ${sizeCn}`}

src/packages/excalidraw/example/App.tsx

@@ -31,6 +31,7 @@ import { ImportedLibraryData } from "../../../data/types";
 import CustomFooter from "./CustomFooter";
 import MobileFooter from "./MobileFooter";
 import { Action, EnableFn } from "../../../actions/types";
+import { ContextMenuItems } from "../../../components/ContextMenu";
 
 const exampleAction: Action = {
   name: "example",
@@ -39,7 +40,7 @@ const exampleAction: Action = {
     return { elements, appState, commitToHistory: false };
   },
   predicate: (elements, appState, appProps, app, data) =>
-    data === undefined || data.source === "editor-current-shape",
+    data === undefined || data.source === "custom",
   contextItemLabel: "labels.untitled",
 };
 const exampleEnableFn: EnableFn = (elements, appState, actionName) =>
@@ -164,6 +165,28 @@ export default function App() {
             }}
           />
         )}
+        <button
+          onContextMenu={(event: React.MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+            const offsetLeft = excalidrawAPI?.getAppState().offsetLeft ?? 0;
+            const offsetTop = excalidrawAPI?.getAppState().offsetTop ?? 0;
+            const left = event.clientX - offsetLeft;
+            const top = event.clientY - offsetTop;
+
+            const items: ContextMenuItems = [];
+            excalidrawAPI?.actionManager
+              .getCustomActions({ data: { source: "custom" } })
+              .forEach((action) => items.push(action));
+            excalidrawAPI?.updateScene({
+              appState: {
+                contextMenu: { top, left, items },
+              },
+            });
+          }}
+        >
+          {" "}
+          Context Menu{" "}
+        </button>
         <button
           onClick={() => alert("This is dummy top right UI")}
           style={{ height: "2.5rem" }}