Implement setEditor + Add some macros

src/Components/App/App.tsx

@@ -1,4 +1,5 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
+import { events as EVENTS } from '../../Events/AppEvents';
 import { MainMenu } from '../MainMenu/MainMenu';
 import { ContainerModel } from '../../Interfaces/IContainerModel';
 import { Editor } from '../Editor/Editor';
@@ -40,8 +41,39 @@ function UseHTTPGETStatePreloading(
   });
 };
 
+function UseCustomEvents(
+  root: Element | Document,
+  appRef: React.RefObject<HTMLDivElement>,
+  setEditor: (newState: IEditorState) => void
+): void {
+  useEffect(() => {
+    const funcs = new Map<string, () => void>();
+    for (const event of EVENTS) {
+      function Func(eventInitDict?: CustomEventInit): void {
+        return event.func(
+          root,
+          setEditor,
+          eventInitDict
+        );
+      }
+      appRef.current?.addEventListener(event.name, Func);
+      funcs.set(event.name, Func);
+    }
+    return () => {
+      for (const event of EVENTS) {
+        const func = funcs.get(event.name);
+        if (func === undefined) {
+          continue;
+        }
+        appRef.current?.removeEventListener(event.name, func);
+      }
+    };
+  });
+}
+
 export function App(props: IAppProps): JSX.Element {
   const [isLoaded, setLoaded] = useState<boolean>(false);
+  const appRef = useRef<HTMLDivElement>(null);
 
   const defaultMainContainer = new ContainerModel(
     null,
@@ -61,11 +93,20 @@ export function App(props: IAppProps): JSX.Element {
     historyCurrentStep: 0
   });
 
+  UseCustomEvents(
+    props.root,
+    appRef,
+    setEditorState
+  );
+
   UseHTTPGETStatePreloading(isLoaded, setEditorState, setLoaded);
 
   if (isLoaded) {
     return (
-      <div>
+      <div
+        ref={appRef}
+        className='App'
+      >
         <Editor
           root={props.root}
           configuration={editorState.configuration}
@@ -77,7 +118,10 @@ export function App(props: IAppProps): JSX.Element {
   }
 
   return (
-    <div className='mainmenu-bg'>
+    <div
+      ref={appRef}
+      className='App mainmenu-bg'
+    >
       <MainMenu
         newEditor={() => NewEditor(
           setEditorState, setLoaded

src/Events/AppEvents.ts

@@ -0,0 +1,25 @@
+import { IEditorState } from '../Interfaces/IEditorState';
+
+export interface IAppEvent {
+  name: string
+  func: (
+    root: Element | Document,
+    setEditor: (newState: IEditorState) => void,
+    eventInitDict?: CustomEventInit
+  ) => void
+}
+
+export const events: IAppEvent[] = [
+  { name: 'setEditor', func: SetEditor }
+];
+
+function SetEditor(
+  root: Element | Document,
+  setEditor: (newState: IEditorState) => void,
+  eventInitDict?: CustomEventInit
+): void {
+  const editor: IEditorState = eventInitDict?.detail;
+  setEditor(editor);
+  const customEvent = new CustomEvent<IEditorState>('setEditor', { detail: editor });
+  root.dispatchEvent(customEvent);
+}

src/Events/EditorEvents.ts

@@ -19,7 +19,7 @@ export interface IEditorEvent {
 
 export const events: IEditorEvent[] = [
   { name: 'getEditorState', func: GetEditorState },
-  { name: 'setEditorState', func: SetEditorState },
+  { name: 'setHistory', func: SetHistory },
   { name: 'reviveEditorState', func: ReviveEditorState },
   { name: 'reviveHistory', func: ReviveHistory },
   { name: 'getCurrentHistoryState', func: GetCurrentHistoryState },
@@ -41,15 +41,14 @@ function GetEditorState(root: Element | Document,
   root.dispatchEvent(customEvent);
 }
 
-// TODO: In the near future, implement a real SetEditorState which also change IConfiguration
-function SetEditorState(root: Element | Document,
+function SetHistory(root: Element | Document,
   editorState: IEditorState,
   setNewHistory: (newHistory: IHistoryState[]) => void,
   eventInitDict?: CustomEventInit): void {
   const history: IHistoryState[] = eventInitDict?.detail;
   ReviveHistoryAction(history);
   setNewHistory(history);
-  const customEvent = new CustomEvent<IEditorState>('setEditorState', { detail: editorState });
+  const customEvent = new CustomEvent<IEditorState>('setHistory', { detail: editorState });
   root.dispatchEvent(customEvent);
 }