[editor] Introduce TextEditor mode

This is for the different use saces of a simple text element and a cloze 
element. The latter needs more inputs for child elements and also return 
JSON instead of HTML.

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

@@ -6,7 +6,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
   template: `
     <mat-dialog-content>
       <app-rich-text-editor [(text)]="data.text"
-                            [showCloseElements]="data.showCloseElements"
+                            [clozeMode]="data.clozeMode"
                             [defaultFontSize]="data.defaultFontSize">
       </app-rich-text-editor>
     </mat-dialog-content>
@@ -14,11 +14,11 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
       <button mat-button [mat-dialog-close]="data.text">{{'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,
     defaultFontSize: number,
-    showCloseElements?: boolean }) { }
+    clozeMode: boolean }) { }
 }

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

@@ -58,7 +58,7 @@ export class DialogService {
 
   showClozeTextEditDialog(text: string): Observable<string> {
     const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
-      data: { text, showCloseElements: true },
+      data: { text, clozeMode: true },
       autoFocus: false
     });
     return dialogRef.afterClosed();

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

@@ -244,7 +244,7 @@
       <mat-icon>format_quote</mat-icon>
     </button>
   </div>
-  <div *ngIf="showCloseElements" fxLayout="row" fxLayoutAlign="space-around center" >
+  <div *ngIf="clozeMode" fxLayout="row" fxLayoutAlign="space-around center" >
     <button mat-icon-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
             (click)="insertTextField()">
       <mat-icon>text_fields</mat-icon>
@@ -260,6 +260,7 @@
   </div>
 </div>
 <tiptap-editor [editor]="editor" [ngModel]="text"
+               [outputFormat]="clozeMode ? 'json' : 'html'"
                [style.font-size.px]="defaultFontSize"
                (ngModelChange)="textChange.emit($event)">
 </tiptap-editor>

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

@@ -35,7 +35,7 @@ import TextFieldComponentExtension from './node-views/text-field-component-exten
 export class RichTextEditorComponent implements AfterViewInit {
   @Input() text!: string;
   @Input() defaultFontSize!: number;
-  @Input() showCloseElements: boolean | undefined = false;
+  @Input() clozeMode: boolean = false;
   @Output() textChange = new EventEmitter<string>();
 
   selectedFontColor = 'lightgrey';