MOBILE-2430 rte: Improve rte buttons

src/components/rich-text-editor/core-rich-text-editor.html

@@ -5,18 +5,18 @@
     <!-- https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand -->
     <div #decorate class="core-rte-toolbar">
         <div class="core-rte-buttons">
-            <button data-command="bold"><strong>B</strong></button>
+            <button data-command="bold"><core-icon name="fa-bold"></core-icon></button>
-            <button data-command="italic"><i>I</i></button>
+            <button data-command="italic"><core-icon name="fa-italic"></core-icon></button>
-            <button data-command="underline"><u>U</u></button>
+            <button data-command="underline"><core-icon name="fa-underline"></core-icon></button>
-            <button data-command="formatBlock|<p>">Normal</button>
+            <button data-command="strikeThrough"><core-icon name="fa-strikethrough"></core-icon></button>
-            <button data-command="formatBlock|<h1>">H1</button>
+            <button data-command="formatBlock|<p>"><core-icon name="fa-paragraph"></core-icon></button>
-            <button data-command="formatBlock|<h2>">H2</button>
+            <button data-command="formatBlock|<h1>"><core-icon name="fa-header"></core-icon>1</button>
-            <button data-command="formatBlock|<h3>">H3</button>
+            <button data-command="formatBlock|<h2>"><core-icon name="fa-header"></core-icon>2</button>
-            <button data-command="formatBlock|<pre>">&lt;pre&gt;</button>
+            <button data-command="formatBlock|<h3>"><core-icon name="fa-header"></core-icon>3</button>
-            <button data-command="insertOrderedList"><ion-icon name="list" md="ios-list"></ion-icon></button>
+            <button data-command="insertUnorderedList"><core-icon name="fa-list-ul"></core-icon></button>
-            <button data-command="insertUnorderedList">1,2,3</button>
+            <button data-command="insertOrderedList"><core-icon name="fa-list-ol"></core-icon></button>
-            <button data-command="removeFormat"><ion-icon name="brush"></ion-icon></button>
+            <button data-command="removeFormat"><core-icon name="fa-eraser"></core-icon></button>
-            <button (click)="toggleEditor($event)"><ion-icon name="eye-off"></ion-icon> {{ 'core.viewcode' | translate }}</button>
+            <button (click)="toggleEditor($event)"><core-icon name="fa-code"></core-icon> {{ 'core.viewcode' | translate }}</button>
         </div>
     </div>
 </div>
@@ -25,7 +25,7 @@
     <ion-textarea #textarea class="core-textarea" [placeholder]="placeholder" [attr.name]="name" ngControl="control" (ionChange)="onChange($event)"></ion-textarea>
     <div class="core-rte-toolbar">
         <div #decorate class="core-rte-buttons">
-            <button tappable (click)="toggleEditor($event)"><ion-icon name="eye"></ion-icon> {{ 'core.vieweditor' | translate }}</button>
+            <button tappable (click)="toggleEditor($event)"><core-icon name="fa-pencil-square-o"></core-icon> {{ 'core.vieweditor' | translate }}</button>
         </div>
     </div>
 </div>

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

@@ -39,6 +39,11 @@ core-rich-text-editor {
             font-weight: bold;
         }
 
+        // Make empty elements selectable (to move the cursor).
+        *:empty:after {
+            content: '\200B';
+        }
+
         ul {
             list-style-type: disc;
         }

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

@@ -88,6 +88,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
         this.editorElement.onkeyup = this.onChange.bind(this);
         this.editorElement.onpaste = this.onChange.bind(this);
         this.editorElement.oninput = this.onChange.bind(this);
+        this.editorElement.onkeydown = this.moveCursor.bind(this);
 
         // Listen for changes on the control to update the editor (if it is updated from outside of this component).
         this.valueChangeSubscription = this.control.valueChanges.subscribe((param) => {
@@ -116,17 +117,28 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
             }
         }
 
+        // Use paragraph on enter.
+        document.execCommand('DefaultParagraphSeparator', false, 'p');
+
         this.treatExternalContent();
 
         this.resizeFunction = this.maximizeEditorSize.bind(this);
         window.addEventListener('resize', this.resizeFunction);
