Fix editor share configuration issue.

packages/editor/src/index.tsx

@@ -9,7 +9,8 @@ import {
     PersistenceManager,
     RESTPersistenceManager,
     DesignerOptionsBuilder,
-    Designer
+    Designer,
+    DesignerKeyboard,
 } from '@wisemapping/mindplot';
 import FR from './compiled-lang/fr.json';
 import ES from './compiled-lang/es.json';
@@ -43,6 +44,7 @@ export type EditorPropsType = {
     readOnlyMode: boolean;
     locale?: string;
     onAction: (action: ToolbarActionType) => void;
+    hotkeys?: boolean;
 };
 
 const loadLocaleData = (locale: string) => {
@@ -117,11 +119,20 @@ const Editor = ({
     isTryMode: isTryMode,
     locale = 'en',
     onAction,
+    hotkeys = true,
 }: EditorPropsType): React.ReactElement => {
     React.useEffect(() => {
         initCallback(locale);
     }, []);
 
+    React.useEffect(() => {
+        if (hotkeys) {
+            DesignerKeyboard.resume();
+        } else {
+            DesignerKeyboard.pause();
+        }
+    }, [hotkeys]);
+
     return (
         <IntlProvider locale={locale} messages={loadLocaleData(locale)}>
             <Toolbar

packages/mindplot/src/components/DesignerKeyboard.ts

@@ -21,16 +21,28 @@ import Keyboard from './Keyboard';
 import { Designer } from '..';
 import Topic from './Topic';
 
+export type EventCallback = (event?: Event) => void;
 class DesignerKeyboard extends Keyboard {
   // eslint-disable-next-line no-use-before-define
   static _instance: DesignerKeyboard;
 
+  static _disabled: boolean;
+
   constructor(designer: Designer) {
     super();
     $assert(designer, 'designer can not be null');
     this._registerEvents(designer);
   }
 
+  addShortcut(shortcuts: string[] | string, callback: EventCallback): void {
+    super.addShortcut(shortcuts, (e: Event) => {
+      if (DesignerKeyboard.isDisabled()) {
+        return;
+      }
+      callback(e);
+    });
+  }
+
   private _registerEvents(designer: Designer) {
     // Try with the keyboard ..
     const model = designer.getModel();
@@ -246,6 +258,10 @@ class DesignerKeyboard extends Keyboard {
 
     $(document).on('keypress', (event) => {
       let keyCode: number;
+
+      if (DesignerKeyboard.isDisabled()) {
+        return;
+      }
       // Firefox doesn't skip special keys for keypress event...
       if (event.key && excludes.includes(event.key.toLowerCase())) {
         return;
@@ -373,6 +389,19 @@ class DesignerKeyboard extends Keyboard {
 
   static register = function register(designer: Designer) {
     this._instance = new DesignerKeyboard(designer);
+    this._disabled = false;
+  };
+
+  static pause = function pause() {
+    this._disabled = true;
+  };
+
+  static resume = function resume() {
+    this._disabled = false;
+  };
+
+  static isDisabled = function isDisabled() {
+    return this._disabled;
   };
 
   static specialKeys = {

packages/mindplot/src/components/Keyboard.ts

@@ -18,7 +18,7 @@
 import $ from 'jquery';
 
 class Keyboard {
-  addShortcut(shortcuts, callback) {
+  addShortcut(shortcuts: string[] | string, callback) {
     const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
     shortcutsArray.forEach((shortcut) => {
       $(document).bind('keydown', shortcut, callback);

packages/mindplot/src/index.ts

@@ -27,6 +27,7 @@ import DesignerOptionsBuilder from './components/DesignerOptionsBuilder';
 import ImageExporterFactory from './components/export/ImageExporterFactory';
 import TextExporterFactory from './components/export/TextExporterFactory';
 import Exporter from './components/export/Exporter';
+import DesignerKeyboard from './components/DesignerKeyboard';
 
 import {
   buildDesigner,
@@ -54,4 +55,5 @@ export {
   ImageExporterFactory,
   Exporter,
   $notify,
+  DesignerKeyboard,
 };

packages/webapp/src/components/editor-page/index.tsx

@@ -3,6 +3,8 @@ import ActionDispatcher from '../maps-page/action-dispatcher';
 import { ActionType } from '../maps-page/action-chooser';
 import Editor from '@wisemapping/editor';
 import AppI18n from '../../classes/app-i18n';
+import { useSelector } from 'react-redux';
+import { hotkeysEnabled } from '../../redux/editorSlice';
 
 export type EditorPropsType = {
     mapId: number;
@@ -11,12 +13,12 @@ export type EditorPropsType = {
 
 const EditorPage = ({ mapId, ...props }: EditorPropsType): React.ReactElement => {
     const [activeDialog, setActiveDialog] = React.useState<ActionType | null>(null);
-
+    const hotkeys = useSelector(hotkeysEnabled);
     // Load user locale ...
     const userLocale = AppI18n.getUserLocale();
 
     return <>
-        <Editor {...props} onAction={setActiveDialog} locale={userLocale.code} />
+        <Editor {...props} onAction={setActiveDialog} locale={userLocale.code} hotkeys={hotkeys} />
         {
             activeDialog &&
             <ActionDispatcher

packages/webapp/src/components/maps-page/action-dispatcher/base-dialog/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { ErrorInfo } from '../../../../classes/client';
 import { StyledDialog, StyledDialogActions, StyledDialogContent, StyledDialogTitle } from './style';
@@ -6,6 +6,8 @@ import GlobalError from '../../../form/global-error';
 import DialogContentText from '@mui/material/DialogContentText';
 import Button from '@mui/material/Button';
 import { PaperProps } from '@mui/material/Paper';
+import { useDispatch } from 'react-redux';
+import { disableHotkeys, enableHotkeys } from '../../../../redux/editorSlice';
 
 export type DialogProps = {
     onClose: () => void;
@@ -23,6 +25,13 @@ export type DialogProps = {
 };
 
 const BaseDialog = (props: DialogProps): React.ReactElement => {
+    const dispatch = useDispatch();
+    useEffect(() => {
+        dispatch(disableHotkeys());
+        return () => { 
+            dispatch(enableHotkeys())
+        };
+    }, []);
     const { onClose, onSubmit, maxWidth = 'sm', PaperProps } = props;
 
     const handleOnSubmit = (e: React.FormEvent<HTMLFormElement>) => {

packages/webapp/src/redux/clientSlice.ts

@@ -4,6 +4,7 @@ import { useQuery } from 'react-query';
 import Client, { AccountInfo, ErrorInfo, MapInfo } from '../classes/client';
 import { useSelector } from 'react-redux';
 import AppConfig from '../classes/app-config';
+import { RootState } from './rootReducer';
 
 
 export interface ClientStatus {
@@ -59,13 +60,11 @@ export const fetchAccount = (): AccountInfo | undefined => {
     return data;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const activeInstance = (state: any): Client => {
+export const activeInstance = (state: RootState): Client => {
     return state.client.instance;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const activeInstanceStatus = (state: any): ClientStatus => {
+export const activeInstanceStatus = (state: RootState): ClientStatus => {
     return state.client.status;
 };
 

packages/webapp/src/redux/editorSlice.ts

@@ -0,0 +1,30 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { RootState } from "./rootReducer";
+
+export interface EditorState {
+    hotkeysEnabled: boolean;
+}
+
+const initialState: EditorState = {
+    hotkeysEnabled: true,
+};
+
+export const editorSlice = createSlice({
+    name: 'editor',
+    initialState: initialState,
+    reducers: {
+        disableHotkeys(state) {
+            state.hotkeysEnabled = false;
+        },
+        enableHotkeys(state) {
+            state.hotkeysEnabled = true;
+        },
+    },
+});
+
+export const hotkeysEnabled = (state: RootState): boolean => {
+    return state.editor.hotkeysEnabled;
+};
+
+export const { disableHotkeys, enableHotkeys } = editorSlice.actions;
+export default editorSlice.reducer;

packages/webapp/src/redux/rootReducer.ts

@@ -0,0 +1,12 @@
+import { combineReducers } from '@reduxjs/toolkit';
+import clientReducer from './clientSlice';
+import editorReducer from './editorSlice';
+
+const rootReducer = combineReducers({
+    client: clientReducer,
+    editor: editorReducer,
+});
+
+export type RootState = ReturnType<typeof rootReducer>;
+
+export default rootReducer;

packages/webapp/src/redux/store.ts

@@ -1,11 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit';
-import clientReducer from './clientSlice';
+import rootReducer from './rootReducer';
 
 // Create Service object...
 const store = configureStore({
-    reducer: {
-        client: clientReducer,
-    },
+    reducer: rootReducer,
 });
 
 export default store;