From 660866b80daea50577a5f2e0c08ddb715def58ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 20 May 2021 11:16:16 +0200
Subject: [PATCH] MOBILE-3320 rte: Improve rte click handling

---
 .../core-editor-rich-text-editor.html         | 27 +++++++++++++++----
 .../rich-text-editor/rich-text-editor.scss    | 12 ++++-----
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index 15e0859a2..e3422805d 100644
--- a/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/features/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -1,11 +1,28 @@
 <div class="core-rte-editor-container" (click)="focusRTE()" [class.toolbar-hidden]="toolbarHidden">
-    <div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" button (focus)="showToolbar($event)"
-        (longPress)="showToolbar($event)" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
+    <div
+        [hidden]="!rteEnabled"
+        #editor
+        class="core-rte-editor"
+        role="textbox"
+        contenteditable="true"
+        [attr.data-placeholder-text]="placeholder"
+        (focus)="showToolbar($event)"
+        (blur)="hideToolbar($event)"
+    >
     </div>
 
-    <ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name"
-        ngControl="control" (ionChange)="onChange()" (focus)="showToolbar($event)" (longPress)="showToolbar($event)"
-        (blur)="hideToolbar($event)" role="textbox">
+    <ion-textarea
+        [hidden]="rteEnabled"
+        #textarea
+        class="core-textarea"
+        role="textbox"
+        [attr.name]="name"
+        ngControl="control"
+        [placeholder]="placeholder"
+        (ionChange)="onChange()"
+        (ionFocus)="showToolbar($event)"
+        (ionBlur)="hideToolbar($event)"
+    >
     </ion-textarea>
 
     <div class="core-rte-info-message" *ngIf="infoMessage">
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
index 75d85bb6b..4ccb65ab5 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
@@ -29,8 +29,9 @@
     .core-rte-editor-container {
         max-height: calc(100% - 46px);
         display: flex;
-        flex-direction: column;
         flex-grow: 1;
+        flex-direction: column;
+        justify-content: space-between;
         &.toolbar-hidden {
             max-height: 100%;
         }
@@ -51,7 +52,7 @@
     .core-rte-editor, .core-textarea {
         padding: 2px;
         margin: 2px;
-        width: 100%;
+        width: calc(100% - 4px);
         resize: none;
         background-color: var(--background);
         color: var(--color);
@@ -59,8 +60,6 @@
     }
 
     .core-rte-editor {
-        flex-grow: 1;
-        flex-shrink: 1;
         -webkit-user-select: auto !important;
         user-select: auto !important;
         word-wrap: break-word;
@@ -86,8 +85,6 @@
     }
 
     .core-textarea {
-        flex-grow: 1;
-        flex-shrink: 1;
         position: relative;
 
         ::ng-deep textarea {
@@ -97,6 +94,7 @@
             overflow-x: hidden;
             overflow-y: auto;
             position: absolute;
+            height: auto;
             top: 0;
             bottom: 0;
         }
@@ -160,7 +158,7 @@
         }
 
         &.toolbar-hidden {
-            visibility: none;
+            visibility: hidden;
             height: 0;
             border: none;
         }