From 0f557b705708448ead627c3ecbf5aa76fca35a56 Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Mon, 31 Oct 2022 23:04:09 -0500
Subject: [PATCH] Continued chateditor logic

---
 .../plugins/core/components/ChatPage.js       | 35 ++++++++-----------
 1 file changed, 14 insertions(+), 21 deletions(-)

diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 7f0834a3..68462224 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/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,15 +1458,9 @@ class ChatPage extends LitElement {
                         }
 
                         if (e.type === 'keydown') {
-
-                            console.log(editorConfig.editableElement.contentDocument.body.scrollHeight);
-
-                            if (editorConfig.editableElement.contentDocument.body.scrollHeight > 40) {
-                                editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
-                            } else {
-                                editorConfig.calculateIFrameHeight(40);
-                            };
-
+                            console.log(editorConfig.mirrorElement.scrollHeight);
+                            editorConfig.calculateIFrameHeight(editorConfig.editableElement.contentDocument.body.scrollHeight);
+                            
                             // Handle Enter
                             if (e.keyCode === 13 && !e.shiftKey) {