[editor] Rework TextEditor to also accept cloze documents are input

Also editor in cloze mode now respects the element's font size.

projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts

 import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { ClozeDocument } from '../../../../../common/models/uI-element';
 
 @Component({
   selector: 'app-rich-text-edit-dialog',
   template: `
     <mat-dialog-content>
-      <app-rich-text-editor [(text)]="data.text"
+      <app-rich-text-editor [(content)]="data.content"
                             [clozeMode]="data.clozeMode"
                             [defaultFontSize]="data.defaultFontSize">
       </app-rich-text-editor>
     </mat-dialog-content>
     <mat-dialog-actions>
-      <button mat-button [mat-dialog-close]="data.text">{{'save' | translate }}</button>
+      <button mat-button [mat-dialog-close]="data.content">{{'save' | translate }}</button>
       <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
     </mat-dialog-actions>
   `
 })
 export class RichTextEditDialogComponent {
   constructor(@Inject(MAT_DIALOG_DATA) public data: {
-    text: string,
+    content: string | Record<string, any>,
     defaultFontSize: number,
     clozeMode: boolean }) { }
 }

projects/editor/src/app/services/dialog.service.ts

@@ -10,6 +10,7 @@ import { PlayerEditDialogComponent } from '../components/dialogs/player-edit-dia
 import { LikertColumnEditDialogComponent } from '../components/dialogs/likert-column-edit-dialog.component';
 import { LikertRowEditDialogComponent } from '../components/dialogs/likert-row-edit-dialog.component';
 import {
+  ClozeDocument,
   DragNDropValueObject, LikertColumn, PlayerProperties
 } from '../../../../common/models/uI-element';
 import { DropListOptionEditDialogComponent } from '../components/dialogs/drop-list-option-edit-dialog.component';
@@ -50,15 +51,15 @@ export class DialogService {
 
   showRichTextEditDialog(text: string, defaultFontSize: number): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
-      data: { text, defaultFontSize },
+      data: { content: text, defaultFontSize },
       autoFocus: false
     });
     return dialogRef.afterClosed();
   }
 
-  showClozeTextEditDialog(text: string): Observable<string> {
+  showClozeTextEditDialog(document: ClozeDocument, defaultFontSize: number): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
-      data: { text, clozeMode: true },
+      data: { content: document, defaultFontSize, clozeMode: true },
       autoFocus: false
     });
     return dialogRef.afterClosed();

projects/editor/src/app/text-editor/rich-text-editor.component.html

@@ -259,8 +259,8 @@
     </button>
   </div>
 </div>
-<tiptap-editor [editor]="editor" [ngModel]="text"
+<tiptap-editor [editor]="editor" [ngModel]="content"
                [outputFormat]="clozeMode ? 'json' : 'html'"
                [style.font-size.px]="defaultFontSize"
-               (ngModelChange)="textChange.emit($event)">
+               (ngModelChange)="contentChange.emit($event)">
 </tiptap-editor>

projects/editor/src/app/text-editor/rich-text-editor.component.ts

@@ -16,15 +16,17 @@ import { Image } from '@tiptap/extension-image';
 import { Blockquote } from '@tiptap/extension-blockquote';
 import { Indent } from './extensions/indent';
 import { HangingIndent } from './extensions/hanging-indent';
-import { paragraphExtension } from './extensions/paragraph-extension';
+import { ParagraphExtension } from './extensions/paragraph-extension';
 import { FontSizeExtension } from './extensions/font-size';
 import { BulletListExtension } from './extensions/bullet-list';
 import { OrderedListExtension } from './extensions/orderedList-extension';
+
 import { FileService } from '../services/file.service';
 
-import ToggleButtonComponentExtension from './node-views/toggle-button-component-extension';
-import DropListComponentExtension from './node-views/drop-list-component-extension';
-import TextFieldComponentExtension from './node-views/text-field-component-extension';
+import ToggleButtonComponentExtension from './angular-node-views/toggle-button-component-extension';
+import DropListComponentExtension from './angular-node-views/drop-list-component-extension';
+import TextFieldComponentExtension from './angular-node-views/text-field-component-extension';
+import { ClozeDocument } from '../../../../common/models/uI-element';
 
 @Component({
   selector: 'app-rich-text-editor',
@@ -33,10 +35,10 @@ import TextFieldComponentExtension from './node-views/text-field-component-exten
   encapsulation: ViewEncapsulation.None
 })
 export class RichTextEditorComponent implements AfterViewInit {
-  @Input() text!: string;
+  @Input() content!: string | Record<string, any>;
   @Input() defaultFontSize!: number;
   @Input() clozeMode: boolean = false;
-  @Output() textChange = new EventEmitter<string>();
+  @Output() contentChange = new EventEmitter<string | Record<string, any>>();
 
   selectedFontColor = 'lightgrey';
   selectedHighlightColor = 'lightgrey';