single emojipicker for chat messages

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

@@ -24,6 +24,7 @@ import { replaceMessagesEdited } from '../../utils/replace-messages-edited.js';
 import { publishData } from '../../utils/publish-image.js';
 import WebWorker from 'web-worker:./computePowWorker.js';
 import WebWorkerImage from 'web-worker:./computePowWorkerImage.js';
+import { EmojiPicker } from 'emoji-picker-js';
 
 
 // const messagesCache = localForage.createInstance({
@@ -550,6 +551,15 @@ class ChatPage extends LitElement {
         this.uid = new ShortUniqueId()
         this.userLanguage = ""
         this.lastMessageRefVisible = false
+        this.emojiPicker = new EmojiPicker({
+            style: "twemoji",
+            twemojiBaseUrl: '/emoji/',
+            showPreview: false,
+            showVariants: false,
+            showAnimation: false,
+            position: 'top-start',
+            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
+        });
     }
     
     render() {
@@ -862,6 +872,7 @@ class ChatPage extends LitElement {
         .focusChatEditor=${() => this.focusChatEditor()}
         .sendMessage=${(val) => this._sendMessage(val)}
         .showLastMessageRefScroller=${(val) => this.showLastMessageRefScroller(val)}
+        .emojiPicker=${this.emojiPicker} 
         >
         </chat-scroller>
         `

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

@@ -17,6 +17,7 @@ import { EmojiPicker } from 'emoji-picker-js';
 import { cropAddress } from "../../utils/cropAddress";
 
 const parentEpml = new Epml({ type: 'WINDOW', source: window.parent })
+let toggledMessage = {}
 class ChatScroller extends LitElement {
     static get properties() {
         return {
@@ -30,6 +31,7 @@ class ChatScroller extends LitElement {
             focusChatEditor: {attribute: false},
             sendMessage: {attribute: false},
             showLastMessageRefScroller: { type: Function },
+            emojiPicker: { attribute: false }
         }
     }
 
@@ -41,16 +43,7 @@ class ChatScroller extends LitElement {
         this._upObserverhandler = this._upObserverhandler.bind(this)
         this._downObserverHandler = this._downObserverHandler.bind(this)
         this.myAddress = window.parent.reduxStore.getState().app.selectedAddress.address
-        this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")
+        this.hideMessages = JSON.parse(localStorage.getItem("MessageBlockedAddresses") || "[]")    
-        this.emojiPicker = new EmojiPicker({
-            style: "twemoji",
-            twemojiBaseUrl: '/emoji/',
-            showPreview: false,
-            showVariants: false,
-            showAnimation: false,
-            position: 'top-start',
-            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
-        });
     }
 
 
@@ -77,7 +70,6 @@ class ChatScroller extends LitElement {
             }
             return messageArray;
         }, [])
-
         return html`
             <ul id="viewElement" class="chat-list clearfix">
                 <div id="upObserver"></div>
@@ -98,6 +90,7 @@ class ChatScroller extends LitElement {
                             ?isFirstMessage=${indexMessage === 0}
                             ?isSingleMessageInGroup=${formattedMessage.messages.length > 1}
                             ?isLastMessageInGroup=${indexMessage === formattedMessage.messages.length - 1}
+                            .setToggledMessage=${this.setToggledMessage}
                             >
                             </message-template>`
                     )
@@ -119,7 +112,22 @@ class ChatScroller extends LitElement {
         return true;
     }
 
+    setToggledMessage(message){
+        toggledMessage = message
+    }
+
+
     async firstUpdated() {
+        this.emojiPicker.on('emoji', selection => {
+
+            this.sendMessage({
+                type: 'reaction',
+    editedMessageObj: toggledMessage,
+                reaction:  selection.emoji,
+             
+               
+             })
+            });
         this.viewElement = this.shadowRoot.getElementById('viewElement');
         this.upObserverElement = this.shadowRoot.getElementById('upObserver');
         this.downObserverElement = this.shadowRoot.getElementById('downObserver');
@@ -202,6 +210,7 @@ class MessageTemplate extends LitElement {
             isFirstMessage: { type: Boolean },
             isSingleMessageInGroup: { type: Boolean },
             isLastMessageInGroup: { type: Boolean },
+            setToggledMessage: {attribute: false}
         }
     }
 
@@ -241,7 +250,13 @@ class MessageTemplate extends LitElement {
     }
 
     showBlockIconFunc(bool) {
-        this.shadowRoot.querySelector(".chat-hover").focus({ preventScroll: true })
+        const chatHover = this.shadowRoot.querySelector(".chat-hover")
+
+        if(chatHover){
+            chatHover.querySelector(".chat-hover").focus({ preventScroll: true })
+        }
+      
+       
         if(bool) {
             this.showBlockAddressIcon = true;
         } else {
@@ -458,6 +473,8 @@ class MessageTemplate extends LitElement {
                                 @blur=${() => this.showBlockIconFunc(false)}
                                 .sendMessage=${this.sendMessage}
                                 version=${version}
+                                .emojiPicker=${this.emojiPicker} 
+                                .setToggledMessage=${this.setToggledMessage}
                             > 
                             </chat-menu>
                         </div>
@@ -533,7 +550,8 @@ class ChatMenu extends LitElement {
             myAddress: { type: Object },
             emojiPicker: { attribute: false },
             sendMessage: {attribute: false},
-            version: {type: String}
+            version: {type: String},
+            setToggledMessage: {attribute: false}
         }
     }
 
@@ -563,30 +581,9 @@ class ChatMenu extends LitElement {
         parentEpml.request('showSnackBar', `${errorMsg}`)
     }
 
-    firstUpdated () {
+   
-        this.emojiPicker = new EmojiPicker({
-            style: "twemoji",
-            twemojiBaseUrl: '/emoji/',
-            showPreview: false,
-            showVariants: false,
-            showAnimation: false,
-            position: 'top-start',
-            boxShadow: 'rgba(4, 4, 5, 0.15) 0px 0px 0px 1px, rgba(0, 0, 0, 0.24) 0px 8px 16px 0px'
-        });
-
-      this.emojiPicker.on('emoji', selection => {
-        this.sendMessage({
-            type: 'reaction',
-editedMessageObj: this.originalMessage,
-            reaction:  selection.emoji,
-         
-           
-         })
-        });
-    }
     
     render() {
-        console.log('version', this.version)
         return html` 
             <div class="container">
             <div 
@@ -597,7 +594,13 @@ editedMessageObj: this.originalMessage,
                         this.versionErrorSnack()
                         return
                     }
-                    this.emojiPicker.togglePicker(e.target)
+                    try {
+                        this.setToggledMessage(this.originalMessage)
+                        this.emojiPicker.togglePicker(e.target)
+                    } catch (error) {
+                        console.log({error})
+                    }
+                    
                     }}
                >
                     <vaadin-icon icon="vaadin:smiley-o" slot="icon"></vaadin-icon>