From 0f4d7c2e99d17e14b163afa4d498dc01bbe3dc1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 2 Mar 2020 14:13:04 +0100
Subject: [PATCH] MOBILE-3366 rte: Toggle toolbar button status when clicked

---
 .../core-editor-rich-text-editor.html         | 16 +++++++-------
 .../rich-text-editor/rich-text-editor.ts      | 21 ++++++++++---------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
index 15783e47b..fc1a9c683 100644
--- a/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
+++ b/src/core/editor/components/rich-text-editor/core-editor-rich-text-editor.html
@@ -17,42 +17,42 @@
     <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')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.bold' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.b" (click)="buttonAction($event, 'bold', 'b')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.bold' | translate">
                 <core-icon name="fa-bold"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.italic' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.i" (click)="buttonAction($event, 'italic', 'i')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.italic' | translate">
                 <core-icon name="fa-italic"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.underline' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.u" (click)="buttonAction($event, 'underline', 'u')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.underline' | translate">
                 <core-icon name="fa-underline"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikeThrough')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.strike' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strike" (click)="buttonAction($event, 'strikethrough', 'strike')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.strike' | translate">
                 <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>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.p' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.p" (click)="buttonAction($event, 'p', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.p' | translate">
                 <core-icon name="fa-paragraph"></core-icon>
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'formatBlock|<h3>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h3' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h3" (click)="buttonAction($event, 'h3', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h3' | translate">
                 <core-icon name="fa-header"></core-icon>3
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'formatBlock|<h4>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h4' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h4" (click)="buttonAction($event, 'h4', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h4' | translate">
                 <core-icon name="fa-header"></core-icon>4
             </button>
         </ion-slide>
         <ion-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'formatBlock|<h5>')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h5' | translate">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.h5" (click)="buttonAction($event, 'h5', 'block')" (mousedown)="stopBubble($event)" [title]=" 'core.editor.h5' | translate">
                 <core-icon name="fa-header"></core-icon>5
             </button>
         </ion-slide>
diff --git a/src/core/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/editor/components/rich-text-editor/rich-text-editor.ts
index 5cf1a1a99..865a417d6 100644
--- a/src/core/editor/components/rich-text-editor/rich-text-editor.ts
+++ b/src/core/editor/components/rich-text-editor/rich-text-editor.ts
@@ -339,8 +339,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
             return;
         }
 
-        $event.preventDefault();
-        $event.stopPropagation();
+        this.stopBubble($event);
 
         const move = $event['key'] == 'ArrowLeft' ? -1 : +1,
             cursor = this.getCurrentCursorPosition(this.editorElement);
@@ -456,8 +455,7 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
      * @param $event The event.
      */
     toggleEditor($event: Event): void {
-        $event.preventDefault();
-        $event.stopPropagation();
+        this.stopBubble($event);
 
         this.setContent(this.control.value);
 
@@ -581,17 +579,20 @@ export class CoreEditorRichTextEditorComponent implements AfterContentInit, OnDe
      *
      * @param $event Event data
      * @param command Command to execute.
+     * @param parameters If parameters is set to block, a formatBlock command will be performed. Otherwise it will switch the
+     *                      toolbar styles button when set.
      */
-    buttonAction($event: any, command: string): void {
+    buttonAction($event: any, command: string, parameters: string): void {
         this.stopBubble($event);
 
         if (command) {
-            if (command.includes('|')) {
-                const parameters = command.split('|')[1];
-                command = command.split('|')[0];
-
-                document.execCommand(command, false, parameters);
+            if (parameters == 'block') {
+                document.execCommand('formatBlock', false, '<' + command + '>');
             } else {
+                if (parameters) {
+                    this.toolbarStyles[parameters] = this.toolbarStyles[parameters] == 'true' ? 'false' : 'true';
+                }
+
                 document.execCommand(command, false);
             }
         }