From fa8f4ddd503421b46087732938c2fea7222a17b5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 10 Jul 2024 19:01:23 +0530
Subject: [PATCH] feat: emoji picker in email box

---
 frontend/src/components/EmailEditor.vue | 27 ++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index db6ad0cf..c20155ba 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -96,11 +96,19 @@
           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"
-            />
+            <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,
@@ -147,12 +155,14 @@
 </template>
 
 <script setup>
+import IconPicker from '@/components/IconPicker.vue'
+import SmileIcon from '@/components/Icons/SmileIcon.vue'
 import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
 import AttachmentItem from '@/components/AttachmentItem.vue'
 import MultiselectInput from '@/components/Controls/MultiselectInput.vue'
 import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelectorModal.vue'
-import { TextEditorFixedMenu, TextEditor, FileUploader, call } from 'frappe-ui'
+import { TextEditorBubbleMenu, TextEditor, FileUploader, call } from 'frappe-ui'
 import { validateEmail } from '@/utils'
 import { EditorContent } from '@tiptap/vue-3'
 import { ref, computed, defineModel, nextTick } from 'vue'
@@ -195,6 +205,7 @@ const content = defineModel('content')
 const textEditor = ref(null)
 const cc = ref(false)
 const bcc = ref(false)
+const emoji = ref('')
 
 const subject = ref(props.subject)
 const toEmails = ref(modelValue.value.email ? [modelValue.value.email] : [])
@@ -233,6 +244,12 @@ async function applyEmailTemplate(template) {
   showEmailTemplateSelectorModal.value = false
 }
 
+function appendEmoji() {
+  editor.value.commands.insertContent(emoji.value)
+  editor.value.commands.focus()
+  emoji.value = ''
+}
+
 function toggleCC() {
   cc.value = !cc.value
   cc.value && nextTick(() => ccInput.value.setFocus())