-        setTimeout(this.resizeFunction, 1000);
+
+        let i = 0;
+        const interval = setInterval(() => {
+            const height = this.maximizeEditorSize();
+            if (i >= 5 || height != 0) {
+                clearInterval(interval);
+            }
+            i++;
+        }, 750);
     }
 
     /**
      * Resize editor to maximize the space occupied.
      */
-    protected maximizeEditorSize(): void {
+    protected maximizeEditorSize(): number {
         this.content.resize();
         const contentVisibleHeight = this.content.contentHeight;
 
@@ -138,7 +150,11 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
             } else {
                 this.element.style.height = '';
             }
+
+            return contentVisibleHeight - height;
         }
+
+        return 0;
     }
 
     /**
@@ -195,6 +211,132 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
         this.contentChanged.emit(this.control.value);
     }
 
+    /**
+     * On key down function to move the cursor.
+     * https://stackoverflow.com/questions/6249095/how-to-set-caretcursor-position-in-contenteditable-element-div
+     *
+     * @param {Event} $event The event.
+     */
+    moveCursor($event: Event): void {
+        if (!this.rteEnabled) {
+            return;
+        }
+
+        if ($event['key'] != 'ArrowLeft' && $event['key'] != 'ArrowRight') {
+            return;
+        }
+
+        $event.preventDefault();
+        $event.stopPropagation();
+
+        const move = $event['key'] == 'ArrowLeft' ? -1 : +1,
+            cursor = this.getCurrentCursorPosition(this.editorElement);
+
+        this.setCurrentCursorPosition(this.editorElement, cursor + move);
+    }
+
+    /**
+     * Returns the number of chars from the beggining where is placed the cursor.
+     *
+     * @param  {Node}   parent Parent where to get the position from.
+     * @return {number}        Position in chars.
+     */
+    protected getCurrentCursorPosition(parent: Node): number {
+        const selection = window.getSelection();
+
+        let charCount = -1,
+            node;
+
+        if (selection.focusNode) {
+            if (parent.contains(selection.focusNode)) {
+                node = selection.focusNode;
+                charCount = selection.focusOffset;
+
+                while (node) {
+                    if (node.isSameNode(parent)) {
+                        break;
+                    }
+
+                    if (node.previousSibling) {
+                        node = node.previousSibling;
+                        charCount += node.textContent.length;
+                    } else {
+                        node = node.parentNode;
+                        if (node === null) {
+                            break;
+                        }
+                    }
+                }
+            }
+        }
+
+        return charCount;
+    }
+
+    /**
+     * Set the caret position on the character number.
+     *
+     * @param {Node}   parent   Parent where to set the position.
+     * @param {number} [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 {
+        /**
+         * 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  Node where to start.
+         * @param  {Range} range Previous calculated range.
+         * @param  {any}   chars Object with counting of characters (input-output param).
+         * @return {Range}       Selection range.
+         */
+        const setRange = (node: Node, range: Range, chars: any): 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) {
+                            break;
+                        }
+                    }
+                } 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;
+        };
+
+        let range = document.createRange();
+        if (typeof 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);
+        }
+    }
+
     /**
      * Toggle from rte editor to textarea syncing values.
      *
@@ -204,7 +346,8 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
         $event.preventDefault();
         $event.stopPropagation();
 
-        if (this.isNullOrWhiteSpace(this.control.value)) {
+        const isNull = this.isNullOrWhiteSpace(this.control.value);
+        if (isNull) {
             this.clearText();
         } else {
             this.editorElement.innerHTML = this.control.value;
@@ -217,14 +360,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
         setTimeout(() => {
             if (this.rteEnabled) {
                 this.editorElement.focus();
-
+                this.setCurrentCursorPosition(this.editorElement.firstChild);
-                const range = document.createRange();
-                range.selectNodeContents(this.editorElement);
-                range.collapse(false);
-
-                const sel = window.getSelection();
-                sel.removeAllRanges();
-                sel.addRange(range);
             } else {
                 this.textarea.setFocus();
             }
@@ -279,8 +415,15 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
     clearText(): void {
         this.editorElement.innerHTML = '<p></p>';
         this.textarea.value = '';
+
         // Don't emit event so our valueChanges doesn't get notified by this change.
         this.control.setValue(null, {emitEvent: false});
+
+        setTimeout(() => {
+            if (this.rteEnabled) {
+                this.setCurrentCursorPosition(this.editorElement);
+            }
+        }, 1);
     }
 
     /**