From ce36245d8368ebcaf2da5583e07456cf65836a07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Wed, 15 Nov 2023 23:36:35 +0100
Subject: [PATCH] MOBILE-3947 chore: Move replaceTags to CoreDom

---
 .../rich-text-editor/rich-text-editor.ts      | 36 +++++---------
 src/core/singletons/dom.ts                    | 48 +++++++++++++++++++
 2 files changed, 59 insertions(+), 25 deletions(-)

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 6df15894d..74bf1f1f5 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
@@ -189,8 +189,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
         }
 
         // Update tags for a11y.
-        this.replaceTags('b', 'strong');
-        this.replaceTags('i', 'em');
+        this.replaceTags(['b', 'i'], ['strong', 'em']);
 
         if (this.shouldAutoSaveDrafts()) {
             this.restoreDraft();
@@ -476,8 +475,8 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
         // Modify the DOM directly so the keyboard stays open.
         if (this.rteEnabled) {
             // Update tags for a11y.
-            this.replaceTags('b', 'strong');
-            this.replaceTags('i', 'em');
+            this.replaceTags(['b', 'i'], ['strong', 'em']);
+
             this.editorElement?.removeAttribute('hidden');
             const textareaInputElement = await this.textarea?.getInputElement();
             textareaInputElement?.setAttribute('hidden', '');
@@ -647,39 +646,26 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
         document.execCommand(command, false);
 
         // Modern browsers are using non a11y tags, so replace them.
-        if (command == 'bold') {
-            this.replaceTags('b', 'strong');
+        if (command === 'bold') {
+            this.replaceTags(['b'], ['strong']);
         } else if (command == 'italic') {
-            this.replaceTags('i', 'em');
+            this.replaceTags(['i'], ['em']);
         }
     }
 
     /**
      * Replace tags for a11y.
      *
-     * @param originTag      Origin tag to be replaced.
-     * @param destinationTag Destination tag to replace.
+     * @param originTag      Origin tags to be replaced.
+     * @param destinationTag Destination tags to replace.
      */
-    protected replaceTags(originTag: string, destinationTag: string): void {
+    protected replaceTags(originTags: string[], destinationTags: string[]): void {
         if (!this.editorElement) {
             return;
         }
 
-        const elems = Array.from(this.editorElement.getElementsByTagName(originTag));
-
-        elems.forEach((elem) => {
-            const newElem = document.createElement(destinationTag);
-            newElem.innerHTML = elem.innerHTML;
-
-            if (elem.hasAttributes()) {
-                const attrs = Array.from(elem.attributes);
-                attrs.forEach((attr) => {
-                    newElem.setAttribute(attr.name, attr.value);
-                });
-            }
-
-            elem.parentNode?.replaceChild(newElem, elem);
-        });
+        this.editorElement =
+            CoreDom.replaceTags(this.editorElement, originTags, destinationTags);
 
         this.onChange();
     }
diff --git a/src/core/singletons/dom.ts b/src/core/singletons/dom.ts
index eb3798944..e67b78ba4 100644
--- a/src/core/singletons/dom.ts
+++ b/src/core/singletons/dom.ts
@@ -617,6 +617,54 @@ export class CoreDom {
         return value;
     }
 
+    /**
+     * Replace tags on HTMLElement.
+     *
+     * @param element HTML Element where to replace the tags.
+     * @param originTags Origin tag to be replaced.
+     * @param destinationTags Destination tag to replace.
+     * @returns Element with tags replaced.
+     */
+    static replaceTags<T extends HTMLElement = HTMLElement>(
+        element: T,
+        originTags: string | string[],
+        destinationTags: string | string[],
+    ): T {
+        if (typeof originTags === 'string') {
+            originTags = [originTags];
+        }
+
+        if (typeof destinationTags === 'string') {
+            destinationTags = [destinationTags];
+        }
+
+        if (originTags.length !== destinationTags.length) {
+            // Do nothing, incorrect input.
+            return element;
+        }
+
+        originTags.forEach((originTag, index) => {
+            const destinationTag = destinationTags[index];
+            const elems = Array.from(element.getElementsByTagName(originTag));
+
+            elems.forEach((elem) => {
+                const newElem = document.createElement(destinationTag);
+                newElem.innerHTML = elem.innerHTML;
+
+                if (elem.hasAttributes()) {
+                    const attrs = Array.from(elem.attributes);
+                    attrs.forEach((attr) => {
+                        newElem.setAttribute(attr.name, attr.value);
+                    });
+                }
+
+                elem.parentNode?.replaceChild(newElem, elem);
+            });
+        });
+
+        return element;
+    }
+
 }
 
 /**