feat: move contextMenu into the component tree and control via appState (#6021)

src/actions/actionClipboard.tsx

@@ -3,6 +3,7 @@ import { register } from "./register";
 import {
   copyTextToSystemClipboard,
   copyToClipboard,
+  probablySupportsClipboardBlob,
   probablySupportsClipboardWriteText,
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
@@ -23,11 +24,31 @@ export const actionCopy = register({
       commitToHistory: false,
     };
   },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
   contextItemLabel: "labels.copy",
   // don't supply a shortcut since we handle this conditionally via onCopy event
   keyTest: undefined,
 });
 
+export const actionPaste = register({
+  name: "paste",
+  trackEvent: { category: "element" },
+  perform: (elements: any, appStates: any, data, app) => {
+    app.pasteFromClipboard(null);
+    return {
+      commitToHistory: false,
+    };
+  },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
+  contextItemLabel: "labels.paste",
+  // don't supply a shortcut since we handle this conditionally via onCopy event
+  keyTest: undefined,
+});
+
 export const actionCut = register({
   name: "cut",
   trackEvent: { category: "element" },
@@ -35,6 +56,9 @@ export const actionCut = register({
     actionCopy.perform(elements, appState, data, app);
     return actionDeleteSelected.perform(elements, appState);
   },
+  contextItemPredicate: (elements, appState, appProps, app) => {
+    return app.device.isMobile && !!navigator.clipboard;
+  },
   contextItemLabel: "labels.cut",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.X,
 });
@@ -77,6 +101,9 @@ export const actionCopyAsSvg = register({
       };
     }
   },
+  contextItemPredicate: (elements) => {
+    return probablySupportsClipboardWriteText && elements.length > 0;
+  },
   contextItemLabel: "labels.copyAsSvg",
 });
 
@@ -131,6 +158,9 @@ export const actionCopyAsPng = register({
       };
     }
   },
+  contextItemPredicate: (elements) => {
+    return probablySupportsClipboardBlob && elements.length > 0;
+  },
   contextItemLabel: "labels.copyAsPng",
   keyTest: (event) => event.code === CODES.C && event.altKey && event.shiftKey,
 });

src/actions/actionToggleGridMode.tsx

@@ -20,6 +20,9 @@ export const actionToggleGridMode = register({
     };
   },
   checked: (appState: AppState) => appState.gridSize !== null,
+  contextItemPredicate: (element, appState, props) => {
+    return typeof props.gridModeEnabled === "undefined";
+  },
   contextItemLabel: "labels.showGrid",
   keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });

src/actions/actionToggleLock.ts

@@ -41,15 +41,9 @@ export const actionToggleLock = register({
         : "labels.elementLock.lock";
     }
 
-    if (selected.length > 1) {
-      return getOperation(selected) === "lock"
-        ? "labels.elementLock.lockAll"
-        : "labels.elementLock.unlockAll";
-    }
-
-    throw new Error(
-      "Unexpected zero elements to lock/unlock. This should never happen.",
-    );
+    return getOperation(selected) === "lock"
+      ? "labels.elementLock.lockAll"
+      : "labels.elementLock.unlockAll";
   },
   keyTest: (event, appState, elements) => {
     return (

src/actions/actionToggleViewMode.tsx

@@ -18,6 +18,9 @@ export const actionToggleViewMode = register({
     };
   },
   checked: (appState) => appState.viewModeEnabled,
+  contextItemPredicate: (elements, appState, appProps) => {
+    return typeof appProps.viewModeEnabled === "undefined";
+  },
   contextItemLabel: "labels.viewMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.R,

src/actions/actionToggleZenMode.tsx

@@ -18,6 +18,9 @@ export const actionToggleZenMode = register({
     };
   },
   checked: (appState) => appState.zenModeEnabled,
+  contextItemPredicate: (elements, appState, appProps) => {
+    return typeof appProps.zenModeEnabled === "undefined";
+  },
   contextItemLabel: "buttons.zenMode",
   keyTest: (event) =>
     !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.Z,

src/actions/types.ts

@@ -143,6 +143,8 @@ export interface Action {
   contextItemPredicate?: (
     elements: readonly ExcalidrawElement[],
     appState: AppState,
+    appProps: ExcalidrawProps,
+    app: AppClassProperties,
   ) => boolean;
   checked?: (appState: Readonly<AppState>) => boolean;
   trackEvent: