make LikertRow rowLabel rich text and overhaul edit dialog

projects/common/components/compound-elements/likert/likert-radio-button-group.component.ts

 import { Component, Input } from '@angular/core';
-import { FormElementComponent } from '../../../directives/form-element-component.directive';
+import { FormElementComponent } from 'common/directives/form-element-component.directive';
 import { LikertRowElement } from 'common/models/elements/compound-elements/likert/likert-row';
 
 @Component({
@@ -23,7 +23,7 @@ import { LikertRowElement } from 'common/models/elements/compound-elements/liker
                     (elementModel.rowLabel.imgPosition === 'above' || elementModel.rowLabel.imgPosition === 'left')"
              [src]="elementModel.rowLabel.imgSrc | safeResourceUrl" alt="Image Placeholder"
              [style.object-fit]="'scale-down'" [style.max-width.%]="100">
-        <ng-container>{{elementModel.rowLabel.text}}</ng-container>
+        <div [innerHTML]="elementModel.rowLabel.text"></div>
         <img *ngIf="elementModel.rowLabel.imgSrc &&
                     (elementModel.rowLabel.imgPosition === 'below' || elementModel.rowLabel.imgPosition === 'right')"
              [src]="elementModel.rowLabel.imgSrc | safeResourceUrl" alt="Image Placeholder"

projects/editor/src/app/components/dialogs/likert-row-edit-dialog.component.ts

@@ -8,35 +8,31 @@ import { TextLabel } from 'common/models/elements/element';
   selector: 'aspect-likert-row-edit-dialog',
   template: `
     <mat-dialog-content fxLayout="column">
-      <mat-form-field>
-        <mat-label>{{'text' | translate }}</mat-label>
-        <input #textField matInput type="text" [value]="data.row.rowLabel.text">
-      </mat-form-field>
+      <aspect-rich-text-editor-simple [(content)]="newLikertRow.rowLabel.text">
+      </aspect-rich-text-editor-simple>
 
-      <mat-form-field>
+      <mat-form-field [style.margin-top.px]="15">
         <mat-label>{{'id' | translate }}</mat-label>
-        <input #idField matInput type="text" [value]="data.row.id">
+        <input matInput type="text" [(ngModel)]="newLikertRow.id">
       </mat-form-field>
 
-      <button mat-raised-button (click)="loadImage()">{{ 'loadImage' | translate }}</button>
-      <button mat-raised-button (click)="imgSrc = null">{{ 'removeImage' | translate }}</button>
-      <img [src]="imgSrc"
-           [style.object-fit]="'scale-down'"
-           [width]="200">
+      <mat-checkbox [(ngModel)]="newLikertRow.readOnly">
+        {{'propertiesPanel.readOnly' | translate }}
+      </mat-checkbox>
 
       <mat-form-field appearance="fill">
-        <mat-label>{{'imagePosition' | translate }}</mat-label>
-        <mat-select #positionSelect [value]="data.row.rowLabel.imgPosition">
-          <mat-option *ngFor="let option of ['above', 'below', 'left', 'right']"
-                      [value]="option">
-            {{ option | translate }}
+        <mat-label>{{'preset' | translate }}</mat-label>
+        <mat-select [(ngModel)]="newLikertRow.value">
+          <mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
+          <mat-option *ngFor="let column of data.options; let i = index" [value]="i">
+            {{column.text}} (Index: {{i}})
           </mat-option>
         </mat-select>
       </mat-form-field>
 
       <mat-form-field appearance="fill">
         <mat-label>{{'verticalButtonAlignment' | translate }}</mat-label>
-        <mat-select #verticalButtonAlignmentSelect [value]="data.row.verticalButtonAlignment">
+        <mat-select [(ngModel)]="newLikertRow.verticalButtonAlignment">
           <mat-option *ngFor="let option of ['auto', 'center']"
                       [value]="option">
             {{ option | translate }}
@@ -44,45 +40,49 @@ import { TextLabel } from 'common/models/elements/element';
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field appearance="fill">
-        <mat-label>{{'preset' | translate }}</mat-label>
-        <mat-select #valueField [value]="data.row.value">
-          <mat-option [value]="null">{{'propertiesPanel.undefined' | translate }}</mat-option>
-          <mat-option *ngFor="let column of data.columns; let i = index" [value]="i">
-            {{column.text}} (Index: {{i}})
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
+      <div fxLayout="row" fxLayoutAlign="space-between center">
+        <div fxLayout="column" fxLayoutGap="10px">
+          <button mat-raised-button (click)="loadImage()">
+            {{ 'loadImage' | translate }}</button>
+          <button mat-raised-button (click)="newLikertRow.rowLabel.imgSrc = null">
+            {{ 'removeImage' | translate }}</button>
+          <mat-form-field>
+            <mat-label>{{'imagePosition' | translate }}</mat-label>
+            <mat-select [(ngModel)]="newLikertRow.rowLabel.imgPosition">
+              <mat-option *ngFor="let option of ['above', 'below', 'left', 'right']"
+                          [value]="option">
+                {{ option | translate }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+        </div>
+
+        <img [src]="newLikertRow.rowLabel.imgSrc"
+             [style.object-fit]="'scale-down'" [width]="200">
+      </div>
 
-    <mat-checkbox #readOnlyField [checked]="data.row.readOnly">
-      {{'propertiesPanel.readOnly' | translate }}
-    </mat-checkbox>
     </mat-dialog-content>
 
     <mat-dialog-actions>
-      <button mat-button
-              [mat-dialog-close]="{
-                rowLabel: {
-                  text: textField.value,
-                  imgSrc: imgSrc,
-                  position: positionSelect.value
-                },
-                id: idField.value,
-                value: valueField.value,
-                verticalButtonAlignment: verticalButtonAlignmentSelect.value,
-                readOnly: readOnlyField.value
-              }">
+      <button mat-button [mat-dialog-close]="newLikertRow">
         {{'save' | translate }}
       </button>
       <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
     </mat-dialog-actions>
-  `
+  `,
+  styles: [
+    'mat-checkbox {margin-bottom: 15px;}'
+  ]
 })
 export class LikertRowEditDialogComponent {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertRowElement, columns: TextLabel[] }) { }
-  imgSrc: string | null = this.data.row.rowLabel.imgSrc;
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { row: LikertRowElement, options: TextLabel[] }) { }
+
+  newLikertRow = {
+    ...this.data.row,
+    rowLabel: { ...this.data.row.rowLabel }
+  };
 
   async loadImage(): Promise<void> {
-    this.imgSrc = await FileService.loadImage();
+    this.newLikertRow.rowLabel.imgSrc = await FileService.loadImage();
   }
 }

projects/editor/src/app/services/dialog.service.ts

@@ -93,9 +93,9 @@ export class DialogService {
     return dialogRef.afterClosed();
   }
 
-  showLikertRowEditDialog(row: LikertRowElement, columns: TextImageLabel[]): Observable<LikertRowElement> {
+  showLikertRowEditDialog(row: LikertRowElement, options: TextImageLabel[]): Observable<LikertRowElement> {
     const dialogRef = this.dialog.open(LikertRowEditDialogComponent, {
-      data: { row, columns }
+      data: { row, options }
     });
     return dialogRef.afterClosed();
   }

projects/editor/src/app/text-editor-simple/rich-text-editor-simple.component.css

 :host ::ng-deep div.ProseMirror {
-  min-height: 100px;
+  min-height: 60px;
   border: 1px solid;
 }
 
@@ -9,7 +9,6 @@
 }
 
 .editor-control-panel {
-  margin-bottom: 20px;
   background: linear-gradient(to top right, #FFF5F8, #FAFAFA);
   font: unset;
   max-width: 1000px;