diff --git a/projects/common/ui-elements/text/text-element.ts b/projects/common/ui-elements/text/text-element.ts index 132a0a95ad1368d6ae21cf051c04454b853ce1b0..8c84d669ce214793a2845f9677571f311c0b6d68 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 e689efe14f74eae7efaa278b6d308a2b203b1ff1..9271d759a82c1d7906f835bb561fa792574a821a 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 842438cc0b11ca29dc023f5c4d22f47faf138141..65f19fb8ffa7b7997fa6c2dfabed2e50ba686ce1 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 36f46befe969084ab29294ba267e128721972a21..70c2c6c348bc62a1c99d9269d8e2702284078b49 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 dbb6b6b1c0fb6879ef7592807c8c25842143ceb2..23259d0e3bdc96654336ae029c93571bb3059117 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 a9539a63b5d49f55ab725fc68401057b2b886429..a0ac6502a7df81db7525a14294e24f11d08c8f72 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 dea688f4afddb7e362846c97eeac27d881ebb02f..a3e8f26a935844128ee9419ef4275a5c8a820a02 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>();