MOBILE-4470 rte: Fix styles and carets

src/core/features/editor/components/rich-text-editor/rich-text-editor.scss

@@ -98,18 +98,28 @@
     .core-textarea {
         position: relative;
 
-        --highlight-color: transparent !important;
+        --full-highlight-height: 0px !important;
 
-        ::ng-deep textarea {
+        ::ng-deep .textarea-wrapper,
-            margin: 0px !important;
+        ::ng-deep .textarea-legacy-wrapper {
-            padding: 0px;
+            height: 100%;
-            resize: none;
+
-            overflow-x: hidden;
+            .textarea-wrapper-inner {
-            overflow-y: auto;
+                height: 100%;
-            position: absolute;
+            }
-            height: auto;
+
-            top: 0px;
+            ::ng-deep textarea {
-            bottom: 0px;
+                caret-color: black;
+                margin: 0px !important;
+                padding: 0px;
+                resize: none;
+                overflow-x: hidden;
+                overflow-y: auto;
+                position: absolute;
+                height: auto;
+                top: 0px;
+                bottom: 0px;
+            }
         }
     }
 

src/core/features/editor/components/rich-text-editor/rich-text-editor.ts

@@ -433,65 +433,21 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
      * Set the caret position on the character number.
      *
      * @param parent Parent where to set the position.
-     * @param chars Number of chars where to place the caret. If not defined it will go to the end.
      */
-    protected setCurrentCursorPosition(parent: Node, chars?: number): void {
+    protected setCurrentCursorPosition(parent: Node): void {
-        /**
+        const range = document.createRange();
-         * Loops round all the child text nodes within the supplied node and sets a range from the start of the initial node to
-         * the characters.
-         *
-         * @param node Node where to start.
-         * @param range Previous calculated range.
-         * @param chars Object with counting of characters (input-output param).
-         * @param chars.count Count of characters.
-         * @returns Selection range.
-         */
-        const setRange = (node: Node, range: Range, chars: { count: number }): Range => {
-            if (chars.count === 0) {
-                range.setEnd(node, 0);
-            } else if (node && chars.count > 0) {
-                if (node.hasChildNodes()) {
-                    // Navigate through children.
-                    for (let lp = 0; lp < node.childNodes.length; lp++) {
-                        range = setRange(node.childNodes[lp], range, chars);
 
-                        if (chars.count === 0) {
+        // Select all so it will go to the end.
-                            break;
+        range.selectNode(parent);
-                        }
+        range.selectNodeContents(parent);
-                    }
+        range.collapse(false);
-                } else if ((node.textContent || '').length < chars.count) {
-                    // Jump this node.
-                    // @todo empty nodes will be omitted.
-                    chars.count -= (node.textContent || '').length;
-                } else {
-                    // The cursor will be placed in this element.
-                    range.setEnd(node, chars.count);
-                    chars.count = 0;
-                }
-            }
 
-            return range;
+        const selection = window.getSelection();
-        };
+        if (!selection) {
-
-        let range = document.createRange();
-        if (chars === undefined) {
-            // Select all so it will go to the end.
-            range.selectNode(parent);
-            range.selectNodeContents(parent);
-        } else if (chars < 0 || chars > (parent.textContent || '').length) {
             return;
-        } else {
-            range.selectNode(parent);
-            range.setStart(parent, 0);
-            range = setRange(parent, range, { count: chars });
-        }
-
-        if (range) {
-            const selection = window.getSelection();
-            range.collapse(false);
-            selection?.removeAllRanges();
-            selection?.addRange(range);
         }
+        selection.removeAllRanges();
+        selection.addRange(range);
     }
 
     /**
@@ -736,6 +692,7 @@ export class CoreEditorRichTextEditorComponent implements OnInit, AfterViewInit,
             }
         };
 
+        // There are many cases when focus is fired after blur, so we need to delay the blur action.
         this.blurTimeout = window.setTimeout(() => doBlur(event),300);
     }
 

src/theme/components/ion-item.scss

@@ -269,6 +269,11 @@ ion-item.item.item-file {
     }
 }
 
+// No highlight on RTE.
+ion-item.item-rte {
+    --full-highlight-height: 0px !important;
+}
+
 // Make links clickable when inside radio or checkbox items. Style part.
 @media (hover: hover) {
     ion-item.item-multiple-inputs:not(.item-rte):hover::part(native) {