Merged in feature/custom-hook-editor (pull request #74)

feat: add custom hook useEditor to initialize editor

* feat: add custom hook useEditor to initialize editor


Approved-by: Paulo Veiga

packages/editor/package.json

@@ -21,10 +21,16 @@
     "test:unit": "jest ./test/unit/* --detectOpenHandles"
   },
   "dependencies": {
-    "@wisemapping/mindplot": "^5.1.1",
+    "@emotion/react": "^11.10.5",
-    "emoji-picker-react": "^4.4.7",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.9.3",
+    "@mui/material": "^5.10.11",
+    "@wisemapping/mindplot": "workspace:*",
+    "emoji-picker-react": "4.5.2",
     "react-color": "^2.19.3",
-    "react-loader-spinner": "^5.3.4"
+    "react-intl": "^6.2.1",
+    "react-loader-spinner": "^5.3.4",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "@formatjs/cli": "^6.0.4",
@@ -35,16 +41,11 @@
     "cypress-image-snapshot": "^4.0.1",
     "jest-transform-stub": "^2.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "start-server-and-test": "^2.0.0"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.9.3",
-    "@mui/material": "^5.10.11",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^18.2.0"
-    "react-intl": "^6.2.1",
-    "styled-components": "^5.3.6"
   }
 }

packages/editor/src/components/index.tsx

@@ -15,29 +15,20 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-import React, { ReactElement, useEffect, useRef, useState } from 'react';
+import React, { ReactElement } from 'react';
 import Popover from '@mui/material/Popover';
-import Model from '../classes/model/editor';
 import { Vortex } from 'react-loader-spinner';
 
 import { FormattedMessage, IntlProvider } from 'react-intl';
-import {
+import { Designer } from '@wisemapping/mindplot';
-  PersistenceManager,
-  Designer,
-  DesignerKeyboard,
-  EditorRenderMode,
-} from '@wisemapping/mindplot';
 
 import I18nMsg from '../classes/i18n-msg';
 // eslint-disable-next-line no-restricted-imports
 import { Theme } from '@mui/material/styles';
 import { Notifier } from './warning-dialog/styled';
 import WarningDialog from './warning-dialog';
-import DefaultWidgetManager from '../classes/default-widget-manager';
 import AppBar from './app-bar';
-import Capability from '../classes/action/capability';
 import { ToolbarActionType } from './toolbar/ToolbarActionType';
-import MapInfo from '../classes/model/map-info';
 import EditorToolbar from './editor-toolbar';
 import ZoomPanel from './zoom-panel';
 import IconButton from '@mui/material/IconButton';
@@ -45,78 +36,37 @@ import Box from '@mui/material/Box';
 import CloseIcon from '@mui/icons-material/Close';
 import { SpinnerCentered } from './style';
 import Typography from '@mui/material/Typography';
-
+import { useWidgetManager } from '../hooks/useWidgetManager';
-export type EditorOptions = {
+import { EditorConfiguration } from '../hooks/useEditor';
-  mode: EditorRenderMode;
-  locale: string;
-  zoom?: number;
-  enableKeyboardEvents: boolean;
-};
 
 type EditorProps = {
-  mapInfo: MapInfo;
-  options: EditorOptions;
-  persistenceManager: PersistenceManager;
-  onAction: (action: ToolbarActionType) => void;
-  onLoad?: (designer: Designer) => void;
   theme?: Theme;
+  onAction: (action: ToolbarActionType) => void;
+  onLoad: (designer: Designer) => void;
+  editor: EditorConfiguration;
   accountConfiguration?: React.ReactElement;
 };
 
