From 54f8119efd83053cf2e19dc365b2c010b76d58b0 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Wed, 1 Dec 2021 14:47:19 +0100
Subject: [PATCH] Make text element have a font size again
This controls the general font size. Specific spans can still be styled
individually in the text editor.
- The TextEditor also uses this font size as default when rendering the
text.
---
projects/common/ui-elements/text/text-element.ts | 1 -
projects/common/ui-elements/text/text.component.ts | 1 +
.../dialogs/rich-text-edit-dialog.component.ts | 12 +++++++++---
projects/editor/src/app/services/dialog.service.ts | 5 +++--
projects/editor/src/app/services/unit.service.ts | 4 +++-
.../app/text-editor/rich-text-editor.component.html | 4 +++-
.../app/text-editor/rich-text-editor.component.ts | 1 +
7 files changed, 20 insertions(+), 8 deletions(-)
diff --git a/projects/common/ui-elements/text/text-element.ts b/projects/common/ui-elements/text/text-element.ts
index 132a0a95a..8c84d669c 100644
--- a/projects/common/ui-elements/text/text-element.ts
+++ b/projects/common/ui-elements/text/text-element.ts
@@ -24,7 +24,6 @@ export class TextElement extends UIElement implements PositionedElement, FontEle
this.positionProps = initPositionedElement(serializedElement);
this.fontProps = initFontElement(serializedElement);
this.surfaceProps = initSurfaceElement(serializedElement);
- delete this.fontProps.fontSize;
this.height = serializedElement.height || 78;
this.surfaceProps.backgroundColor =
diff --git a/projects/common/ui-elements/text/text.component.ts b/projects/common/ui-elements/text/text.component.ts
index e689efe14..9271d759a 100644
--- a/projects/common/ui-elements/text/text.component.ts
+++ b/projects/common/ui-elements/text/text.component.ts
@@ -46,6 +46,7 @@ import { ValueChangeElement } from '../../models/uI-element';
[style.background-color]="elementModel.surfaceProps.backgroundColor"
[style.color]="elementModel.fontProps.fontColor"
[style.font-family]="elementModel.fontProps.font"
+ [style.font-size.px]="elementModel.fontProps.fontSize"
[style.line-height.%]="elementModel.fontProps.lineHeight"
[style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
[style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
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 842438cc0..65f19fb8f 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
@@ -2,10 +2,13 @@ import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
- selector: 'app-rich-text-edit-dialog-tinymce',
+ selector: 'app-rich-text-edit-dialog',
template: `
<mat-dialog-content>
- <app-rich-text-editor [(text)]="data.text" [showCloseElements]="data.showCloseElements"></app-rich-text-editor>
+ <app-rich-text-editor [(text)]="data.text"
+ [showCloseElements]="data.showCloseElements"
+ [defaultFontSize]="data.defaultFontSize">
+ </app-rich-text-editor>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-button [mat-dialog-close]="data.text">{{'save' | translate }}</button>
@@ -14,5 +17,8 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
`
})
export class RichTextEditDialogComponent {
- constructor(@Inject(MAT_DIALOG_DATA) public data: { text: string, showCloseElements?: boolean }) { }
+ constructor(@Inject(MAT_DIALOG_DATA) public data: {
+ text: string,
+ defaultFontSize: number,
+ showCloseElements?: boolean }) { }
}
diff --git a/projects/editor/src/app/services/dialog.service.ts b/projects/editor/src/app/services/dialog.service.ts
index 36f46befe..70c2c6c34 100644
--- a/projects/editor/src/app/services/dialog.service.ts
+++ b/projects/editor/src/app/services/dialog.service.ts
@@ -59,10 +59,11 @@ export class DialogService {
return dialogRef.afterClosed();
}
- showRichTextEditDialog(text: string): Observable<string> {
+ showRichTextEditDialog(text: string, defaultFontSize: number): Observable<string> {
const dialogRef = this.dialog.open(RichTextEditDialogComponent, {
data: {
- text: text
+ text: text,
+ defaultFontSize: defaultFontSize
},
autoFocus: false
});
diff --git a/projects/editor/src/app/services/unit.service.ts b/projects/editor/src/app/services/unit.service.ts
index dbb6b6b1c..23259d0e3 100644
--- a/projects/editor/src/app/services/unit.service.ts
+++ b/projects/editor/src/app/services/unit.service.ts
@@ -361,7 +361,9 @@ export class UnitService {
});
break;
case 'text':
- this.dialogService.showRichTextEditDialog((element as TextElement).text).subscribe((result: string) => {
+ this.dialogService.showRichTextEditDialog(
+ (element as TextElement).text, (element as TextElement).fontProps.fontSize as number
+ ).subscribe((result: string) => {
if (result) {
// TODO add proper sanitization
this.updateElementProperty(
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 a9539a63b..a0ac6502a 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
@@ -232,5 +232,7 @@
</button>
</div>
</div>
-<tiptap-editor [editor]="editor" [ngModel]="text" (ngModelChange)="textChange.emit($event)">
+<tiptap-editor [editor]="editor" [ngModel]="text"
+ [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 dea688f4a..a3e8f26a9 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() defaultFontSize!: number;
@Input() showCloseElements: boolean | undefined = false;
@Output() textChange = new EventEmitter<string>();
--
GitLab