Adapt undo/redo functions to Electron app menu

Composer/packages/client/src/hooks/useElectronFeatures.ts

@@ -5,14 +5,14 @@ import { useEffect } from 'react';
 import get from 'lodash/get';
 import { getEditorAPI } from '@bfc/shared';
 
-export const useElectronFeatures = (actionSelected: boolean) => {
+export const useElectronFeatures = (actionSelected: boolean, canUndo: boolean, canRedo: boolean) => {
   // Sync selection state to Electron main process
   useEffect(() => {
     if (!window.__IS_ELECTRON__) return;
     if (!window.ipcRenderer || typeof window.ipcRenderer.send !== 'function') return;
 
-    window.ipcRenderer.send('composer-state-change', { actionSelected });
-  }, [actionSelected]);
+    window.ipcRenderer.send('composer-state-change', { actionSelected, canUndo, canRedo });
+  }, [actionSelected, canUndo, canRedo]);
 
   // Subscribe Electron app menu events (copy/cut/del/undo/redo)
   useEffect(() => {

Composer/packages/client/src/pages/design/DesignPage.tsx

@@ -8,7 +8,15 @@ import { Breadcrumb, IBreadcrumbItem } from 'office-ui-fabric-react/lib/Breadcru
 import formatMessage from 'format-message';
 import { globalHistory, RouteComponentProps } from '@reach/router';
 import get from 'lodash/get';
-import { DialogFactory, SDKKinds, DialogInfo, PromptTab, LuIntentSection, getEditorAPI } from '@bfc/shared';
+import {
+  DialogFactory,
+  SDKKinds,
+  DialogInfo,
+  PromptTab,
+  LuIntentSection,
+  getEditorAPI,
+  registerEditorAPI,
+} from '@bfc/shared';
 import { ActionButton } from 'office-ui-fabric-react/lib/Button';
 import { JsonEditor } from '@bfc/code-editor';
 import Extension, { useTriggerApi, PluginConfig } from '@bfc/extension';
@@ -189,6 +197,10 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
   }, [location]);
 
   useEffect(() => {
+    registerEditorAPI('Editing', {
+      Undo: () => undo(),
+      Redo: () => redo(),
+    });
     //leave design page should clear the history
     return clearUndo;
   }, []);
@@ -241,7 +253,7 @@ const DesignPage: React.FC<RouteComponentProps<{ dialogId: string; projectId: st
     return { actionSelected, showDisableBtn, showEnableBtn };
   }, [visualEditorSelection]);
 
-  useElectronFeatures(actionSelected);
+  useElectronFeatures(actionSelected, canUndo(), canRedo());
 
   const EditorAPI = getEditorAPI();
   const toolbarItems: IToolbarItem[] = [

Composer/packages/electron-server/src/appMenu.ts

@@ -67,8 +67,20 @@ export function initAppMenu(win?: Electron.BrowserWindow) {
       label: 'Edit',
       submenu: [
         // NOTE: Avoid using builtin `role`, it won't override the click handler.
-        { id: 'Undo', label: 'Undo', accelerator: 'CmdOrCtrl+Z', click: () => handleMenuEvents('undo') },
-        { id: 'Redo', label: 'Redo', accelerator: 'CmdOrCtrl+Shift+Z', click: () => handleMenuEvents('redo') },
+        {
+          id: 'Undo',
+          label: 'Undo',
+          enabled: false,
+          accelerator: 'CmdOrCtrl+Z',
+          click: () => handleMenuEvents('undo'),
+        },
+        {
+          id: 'Redo',
+          label: 'Redo',
+          enabled: false,
+          accelerator: 'CmdOrCtrl+Shift+Z',
+          click: () => handleMenuEvents('redo'),
+        },
         { type: 'separator' },
         { id: 'Cut', label: 'Cut', enabled: false, accelerator: 'CmdOrCtrl+X', click: () => handleMenuEvents('cut') },
         {
@@ -181,14 +193,21 @@ export function initAppMenu(win?: Electron.BrowserWindow) {
   const menu = Menu.buildFromTemplate(template);
   Menu.setApplicationMenu(menu);
 
-  // Let menu enable/disable status reflect action selection states.
-  ipcMain &&
-    ipcMain.on &&
+  if (ipcMain && ipcMain.on) {
     ipcMain.on('composer-state-change', (e, state) => {
+      // Let menu enable/disable status reflects action selection states.
       const actionSelected = !!state.actionSelected;
       ['Cut', 'Copy', 'Delete'].forEach((id) => {
         menu.getMenuItemById(id).enabled = actionSelected;
       });
+
+      // Let menu undo/redo status reflects history status
+      const canUndo = !!state.canUndo;
+      menu.getMenuItemById('Undo').enabled = canUndo;
+      const canRedo = !!state.canRedo;
+      menu.getMenuItemById('Redo').enabled = canRedo;
+
       Menu.setApplicationMenu(menu);
     });
+  }
 }