-const Editor = ({
+const Editor = ({ editor, onAction, accountConfiguration }: EditorProps): ReactElement => {
-  mapInfo,
+  // We can access editor instance and other configuration from editor props
-  options,
+  const { model, mindplotRef, mapInfo, capability, options } = editor;
-  persistenceManager,
-  onAction,
-  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...
+  const { popoverOpen, setPopoverOpen, popoverTarget, widgetManager } = useWidgetManager();
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const [canvasUpdate, setCanvasUpdate] = useState<number>();
-  const [popoverOpen, setPopoverOpen, popoverTarget, widgetManager] =
-    DefaultWidgetManager.useCreate();
-  const capability = new Capability(options.mode, mapInfo.isLocked());
 
-  useEffect(() => {
+  // Initialize locale ...
-    if (!model) {
-      const model = new Model(mindplotRef.current);
-      model
-        .loadMindmap(mapInfo.getId(), persistenceManager, widgetManager)
-        .then(() => {
-          setCanvasUpdate(Date.now());
-          model.registerEvents(setCanvasUpdate, capability);
-        })
-        .catch((e) => {
-          console.error(e);
-          window.newrelic?.noticeError(e);
-        });
-      setModel(model);
-    }
-  }, [mindplotRef]);
-
-  useEffect(() => {
-    if (options.enableKeyboardEvents) {
-      DesignerKeyboard.resume();
-    } else {
-      DesignerKeyboard.pause();
-    }
-  }, [options.enableKeyboardEvents]);
-
-  // Initialize locate ...
   const locale = options.locale;
   const msg = I18nMsg.loadLocaleData(locale);
   return (
     <IntlProvider locale={locale} messages={msg}>
-      <AppBar
+      {options.enableAppBar ? (
-        model={model}
+        <AppBar
-        mapInfo={mapInfo}
+          model={model}
-        capability={capability}
+          mapInfo={mapInfo}
-        onAction={onAction}
+          capability={capability}
-        accountConfig={accountConfiguration}
+          onAction={onAction}
-      />
+          accountConfig={accountConfiguration}
+        />
+      ) : null}
 
       <Popover
         id="popover"
@@ -143,14 +93,16 @@ const Editor = ({
         {widgetManager.getEditorContent()}
       </Popover>
 
-      <EditorToolbar model={model} capability={capability} />
+      <div className="no-print">
-      <ZoomPanel model={model} capability={capability} />
+        <EditorToolbar model={model} capability={capability} />
+        <ZoomPanel model={model} capability={capability} />
+      </div>
 
       <mindplot-component
         ref={mindplotRef}
         id="mindmap-comp"
         mode={options.mode}
-        locale={options.locale}
+        locale={locale}
         zoom={options.zoom}
       />
 

packages/editor/src/hooks/useEditor/index.ts

@@ -0,0 +1,73 @@
+import { DesignerKeyboard, EditorRenderMode, PersistenceManager } from '@wisemapping/mindplot';
+import { useState, useRef, useEffect } from 'react';
+import Capability from '../../classes/action/capability';
+import MapInfo from '../../classes/model/map-info';
+import { useWidgetManager } from '../useWidgetManager';
+import Model from '../../classes/model/editor';
+
+export type EditorOptions = {
+  mode: EditorRenderMode;
+  locale: string;
+  zoom?: number;
+  enableKeyboardEvents: boolean;
+  enableAppBar?: boolean;
+  saveOnLoad?: boolean;
+};
+
+type UseEditorProps = {
+  mapInfo: MapInfo;
+  options: EditorOptions;
+  persistenceManager: PersistenceManager;
+};
+
+export interface EditorConfiguration {
+  model;
+  mindplotRef: React.MutableRefObject<unknown>;
+  mapInfo: MapInfo;
+  capability: Capability;
+  options: EditorOptions;
+}
+
+export const useEditor = ({
+  mapInfo,
+  options,
+  persistenceManager,
+}: UseEditorProps): EditorConfiguration => {
+  // We create model inside useEditor hook to instantiate everything outside Editor Component
+  const [model, setModel] = useState<Model | undefined>();
+  // useEditor hook creates mindplotRef
+  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
+  const [, setCanvasUpdate] = useState<number>();
+
+  const { widgetManager } = useWidgetManager();
+  const capability = new Capability(options.mode, mapInfo.isLocked());
+
+  useEffect(() => {
+    if (!model) {
+      const model = new Model(mindplotRef.current);
+      model
+        .loadMindmap(mapInfo.getId(), persistenceManager, widgetManager)
+        .then(() => {
+          setCanvasUpdate(Date.now());
+          model.registerEvents(setCanvasUpdate, capability);
+        })
+        .catch((e) => {
+          console.error(e);
+          window.newrelic?.noticeError(e);
+        });
+      setModel(model);
+    }
+  }, [mindplotRef]);
+
+  useEffect(() => {
+    if (options.enableKeyboardEvents) {
+      DesignerKeyboard.resume();
+    } else {
+      DesignerKeyboard.pause();
+    }
+  }, [options.enableKeyboardEvents]);
+
+  return { model, mindplotRef, mapInfo, capability, options };
+};

packages/editor/src/hooks/useWidgetManager/index.ts

@@ -0,0 +1,13 @@
+import DefaultWidgetManager from '../../classes/default-widget-manager';
+
+export const useWidgetManager = (): {
+  popoverOpen: boolean;
+  setPopoverOpen: (arg: boolean) => void;
+  popoverTarget: Element;
+  widgetManager: DefaultWidgetManager;
+} => {
+  const [popoverOpen, setPopoverOpen, popoverTarget, widgetManager] =
+    DefaultWidgetManager.useCreate();
+
+  return { popoverOpen, setPopoverOpen, popoverTarget, widgetManager };
+};

packages/editor/src/index.tsx

@@ -37,8 +37,8 @@ import {
 } from '@wisemapping/mindplot';
 
 import Editor from './components';
-import { EditorOptions } from './components';
 import MapInfo from './classes/model/map-info';
+import { EditorOptions, useEditor } from './hooks/useEditor';
 
 declare global {
   // used in mindplot
@@ -76,6 +76,7 @@ export {
   EditorOptions,
   MapInfo,
   XMLSerializerFactory,
+  useEditor,
 };
 
 export default Editor;

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

@@ -17,9 +17,9 @@
  */
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Editor, { EditorOptions } from '../../../../src/index';
 import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 import MapInfoImpl from './MapInfoImpl';
+import Editor, { EditorOptions, useEditor } from '../../../../src';
 
 const initialization = (designer: Designer) => {
   designer.addEvent('loadSuccess', () => {
@@ -31,20 +31,33 @@ const initialization = (designer: Designer) => {
 };
 
 const persistence = new LocalStorageManager('samples/{id}.wxml', false, false);
+
 const options: EditorOptions = {
   mode: 'edition-owner',
   locale: 'en',
   enableKeyboardEvents: true,
+  enableAppBar: true,
+  saveOnLoad: false,
+};
+
+const mapInfo = new MapInfoImpl('welcome', 'Develop Map Title', false);
+
+const Playground = () => {
+  const editor = useEditor({
+    mapInfo,
+    options,
+    persistenceManager: persistence,
+  });
+  return (
+    <Editor
+      editor={editor}
+      onAction={(action) => console.log('action called:', action)}
+      onLoad={initialization}
+    />
+  );
 };
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
-root.render(
+
-  <Editor
+root.render(<Playground />);
-    mapInfo={new MapInfoImpl('welcome', 'Develop Map Title', false)}
-    options={options}
-    persistenceManager={persistence}
-    onAction={(action) => console.log('action called:', action)}
-    onLoad={initialization}
-  />
-);

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

@@ -17,9 +17,9 @@
  */
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import Editor, { EditorOptions } from '../../../../src/index';
 import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 import MapInfoImpl from './MapInfoImpl';
+import Editor, { EditorOptions, useEditor } from '../../../../src';
 
 const initialization = (designer: Designer) => {
   designer.addEvent('loadSuccess', () => {
@@ -35,18 +35,26 @@ const options: EditorOptions = {
   mode: 'edition-editor',
   locale: 'en',
   enableKeyboardEvents: true,
+  enableAppBar: true,
 };
 
 const mapInfo = new MapInfoImpl('welcome', 'Develop WiseMapping', true, "It's locked !");
 
+const Playground = () => {
+  const editor = useEditor({
+    mapInfo,
+    options,
+    persistenceManager: persistence,
+  });
+  return (
+    <Editor
+      editor={editor}
+      onAction={(action) => console.log('action called:', action)}
+      onLoad={initialization}
+    />
+  );
+};
+
 const container = document.getElementById('root');
 const root = createRoot(container!);
-root.render(
+root.render(<Playground />);
-  <Editor
-    mapInfo={mapInfo}
-    options={options}
-    persistenceManager={persistence}
-    onAction={(action) => console.log('action called:', action)}
-    onLoad={initialization}
-  />,
-);

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

@@ -16,7 +16,7 @@
  *   limitations under the License.
  */
 import React from 'react';
-import Editor, { EditorOptions } from '../../../../src/index';
+import Editor, { EditorOptions, useEditor } from '../../../../src/index';
 import { createRoot } from 'react-dom/client';
 import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 import MapInfoImpl from './MapInfoImpl';
@@ -35,16 +35,27 @@ const options: EditorOptions = {
   mode: 'showcase',
   locale: 'en',
   enableKeyboardEvents: true,
+  enableAppBar: true,
+};
+
+const mapInfo = new MapInfoImpl('welcome', 'Develop Map Title', false);
+
+const Playground = () => {
+  const editor = useEditor({
+    mapInfo,
+    options,
+    persistenceManager: persistence,
+  });
+  return (
+    <Editor
+      editor={editor}
+      onAction={(action) => console.log('action called:', action)}
+      onLoad={initialization}
+    />
+  );
 };
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
-root.render(
+
-  <Editor
+root.render(<Playground />);
-    mapInfo={new MapInfoImpl('welcome', 'Develop Map Title', false)}
-    options={options}
-    persistenceManager={persistence}
-    onAction={(action) => console.log('action called:', action)}
-    onLoad={initialization}
-  />,
-);

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

@@ -1,9 +1,9 @@
 import '../css/viewmode.css';
 import React from 'react';
-import Editor, { EditorOptions } from '../../../../src/index';
 import { LocalStorageManager, Designer } from '@wisemapping/mindplot';
 import MapInfoImpl from './MapInfoImpl';
 import { createRoot } from 'react-dom/client';
+import Editor, { EditorOptions, useEditor } from '../../../../src';
 
 const initialization = (designer: Designer) => {
   designer.addEvent('loadSuccess', () => {
@@ -36,16 +36,27 @@ const options: EditorOptions = {
   mode: 'viewonly',
   locale: 'en',
   enableKeyboardEvents: true,
+  enableAppBar: false,
+};
+
+const mapInfo = new MapInfoImpl(mapId, 'Develop Map Title', false);
+
+const Playground = () => {
+  const editor = useEditor({
+    mapInfo,
+    options,
+    persistenceManager: persistence,
+  });
+  return (
+    <Editor
+      editor={editor}
+      onAction={(action) => console.log('action called:', action)}
+      onLoad={initialization}
+    />
+  );
 };
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
-root.render(
+
-  <Editor
+root.render(<Playground />);
-    mapInfo={new MapInfoImpl(mapId, 'Develop Map Title', false)}
-    options={options}
-    persistenceManager={persistence}
-    onAction={(action) => console.log('action called:', action)}
-    onLoad={initialization}
-  />,
-);

packages/mindplot/package.json

@@ -32,8 +32,8 @@
   },
   "dependencies": {
     "@types/jquery": "^3.5.11",
-    "@wisemapping/core-js": "^0.6.0",
+    "@wisemapping/core-js": "workspace:*",
-    "@wisemapping/web2d": "^0.6.1",
+    "@wisemapping/web2d": "workspace:*",
     "emoji-picker-react": "^4.4.3",
     "jquery": "3.6.0",
     "lodash": "^4.17.21",

packages/web2d/package.json

@@ -38,7 +38,7 @@
     "cypress-image-snapshot": "^4.0.1"
   },
   "peerDependencies": {
-    "@wisemapping/core-js": "^0.6.0",
+    "@wisemapping/core-js": "workspace:*",
     "jquery": "^3.6.0"
   },
   "publishConfig": {

packages/webapp/package.json

@@ -28,7 +28,7 @@
         "@mui/lab": "^5.0.0-alpha.137",
         "@mui/material": "^5.14.2",
         "@reduxjs/toolkit": "^1.5.0",
-        "@wisemapping/editor": "^0.6.1",
+        "@wisemapping/editor": "workspace:*",
         "axios": "^0.27.2",
         "dayjs": "^1.10.7",
         "react": "^18.2.0",

packages/webapp/src/components/maps-page/account-menu/index.tsx

@@ -28,7 +28,7 @@ const AccountMenu = (): React.ReactElement => {
     setAnchorEl(null);
   };
 
-  const handleLogout = (event: MouseEvent) => {
+  const handleLogout = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
     const elem = document.getElementById('logoutFrom') as HTMLFormElement;
     elem.submit();

yarn.lock

@@ -1533,6 +1533,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/runtime@npm:^7.23.2":
+  version: 7.23.4
+  resolution: "@babel/runtime@npm:7.23.4"
+  dependencies:
+    regenerator-runtime: ^0.14.0
+  checksum: 8eb6a6b2367f7d60e7f7dd83f477cc2e2fdb169e5460694d7614ce5c730e83324bcf29251b70940068e757ad1ee56ff8073a372260d90cad55f18a825caf97cd
+  languageName: node
+  linkType: hard
+
 "@babel/runtime@npm:~7.5.4":
   version: 7.5.5
   resolution: "@babel/runtime@npm:7.5.5"
@@ -1797,7 +1806,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/react@npm:^11.11.1":
+"@emotion/react@npm:^11.10.5, @emotion/react@npm:^11.11.1":
   version: 11.11.1
   resolution: "@emotion/react@npm:11.11.1"
   dependencies:
@@ -1838,7 +1847,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled@npm:^11.11.0":
+"@emotion/styled@npm:^11.10.5, @emotion/styled@npm:^11.11.0":
   version: 11.11.0
   resolution: "@emotion/styled@npm:11.11.0"
   dependencies:
@@ -1937,6 +1946,44 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.4.2":
+  version: 1.5.0
+  resolution: "@floating-ui/core@npm:1.5.0"
+  dependencies:
+    "@floating-ui/utils": ^0.1.3
+  checksum: 54b4fe26b3c228746ac5589f97303abf158b80aa5f8b99027259decd68d1c2030c4c637648ebd33dfe78a4212699453bc2bd7537fd5a594d3bd3e63d362f666f
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.5.1":
+  version: 1.5.3
+  resolution: "@floating-ui/dom@npm:1.5.3"
+  dependencies:
+    "@floating-ui/core": ^1.4.2
+    "@floating-ui/utils": ^0.1.3
+  checksum: 00053742064aac70957f0bd5c1542caafb3bfe9716588bfe1d409fef72a67ed5e60450d08eb492a77f78c22ed1ce4f7955873cc72bf9f9caf2b0f43ae3561c21
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.0.4":
+  version: 2.0.4
+  resolution: "@floating-ui/react-dom@npm:2.0.4"
+  dependencies:
+    "@floating-ui/dom": ^1.5.1
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 91b2369e25f84888486e48c1656117468248906034ed482d411bb9ed1061b908dd32435b4ca3d0cd0ca6083291510a98ce74d76c671d5cc25b0c41e5fa824bae
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.1.3":
+  version: 0.1.6
+  resolution: "@floating-ui/utils@npm:0.1.6"
+  checksum: b34d4b5470869727f52e312e08272edef985ba5a450a76de0917ba0a9c6f5df2bdbeb99448e2c60f39b177fb8981c772ff1831424e75123471a27ebd5b52c1eb
+  languageName: node
+  linkType: hard
+
 "@formatjs/cli@npm:^6.0.4":
   version: 6.0.4
   resolution: "@formatjs/cli@npm:6.0.4"
@@ -2602,6 +2649,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/base@npm:5.0.0-beta.24":
+  version: 5.0.0-beta.24
+  resolution: "@mui/base@npm:5.0.0-beta.24"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+    "@floating-ui/react-dom": ^2.0.4
+    "@mui/types": ^7.2.9
+    "@mui/utils": ^5.14.18
+    "@popperjs/core": ^2.11.8
+    clsx: ^2.0.0
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: dbd6eb0af7cb89389b1dccd6a84d07128c41f60d297d8f1d484919950c9b45a5d8767042b622c74e311bce0368ee3f760afb34d80ad97af61f5b5650ae990c60
+  languageName: node
+  linkType: hard
+
 "@mui/base@npm:5.0.0-beta.8":
   version: 5.0.0-beta.8
   resolution: "@mui/base@npm:5.0.0-beta.8"
@@ -2625,6 +2694,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/core-downloads-tracker@npm:^5.14.18":
+  version: 5.14.18
+  resolution: "@mui/core-downloads-tracker@npm:5.14.18"
+  checksum: 3d367797282e4b93eacee997667d62bc4eeac979e9664724e9db8d632278d8629f2a141894cf53d706f1d2a9f19965bffe2858aa2bc9833722e674cd560b896e
+  languageName: node
+  linkType: hard
+
 "@mui/core-downloads-tracker@npm:^5.14.2":
   version: 5.14.2
   resolution: "@mui/core-downloads-tracker@npm:5.14.2"
@@ -2678,6 +2754,39 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/material@npm:^5.10.11":
+  version: 5.14.18
+  resolution: "@mui/material@npm:5.14.18"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+    "@mui/base": 5.0.0-beta.24
+    "@mui/core-downloads-tracker": ^5.14.18
+    "@mui/system": ^5.14.18
+    "@mui/types": ^7.2.9
+    "@mui/utils": ^5.14.18
+    "@types/react-transition-group": ^4.4.8
+    clsx: ^2.0.0
+    csstype: ^3.1.2
+    prop-types: ^15.8.1
+    react-is: ^18.2.0
+    react-transition-group: ^4.4.5
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+    react-dom: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 488322f09638a71bb5d4bb5c027dde69d5cf89bcfd433594e3b90fea9fefa302bc85b9d2bf386493bf68d360107b59c6d148f46a68477e7f472f4f2d14d698a3
+  languageName: node
+  linkType: hard
+
 "@mui/material@npm:^5.14.2":
   version: 5.14.2
   resolution: "@mui/material@npm:5.14.2"
@@ -2728,6 +2837,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/private-theming@npm:^5.14.18":
+  version: 5.14.18
+  resolution: "@mui/private-theming@npm:5.14.18"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+    "@mui/utils": ^5.14.18
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: e7ba8e945f589db16ed05d507b0821d2e07b3d760bf78c9f745a75d75b5a94d1e546278629de15b090de289a9244591bfa2c09bb9f9f8679fb4e1d8cec360833
+  languageName: node
+  linkType: hard
+
 "@mui/styled-engine@npm:^5.13.2":
   version: 5.13.2
   resolution: "@mui/styled-engine@npm:5.13.2"
@@ -2749,6 +2875,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/styled-engine@npm:^5.14.18":
+  version: 5.14.18
+  resolution: "@mui/styled-engine@npm:5.14.18"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+    "@emotion/cache": ^11.11.0
+    csstype: ^3.1.2
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@emotion/react": ^11.4.1
+    "@emotion/styled": ^11.3.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+  checksum: 6eba307d95ef462f8b80aaa50ec1db7409d19cead985eba28e86aec066ad4bc70b0daa6d89158a7aae88ea43d614cace5f890cbebe0d8636573e894b7da9cae1
+  languageName: node
+  linkType: hard
+
 "@mui/system@npm:^5.14.1":
   version: 5.14.1
   resolution: "@mui/system@npm:5.14.1"
@@ -2777,6 +2924,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/system@npm:^5.14.18":
+  version: 5.14.18
+  resolution: "@mui/system@npm:5.14.18"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+    "@mui/private-theming": ^5.14.18
+    "@mui/styled-engine": ^5.14.18
+    "@mui/types": ^7.2.9
+    "@mui/utils": ^5.14.18
+    clsx: ^2.0.0
+    csstype: ^3.1.2
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@emotion/react": ^11.5.0
+    "@emotion/styled": ^11.3.0
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@emotion/react":
+      optional: true
+    "@emotion/styled":
+      optional: true
+    "@types/react":
+      optional: true
+  checksum: 8f7c4f3555ee64467826e1a40cfdb34b5c02520fd9f27779b8e6aa97cb9bbd27d98386a194d2e4c44b148babe5f67e3a715f8a09c03a1d71f2f14ddf60045174
+  languageName: node
+  linkType: hard
+
 "@mui/types@npm:^7.2.4":
   version: 7.2.4
   resolution: "@mui/types@npm:7.2.4"
@@ -2789,6 +2964,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/types@npm:^7.2.9":
+  version: 7.2.9
+  resolution: "@mui/types@npm:7.2.9"
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 4888a1cf9a1adbae1c2f53ba9f8a0cf23eb5e0954bca00b958c240c87b5287771cb5e99bedb61a2c04f5dcbdef13a5b1f238153e98d8959ba51c5470db2c4b32
+  languageName: node
+  linkType: hard
+
 "@mui/utils@npm:^5.13.7, @mui/utils@npm:^5.14.1":
   version: 5.14.1
   resolution: "@mui/utils@npm:5.14.1"
@@ -2804,6 +2991,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mui/utils@npm:^5.14.18":
+  version: 5.14.18
+  resolution: "@mui/utils@npm:5.14.18"
+  dependencies:
+    "@babel/runtime": ^7.23.2
+    "@types/prop-types": ^15.7.10
+    prop-types: ^15.8.1
+    react-is: ^18.2.0
+  peerDependencies:
+    "@types/react": ^17.0.0 || ^18.0.0
+    react: ^17.0.0 || ^18.0.0
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: f24badcb6b026b392b94919f65c7f3bea6cfb0f741c1b8ebd74b02bba9ffc61f72e35bdea887e47dfd97d37ff465863aa29c7c5cfd33fb83224f4ff2300432b3
+  languageName: node
+  linkType: hard
+
 "@nodelib/fs.scandir@npm:2.1.5":
   version: 2.1.5
   resolution: "@nodelib/fs.scandir@npm:2.1.5"
@@ -3270,7 +3475,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sideway/formula@npm:^3.0.0":
+"@sideway/formula@npm:^3.0.0, @sideway/formula@npm:^3.0.1":
   version: 3.0.1
   resolution: "@sideway/formula@npm:3.0.1"
   checksum: e4beeebc9dbe2ff4ef0def15cec0165e00d1612e3d7cea0bc9ce5175c3263fc2c818b679bd558957f49400ee7be9d4e5ac90487e1625b4932e15c4aa7919c57a
@@ -5095,6 +5300,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/prop-types@npm:^15.7.10":
+  version: 15.7.10
+  resolution: "@types/prop-types@npm:15.7.10"
+  checksum: 39ecc2d9e439ed16b32937a08d98b84ed4a70f53bcd52c8564c0cd7a36fe1004ca83a1fb94b13c1b7a5c048760f06445c3c6a91a6972c8eff652c0b50c9424b1
+  languageName: node
+  linkType: hard
+
 "@types/qs@npm:*, @types/qs@npm:^6.9.5":
   version: 6.9.7
   resolution: "@types/qs@npm:6.9.7"
@@ -5148,6 +5360,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/react-transition-group@npm:^4.4.8":
+  version: 4.4.9
+  resolution: "@types/react-transition-group@npm:4.4.9"
+  dependencies:
+    "@types/react": "*"
+  checksum: be9e256e53919a7cf3b4a075f6d01c0a2dd3a67911dd28276aa6158be4beade4ca5327cbf1f096c28b413e04989f069122319b02e5a09c280d903a0accea9ead
+  languageName: node
+  linkType: hard
+
 "@types/react@npm:*, @types/react@npm:16 || 17 || 18":
   version: 18.0.27
   resolution: "@types/react@npm:18.0.27"
@@ -5909,42 +6130,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@wisemapping/core-js@^0.6.0, @wisemapping/core-js@workspace:packages/core-js":
+"@wisemapping/core-js@workspace:*, @wisemapping/core-js@workspace:packages/core-js":
   version: 0.0.0-use.local
   resolution: "@wisemapping/core-js@workspace:packages/core-js"
   languageName: unknown
   linkType: soft
 
-"@wisemapping/editor@^0.6.1, @wisemapping/editor@workspace:packages/editor":
+"@wisemapping/editor@workspace:*, @wisemapping/editor@workspace:packages/editor":
   version: 0.0.0-use.local
   resolution: "@wisemapping/editor@workspace:packages/editor"
   dependencies:
+    "@emotion/react": ^11.10.5
+    "@emotion/styled": ^11.10.5
     "@formatjs/cli": ^6.0.4
+    "@mui/icons-material": ^5.9.3
+    "@mui/material": ^5.10.11
     "@testing-library/react": ^13.4.0
     "@types/cypress-image-snapshot": ^3.1.6
-    "@wisemapping/mindplot": ^5.1.1
+    "@wisemapping/mindplot": "workspace:*"
     babel-polyfill: ^6.26.0
     cypress: ^12.3.0
     cypress-image-snapshot: ^4.0.1
-    emoji-picker-react: ^4.4.7
+    emoji-picker-react: 4.5.2
     jest-transform-stub: ^2.0.0
     react: ^18.2.0
     react-color: ^2.19.3
     react-dom: ^18.2.0
+    react-intl: ^6.2.1
     react-loader-spinner: ^5.3.4
+    start-server-and-test: ^2.0.0
+    styled-components: ^5.3.6
   peerDependencies:
-    "@emotion/react": ^11.10.5
-    "@emotion/styled": ^11.10.5
-    "@mui/icons-material": ^5.9.3
-    "@mui/material": ^5.10.11
     react: ^18.2.0
     react-dom: ^18.2.0
-    react-intl: ^6.2.1
-    styled-components: ^5.3.6
   languageName: unknown
   linkType: soft
 
-"@wisemapping/mindplot@^5.1.1, @wisemapping/mindplot@workspace:packages/mindplot":
+"@wisemapping/mindplot@workspace:*, @wisemapping/mindplot@workspace:packages/mindplot":
   version: 0.0.0-use.local
   resolution: "@wisemapping/mindplot@workspace:packages/mindplot"
   dependencies:
@@ -5960,8 +6182,8 @@ __metadata:
     "@storybook/manager-webpack4": ^6.5.16
     "@storybook/testing-library": ^0.0.13
     "@types/jquery": ^3.5.11
-    "@wisemapping/core-js": ^0.6.0
+    "@wisemapping/core-js": "workspace:*"
-    "@wisemapping/web2d": ^0.6.1
+    "@wisemapping/web2d": "workspace:*"
     babel-loader: ^8.3.0
     blob-polyfill: ^6.0.20211015
     cypress: ^12.3.0
@@ -5975,7 +6197,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@wisemapping/web2d@^0.6.1, @wisemapping/web2d@workspace:packages/web2d":
+"@wisemapping/web2d@workspace:*, @wisemapping/web2d@workspace:packages/web2d":
   version: 0.0.0-use.local
   resolution: "@wisemapping/web2d@workspace:packages/web2d"
   dependencies:
@@ -5992,7 +6214,7 @@ __metadata:
     cypress: 12.17.2
     cypress-image-snapshot: ^4.0.1
   peerDependencies:
-    "@wisemapping/core-js": ^0.6.0
+    "@wisemapping/core-js": "workspace:*"
     jquery: ^3.6.0
   languageName: unknown
   linkType: soft
@@ -6011,7 +6233,7 @@ __metadata:
     "@testing-library/cypress": ^8.0.3
     "@types/testing-library__cypress": ^5.0.8
     "@welldone-software/why-did-you-render": ^7.0.1
-    "@wisemapping/editor": ^0.6.1
+    "@wisemapping/editor": "workspace:*"
     axios: ^0.27.2
     cypress: ^12.3.0
     cypress-image-snapshot: ^4.0.1
@@ -6885,6 +7107,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^1.6.1":
+  version: 1.6.2
+  resolution: "axios@npm:1.6.2"
+  dependencies:
+    follow-redirects: ^1.15.0
+    form-data: ^4.0.0
+    proxy-from-env: ^1.1.0
+  checksum: 4a7429e2b784be0f2902ca2680964391eae7236faa3967715f30ea45464b98ae3f1c6f631303b13dfe721b17126b01f486c7644b9ef276bfc63112db9fd379f8
+  languageName: node
+  linkType: hard
+
 "babel-jest@npm:^29.4.1":
   version: 29.4.1
   resolution: "babel-jest@npm:29.4.1"
@@ -8210,6 +8443,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clsx@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "clsx@npm:2.0.0"
+  checksum: a2cfb2351b254611acf92faa0daf15220f4cd648bdf96ce369d729813b85336993871a4bf6978ddea2b81b5a130478339c20d9d0b5c6fc287e5147f0c059276e
+  languageName: node
+  linkType: hard
+
 "cmd-shim@npm:6.0.1":
   version: 6.0.1
   resolution: "cmd-shim@npm:6.0.1"
@@ -9827,7 +10067,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"emoji-picker-react@npm:^4.4.3, emoji-picker-react@npm:^4.4.7":
+"emoji-picker-react@npm:4.5.2":
+  version: 4.5.2
+  resolution: "emoji-picker-react@npm:4.5.2"
+  dependencies:
+    clsx: ^1.2.1
+  peerDependencies:
+    react: ">=16"
+  checksum: b0f8aa3347cf804abcc209b5a707319d405f90bfc2a27a3b98900f2f8233b1a967328cca034b930d388d4a9480d7c12b2ded795976a554d9962eadaa607aaa06
+  languageName: node
+  linkType: hard
+
+"emoji-picker-react@npm:^4.4.3":
   version: 4.4.7
   resolution: "emoji-picker-react@npm:4.4.7"
   dependencies:
@@ -14358,6 +14609,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"joi@npm:^17.11.0":
+  version: 17.11.0
+  resolution: "joi@npm:17.11.0"
+  dependencies:
+    "@hapi/hoek": ^9.0.0
+    "@hapi/topo": ^5.0.0
+    "@sideway/address": ^4.1.3
+    "@sideway/formula": ^3.0.1
+    "@sideway/pinpoint": ^2.0.0
+  checksum: 3a4e9ecba345cdafe585e7ed8270a44b39718e11dff3749aa27e0001a63d578b75100c062be28e6f48f960b594864034e7a13833f33fbd7ad56d5ce6b617f9bf
+  languageName: node
+  linkType: hard
+
 "joi@npm:^17.7.0":
   version: 17.7.0
   resolution: "joi@npm:17.7.0"
@@ -18745,6 +19009,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regenerator-runtime@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "regenerator-runtime@npm:0.14.0"
+  checksum: 1c977ad82a82a4412e4f639d65d22be376d3ebdd30da2c003eeafdaaacd03fc00c2320f18120007ee700900979284fc78a9f00da7fb593f6e6eeebc673fba9a3
+  languageName: node
+  linkType: hard
+
 "regenerator-transform@npm:^0.15.1":
   version: 0.15.1
   resolution: "regenerator-transform@npm:0.15.1"
@@ -19226,6 +19497,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"rxjs@npm:^7.8.1":
+  version: 7.8.1
+  resolution: "rxjs@npm:7.8.1"
+  dependencies:
+    tslib: ^2.1.0
+  checksum: de4b53db1063e618ec2eca0f7965d9137cabe98cf6be9272efe6c86b47c17b987383df8574861bcced18ebd590764125a901d5506082be84a8b8e364bf05f119
+  languageName: node
+  linkType: hard
+
 "safe-buffer@npm:5.1.1":
   version: 5.1.1
   resolution: "safe-buffer@npm:5.1.1"
@@ -20118,6 +20398,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"start-server-and-test@npm:^2.0.0":
+  version: 2.0.3
+  resolution: "start-server-and-test@npm:2.0.3"
+  dependencies:
+    arg: ^5.0.2
+    bluebird: 3.7.2
+    check-more-types: 2.24.0
+    debug: 4.3.4
+    execa: 5.1.1
+    lazy-ass: 1.6.0
+    ps-tree: 1.2.0
+    wait-on: 7.2.0
+  bin:
+    server-test: src/bin/start.js
+    start-server-and-test: src/bin/start.js
+    start-test: src/bin/start.js
+  checksum: 8e2844a1fab631e1ad83e58d903e8425cd6d2c2cbbc79f71b72a15dbc7d90e6e340bb9133c910d8f3da8b55c737cf579afb581b4551ae7a2392450a78180fa53
+  languageName: node
+  linkType: hard
+
 "state-toggle@npm:^1.0.0":
   version: 1.0.3
   resolution: "state-toggle@npm:1.0.3"
@@ -21977,6 +22277,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"wait-on@npm:7.2.0":
+  version: 7.2.0
+  resolution: "wait-on@npm:7.2.0"
+  dependencies:
+    axios: ^1.6.1
+    joi: ^17.11.0
+    lodash: ^4.17.21
+    minimist: ^1.2.8
+    rxjs: ^7.8.1
+  bin:
+    wait-on: bin/wait-on
+  checksum: 69ec1432bb4479363fdd71f2f3f501a98aa356a562781108a4a89ef8fdf1e3d5fd0c2fd56c4cc5902abbb662065f1f22d4e436a1e6fc9331ce8b575eb023325e
+  languageName: node
+  linkType: hard
+
 "walker@npm:^1.0.7, walker@npm:^1.0.8, walker@npm:~1.0.5":
   version: 1.0.8
   resolution: "walker@npm:1.0.8"