From 64b01757c0897b5552a2c87bdb8acdabc688f9ce Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Fri, 5 Jul 2024 15:30:25 +0200
Subject: [PATCH] [editor] Fix TextEditor scrolling and height
---
.../dialogs/label-edit-dialog.component.ts | 1 +
.../dialogs/likert-row-edit-dialog.component.ts | 15 ++++++++-------
.../dialogs/rich-text-edit-dialog.component.ts | 4 ++++
.../text-editor/rich-text-editor.component.scss | 17 +++++++++++++----
4 files changed, 26 insertions(+), 11 deletions(-)
diff --git a/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
index d0a0a60a8..d4cbb01cd 100644
--- a/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/label-edit-dialog.component.ts
@@ -36,6 +36,7 @@ import { TextImageLabel } from 'common/models/elements/label-interfaces';
</mat-dialog-actions>
`,
styles: [`
+ aspect-rich-text-editor {min-height: 200px;}
.image-panel {
display: flex;
margin-top: 20px;
diff --git a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
index 9bfc77060..128af7b87 100644
--- a/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
+++ b/projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts
@@ -75,14 +75,15 @@ import { TextLabel } from 'common/models/elements/label-interfaces';
</mat-dialog-actions>
`,
styles: [`
- mat-checkbox {
- margin-bottom: 15px;
- }
+ aspect-rich-text-editor {min-height: 200px;}
+ mat-checkbox {
+ margin-bottom: 15px;
+ }
- aspect-text-image-panel {
- margin-left: auto;
- margin-right: auto;
- }
+ aspect-text-image-panel {
+ margin-left: auto;
+ margin-right: auto;
+ }
`]
})
export class LikertRowEditDialogComponent {
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 063db0f94..b42511554 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
@@ -15,6 +15,10 @@ import { MAT_DIALOG_DATA } from '@angular/material/dialog';
<button mat-button [mat-dialog-close]="data.content">{{'save' | translate }}</button>
<button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
</mat-dialog-actions>
+ `,
+ styles: `
+ .mat-mdc-dialog-content {display: flex; flex-direction: column;}
+ aspect-rich-text-editor {min-height: 450px;}
`
})
export class RichTextEditDialogComponent {
diff --git a/projects/editor/src/app/text-editor/rich-text-editor.component.scss b/projects/editor/src/app/text-editor/rich-text-editor.component.scss
index bb981c74d..0f05d1b1d 100644
--- a/projects/editor/src/app/text-editor/rich-text-editor.component.scss
+++ b/projects/editor/src/app/text-editor/rich-text-editor.component.scss
@@ -1,9 +1,18 @@
-:host ::ng-deep div.ProseMirror {
- min-height: 350px;
+:host {
+ display: flex;
+ flex-direction: column;
+}
+
+tiptap-editor {
+ flex-grow: 1;
+ display: flex;
+ overflow: scroll;
}
-:host ::ng-deep .small-input div.ProseMirror {
- min-height: 100px;
+:host ::ng-deep div.ProseMirror {
+ width: 100%;
+ margin: 10px;
+ overflow: scroll;
}
.editor-control-panel {
--
GitLab