@yoobic/yobi 8.6.31 → 8.6.32

package/dist/collection/components/form/form-text-editor/form-text-editor.js

@@ -47,7 +47,7 @@ import 'froala-editor/js/languages/uk';
 import 'froala-editor/js/languages/zh_cn';
 import 'froala-editor/js/languages/zh_tw';
 import 'froala-editor/js/languages/vi';
-import { asyncWaterfall, closeModal, debounce as _debounce, debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUserDisplayName, getUUID, getVideoPoster, images, isCloudinaryLink, isImageUrl, isIOS, isSafari, isVideo, isWeb, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, updateLinkPreviews, videos } from '@shared/utils';
+import { asyncWaterfall, closeModal, debounce as _debounce, debounce, getAsyncExtraData, getColorSwatches, getCurrentLanguage, getCustomApp, getSession, getUserDisplayName, getUUID, getVideoPoster, images, isAndroid, isCloudinaryLink, isImageUrl, isIOS, isSafari, isVideo, isWeb, replaceAtTagToMentionTag, showContextMenu, showModal, translate, translateMulti, updateLinkPreviews, videos } from '@shared/utils';
 import { h, Host } from '@stencil/core';
 import { getAppContext, querySelectorDeep, removeHtmlFromString } from '@yobi/utils/helpers/common-helpers';
 import { sanitizeMentionTag } from '@yobi/utils/helpers/entities-helpers';
@@ -57,6 +57,7 @@ import { destroyMountPoints, generateRandomMountElementId, initShadowMountPoints
 import FroalaEditor from 'froala-editor';
 import { assign, compact, isArray, isString } from 'lodash-es';
 import sanitizeHtml from 'sanitize-html';
+const PADDING = 32;
 export class YooFormTextEditorComponent {
   constructor() {
     // the event "contentChanged" is not fired before hitting 'Enter' once,
@@ -91,6 +92,7 @@ export class YooFormTextEditorComponent {
     this.isFieldCollapsed = false;
     this.mentionText = '';
     this.isMentionMode = false;
+    this.keyboardOpen = false;
   }
   get mount() {
     return document.getElementById(this.mountId);
@@ -115,6 +117,7 @@ export class YooFormTextEditorComponent {
       else {
         this.blockHTMLReset = false;
       }
+      this.inputResize.emit();
     }
   }
   onMentionUsersChanged() {
@@ -187,6 +190,16 @@ export class YooFormTextEditorComponent {
     (_a = this.mentionDialog) === null || _a === void 0 ? void 0 : _a.remove();
     this.destroyEditor();
   }
+  onKeyboardShown() {
+    this.keyboardOpen = true;
+    const wrapper = this.mount.querySelector('.fr-wrapper');
+    wrapper && (wrapper.style.maxHeight = isAndroid() ? '80px' : '96px');
+  }
+  onKeyboardHidden() {
+    this.keyboardOpen = false;
+    const wrapper = this.mount.querySelector('.fr-wrapper');
+    wrapper && (wrapper.style.maxHeight = this.maxHeight ? `${this.maxHeight + PADDING}px` : '500px');
+  }
   destroyEditor() {
     var _a;
     if ((_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy) {
@@ -273,7 +286,7 @@ export class YooFormTextEditorComponent {
       placeholderText: translate(this.placeholder),
       toolbarSticky: false,
       requestHeaders: { Authorization: 'Bearer ' + (session === null || session === void 0 ? void 0 : session.token) },
-      heightMax: this.isFullscreen ? '100%' : this.maxHeight || 500,
+      heightMax: this.isFullscreen ? '100%' : this.maxHeight + PADDING || '500px',
       heightMin: this.isFullscreen ? '100%' : this.minHeight || 120,
       emoticonsUseImage: false,
       imageUploadParam: 'file',
@@ -478,6 +491,9 @@ export class YooFormTextEditorComponent {
             ev.preventDefault();
             (_a = this.editor) === null || _a === void 0 ? void 0 : _a.events.focus();
           }
+        },
+        'focus': () => {
+          this.inputFocused.emit({ host: this.host });
         }
       }
     };
@@ -1359,7 +1375,8 @@ export class YooFormTextEditorComponent {
   static get states() {
     return {
       "mentionText": {},
-      "isMentionMode": {}
+      "isMentionMode": {},
+      "keyboardOpen": {}
     };
   }
   static get events() {
@@ -1423,6 +1440,21 @@ export class YooFormTextEditorComponent {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "inputResize",
+        "name": "inputResize",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
       }, {
         "method": "linkPreviewChanged",
         "name": "linkPreviewChanged",
@@ -1540,4 +1572,19 @@ export class YooFormTextEditorComponent {
         "methodName": "mentionModeChanged"
       }];
   }
+  static get listeners() {
+    return [{
+        "name": "keyboardDidShow",
+        "method": "onKeyboardShown",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keyboardWillHide",
+        "method": "onKeyboardHidden",
+        "target": "window",
+        "capture": false,
+        "passive": false
+      }];
+  }
 }