From df6060061e19dc3af970fbeaf8ff27c901eb1076 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 5 Jan 2022 13:59:43 +0100
Subject: [PATCH] [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.
---
.../components/dialogs/rich-text-edit-dialog.component.ts | 6 +++---
projects/editor/src/app/services/dialog.service.ts | 2 +-
.../src/app/text-editor/rich-text-editor.component.html | 3 ++-
.../src/app/text-editor/rich-text-editor.component.ts | 2 +-
4 files changed, 7 insertions(+), 6 deletions(-)
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 65f19fb8f..b94e7c9ef 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
@@ -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 }) { }
}
diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts
index eb0e2cdfd..c38e887a0 100644
--- a/projects/editor/src/app/services/dialog.service.ts
+++ b/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();
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 869c43e66..e6c0c563c 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
@@ -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>
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 4c97b21e3..77feb20cd 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
@@ -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';
--
GitLab