Fix i18n issue on editor

packages/editor/src/index.tsx

@@ -75,11 +75,6 @@ const Editor = ({
             DesignerKeyboard.pause();
         }
     }, [options.enableKeyboardEvents]);
-
-    useEffect(() => {
-        Messages.init(options.locale);
-    }, [options.locale]);
-
     const onLoadDesigner = (mapId: string, options: EditorOptions, persistenceManager: PersistenceManager): Designer => {
         const buildOptions = DesignerOptionsBuilder.buildOptions({
             persistenceManager,

packages/editor/test/playground/map-render/js/editor.tsx

@@ -1,3 +1,20 @@
+/*
+ *    Copyright [2021] [wisemapping]
+ *
+ *   Licensed under WiseMapping Public License, Version 1.0 (the "License").
+ *   It is basically the Apache License, Version 2.0 (the "License") plus the
+ *   "powered by wisemapping" text requirement on every single page;
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the license at
+ *
+ *       http://www.wisemapping.org/license
+ *
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
 import React from 'react';
 import ReactDOM from 'react-dom';
 import Editor, { EditorOptions } from '../../../../src/index';

packages/mindplot/src/components/Messages.ts

@@ -22,6 +22,7 @@ class Messages {
   public static __bundle;
 
   static init(locale: string) {
+    console.log(`Init designer message: ${locale}`);
     let userLocale = $defined(locale) ? locale : 'en';
     let bundle = Bundle[userLocale];
 
@@ -36,7 +37,6 @@ class Messages {
 
 const $msg = function $msg(key: string) {
   if (!Messages.__bundle) {
-    console.log('Trigger initialization');
     Messages.init('en');
   }
   const msg = Messages.__bundle[key];

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

@@ -7,7 +7,7 @@ import { useSelector } from 'react-redux';
 import { hotkeysEnabled } from '../../redux/editorSlice';
 import ReactGA from 'react-ga';
 import Client from '../../classes/client';
-import { activeInstance } from '../../redux/clientSlice';
+import { activeInstance, fetchAccount } from '../../redux/clientSlice';
 import { PersistenceManager } from '@wisemapping/mindplot';
 import EditorOptionsBulder from './EditorOptionsBuider';
 
@@ -20,22 +20,22 @@ const EditorPage = ({ isTryMode }: EditorPropsType): React.ReactElement => {
     const hotkey = useSelector(hotkeysEnabled);
     const userLocale = AppI18n.getUserLocale();
     const client: Client = useSelector(activeInstance);
-    const [persistenceManager, setPersistenceManager] = React.useState<PersistenceManager>();
     const { mapId, options } = EditorOptionsBulder.build(userLocale.code, hotkey, isTryMode);
 
     useEffect(() => {
         ReactGA.pageview(window.location.pathname + window.location.search);
-        const persistence = client.buildPersistenceManager(options.mode);
-        setPersistenceManager(persistence);
-        return () => client.removePersistenceManager();
     }, []);
 
-    // As temporal hack, editor properties are propagated from global variables...
+    // Account settings can be null and editor cannot be initilized multiple times. This creates problems
-    return persistenceManager ? (
+    // at the i18n resource loading.
+    const persistence = client.buildPersistenceManager(options.mode);
+    const loadCompleted = persistence && (options.mode === 'showcase' || fetchAccount());
+
+    return loadCompleted ? (
         <>
             <Editor onAction={setActiveDialog}
                 options={options}
-                persistenceManager={persistenceManager}
+                persistenceManager={persistence}
                 mapId={mapId} />
             {
                 activeDialog &&