Add rich text option to radio and likert column headers

Also rename LikertColumn to ColumnHeader, since it is not exclusively 
used by likert.

projects/common/components/ui-elements/likert.component.ts

@@ -35,7 +35,7 @@ import { LikertElement, LikertRowElement } from '../../interfaces/elements';
           <img *ngIf="column.imgSrc && column.position === 'above'"
                [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
                [style.object-fit]="'scale-down'">
-          {{column.text}}
+          <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(column.text)"></div>
           <img *ngIf="column.imgSrc && column.position === 'below'"
                [src]="column.imgSrc | safeResourceUrl" alt="Image Placeholder"
                [style.object-fit]="'scale-down'">

projects/common/components/ui-elements/radio-group-images.component.ts

@@ -34,7 +34,7 @@ import { RadioButtonGroupComplexElement } from '../../interfaces/elements';
              [style.object-fit]="'scale-down'"
              [style.max-width.%]="100"
              [src]="option.imgSrc | safeResourceUrl" alt="Image Placeholder">
-        <div>{{option.text}}</div>
+        <div [innerHTML]="sanitizer.bypassSecurityTrustHtml(option.text)"></div>
         <img *ngIf="option.imgSrc && option.position === 'below'"
              [style.object-fit]="'scale-down'"
              [style.max-width.%]="100"

projects/editor/src/app/app.module.ts

@@ -39,7 +39,7 @@ import { ConfirmationDialogComponent } from './components/dialogs/confirmation-d
 import { TextEditDialogComponent } from './components/dialogs/text-edit-dialog.component';
 import { TextEditMultilineDialogComponent } from './components/dialogs/text-edit-multiline-dialog.component';
 import { PlayerEditDialogComponent } from './components/dialogs/player-edit-dialog.component';
-import { LikertColumnEditDialogComponent } from './components/dialogs/likert-column-edit-dialog.component';
+import { ColumnHeaderEditDialogComponent } from './components/dialogs/column-header-edit-dialog.component';
 import { LikertRowEditDialogComponent } from './components/dialogs/likert-row-edit-dialog.component';
 import { RichTextEditDialogComponent } from './components/dialogs/rich-text-edit-dialog.component';
 import { DropListOptionEditDialogComponent } from './components/dialogs/drop-list-option-edit-dialog.component';
@@ -94,7 +94,7 @@ import { RichTextSimpleEditDialogComponent } from './components/dialogs/rich-tex
     TextEditDialogComponent,
     TextEditMultilineDialogComponent,
     PlayerEditDialogComponent,
-    LikertColumnEditDialogComponent,
+    ColumnHeaderEditDialogComponent,
     LikertRowEditDialogComponent,
     RichTextEditDialogComponent,
     ElementModelPropertiesComponent,

projects/editor/src/app/components/dialogs/likert-column-edit-dialog.component.ts → projects/editor/src/app/components/dialogs/column-header-edit-dialog.component.ts

@@ -7,10 +7,11 @@ import { ColumnHeader } from '../../../../../common/interfaces/elements';
   selector: 'aspect-likert-column-edit-dialog',
   template: `
     <mat-dialog-content fxLayout="column">
-      <mat-form-field>
-        <mat-label>{{'text' | translate }}</mat-label>
-        <input #textInput matInput type="text" [value]="data.column.text">
-      </mat-form-field>
+      <aspect-rich-text-editor-simple [content]="data.column.text"
+                                      [defaultFontSize]="data.defaultFontSize"
+                                      (contentChange)="this.textContent = $event">
+      </aspect-rich-text-editor-simple>
+
       <button mat-raised-button (click)="loadImage()">{{ 'loadImage' | translate }}</button>
       <button mat-raised-button (click)="imgSrc = null">{{ 'removeImage' | translate }}</button>
       <img [src]="imgSrc"
@@ -28,17 +29,21 @@ import { ColumnHeader } from '../../../../../common/interfaces/elements';
     </mat-dialog-content>
     <mat-dialog-actions>
       <button mat-button [mat-dialog-close]="{
-                         text: textInput.value,
+                         text: textContent,
                          imgSrc: imgSrc,
                          position: positionSelect.value }">
         {{'save' | translate }}
       </button>
       <button mat-button mat-dialog-close>{{'cancel' | translate }}</button>
     </mat-dialog-actions>
-  `
+  `,
+  styles: [
+    'aspect-rich-text-editor-simple {margin-bottom: 20px;}'
+  ]
 })
-export class LikertColumnEditDialogComponent {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: { column: ColumnHeader }) { }
+export class ColumnHeaderEditDialogComponent {
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { column: ColumnHeader, defaultFontSize: number }) { }
+  textContent: string = this.data.column.text;
   imgSrc: string | null = this.data.column.imgSrc;
 
   async loadImage(): Promise<void> {

projects/editor/src/app/components/unit-view/page-view/properties-panel/model-properties-tab/element-model-properties.component.html

@@ -238,8 +238,7 @@
            (cdkDropListDropped)="moveListValue('columns', $any($event))">
         <div *ngFor="let column of $any(combinedProperties.columns); let i = index" cdkDrag
              class="list-items" fxLayout="row" fxLayoutAlign="end center">
-          <div fxFlex="70">
-            {{column.text}}
+          <div fxFlex="70" [innerHTML]="sanitizer.bypassSecurityTrustHtml(column.text)">
           </div>
           <img [src]="column.imgSrc"
                [style.object-fit]="'scale-down'"

projects/editor/src/app/components/unit-view/page-view/properties-panel/model-properties-tab/element-model-properties.component.ts

@@ -15,6 +15,7 @@ import {
 } from '../../../../../../../../common/interfaces/elements';
 import { SelectionService } from '../../../../../services/selection.service';
 import { DialogService } from '../../../../../services/dialog.service';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   selector: 'aspect-element-model-properties-component',
@@ -32,7 +33,8 @@ export class ElementModelPropertiesComponent {
 
   constructor(public unitService: UnitService,
               public selectionService: SelectionService,
-              public dialogService: DialogService) { }
+              public dialogService: DialogService,
+              public sanitizer: DomSanitizer) { }
 
   addListValue(property: string, value: string): void {
     this.updateModel.emit({
@@ -78,7 +80,16 @@ export class ElementModelPropertiesComponent {
   }
 
   async editColumnOption(optionIndex: number): Promise<void> {
-    await this.unitService.editLikertColumn(this.selectedElements as LikertElement[], optionIndex);
+    const firstElement = (this.selectedElements as LikertElement[])[0];
+    await this.dialogService
+      .showLikertColumnEditDialog(firstElement.columns[optionIndex],
+        (this.combinedProperties as LikertElement).styling.fontSize)
+      .subscribe((result: ColumnHeader) => {
+        if (result) {
+          firstElement.columns[optionIndex] = result;
+          this.updateModel.emit({ property: 'columns', value: firstElement.columns });
+        }
+      });
   }
 
   async editRowOption(optionIndex: number): Promise<void> {
@@ -89,7 +100,11 @@ export class ElementModelPropertiesComponent {
   }
 
   addColumn(value: string): void {
-    const column = UnitService.createLikertColumn(value);
+    const column: ColumnHeader = {
+      text: value,
+      imgSrc: null,
+      position: 'above'
+    };
     (this.combinedProperties.columns as ColumnHeader[]).push(column);
     this.updateModel.emit({ property: 'columns', value: this.combinedProperties.columns as ColumnHeader[] });
   }

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

@@ -6,7 +6,7 @@ import { TextEditDialogComponent } from '../components/dialogs/text-edit-dialog.
 import { TextEditMultilineDialogComponent } from '../components/dialogs/text-edit-multiline-dialog.component';
 import { RichTextEditDialogComponent } from '../components/dialogs/rich-text-edit-dialog.component';
 import { PlayerEditDialogComponent } from '../components/dialogs/player-edit-dialog.component';
-import { LikertColumnEditDialogComponent } from '../components/dialogs/likert-column-edit-dialog.component';
+import { ColumnHeaderEditDialogComponent } from '../components/dialogs/column-header-edit-dialog.component';
 import { LikertRowEditDialogComponent } from '../components/dialogs/likert-row-edit-dialog.component';
 import { DropListOptionEditDialogComponent } from '../components/dialogs/drop-list-option-edit-dialog.component';
 import {
@@ -91,9 +91,9 @@ export class DialogService {
     return dialogRef.afterClosed();
   }
 
-  showLikertColumnEditDialog(column: ColumnHeader): Observable<ColumnHeader> {
-    const dialogRef = this.dialog.open(LikertColumnEditDialogComponent, {
-      data: { column }
+  showLikertColumnEditDialog(column: ColumnHeader, defaultFontSize: number): Observable<ColumnHeader> {
+    const dialogRef = this.dialog.open(ColumnHeaderEditDialogComponent, {
+      data: { column, defaultFontSize }
     });
     return dialogRef.afterClosed();
   }

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

@@ -326,28 +326,6 @@ export class UnitService {
       });
   }
 
-  async editLikertColumn(likertElements: LikertElement[], columnIndex: number): Promise<void> {
-    await this.dialogService.showLikertColumnEditDialog(likertElements[0].columns[columnIndex])
-      .subscribe((result: ColumnHeader) => {
-        if (result) {
-          likertElements[0].columns[columnIndex] = result;
-          this.updateElementProperty(
-            likertElements,
-            'columns',
-            likertElements[0].columns
-          );
-        }
-      });
-  }
-
-  static createLikertColumn(value: string): ColumnHeader {
-    return {
-      text: value,
-      imgSrc: null,
-      position: 'above'
-    };
-  }
-
   createLikertRow(question: string, columnCount: number): LikertRowElement {
     return ElementFactory.createLikertRowElement({
       id: this.idService.getNewID('likert_row'),