From f4697a298ae6326a5ee7057b8dc8eb506c2d61de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Fri, 10 May 2024 11:05:59 +0200
Subject: [PATCH] MOBILE-4470 rte: Fix selection being lost on bold and italics

---
 .../core-editor-rich-text-editor.html            | 16 ++++++++--------
 .../rich-text-editor/rich-text-editor.ts         | 15 +++++----------
 2 files changed, 13 insertions(+), 18 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 8c519d6da..31511a610 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
@@ -23,16 +23,16 @@
     <swiper-container #swiperRef [slidesPerView]="swiperOpts.slidesPerView" (slidechangetransitionend)="updateToolbarArrows()">
         <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
         <swiper-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong" [title]="'core.editor.bold' | translate"
-                (click)="buttonAction($event, 'bold', 'strong')" (keyup)="buttonAction($event, 'bold', 'strong')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.strong || toolbarStyles.b"
+                [title]="'core.editor.bold' | translate" (click)="buttonAction($event, 'bold', 'b')"
+                (keyup)="buttonAction($event, 'bold', 'b')" (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-bold" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide>
-            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em" [title]="'core.editor.italic' | translate"
-                (click)="buttonAction($event, 'italic', 'em')" (keyup)="buttonAction($event, 'italic', 'em')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
+            <button [disabled]="!rteEnabled" [attr.aria-pressed]="toolbarStyles.em || toolbarStyles.i"
+                [title]="'core.editor.italic' | translate" (click)="buttonAction($event, 'italic', 'i')"
+                (keyup)="buttonAction($event, 'italic', 'i')" (mousedown)="downAction($event)" (keydown)="downAction($event)" tabindex="0">
                 <ion-icon name="fas-italic" aria-hidden="true" />
             </button>
         </swiper-slide>
@@ -94,13 +94,13 @@
         </swiper-slide>
         <swiper-slide>
             <button [disabled]="!rteEnabled" (click)="buttonAction($event, 'removeFormat')" (keyup)="buttonAction($event, 'removeFormat')"
-                (mousedown)="downAction($event)" (keydown)="downAction($event)" [title]="'core.editor.clear' | translate">
+                (mousedown)="downAction($event)" (keydown)="downAction($event)" [title]="'core.editor.clear' | translate" tabindex="0">
                 <ion-icon name="fas-eraser" aria-hidden="true" />
             </button>
         </swiper-slide>
         <swiper-slide *ngIf="canScanQR">
             <button [disabled]="!rteEnabled" (click)="scanQR($event)" (keyup)="scanQR($event)" (mousedown)="stopBubble($event)"
-                (keydown)="stopBubble($event)" [title]="'core.scanqr' | translate">
+                (keydown)="stopBubble($event)" [title]="'core.scanqr' | translate" tabindex="0">
                 <ion-icon name="fas-qrcode" aria-hidden="true" />
             </button>
         </swiper-slide>
diff --git a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
index ee8486927..53c21ed2f 100644
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.ts
@@ -139,7 +139,9 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
     infoMessage?: string;
     toolbarStyles = {
         strong: 'false',
+        b: 'false',
         em: 'false',
+        i: 'false',
         u: 'false',
         strike: 'false',
         p: 'false',
@@ -491,6 +493,9 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
 
         this.stopBubble(event);
 
+        // Update tags for a11y.
+        this.replaceTags(['b', 'i'], ['strong', 'em']);
+
         this.setContent(this.control?.value || '');
 
         this.rteEnabled = !this.rteEnabled;
@@ -498,9 +503,6 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
         // Set focus and cursor at the end.
         // Modify the DOM directly so the keyboard stays open.
         if (this.rteEnabled) {
-            // Update tags for a11y.
-            this.replaceTags(['b', 'i'], ['strong', 'em']);
-
             this.editorElement?.removeAttribute('hidden');
             const textareaInputElement = await this.textarea?.getInputElement();
             textareaInputElement?.setAttribute('hidden', '');
@@ -679,13 +681,6 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
 
         // eslint-disable-next-line deprecation/deprecation
         document.execCommand(command, false);
-
-        // Modern browsers are using non a11y tags, so replace them.
-        if (command === 'bold') {
-            this.replaceTags(['b'], ['strong']);
-        } else if (command === 'italic') {
-            this.replaceTags(['i'], ['em']);
-        }
     }
 
     /**