Merged PR 225: Implement translations

Implement translations with useContext in React
+Add events to allow changing the language in the app
+Refactor AppEvents
+Redesign vertical bars in elements

src/Events/AppEvents.ts

@@ -2,17 +2,22 @@ import { useEffect } from 'react';
 import { IConfiguration } from '../Interfaces/IConfiguration';
 import { IEditorState } from '../Interfaces/IEditorState';
 import { IHistoryState } from '../Interfaces/IHistoryState';
+import { ILanguage } from '../Interfaces/ILanguage';
+import { languageOptions, translations } from '../Translations/Translations';
 import { GetDefaultEditorState as GetDefaultEditorStateAction } from '../utils/default';
 import { Revive, ReviveHistory as ReviveHistoryAction } from '../utils/saveload';
 
+interface IAppEventParams {
+  root: Element | Document
+  languageContext: ILanguage
+  setEditor: (newState: IEditorState) => void
+  setLoaded: (loaded: boolean) => void
+  eventInitDict?: CustomEventInit
+}
+
 export interface IAppEvent {
   name: string
-  func: (
-    root: Element | Document,
-    setEditor: (newState: IEditorState) => void,
-    setLoaded: (loaded: boolean) => void,
-    eventInitDict?: CustomEventInit
-  ) => void
+  func: (params: IAppEventParams) => void
 }
 
 export const events: IAppEvent[] = [
@@ -20,12 +25,16 @@ export const events: IAppEvent[] = [
   { name: 'setLoaded', func: SetLoaded },
   { name: 'reviveEditorState', func: ReviveEditorState },
   { name: 'reviveHistory', func: ReviveHistory },
-  { name: 'getDefaultEditorState', func: GetDefaultEditorState }
+  { name: 'getDefaultEditorState', func: GetDefaultEditorState },
+  { name: 'addLanguage', func: AddLanguage },
+  { name: 'setLanguage', func: SetLanguage },
+  { name: 'getLanguages', func: GetLanguages }
 ];
 
 export function UseCustomEvents(
   root: Element | Document,
   appRef: React.RefObject<HTMLDivElement>,
+  languageContext: ILanguage,
   setEditor: (newState: IEditorState) => void,
   setLoaded: (loaded: boolean) => void
 ): void {
@@ -33,12 +42,13 @@ export function UseCustomEvents(
     const funcs = new Map<string, () => void>();
     for (const event of events) {
       function Func(eventInitDict?: CustomEventInit): void {
-        return event.func(
+        return event.func({
           root,
+          languageContext,
           setEditor,
           setLoaded,
           eventInitDict
-        );
+        });
       }
       appRef.current?.addEventListener(event.name, Func);
       funcs.set(event.name, Func);
@@ -55,57 +65,85 @@ export function UseCustomEvents(
   });
 }
 
-function SetEditor(
-  root: Element | Document,
-  setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
-  eventInitDict?: CustomEventInit
-): void {
+function SetEditor({
+  root,
+  setEditor,
+  eventInitDict
+}: IAppEventParams): void {
   const editor: IEditorState = eventInitDict?.detail;
   setEditor(editor);
   const customEvent = new CustomEvent<IEditorState>('setEditor', { detail: editor });
   root.dispatchEvent(customEvent);
 }
 
-function SetLoaded(
-  root: Element | Document,
-  setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
-  eventInitDict?: CustomEventInit
-): void {
+function SetLoaded({
+  setLoaded,
+  eventInitDict
+}: IAppEventParams): void {
   const isLoaded: boolean = eventInitDict?.detail;
   setLoaded(isLoaded);
 }
 
-function ReviveEditorState(
-  root: Element | Document,
-  setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
-  eventInitDict?: CustomEventInit): void {
+function ReviveEditorState({
+  root,
+  eventInitDict
+}: IAppEventParams): void {
   const anEditorState: IEditorState = eventInitDict?.detail;
   Revive(anEditorState);
   const customEvent = new CustomEvent<IEditorState>('reviveEditorState', { detail: anEditorState });
   root.dispatchEvent(customEvent);
 }
 
-function ReviveHistory(
-  root: Element | Document,
-  setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
-  eventInitDict?: CustomEventInit): void {
+function ReviveHistory({
+  root,
+  eventInitDict
+}: IAppEventParams): void {
   const history: IHistoryState[] = eventInitDict?.detail;
   ReviveHistoryAction(history);
   const customEvent = new CustomEvent<IHistoryState[]>('reviveHistory', { detail: history });
   root.dispatchEvent(customEvent);
 }
 
-function GetDefaultEditorState(
-  root: Element | Document,
-  setEditor: (newState: IEditorState) => void,
-  setLoaded: (loaded: boolean) => void,
-  eventInitDict?: CustomEventInit): void {
+function GetDefaultEditorState({
+  root,
+  eventInitDict
+}: IAppEventParams): void {
   const configuration: IConfiguration = eventInitDict?.detail;
   const editorState = GetDefaultEditorStateAction(configuration);
   const customEvent = new CustomEvent<IEditorState>('getDefaultEditorState', { detail: editorState });
   root.dispatchEvent(customEvent);
 }
+
+function AddLanguage({
+  root,
+  eventInitDict
+}: IAppEventParams): void {
+  const language: ILanguage = eventInitDict?.detail.language;
+  const option: string = eventInitDict?.detail.option;
+  languageOptions[language.language] = option;
+  translations[language.language] = language.dictionary;
+  const customEvent = new CustomEvent('addLanguage');
+  root.dispatchEvent(customEvent);
+}
+
+function SetLanguage({
+  root,
+  languageContext,
+  eventInitDict
+}: IAppEventParams): void {
+  const language: string = eventInitDict?.detail;
+  let success = false;
+  if (languageContext.languageChange !== undefined) {
+    languageContext.languageChange(language);
+    success = true;
+  }
+  const customEvent = new CustomEvent<boolean>('setLanguage', { detail: success });
+  root.dispatchEvent(customEvent);
+}
+
+function GetLanguages({
+  root
+}: IAppEventParams): void {
+  const customEvent = new CustomEvent<Record<string, Record<string, string>>>('getLanguages', { detail: translations });
+  root.dispatchEvent(customEvent);
+}

src/Events/EditorEvents.ts

@@ -9,6 +9,7 @@ import { IHistoryState } from '../Interfaces/IHistoryState';
 import { FindContainerById } from '../utils/itertools';
 import { GetCircularReplacer } from '../utils/saveload';
 
+// TODO: set the params of func in an interface
 export interface IEditorEvent {
   name: string
   func: (