feat: [AoU-1183] add limit size for rich text area

https://issues.unige.ch/browse/AOU-1183

projects/solidify-frontend/src/lib/components/presentationals/rich-text-editor/rich-text-editor.presentational.html

-<mat-label class="label"
-           [class.is-required]="formValidationHelper.hasRequiredField(formControl)"
-><span class="text">{{label | translate}}</span>
-  <span *ngIf="formValidationHelper.hasRequiredField(formControl)"
-        aria-hidden="true"
-        class="mat-placeholder-required mat-form-field-required-marker"
-  > *</span>
-</mat-label>
+<ng-template [ngIf]="isInRichTextMode"
+             [ngIfElse]="rawTextMode"
+>
+  <mat-label class="label"
+             [class.is-required]="formValidationHelper.hasRequiredField(formControl)"
+  ><span class="text">{{label | translate}}</span>
+    <span *ngIf="formValidationHelper.hasRequiredField(formControl)"
+          aria-hidden="true"
+          class="mat-placeholder-required mat-form-field-required-marker"
+    > *</span>
+  </mat-label>
+  <quill-editor #quillEditorComponent
+                [modules]="modules"
+                [formControl]="formControl"
+                [placeholder]="placeholder | translate"
+                [class.is-invalid]="formValidationHelper.displayInvalidWhenRequired(formControl, displayEmptyRequiredFieldInError)"
+                [class.is-focused]="isFocused"
+                [class.is-disabled]="formControl.disabled"
+                (onFocus)="isFocused = true"
+                (onBlur)="isFocused = false"
+                (onContentChanged)="preventLengthToExceed($event)"
+                class="editor"
+  ></quill-editor>
+</ng-template>
+
+<ng-template #rawTextMode>
+  <mat-form-field [appearance]="appearanceInputMaterial"
+                  [floatLabel]="positionLabelInputMaterial"
+                  [class.mat-form-field-invalid]="(formValidationHelper.hasRequiredField(formControl) && (formControl.value | isNullOrUndefinedOrWhiteString)) || formControl.invalid"
+                  class="mat-form-field"
+                  solidifyTooltipOnEllipsis
+  >
+    <mat-label>{{label | translate}}</mat-label>
+    <textarea [formControl]="formControl"
+              [required]="formValidationHelper.hasRequiredField(formControl)"
+              [maxLength]="maxLength !== 0 ? maxLength : null"
+              cdkAutosizeMaxRows="10"
+              cdkAutosizeMinRows="5"
+              cdkTextareaAutosize
+              matInput
+    >
+      </textarea>
+  </mat-form-field>
+</ng-template>
 
-<quill-editor #quillEditorComponent
-              [modules]="modules"
-              [formControl]="formControl"
-              [placeholder]="placeholder | translate"
-              [class.is-invalid]="formValidationHelper.displayInvalidWhenRequired(formControl, displayEmptyRequiredFieldInError)"
-              [class.is-focused]="isFocused"
-              [class.is-disabled]="formControl.disabled"
-              (onFocus)="isFocused = true"
-              (onBlur)="isFocused = false"
-              class="editor"
-></quill-editor>
 <mat-error *ngIf="formValidationHelper.getFormError(formControl) as errors"
            class="errors"
 >{{errors}}</mat-error>
+
 <mat-hint *ngIf="withWordCounter | isTrue"
           class="word-counter"
->{{numberWords}} {{labelTranslate.words | translate}}</mat-hint>
+>{{numberWords}} {{labelTranslate.words | translate | lowercase}}</mat-hint>
+
+<mat-hint *ngIf="withMaxLength | isTrue"
+          class="word-counter"
+>(
+  <ng-template [ngIf]="isInRichTextMode | isFalse"> {{formControl.value.length}} {{labelTranslate.characters |
+      translate | lowercase}} /
+  </ng-template>
+  {{maxLength}} {{labelTranslate.characters | translate | lowercase}} {{labelTranslate.maximum | translate | lowercase}} )
+</mat-hint>
+
+<ng-template [ngIf]="formControl.disabled | isFalse">
+  <a *ngIf="isInRichTextMode; else linkToggleToRichTextMode"
+     (click)="toggleTextMode()"
+  >{{labelTranslate.displayWithoutFormatting | translate}}</a>
+  <ng-template #linkToggleToRichTextMode>
+    <a (click)="toggleTextMode()">{{labelTranslate.displayWithFormatting | translate}}</a>
+  </ng-template>
+</ng-template>