Continued chateditor logic

qortal-ui-plugins/plugins/core/components/ChatPage.js

@@ -54,7 +54,7 @@ class ChatPage extends LitElement {
             repliedToMessageObj: { type: Object },
             editedMessageObj: { type: Object },
             chatMessageSize: { type: String },
-            iframeHeight: { type:  Number }
+            iframeHeight: { type: Number }
         }
     }
 
@@ -66,13 +66,15 @@ class ChatPage extends LitElement {
 
         .chat-container {
             display: grid;
-            grid-template-rows: minmax(66%, 92vh) minmax(40px, auto);
+            grid-template-rows: minmax(6%, 92vh) minmax(40px, auto);
             max-height: 100%;
         }
 
         .chat-text-area {
             display: flex;
             justify-content: center;
+            min-height: 60px;
+            max-height: 100%;
             overflow: hidden;
         }
 
@@ -93,8 +95,10 @@ class ChatPage extends LitElement {
         }
 
         .chat-text-area .typing-area .chat-editor {
+            display: flex;
+            max-height: -webkit-fill-available;
+            width: 100%;
             border-color: transparent;
-            flex: 1;
             margin: 0;
             padding: 0;
             border: none;
@@ -161,9 +165,10 @@ class ChatPage extends LitElement {
             width: auto;
             display: flex;
             justify-content: center;
-            align-items: center;
+            align-items: flex-end;
             height: auto;
             padding: 5px;
+            overflow-y: hidden;
         }
 
         .chat-text-area .typing-area .emoji-button {
@@ -193,6 +198,7 @@ class ChatPage extends LitElement {
         this.getOldMessage = this.getOldMessage.bind(this)
         this._sendMessage = this._sendMessage.bind(this)
         this._downObserverhandler = this._downObserverhandler.bind(this)
+        this.calculateIFrameHeight = this.calculateIFrameHeight.bind(this)
         this.selectedAddress = {}
         this.chatId = ''
         this.myAddress = ''
@@ -222,7 +228,7 @@ class ChatPage extends LitElement {
                 <div>
                     ${this.isLoadingMessages ? html`<h1>${translate("chatpage.cchange22")}</h1>` : this.renderChatScroller(this._initialMessages)}
                 </div>
-                <div class="chat-text-area">
+                <div class="chat-text-area" style="${`height: ${this.iframeHeight}px`}">
                         <div class="typing-area">
                             ${this.repliedToMessageObj && html`
                                 <div class="repliedTo-container">
@@ -285,7 +291,6 @@ class ChatPage extends LitElement {
 
     async firstUpdated() {
         // TODO: Load and fetch messages from localstorage (maybe save messages to localstorage...)
-
         // this.changeLanguage();
         this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
         this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
@@ -403,19 +408,13 @@ class ChatPage extends LitElement {
 
         }
         if (changedProperties && changedProperties.has('editedMessageObj')) {
-        
             this.chatEditor.insertText(this.editedMessageObj.message)
         }
-
-        if (changedProperties && changedProperties.has('iframeHeight')) {
-           console.log({iframeHeight: this.iframeHeight})
-        }
     }
 
     calculateIFrameHeight(height) {
         console.log(height, "height here")
         this.iframeHeight = height;
-        this.requestUpdate();
     }
 
     changeLanguage() {
@@ -1459,14 +1458,8 @@ class ChatPage extends LitElement {
                         }
 
                         if (e.type === 'keydown') {
-
+                            console.log(editorConfig.mirrorElement.scrollHeight);
-                            console.log(editorConfig.editableElement.contentDocument.body.scrollHeight);
+                            editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
-
-                            if (editorConfig.editableElement.contentDocument.body.scrollHeight > 40) {
-                                editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
-                            } else {
-                                editorConfig.calculateIFrameHeight(40);
-                            };
                             
                             // Handle Enter
                             if (e.keyCode === 13 && !e.shiftKey) {