fix: allow to toggle between modes when view only mode to make UI consistent (#3009)

src/actions/manager.tsx

 } from "./types";
 import { ExcalidrawElement } from "../element/types";
 import { AppState, ExcalidrawProps } from "../types";
+import { MODES } from "../constants";
 
 // This is the <App> component, but for now we don't care about anything but its
 // `canvas` state.
     }
     const { viewModeEnabled } = this.getAppState();
     if (viewModeEnabled) {
-      if (data[0].name !== "viewMode") {
+      if (!Object.values(MODES).includes(data[0].name)) {
         return false;
       }
     }

src/components/App.tsx

       options.push(actionCopyAsSvg);
     }
     if (!element) {
-      const viewModeOptions: ContextMenuOption[] = [
+      const viewModeOptions = [
         ...options,
+        typeof this.props.gridModeEnabled === "undefined" &&
+          actionToggleGridMode,
+        typeof this.props.zenModeEnabled === "undefined" && actionToggleZenMode,
+        typeof this.props.viewModeEnabled === "undefined" &&
+          actionToggleViewMode,
         actionToggleStats,
       ];
 
-      if (typeof this.props.viewModeEnabled === "undefined") {
-        viewModeOptions.push(actionToggleViewMode);
-      }
-
       ContextMenu.push({
         options: viewModeOptions,
         top: clientY,

src/constants.ts

 export const IDLE_THRESHOLD = 60_000;
 // Report a user active each ACTIVE_THRESHOLD milliseconds
 export const ACTIVE_THRESHOLD = 3_000;
+
+export const MODES = {
+  VIEW: "viewMode",
+  ZEN: "zenMode",
+  GRID: "gridMode",
+};