diff --git a/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts index 4abdf7a3e7d8c108471a669d26cdcdd36ab6de4b..842438cc0b11ca29dc023f5c4d22f47faf138141 100644 --- a/projects/editor/src/app/components/dialogs/rich-text-edit-dialog.component.ts +++ b/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 }) { } } diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts index 8b633a8b9f4e4a80b7b7eab0f6f0278c86b6ea4e..a4fd9ce0d0922632337964c4eacff45d55ca449a 100644 --- a/projects/editor/src/app/services/dialog.service.ts +++ b/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: { diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.html b/projects/editor/src/app/text-editor/rich-text-editor.component.html index 5c3aab1bc2a66156ddb9ec429b27a8cd2c3e9c45..921ddee1391e55c037b002aa6af08630bf1c2e8d 100644 --- a/projects/editor/src/app/text-editor/rich-text-editor.component.html +++ b/projects/editor/src/app/text-editor/rich-text-editor.component.html @@ -200,21 +200,16 @@ <button mat-button (click)="insertSpecialChar('♥')">♥</button> <button mat-button (click)="insertSpecialChar('♦')">♦</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)"> diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.ts b/projects/editor/src/app/text-editor/rich-text-editor.component.ts index 74539fbb506523f2be1d72966a03233ba0970f0c..d5d59cd05593d8e512d240abd16fd3a8103fb79e 100644 --- a/projects/editor/src/app/text-editor/rich-text-editor.component.ts +++ b/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';