Fix reading of cloze elements

- Now correctly exchanges the simple ui element objects with constructed 
objects.
- Also remove the unnecessary variable childElements. The child elements 
can be gotten from the parts. As it is done in the component method 
getFormElementModelChildren.

projects/common/ui-elements/cloze/cloze-element.ts

@@ -13,22 +13,21 @@ import { TextFieldElement } from '../text-field/text-field-element';
 import { TextAreaElement } from '../text-area/text-area-element';
 import { CheckboxElement } from '../checkbox/checkbox-element';
 import { DropdownElement } from '../dropdown/dropdown-element';
-import { DropListElement } from '../drop-list/drop-list';
 import { initFontElement, initPositionedElement } from '../../util/unit-interface-initializer';
 import { TextFieldSimpleElement } from '../textfield-simple/text-field-simple-element';
 import { DropListSimpleElement } from '../drop-list-simple/drop-list-simple';
 
 // TODO styles like em dont continue after inserted components
 
+export type ClozePart = {
+  type: string;
+  value: string | UIElement;
+  style?: string;
+};
+
 export class ClozeElement extends CompoundElement implements PositionedElement, FontElement {
   text: string = '<p>Lorem ipsum dolor \\z sdfsdf \\i sdfsdf</p>';
-  parts: {
-    type: string;
-    value: string | UIElement;
-    style?: string;
-  }[][] = [];
-
-  childElements: InputElement[] = [];
+  parts: ClozePart[][] = [];
 
   positionProps: PositionProperties;
   fontProps: FontProperties;
@@ -39,6 +38,16 @@ export class ClozeElement extends CompoundElement implements PositionedElement,
     this.positionProps = initPositionedElement(serializedElement);
     this.fontProps = initFontElement(serializedElement);
 
+    if (serializedElement?.parts) {
+      serializedElement?.parts.forEach((subParts: ClozePart[]) => {
+        subParts.forEach((part: ClozePart) => {
+          if (!['p', 'h1', 'h2', 'h3', 'h4'].includes(part.type)) {
+            part.value = ClozeElement.createElement(part.value as UIElement);
+          }
+        });
+      });
+    }
+
     this.width = serializedElement.width || 450;
     this.height = serializedElement.height || 200;
   }
@@ -80,8 +89,7 @@ export class ClozeElement extends CompoundElement implements PositionedElement,
         style: element.style.cssText
       });
 
-      const newElement = ClozeElement.createElement(nextElementType);
-      this.childElements.push(newElement);
+      const newElement = ClozeElement.createElement({ type: nextElementType } as UIElement);
       this.parts[partIndex].push({ type: nextElementType, value: newElement });
 
       indexOffset = nextSpecialElementIndex + 2; // + 2 to get rid of the marker, i.e. '\b'
@@ -118,8 +126,7 @@ export class ClozeElement extends CompoundElement implements PositionedElement,
     return [y, nextElementType];
   }
 
-  private static createElement(elementType: string): InputElement {
-    const elementModel: UIElement = { type: elementType } as UIElement;
+  private static createElement(elementModel: UIElement): InputElement {
     let newElement: InputElement;
     switch (elementModel.type) {
       case 'text-field':

projects/common/ui-elements/cloze/cloze.component.ts

 import {
   Component, EventEmitter, Output, QueryList, ViewChildren
 } from '@angular/core';
-import { ClozeElement } from './cloze-element';
+import { ClozeElement, ClozePart } from './cloze-element';
 import { CompoundElementComponent } from '../../directives/compound-element.directive';
-import { InputElement } from '../../models/uI-element';
+import { InputElement, UIElement } from '../../models/uI-element';
 import { FormElementComponent } from '../../directives/form-element-component.directive';
 
 @Component({
@@ -92,7 +92,15 @@ export class ClozeComponent extends CompoundElementComponent {
   compoundChildren!: QueryList<FormElementComponent>;
 
   getFormElementModelChildren(): InputElement[] {
-    return this.elementModel.childElements;
+    const uiElements: InputElement[] = [];
+    this.elementModel.parts.forEach((subParts: ClozePart[]) => {
+      subParts.forEach((part: ClozePart) => {
+        if (part.value instanceof InputElement) {
+          uiElements.push(part.value);
+        }
+      });
+    });
+    return uiElements;
   }
 
   selectElement(element: ClozeElement, event: MouseEvent): void {