feat: support contextMenuLabel to be of function type to support dynmaic labels (#4654)

src/actions/types.ts

@@ -123,7 +123,12 @@ export interface Action {
     appState: AppState,
     elements: readonly ExcalidrawElement[],
   ) => boolean;
-  contextItemLabel?: string;
+  contextItemLabel?:
+    | string
+    | ((
+        elements: readonly ExcalidrawElement[],
+        appState: Readonly<AppState>,
+      ) => string);
   contextItemPredicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,

src/components/App.tsx

@@ -4974,6 +4974,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       } else {
         ContextMenu.push({
@@ -5014,6 +5015,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       }
     } else if (type === "element") {
@@ -5025,6 +5027,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       } else {
         ContextMenu.push({
@@ -5069,6 +5072,7 @@ class App extends React.Component<AppProps, AppState> {
           actionManager: this.actionManager,
           appState: this.state,
           container: this.excalidrawContainerRef.current!,
+          elements,
         });
       }
     }

src/components/ContextMenu.tsx

@@ -11,6 +11,7 @@ import {
 import { Action } from "../actions/types";
 import { ActionManager } from "../actions/manager";
 import { AppState } from "../types";
+import { NonDeletedExcalidrawElement } from "../element/types";
 
 export type ContextMenuOption = "separator" | Action;
 
@@ -21,6 +22,7 @@ type ContextMenuProps = {
   left: number;
   actionManager: ActionManager;
   appState: Readonly<AppState>;
+  elements: readonly NonDeletedExcalidrawElement[];
 };
 
 const ContextMenu = ({
@@ -30,6 +32,7 @@ const ContextMenu = ({
   left,
   actionManager,
   appState,
+  elements,
 }: ContextMenuProps) => {
   return (
     <Popover
@@ -52,9 +55,14 @@ const ContextMenu = ({
           }
 
           const actionName = option.name;
-          const label = option.contextItemLabel
-            ? t(option.contextItemLabel)
-            : "";
+          let label = "";
+          if (option.contextItemLabel) {
+            if (typeof option.contextItemLabel === "function") {
+              label = t(option.contextItemLabel(elements, appState));
+            } else {
+              label = t(option.contextItemLabel);
+            }
+          }
           return (
             <li key={idx} data-testid={actionName} onClick={onCloseRequest}>
               <button
@@ -101,6 +109,7 @@ type ContextMenuParams = {
   actionManager: ContextMenuProps["actionManager"];
   appState: Readonly<AppState>;
   container: HTMLElement;
+  elements: readonly NonDeletedExcalidrawElement[];
 };
 
 const handleClose = (container: HTMLElement) => {
@@ -129,6 +138,7 @@ export default {
           onCloseRequest={() => handleClose(params.container)}
           actionManager={params.actionManager}
           appState={params.appState}
+          elements={params.elements}
         />,
         getContextMenuNode(params.container),
       );