fix initial scroll and double text when edit

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

@@ -655,7 +655,6 @@ class ChatPage extends LitElement {
     }
 
     setChatEditor(editor){
-        console.log({editor})
         this.chatEditor = editor
     }
 
@@ -774,17 +773,7 @@ class ChatPage extends LitElement {
     }
 
 
-    async updated(changedProperties) {
+ 
-    
-        if (changedProperties && changedProperties.has('editedMessageObj')) {
-            this.chatEditor.insertText(this.editedMessageObj.message)
-        }
-     
-        // if(changedProperties && changedProperties.has("imageFile")) {
-        //     this.chatbarCaption = this.shadowRoot.querySelector('.chatbar-caption');
-        //     this.chatbarCaption.focus();
-        // }
-    }
 
     onCaptionChange(e) {
         this.caption = e;
@@ -1321,11 +1310,9 @@ class ChatPage extends LitElement {
                     quality: 0.6,
                     maxWidth: 500,
                     success(result) {
-                        console.log({result});
                         const file = new File([result], "name", {
                             type: 'image/png'
                         });
-                        console.log({file});
                         compressedFile = file;
                         resolve();
                     },

qortal-ui-plugins/plugins/core/components/ChatScroller-css.js

@@ -400,6 +400,11 @@ export const chatStyles = css`
 	.image-container {
 		display: flex;
 	}
+	.message-data-level  {
+		height: 21px;
+		width: 21px;
+		overflow: hidden;
+	}
 	.defaultSize {
 		width:45vh; 
 		height:40vh

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

@@ -120,6 +120,13 @@ class ChatScroller extends LitElement {
         return changedProperties.has('messages');
       }
 
+      async getUpdateComplete() {
+        await super.getUpdateComplete();
+        const marginElements = Array.from(this.shadowRoot.querySelectorAll('message-template'));
+        await Promise.all(marginElements.map(el => el.updateComplete));
+        return true;
+    }
+
     async firstUpdated() {
         this.viewElement = this.shadowRoot.getElementById('viewElement');
         this.upObserverElement = this.shadowRoot.getElementById('upObserver');
@@ -127,7 +134,8 @@ class ChatScroller extends LitElement {
         // Intialize Observers
         this.upElementObserver()
         this.downElementObserver()
-        await this.updateComplete
+        await this.getUpdateComplete()
+
         this.viewElement.scrollTop = this.viewElement.scrollHeight + 50
 
         
@@ -253,7 +261,6 @@ class MessageTemplate extends LitElement {
     }
 
     render() {
-        console.log(this.messageObj);
         const hidemsg = this.hideMessages;
         let message = "";
         let reactions = [];

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

@@ -208,7 +208,6 @@ class ChatTextEditor extends LitElement {
 	}
 
     initialChat(e) {
-        console.log('hello initial', this.chatEditor)
         if (!this.chatEditor?.contentDiv.matches(':focus')) {
             // WARNING: Deprecated methods from KeyBoard Event
             if (e.code === "Space" || e.keyCode === 32 || e.which === 32) {
@@ -231,7 +230,6 @@ class ChatTextEditor extends LitElement {
     }
 
 	async firstUpdated() {
-        console.log('this.hasGlobalEvents', this.hasGlobalEvents)
         if(this.hasGlobalEvents){
             this.addGlobalEventListener()
         }
@@ -239,7 +237,6 @@ class ChatTextEditor extends LitElement {
         this.emojiPickerHandler = this.shadowRoot.querySelector('.emoji-button');
         this.mirrorChatInput = this.shadowRoot.getElementById('messageBox');
         this.chatMessageInput = this.shadowRoot.getElementById(this.iframeId);
-        console.log('test', this.chatMessageInput )
        
         
         this.emojiPicker = new EmojiPicker({
@@ -255,7 +252,6 @@ class ChatTextEditor extends LitElement {
         });
 
         this.emojiPicker.on('emoji', selection => {
-            console.log('hello selection')
             const emojiHtmlString = `<img class="emoji" draggable="false" alt="${selection.emoji}" src="${selection.url}">`;
             this.chatEditor.insertEmoji(emojiHtmlString);
         });
@@ -268,7 +264,6 @@ class ChatTextEditor extends LitElement {
 	}
 
     async updated(changedProperties) {
-       console.log({changedProperties})
         if (changedProperties && changedProperties.has('editedMessageObj')) {
             this.chatEditor.insertText(this.editedMessageObj.message)
         }
@@ -344,7 +339,6 @@ class ChatTextEditor extends LitElement {
     }
 
     initChatEditor() {
-        console.log('hello editor')
         const ChatEditor = function (editorConfig) {
             
             const ChatEditor = function () {
@@ -496,7 +490,6 @@ class ChatTextEditor extends LitElement {
                 const filteredValue = chatInputValue.replace(/<img.*?alt=".*?/g, '').replace(/".?src=.*?>/g, '');
 
                 let unescapedValue = editorConfig.unescape(filteredValue);
-                console.log({unescapedValue})
                 editor.mirror.value = unescapedValue;
             };
 
@@ -681,9 +674,7 @@ editor.content.body.appendChild(elemDiv);
             removeGlobalEventListener: this.removeGlobalEventListener,
             iframeId: this.iframeId
         };
-        console.log('after')
         const newChat = new ChatEditor(editorConfig)
-        console.log({newChat})
         this.setChatEditor(newChat)
     }
 }