From 0c2ff1a0002c0f2ed599dbe4140d757fdcccdae7 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Mon, 13 Feb 2023 13:58:28 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E8=A1=A8=E6=83=85?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../js/pages/manage/components/ChatInput/emoji.vue  | 13 ++++++++++---
 .../js/pages/manage/components/ChatInput/index.vue  | 10 ++++------
 .../assets/sass/pages/components/chat-input.scss    |  4 ++++
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
index 20c56a56f..4f6b55c43 100644
--- a/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/emoji.vue
@@ -7,7 +7,7 @@
                 </Input>
             </div>
             <ul class="scrollbar-overlay" :class="[type, 'no-dark-content']">
-                <li v-for="item in list" @click="onSelect(item)">
+                <li v-for="item in list" @click="onSelect($event, item)">
                     <img v-if="item.type === 'emoticon'" :src="item.src" :title="item.name" :alt="item.name"/>
                     <span v-else v-html="item.html" :title="item.name"></span>
                 </li>
@@ -158,8 +158,15 @@ export default {
             this.emoticonPath = path;
         },
 
-        onSelect(item) {
-            this.$emit('on-select', item)
+        onSelect(event, item) {
+            if (item.type === 'emoji') {
+                this.$emit('on-select', {
+                    type: 'emoji',
+                    text: event.target.innerText
+                })
+            } else {
+                this.$emit('on-select', item)
+            }
         }
     }
 }
diff --git a/resources/assets/js/pages/manage/components/ChatInput/index.vue b/resources/assets/js/pages/manage/components/ChatInput/index.vue
index 69aaea4fb..18a654dc0 100755
--- a/resources/assets/js/pages/manage/components/ChatInput/index.vue
+++ b/resources/assets/js/pages/manage/components/ChatInput/index.vue
@@ -452,6 +452,8 @@ export default {
                     const range = this.quill.selection.savedRange;
                     this.rangeIndex = range ? range.index : 0
                 }
+            } else if (this.rangeIndex > 0) {
+                this.quill.setSelection(this.rangeIndex)
             }
             if (!val && this.$refs.emojiTip) {
                 this.$refs.emojiTip.updatePopper()
@@ -948,14 +950,10 @@ export default {
                 return;
             }
             if (item.type === 'emoji') {
-                let element = document.createElement('span');
-                element.innerHTML = item.html;
-                this.quill.insertText(this.rangeIndex, element.innerHTML);
-                this.rangeIndex += element.innerHTML.length
-                element = null;
+                this.quill.insertText(this.rangeIndex, item.text);
+                this.rangeIndex += item.text.length
                 if (this.windowLarge) {
                     this.showEmoji = false;
-                    this.quill.setSelection(this.rangeIndex)
                 }
             } else if (item.type === 'emoticon') {
                 this.$emit('on-send', `<img class="emoticon" data-asset="${item.asset}" data-name="${item.name}" src="${item.src}"/>`)
diff --git a/resources/assets/sass/pages/components/chat-input.scss b/resources/assets/sass/pages/components/chat-input.scss
index 7bcd4a12b..6c3aa5404 100755
--- a/resources/assets/sass/pages/components/chat-input.scss
+++ b/resources/assets/sass/pages/components/chat-input.scss
@@ -390,6 +390,10 @@
                     -webkit-touch-callout: none;
                     transition: transform 0.3s;
                 }
+                &:active {
+                    background-color: #eeeeee;
+                    border-radius: 8px;
+                }
                 &:hover {
                     > img {
                         transform: scale(1.4);