[editor] Refactor TextEditor to optionally show Cloze-buttons

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

@@ -5,7 +5,7 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
   selector: 'app-rich-text-edit-dialog-tinymce',
   template: `
     <mat-dialog-content>
-      <app-rich-text-editor [(text)]="data.text"></app-rich-text-editor>
+      <app-rich-text-editor [(text)]="data.text" [showCloseElements]="data.showCloseElements"></app-rich-text-editor>
     </mat-dialog-content>
     <mat-dialog-actions>
       <button mat-button [mat-dialog-close]="data.text">{{'save' | translate }}</button>
@@ -14,5 +14,5 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
     `
 })
 export class RichTextEditDialogComponent {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string }) { }
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string, showCloseElements?: boolean }) { }
 }

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

@@ -54,6 +54,17 @@ export class DialogService {
     return dialogRef.afterClosed();
   }
 
+  showClozeTextEditDialog(text: string): Observable<string> {
+    const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
+      data: {
+        text: text,
+        showCloseElements: true
+      },
+      autoFocus: false
+    });
+    return dialogRef.afterClosed();
+  }
+
   showPlayerEditDialog(player: PlayerElement): Observable<PlayerElement> {
     const dialogRef = this.dialog.open(PlayerEditDialogComponent, {
       data: {

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

@@ -200,21 +200,16 @@
       <button mat-button (click)="insertSpecialChar('&hearts;')">&hearts;</button>
       <button mat-button (click)="insertSpecialChar('&diams;')">&diams;</button>
     </mat-menu>
-<!--    <button mat-icon-button [matMenuTriggerFor]="optionsMenu">-->
-<!--      <mat-icon>more_vert</mat-icon>-->
-<!--    </button>-->
-<!--    <mat-menu #optionsMenu="matMenu">-->
-<!--      <mat-form-field>-->
-<!--        <mat-label>Absatzabstand</mat-label>-->
-<!--        <mat-select matTooltip="Achtung: Gilt nur für zukünftig angelegte Absätze" [matTooltipShowDelay]="300"-->
-<!--                    [value]="editor.getAttributes('paragraph').margin?.toString() || '0'"-->
-<!--                    (click)="$any($event).stopPropagation()" (valueChange)="applyParagraphStyle($event)">-->
-<!--          <mat-option value="0">0px</mat-option>-->
-<!--          <mat-option value="10">10px</mat-option>-->
-<!--          <mat-option value="20">20px</mat-option>-->
-<!--        </mat-select>-->
-<!--      </mat-form-field>-->
-<!--    </mat-menu>-->
+  </div>
+  <div *ngIf="showCloseElements" fxLayout="row" fxLayoutAlign="space-around center" >
+    <button mat-icon-button matTooltip="\\i" [matTooltipShowDelay]="300"
+            (click)="insertSpecialChar('\\i')">
+      <mat-icon>text_fields</mat-icon>
+    </button>
+    <button mat-icon-button matTooltip="\\z" [matTooltipShowDelay]="300"
+            (click)="insertSpecialChar('\\z')">
+      <mat-icon>drag_indicator</mat-icon>
+    </button>
   </div>
 </div>
 <tiptap-editor [editor]="editor" [ngModel]="text" (ngModelChange)="textChange.emit($event)">

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

@@ -26,6 +26,7 @@ import { orderedListExtension } from './orderedList-extension';
 })
 export class RichTextEditorComponent implements AfterViewInit {
   @Input() text!: string;
+  @Input() showCloseElements: boolean | undefined = false;
   @Output() textChange = new EventEmitter<string>();
 
   selectedFontColor = 'lightgrey';