From 2e825d2ae6054f3d7c6560ca6f1db9f82aad4bf9 Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Thu, 15 Sep 2022 08:10:52 -0500
Subject: [PATCH 1/2] Added emojiPicker and escapeHTML to properties

---
 qortal-ui-plugins/plugins/core/components/ChatPage.js    | 1 -
 .../plugins/core/components/ChatScroller.js              | 9 ++++-----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/qortal-ui-plugins/plugins/core/components/ChatPage.js b/qortal-ui-plugins/plugins/core/components/ChatPage.js
index 297e0bbf..69d18120 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatPage.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatPage.js
@@ -315,7 +315,6 @@ class ChatPage extends LitElement {
     }
 
    async processMessages(messages, isInitial) {
-        console.log({ messages })
         if (isInitial) {
 
             this.messages = messages.map((eachMessage) => {
diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index bf7be1a3..006d344d 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -231,7 +231,6 @@ class ChatScroller extends LitElement {
                 <div id='downObserver'></div>
                 <div class='last-message-ref'>
                 <vaadin-icon icon='vaadin:arrow-circle-down' slot='icon' @click=${() => {
-                console.log("yo500")
                 this.shadowRoot.getElementById('downObserver').scrollIntoView({
                     behavior: 'smooth',
                 }) 
@@ -263,7 +262,6 @@ class ChatScroller extends LitElement {
     _upObserverhandler(entries) {
         if (entries[0].isIntersecting) {
             let _scrollElement = entries[0].target.nextElementSibling
-            console.log({ _scrollElement })
             this._getOldMessage(_scrollElement)
         }
     }
@@ -315,6 +313,8 @@ class MessageTemplate extends LitElement {
     static get properties() {
         return {
             messageObj: { type: Object },
+            emojiPicker: { attribute: false },
+            escapeHTML: { attribute: false },
             hideMessages: { type: Array },
             openDialogPrivateMessage: {type: Boolean},
             openDialogBlockUser: {type: Boolean},
@@ -542,7 +542,6 @@ class MessageTemplate extends LitElement {
     }
 
     render() {
-        console.log(this.showBlockAddressIcon)
         const hidemsg = this.hideMessages
 
         let avatarImg = ''
@@ -574,12 +573,12 @@ class MessageTemplate extends LitElement {
                 </div>
                 <div class="message-data-avatar" style="width:42px; height:42px; ${this.messageObj.sender === this.myAddress ? "float:left;" : "float:left;"} margin:3px;">${avatarImg}</div>
                 <div class="message-container">
-                    <div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage))}</div>
+                <div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage))}</div>
                     <chat-menu 
                     tabindex="0"
                     class="chat-hover"
                     style=${this.showBlockAddressIcon && "display: block"}
-                    toblockaddress="${this.messageObj.sender}" 
+                    toblockaddress=${this.messageObj.sender} 
                     .showPrivateMessageModal=${() => this.showPrivateMessageModal()}
                     .showBlockUserModal=${() => this.showBlockUserModal()}
                     .showBlockIconFunc=${(props) => this.showBlockIconFunc(props)}

From 8386eac0a12248700eba40a8fb40858a69addd49 Mon Sep 17 00:00:00 2001
From: Justin Ferrari <‘justinwesleyferrari@gmail.com’>
Date: Thu, 15 Sep 2022 08:51:35 -0500
Subject: [PATCH 2/2] Added unsafeHTML to chat messages

---
 qortal-ui-plugins/plugins/core/components/ChatScroller.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/qortal-ui-plugins/plugins/core/components/ChatScroller.js b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
index 006d344d..51a34b1e 100644
--- a/qortal-ui-plugins/plugins/core/components/ChatScroller.js
+++ b/qortal-ui-plugins/plugins/core/components/ChatScroller.js
@@ -2,6 +2,7 @@ import { LitElement, html, css } from 'lit';
 import { render } from 'lit/html.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { translate, get } from 'lit-translate';
+import {unsafeHTML} from 'lit/directives/unsafe-html.js';
 import { Epml } from "../../../epml";
 import './LevelFounder.js';
 import './NameMenu.js';
@@ -573,7 +574,7 @@ class MessageTemplate extends LitElement {
                 </div>
                 <div class="message-data-avatar" style="width:42px; height:42px; ${this.messageObj.sender === this.myAddress ? "float:left;" : "float:left;"} margin:3px;">${avatarImg}</div>
                 <div class="message-container">
-                <div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage))}</div>
+                <div id="messageContent" class="message ${this.messageObj.sender === this.myAddress ? "my-message float-left" : "other-message float-left"}">${unsafeHTML(this.emojiPicker.parse(this.escapeHTML(this.messageObj.decodedMessage)))}</div>
                     <chat-menu 
                     tabindex="0"
                     class="chat-hover"