feat(admin-ui): Implement readonly state for RichTextEditor

packages/admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.html

@@ -1,2 +1,2 @@
 <label (click)="trixEditor.focus()" class="clr-control-label">{{ label }}</label>
-<trix-editor #trixEditor></trix-editor>
+<trix-editor #trixEditor [contentEditable]="!_readonly" [class.readonly]="_readonly"></trix-editor>

packages/admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.scss

@@ -24,6 +24,10 @@ trix-editor {
     position: sticky;
     top: -24px;
     z-index: 10;
+
+    &.hidden {
+        display: none;
+    }
 }
 
 label {

packages/admin-ui/src/app/shared/components/rich-text-editor/rich-text-editor.component.ts

@@ -12,6 +12,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 export interface Trix {
     editor: any;
+    toolbarElement: any;
 }
 
 /**
@@ -32,6 +33,15 @@ export interface Trix {
 })
 export class RichTextEditorComponent implements ControlValueAccessor, AfterViewInit, OnDestroy {
     @Input() label: string;
+    @Input() set readonly(value: any) {
+        this._readonly = !!value;
+        if (this._readonly) {
+            this.trix.toolbarElement.classList.add('hidden');
+        } else {
+            this.trix.toolbarElement.classList.remove('hidden');
+        }
+    }
+    _readonly = false;
 
     id = Math.random()
         .toString(36)