MOBILE-4565 rte: Fix placeholder

src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html

@@ -1,5 +1,5 @@
 <div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden">
-    <div [hidden]="!rteEnabled" #editor class="core-rte-editor" role="textbox" contenteditable="true"
+    <div [hidden]="!rteEnabled" #editor class="core-rte-editor" role="textbox" contenteditable="true" [class.empty]="isEmpty"
         [attr.aria-labelledby]="ariaLabelledBy" [attr.data-placeholder-text]="placeholder" (focus)="showToolbar($event)"
         (blur)="hideToolbar($event)" (keydown)="onKeyDown($event)">
     </div>

src/core/features/editor/components/rich-text-editor/rich-text-editor.scss

@@ -1,6 +1,5 @@
 @use "theme/globals" as *;
 :host {
-    --placeholder-color: var(--ion-placeholder-color);
     --toobar-background: var(--white);
     --button-color: var(--ion-text-color);
     --button-active-color: var(--gray-300);
@@ -80,11 +79,14 @@
             max-width: 95%;
             width: auto;
         }
+        &.empty:before,
         &:empty:before {
             content: attr(data-placeholder-text);
             display: block;
             color: var(--placeholder-color);
-            font-weight: bold;
+            position: absolute;
+            opacity: var(--placeholder-opacity);
+            user-select: none;
         }
 
         // Make empty elements selectable (to move the cursor).

src/core/features/editor/components/rich-text-editor/rich-text-editor.ts

@@ -156,6 +156,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
         ol: 'false',
     };
 
+    isEmpty = true;
+
     swiperOpts: SwiperOptions = {
         modules: [IonicSlides],
         slidesPerView: 6,
@@ -590,13 +592,17 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
      */
     protected isNullOrWhiteSpace(value: string | null | undefined): boolean {
         if (value === null || value === undefined) {
+            this.isEmpty = true;
+
             return true;
         }
 
         value = value.replace(/[\n\r]/g, '');
         value = value.split(' ').join('');
 
-        return value.length === 0;
+        this.isEmpty = value.length === 0;
+
+        return this.isEmpty;
     }
 
     /**

src/theme/theme.base.scss

@@ -891,7 +891,8 @@ td {
 
 ion-input,
 ion-input input,
-ion-textarea {
+ion-textarea,
+core-rich-text-editor {
     --placeholder-color: var(--ion-placeholder-color);
     --placeholder-opacity: .65;
 }