From aa1de96f33011d8ad9ecb27ef9cd7e2ec3698abf Mon Sep 17 00:00:00 2001
From: Albert Gasset <albertgasset@fsfe.org>
Date: Tue, 16 Jul 2019 09:49:39 +0200
Subject: [PATCH 1/4] MOBILE-3053 rte: Fix keyboard is closed and reopened in
 iOS

---
 .../core-rich-text-editor.html                | 30 +++++++++---------
 .../rich-text-editor/rich-text-editor.ts      | 31 +++++++++++++------
 2 files changed, 36 insertions(+), 25 deletions(-)

diff --git a/src/components/rich-text-editor/core-rich-text-editor.html b/src/components/rich-text-editor/core-rich-text-editor.html
index 7874c0162..c4b96e0fe 100644
--- a/src/components/rich-text-editor/core-rich-text-editor.html
+++ b/src/components/rich-text-editor/core-rich-text-editor.html
@@ -4,78 +4,78 @@
 <ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (longPress)="showToolbar()" role="textbox"></ion-textarea>
 
 <div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden">
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev()">
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)" (mousedown)="stopBubble($event)">
         <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
     </button>
     <ion-slides [slidesPerView]="numToolbarButtons" (ionSlideDidChange)="updateToolbarArrows()">
         <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-bold"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-italic"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-underline"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-strikethrough"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'formatBlock|<p>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'formatBlock|<p>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-paragraph"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h1" (click)="buttonAction($event, 'formatBlock|<h1>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h1" (click)="buttonAction($event, 'formatBlock|<h1>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-header"></core-icon>1
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h2" (click)="buttonAction($event, 'formatBlock|<h2>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h2" (click)="buttonAction($event, 'formatBlock|<h2>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-header"></core-icon>2
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-header"></core-icon>3
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ul" (click)="buttonAction($event, 'insertUnorderedList')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-list-ul"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.ol" (click)="buttonAction($event, 'insertOrderedList')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-list-ol"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')">
+            <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-eraser"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [attr.aria-pressed]="rteEnabled ? 'false' : 'true'" (click)="toggleEditor($event)">
+            <button [attr.aria-pressed]="rteEnabled ? 'false' : 'true'" (click)="toggleEditor($event)" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-code"></core-icon>
             </button>
         </ion-slide>
         <ion-slide *ngIf="isPhone">
-            <button (click)="hideToolbar()">
+            <button (click)="hideToolbar($event)" (mousedown)="stopBubble($event)">
                 <core-icon name="fa-close"></core-icon>
             </button>
         </ion-slide>
     </ion-slides>
-    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext()">
+    <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarNextHidden" (click)="toolbarNext($event)" (mousedown)="stopBubble($event)">
         <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
     </button>
 </div>
diff --git a/src/components/rich-text-editor/rich-text-editor.ts b/src/components/rich-text-editor/rich-text-editor.ts
index 45e572d37..44be93408 100644
--- a/src/components/rich-text-editor/rich-text-editor.ts
+++ b/src/components/rich-text-editor/rich-text-editor.ts
@@ -533,10 +533,8 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
      * @param {any} $event Event data
      * @param {string} command Command to execute.
      */
-    protected buttonAction($event: any, command: string): void {
-        $event.preventDefault();
-        $event.stopPropagation();
-        this.editorElement.focus();
+    buttonAction($event: any, command: string): void {
+        this.stopBubble($event);
 
         if (command) {
             if (command.includes('|')) {
@@ -553,8 +551,9 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
     /**
      * Hide the toolbar.
      */
-    hideToolbar(): void {
-        this.editorElement.focus();
+    hideToolbar($event: any): void {
+        this.stopBubble($event);
+
         this.toolbarHidden = true;
     }
 
@@ -566,26 +565,38 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
         this.toolbarHidden = false;
     }
 
+    /**
+     * Stop event default and propagation.
+     *
+     * @param {Event} event Event.
+     */
+    stopBubble(event: Event): void {
+        event.preventDefault();
+        event.stopPropagation();
+    }
+
     /**
      * Method that shows the next toolbar buttons.
      */
-    toolbarNext(): void {
+    toolbarNext($event: any): void {
+        this.stopBubble($event);
+
         if (!this.toolbarNextHidden) {
             const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
             this.toolbarSlides.slideTo(currentIndex + this.numToolbarButtons);
         }
-        this.editorElement.focus();
     }
 
     /**
      * Method that shows the previous toolbar buttons.
      */
-    toolbarPrev(): void {
+    toolbarPrev($event: any): void {
+        this.stopBubble($event);
+
         if (!this.toolbarPrevHidden) {
             const currentIndex = this.toolbarSlides.getActiveIndex() || 0;
             this.toolbarSlides.slideTo(currentIndex - this.numToolbarButtons);
         }
-        this.editorElement.focus();
     }
 
     /**

From 66cc892794cefaf6829b784b171cf9961f8ab3c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 18 Jul 2019 16:49:20 +0200
Subject: [PATCH 2/4] MOBILE-3053 rte: Fix toolbar styles in iOS

---
 src/components/rich-text-editor/rich-text-editor.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/rich-text-editor/rich-text-editor.scss b/src/components/rich-text-editor/rich-text-editor.scss
index 0cf3a5960..9460297fd 100644
--- a/src/components/rich-text-editor/rich-text-editor.scss
+++ b/src/components/rich-text-editor/rich-text-editor.scss
@@ -80,6 +80,8 @@ ion-app.app-root core-rich-text-editor {
             align-items: center;
             width: 36px;
             height: 36px;
+            padding-right: 6px;
+            padding-left: 6px;
             margin: 0 auto;
             font-size: 18px;
             background-color: $white;

From bff2c111f3d565be7163cb52c7a247b062ae29e3 Mon Sep 17 00:00:00 2001
From: Albert Gasset <albertgasset@fsfe.org>
Date: Thu, 18 Jul 2019 16:51:29 +0200
Subject: [PATCH 3/4] MOBILE-3053 rte: Fix toolbar sometimes has only one
 button

---
 src/components/rich-text-editor/rich-text-editor.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/rich-text-editor/rich-text-editor.ts b/src/components/rich-text-editor/rich-text-editor.ts
index 44be93408..b0261ba75 100644
--- a/src/components/rich-text-editor/rich-text-editor.ts
+++ b/src/components/rich-text-editor/rich-text-editor.ts
@@ -608,14 +608,15 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
             return;
         }
 
-        if (!(this.toolbarSlides as any)._init) {
-            // Slides is not initialized yet, try later.
+        const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
+
+        if (!(this.toolbarSlides as any)._init || !width) {
+            // Slides is not initialized or width is not available yet, try later.
             setTimeout(this.updateToolbarButtons.bind(this), 100);
 
             return;
         }
 
-        const width = this.domUtils.getElementWidth(this.toolbar.nativeElement);
         if (width > this.toolbarSlides.length() * this.toolbarButtonWidth) {
             this.numToolbarButtons = this.toolbarSlides.length();
             this.toolbarArrows = false;

From 63d18cc2f58498a67dca81f88cabf5006fba0747 Mon Sep 17 00:00:00 2001
From: Albert Gasset <albertgasset@fsfe.org>
Date: Thu, 18 Jul 2019 16:53:34 +0200
Subject: [PATCH 4/4] MOBILE-3053 rte: Hide toolbar when editor loses focus

---
 src/components/rich-text-editor/core-rich-text-editor.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/rich-text-editor/core-rich-text-editor.html b/src/components/rich-text-editor/core-rich-text-editor.html
index c4b96e0fe..ba2bd897f 100644
--- a/src/components/rich-text-editor/core-rich-text-editor.html
+++ b/src/components/rich-text-editor/core-rich-text-editor.html
@@ -1,7 +1,7 @@
-<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" [attr.data-placeholder-text]="placeholder" role="textbox">
+<div [hidden]="!rteEnabled" #editor contenteditable="true" class="core-rte-editor" tappable (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" [attr.data-placeholder-text]="placeholder" role="textbox">
 </div>
 
-<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (longPress)="showToolbar()" role="textbox"></ion-textarea>
+<ion-textarea [hidden]="rteEnabled" #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)" (focus)="showToolbar()" (longPress)="showToolbar()" (blur)="hideToolbar($event)" role="textbox"></ion-textarea>
 
 <div #toolbar class="core-rte-toolbar" [class.toolbar-hidden]="toolbarHidden">
     <button *ngIf="toolbarArrows" class="toolbar-arrow" [class.toolbar-arrow-hidden]="toolbarPrevHidden" (click)="toolbarPrev($event)" (mousedown)="stopBubble($event)">