From b0478562c3cc2d3732a91702ee129b38028ac2ee Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 10 Jul 2024 19:11:21 +0530
Subject: [PATCH] fix: add emoji picker in comment box

---
 frontend/src/components/CommentBox.vue  | 32 +++++++++---
 frontend/src/components/EmailEditor.vue | 68 ++++++++++++-------------
 2 files changed, 58 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/CommentBox.vue b/frontend/src/components/CommentBox.vue
index e5c8c1b1..ebdf00c9 100644
--- a/frontend/src/components/CommentBox.vue
+++ b/frontend/src/components/CommentBox.vue
@@ -12,7 +12,8 @@
     <template v-slot:editor="{ editor }">
       <EditorContent
         :class="[
-          editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
+          editable &&
+            'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
         ]"
         :editor="editor"
       />
@@ -37,11 +38,19 @@
         <div
           class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
         >
-          <div class="flex items-center overflow-x-auto">
-            <TextEditorFixedMenu
-              class="-ml-1"
-              :buttons="textEditorMenuButtons"
-            />
+          <div class="flex gap-1 items-center overflow-x-auto">
+            <TextEditorBubbleMenu :buttons="textEditorMenuButtons" />
+            <IconPicker
+              v-model="emoji"
+              v-slot="{ togglePopover }"
+              @update:modelValue="() => appendEmoji()"
+            >
+              <Button variant="ghost" @click="togglePopover()">
+                <template #icon>
+                  <SmileIcon class="h-4" />
+                </template>
+              </Button>
+            </IconPicker>
             <FileUploader
               :upload-args="{
                 doctype: doctype,
@@ -77,10 +86,12 @@
   </TextEditor>
 </template>
 <script setup>
+import IconPicker from '@/components/IconPicker.vue'
+import SmileIcon from '@/components/Icons/SmileIcon.vue'
 import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
 import { usersStore } from '@/stores/users'
-import { TextEditorFixedMenu, TextEditor, FileUploader } from 'frappe-ui'
+import { TextEditorBubbleMenu, TextEditor, FileUploader } from 'frappe-ui'
 import { EditorContent } from '@tiptap/vue-3'
 import { ref, computed, defineModel } from 'vue'
 
@@ -118,11 +129,18 @@ const content = defineModel('content')
 const { users: usersList } = usersStore()
 
 const textEditor = ref(null)
+const emoji = ref('')
 
 const editor = computed(() => {
   return textEditor.value.editor
 })
 
+function appendEmoji() {
+  editor.value.commands.insertContent(emoji.value)
+  editor.value.commands.focus()
+  emoji.value = ''
+}
+
 function removeAttachment(attachment) {
   attachments.value = attachments.value.filter((a) => a !== attachment)
 }
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index c20155ba..47a5527e 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -95,45 +95,43 @@
         <div
           class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
         >
-          <div class="flex items-center overflow-x-auto">
+          <div class="flex gap-1 items-center overflow-x-auto">
             <TextEditorBubbleMenu :buttons="textEditorMenuButtons" />
-            <div class="flex gap-1">
-              <IconPicker
-                v-model="emoji"
-                v-slot="{ togglePopover }"
-                @update:modelValue="() => appendEmoji()"
-              >
-                <Button variant="ghost" @click="togglePopover()">
-                  <template #icon>
-                    <SmileIcon class="h-4" />
-                  </template>
-                </Button>
-              </IconPicker>
-              <FileUploader
-                :upload-args="{
-                  doctype: doctype,
-                  docname: modelValue.name,
-                  private: true,
-                }"
-                @success="(f) => attachments.push(f)"
-              >
-                <template #default="{ openFileSelector }">
-                  <Button variant="ghost" @click="openFileSelector()">
-                    <template #icon>
-                      <AttachmentIcon class="h-4" />
-                    </template>
-                  </Button>
-                </template>
-              </FileUploader>
-              <Button
-                variant="ghost"
-                @click="showEmailTemplateSelectorModal = true"
-              >
+            <IconPicker
+              v-model="emoji"
+              v-slot="{ togglePopover }"
+              @update:modelValue="() => appendEmoji()"
+            >
+              <Button variant="ghost" @click="togglePopover()">
                 <template #icon>
-                  <EmailIcon class="h-4" />
+                  <SmileIcon class="h-4" />
                 </template>
               </Button>
-            </div>
+            </IconPicker>
+            <FileUploader
+              :upload-args="{
+                doctype: doctype,
+                docname: modelValue.name,
+                private: true,
+              }"
+              @success="(f) => attachments.push(f)"
+            >
+              <template #default="{ openFileSelector }">
+                <Button variant="ghost" @click="openFileSelector()">
+                  <template #icon>
+                    <AttachmentIcon class="h-4" />
+                  </template>
+                </Button>
+              </template>
+            </FileUploader>
+            <Button
+              variant="ghost"
+              @click="showEmailTemplateSelectorModal = true"
+            >
+              <template #icon>
+                <EmailIcon class="h-4" />
+              </template>
+            </Button>
           </div>
           <div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
             <Button v-bind="discardButtonProps || {}" :label="__('Discard')" />