MOBILE-2430 rte: Resize with keyboard open and close

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

@@ -19,6 +19,8 @@ import { CoreSitesProvider } from '@providers/sites';
 import { CoreFilepoolProvider } from '@providers/filepool';
 import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreUrlUtilsProvider } from '@providers/utils/url';
+import { CoreUtilsProvider } from '@providers/utils/utils';
+import { CoreEventsProvider } from '@providers/events';
 import { FormControl } from '@angular/forms';
 import { Keyboard } from '@ionic-native/keyboard';
 import { Subscription } from 'rxjs';
@@ -61,13 +63,15 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
     protected resizeFunction;
 
     protected valueChangeSubscription: Subscription;
+    protected keyboardObs: any;
 
     rteEnabled = false;
     editorSupported = true;
 
     constructor(private domUtils: CoreDomUtilsProvider, private keyboard: Keyboard, private urlUtils: CoreUrlUtilsProvider,
             private sitesProvider: CoreSitesProvider, private filepoolProvider: CoreFilepoolProvider,
-            @Optional() private content: Content, elementRef: ElementRef) {
+            @Optional() private content: Content, elementRef: ElementRef, private events: CoreEventsProvider,
+            private utils: CoreUtilsProvider) {
         this.contentChanged = new EventEmitter<string>();
         this.element = elementRef.nativeElement as HTMLDivElement;
     }
@@ -130,34 +134,50 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
 
         let i = 0;
         const interval = setInterval(() => {
-            const height = this.maximizeEditorSize();
-            if (i >= 5 || height != 0) {
-                clearInterval(interval);
-            }
-            i++;
+            this.maximizeEditorSize().then((height) => {
+                if (i >= 5 || height != 0) {
+                    clearInterval(interval);
+                }
+                i++;
+            });
         }, 750);
+
+        this.keyboardObs = this.events.on(CoreEventsProvider.KEYBOARD_CHANGE, (isOn) => {
+            this.maximizeEditorSize();
+        });
     }
 
     /**
      * Resize editor to maximize the space occupied.
+     *
+     * @return {Promise<number>} Resolved with calculated editor size.
      */
-    protected maximizeEditorSize(): number {
+    protected maximizeEditorSize(): Promise<number> {
         this.content.resize();
-        const contentVisibleHeight = this.content.contentHeight;
 
-        // Editor is ready, adjust Height if needed.
-        if (contentVisibleHeight > 0) {
-            const height = this.getSurroundingHeight(this.element);
-            if (contentVisibleHeight > height) {
-                this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - height);
-            } else {
-                this.element.style.height = '';
+        const deferred = this.utils.promiseDefer();
+
+        setTimeout(() => {
+            const contentVisibleHeight = this.content.contentHeight;
+
+            // Editor is ready, adjust Height if needed.
+            if (contentVisibleHeight > 0) {
+                const height = this.getSurroundingHeight(this.element);
+                if (contentVisibleHeight > height) {
+                    this.element.style.height = this.domUtils.formatPixelsSize(contentVisibleHeight - height);
+                } else {
+                    this.element.style.height = '';
+                }
+
+                deferred.resolve(contentVisibleHeight - height);
+
+                return;
             }
 
-            return contentVisibleHeight - height;
-        }
+            deferred.resolve(0);
+        });
 
-        return 0;
+        return deferred.promise;
     }
 
     /**
@@ -467,6 +487,7 @@ export class CoreRichTextEditorComponent implements AfterContentInit, OnDestroy
      */
     ngOnDestroy(): void {
         this.valueChangeSubscription && this.valueChangeSubscription.unsubscribe();
+        this.keyboardObs && this.keyboardObs.off();
         window.removeEventListener('resize', this.resizeFunction);
     }
 }

src/providers/app.ts

@@ -19,6 +19,7 @@ import { Network } from '@ionic-native/network';
 
 import { CoreDbProvider } from './db';
 import { CoreLoggerProvider } from './logger';
+import { CoreEventsProvider } from './events';
 import { SQLiteDB } from '@classes/sqlitedb';
 
 /**
@@ -69,16 +70,18 @@ export class CoreAppProvider {
     protected isKeyboardShown = false;
 
     constructor(dbProvider: CoreDbProvider, private platform: Platform, private keyboard: Keyboard, private appCtrl: App,
-            private network: Network, logger: CoreLoggerProvider) {
+            private network: Network, logger: CoreLoggerProvider, events: CoreEventsProvider) {
         this.logger = logger.getInstance('CoreAppProvider');
         this.db = dbProvider.getDB(this.DBNAME);
 
         this.keyboard.onKeyboardShow().subscribe((data) => {
             this.isKeyboardShown = true;
+            events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown);
 
         });
         this.keyboard.onKeyboardHide().subscribe((data) => {
             this.isKeyboardShown = false;
+            events.trigger(CoreEventsProvider.KEYBOARD_CHANGE, this.isKeyboardShown);
         });
     }
 

src/providers/events.ts

@@ -54,6 +54,7 @@ export class CoreEventsProvider {
     static IAB_EXIT = 'inappbrowser_exit';
     static APP_LAUNCHED_URL = 'app_launched_url'; // App opened with a certain URL (custom URL scheme).
     static FILE_SHARED = 'file_shared';
+    static KEYBOARD_CHANGE = 'keyboard_change';
 
     protected logger;
     protected observables: { [s: string]: Subject<any> } = {};