Resolve "Cannot read properties of null (reading 'buildDesigner')" error.

packages/editor/src/components/app-bar/index.tsx

@@ -43,7 +43,7 @@ import MapInfo from '../../classes/model/map-info';
 import { useIntl } from 'react-intl';
 
 interface AppBarProps {
-  model: Editor;
+  model: Editor | undefined;
   mapInfo: MapInfo;
   capability: Capability;
   onAction?: (type: ToolbarActionType) => void;

packages/editor/src/components/index.tsx

@@ -15,7 +15,7 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import React, { ReactElement, useCallback, useEffect, useState } from 'react';
+import React, { ReactElement, useEffect, useRef, useState } from 'react';
 import Popover from '@mui/material/Popover';
 import Model from '../classes/model/editor';
 import { Vortex } from 'react-loader-spinner';
@@ -25,7 +25,6 @@ import {
   PersistenceManager,
   Designer,
   DesignerKeyboard,
-  MindplotWebComponent,
   EditorRenderMode,
 } from '@wisemapping/mindplot';
 
@@ -70,6 +69,7 @@ const Editor = ({
   accountConfiguration,
 }: EditorProps): ReactElement => {
   const [model, setModel] = useState<Model | undefined>();
+  const mindplotRef = useRef(null);
 
   // This is required to redraw in case of chansges in the canvas...
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -78,17 +78,9 @@ const Editor = ({
   const [popoverOpen, popoverTarget, widgetManager] = DefaultWidgetManager.useCreate();
   const capability = new Capability(options.mode, mapInfo.isLocked());
 
-  const mindplotRef: (component: MindplotWebComponent) => void = useCallback(
-    (component: MindplotWebComponent) => {
-      if (!component) {
-        const error = new Error(`Unexpected error during initialization. ${component}`);
-        window.newrelic?.noticeError(error);
-        throw error;
-      }
-
-      const model = new Model(component);
-
-      // Force refresh after map load ...
+  useEffect(() => {
+    if (!model) {
+      const model = new Model(mindplotRef.current);
       model
         .loadMindmap(mapInfo.getId(), persistenceManager, widgetManager)
         .then(() => {
@@ -102,9 +94,8 @@ const Editor = ({
           );
         });
       setModel(model);
-    },
-    [],
-  );
+    }
+  }, [mindplotRef]);
 
   useEffect(() => {
     if (options.enableKeyboardEvents) {

packages/mindplot/src/components/DesignerBuilder.ts

@@ -28,6 +28,9 @@ let designer: Designer;
 export function buildDesigner(options: DesignerOptions): Designer {
   const divContainer = options.divContainer ? $(options.divContainer) : $(`#${options.container}`);
   $assert(divContainer, 'container could not be null');
+  if (designer) {
+    throw new Error('Designer can does not support multiple initializations');
+  }
 
   // Register load events ...
   designer = new Designer(options, divContainer);

packages/mindplot/src/components/MindplotWebComponent.ts

@@ -13,7 +13,7 @@ import LocalStorageManager from './LocalStorageManager';
 export type MindplotWebComponentInterface = {
   id: string;
   mode: string;
-  ref: (component: object) => void;
+  ref: object;
   locale?: string;
 };
 /**