From 0e4962c3611450c08ca06f6cbf544cad8be7a9aa Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 10 Jul 2024 13:22:58 +0530
Subject: [PATCH 01/15] fix: allow dragging item in kanban in mobile

---
 frontend/src/components/Kanban/KanbanView.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/Kanban/KanbanView.vue b/frontend/src/components/Kanban/KanbanView.vue
index 1001d4e0..3497cdc4 100644
--- a/frontend/src/components/Kanban/KanbanView.vue
+++ b/frontend/src/components/Kanban/KanbanView.vue
@@ -5,6 +5,7 @@
       :list="columns"
       item-key="column"
       @end="updateColumn"
+      :delay="isTouchScreenDevice() ? 200 : 0"
       class="flex sm:mx-2.5 mx-2 pb-3.5"
     >
       <template #item="{ element: column }">
@@ -73,6 +74,7 @@
               item-key="name"
               class="flex flex-col gap-3.5 flex-1"
               @end="updateColumn"
+              :delay="isTouchScreenDevice() ? 200 : 0"
               :data-column="column.column.name"
             >
               <template #item="{ element: fields }">
@@ -166,6 +168,7 @@
 import Autocomplete from '@/components/frappe-ui/Autocomplete.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import IndicatorIcon from '@/components/Icons/IndicatorIcon.vue'
+import { isTouchScreenDevice } from '@/utils'
 import Draggable from 'vuedraggable'
 import { Dropdown } from 'frappe-ui'
 import { computed } from 'vue'

From 19072dd3d60a0ee5190e042714e987530aecabe8 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 10 Jul 2024 16:04:30 +0530
Subject: [PATCH 02/15] refactor: moved cc & bcc button from header to 'TO'
 section

---
 frontend/src/components/CommunicationArea.vue |  30 +----
 .../components/Controls/MultiselectInput.vue  |   2 +-
 frontend/src/components/EmailEditor.vue       | 122 ++++++++++--------
 3 files changed, 71 insertions(+), 83 deletions(-)

diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index c8fb92a7..646abd3e 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -23,18 +23,6 @@
         </template>
       </Button>
     </div>
-    <div v-if="showEmailBox" class="flex gap-1.5">
-      <Button
-        :label="__('CC')"
-        @click="toggleCC()"
-        :class="[newEmailEditor.cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-      />
-      <Button
-        :label="__('BCC')"
-        @click="toggleBCC()"
-        :class="[newEmailEditor.bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
-      />
-    </div>
   </div>
   <div
     v-show="showEmailBox"
@@ -103,7 +91,7 @@ import EmailIcon from '@/components/Icons/EmailIcon.vue'
 import { usersStore } from '@/stores/users'
 import { useStorage } from '@vueuse/core'
 import { call, createResource } from 'frappe-ui'
-import { ref, watch, computed, nextTick } from 'vue'
+import { ref, watch, computed } from 'vue'
 
 const props = defineProps({
   doctype: {
@@ -236,22 +224,6 @@ async function submitComment() {
   emit('scroll')
 }
 
-function toggleCC() {
-  newEmailEditor.value.cc = !newEmailEditor.value.cc
-  newEmailEditor.value.cc &&
-    nextTick(() => {
-      newEmailEditor.value.ccInput.setFocus()
-    })
-}
-
-function toggleBCC() {
-  newEmailEditor.value.bcc = !newEmailEditor.value.bcc
-  newEmailEditor.value.bcc &&
-    nextTick(() => {
-      newEmailEditor.value.bccInput.setFocus()
-    })
-}
-
 function toggleEmailBox() {
   if (showCommentBox.value) {
     showCommentBox.value = false
diff --git a/frontend/src/components/Controls/MultiselectInput.vue b/frontend/src/components/Controls/MultiselectInput.vue
index ed8b4102..76fbd3cf 100644
--- a/frontend/src/components/Controls/MultiselectInput.vue
+++ b/frontend/src/components/Controls/MultiselectInput.vue
@@ -8,7 +8,7 @@
         :label="value"
         theme="gray"
         variant="subtle"
-        class="rounded-full"
+        class="rounded"
         @keydown.delete.capture.stop="removeLastValue"
       >
         <template #suffix>
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index d60baaf1..db6ad0cf 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -9,60 +9,68 @@
     :editable="editable"
   >
     <template #top>
-      <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5">
-        <span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
-        <TextInput
-          class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
-          v-model="subject"
-        />
-      </div>
-      <div
-        class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5"
-        :class="[cc || bcc ? 'border-b' : '']"
-      >
-        <span class="text-xs text-gray-500">{{ __('TO') }}:</span>
-        <MultiselectInput
-          class="flex-1"
-          v-model="toEmails"
-          :validate="validateEmail"
-          :error-message="
-            (value) => __('{0} is an invalid email address', [value])
-          "
-        />
-      </div>
-      <div
-        v-if="cc"
-        class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5"
-        :class="bcc ? 'border-b' : ''"
-      >
-        <span class="text-xs text-gray-500">{{ __('CC') }}:</span>
-        <MultiselectInput
-          ref="ccInput"
-          class="flex-1"
-          v-model="ccEmails"
-          :validate="validateEmail"
-          :error-message="
-            (value) => __('{0} is an invalid email address', [value])
-          "
-        />
-      </div>
-      <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5">
-        <span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
-        <MultiselectInput
-          ref="bccInput"
-          class="flex-1"
-          v-model="bccEmails"
-          :validate="validateEmail"
-          :error-message="
-            (value) => __('{0} is an invalid email address', [value])
-          "
-        />
+      <div class="flex flex-col gap-3">
+        <div class="sm:mx-10 mx-4 flex items-center gap-2 border-t pt-2.5">
+          <span class="text-xs text-gray-500">{{ __('TO') }}:</span>
+          <MultiselectInput
+            class="flex-1"
+            v-model="toEmails"
+            :validate="validateEmail"
+            :error-message="
+              (value) => __('{0} is an invalid email address', [value])
+            "
+          />
+          <div class="flex gap-1.5">
+            <Button
+              :label="__('CC')"
+              @click="toggleCC()"
+              :class="[cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+            />
+            <Button
+              :label="__('BCC')"
+              @click="toggleBCC()"
+              :class="[bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+            />
+          </div>
+        </div>
+        <div v-if="cc" class="sm:mx-10 mx-4 flex items-center gap-2">
+          <span class="text-xs text-gray-500">{{ __('CC') }}:</span>
+          <MultiselectInput
+            ref="ccInput"
+            class="flex-1"
+            v-model="ccEmails"
+            :validate="validateEmail"
+            :error-message="
+              (value) => __('{0} is an invalid email address', [value])
+            "
+          />
+        </div>
+        <div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2">
+          <span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
+          <MultiselectInput
+            ref="bccInput"
+            class="flex-1"
+            v-model="bccEmails"
+            :validate="validateEmail"
+            :error-message="
+              (value) => __('{0} is an invalid email address', [value])
+            "
+          />
+        </div>
+        <div class="sm:mx-10 mx-4 flex items-center gap-2 pb-2.5">
+          <span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
+          <TextInput
+            class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
+            v-model="subject"
+          />
+        </div>
       </div>
     </template>
     <template v-slot:editor="{ editor }">
       <EditorContent
         :class="[
-          editable && 'sm:mx-10 mx-4 max-h-[35vh] overflow-y-auto border-t py-3',
+          editable &&
+            'sm:mx-10 mx-4 max-h-[35vh] overflow-y-auto border-t py-3',
         ]"
         :editor="editor"
       />
@@ -147,7 +155,7 @@ import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelecto
 import { TextEditorFixedMenu, TextEditor, FileUploader, call } from 'frappe-ui'
 import { validateEmail } from '@/utils'
 import { EditorContent } from '@tiptap/vue-3'
-import { ref, computed, defineModel } from 'vue'
+import { ref, computed, defineModel, nextTick } from 'vue'
 
 const props = defineProps({
   placeholder: {
@@ -211,7 +219,7 @@ async function applyEmailTemplate(template) {
     {
       template_name: template.name,
       doc: modelValue.value,
-    }
+    },
   )
 
   if (template.subject) {
@@ -225,6 +233,16 @@ async function applyEmailTemplate(template) {
   showEmailTemplateSelectorModal.value = false
 }
 
+function toggleCC() {
+  cc.value = !cc.value
+  cc.value && nextTick(() => ccInput.value.setFocus())
+}
+
+function toggleBCC() {
+  bcc.value = !bcc.value
+  bcc.value && nextTick(() => bccInput.value.setFocus())
+}
+
 defineExpose({
   editor,
   subject,
@@ -233,8 +251,6 @@ defineExpose({
   toEmails,
   ccEmails,
   bccEmails,
-  ccInput,
-  bccInput,
 })
 
 const textEditorMenuButtons = [

From 41324dda27bf72f8d6e284ed3c29b107ddf3ed56 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 10 Jul 2024 18:38:05 +0530
Subject: [PATCH 03/15] refactor: load email list for to, cc, bcc in a better

---
 crm/api/contact.py                            | 33 +++++++++++++++++++
 frontend/src/components/CommunicationArea.vue |  2 +-
 .../components/Controls/MultiselectInput.vue  | 25 +++++---------
 3 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/crm/api/contact.py b/crm/api/contact.py
index 8ef93e43..5484bb9b 100644
--- a/crm/api/contact.py
+++ b/crm/api/contact.py
@@ -132,3 +132,36 @@ def set_as_primary(contact, field, value):
 
 	contact.save()
 	return True
+
+
+@frappe.whitelist()
+def search_emails(txt: str):
+	doctype = "Contact"
+	meta = frappe.get_meta(doctype)
+	filters = [["Contact", "email_id", "is", "set"]]
+
+	if meta.get("fields", {"fieldname": "enabled", "fieldtype": "Check"}):
+		filters.append([doctype, "enabled", "=", 1])
+	if meta.get("fields", {"fieldname": "disabled", "fieldtype": "Check"}):
+		filters.append([doctype, "disabled", "!=", 1])
+
+	or_filters = []
+	search_fields = ["full_name", "email_id", "name"]
+	if txt:
+		for f in search_fields:
+			or_filters.append([doctype, f.strip(), "like", f"%{txt}%"])
+
+	results = frappe.get_list(
+		doctype,
+		filters=filters,
+		fields=search_fields,
+		or_filters=or_filters,
+		limit_start=0,
+		limit_page_length=20,
+		order_by='email_id, full_name, name',
+		ignore_permissions=False,
+		as_list=True,
+		strict=False,
+	)
+
+	return results
\ No newline at end of file
diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index 646abd3e..eb2f8470 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -133,7 +133,7 @@ const signature = createResource({
 })
 
 function setSignature(editor) {
-  signature.data = signature.data.replace(/\n/g, '<br>')
+  signature.data = signature.data?.replace(/\n/g, '<br>')
   let emailContent = editor.getHTML()
   emailContent = emailContent.startsWith('<p></p>')
     ? emailContent.slice(7)
diff --git a/frontend/src/components/Controls/MultiselectInput.vue b/frontend/src/components/Controls/MultiselectInput.vue
index 76fbd3cf..a5cb6928 100644
--- a/frontend/src/components/Controls/MultiselectInput.vue
+++ b/frontend/src/components/Controls/MultiselectInput.vue
@@ -133,30 +133,26 @@ watchDebounced(
   query,
   (val) => {
     val = val || ''
-    if (text.value === val) return
+    if (text.value === val && options.value?.length) return
     text.value = val
     reload(val)
   },
-  { debounce: 300, immediate: true }
+  { debounce: 300, immediate: true },
 )
 
 const filterOptions = createResource({
-  url: 'frappe.desk.search.search_link',
+  url: 'crm.api.contact.search_emails',
   method: 'POST',
   cache: [text.value, 'Contact'],
-  params: {
-    txt: text.value,
-    doctype: 'Contact',
-  },
+  params: { txt: text.value },
   transform: (data) => {
     let allData = data
-      .filter((c) => {
-        return c.description.split(', ')[1]
-      })
       .map((option) => {
-        let email = option.description.split(', ')[1]
+        let fullName = option[0]
+        let email = option[1]
+        let name = option[2]
         return {
-          label: option.label || email,
+          label: fullName || name || email,
           value: email,
         }
       })
@@ -177,10 +173,7 @@ const options = computed(() => {
 
 function reload(val) {
   filterOptions.update({
-    params: {
-      txt: val,
-      doctype: 'Contact',
-    },
+    params: { txt: val },
   })
   filterOptions.reload()
 }

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 04/15] 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())

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 05/15] 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')" />

From bce3b5de450b1c5f1c2449fadff070f40ec509c5 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 10 Jul 2024 19:16:42 +0530
Subject: [PATCH 06/15] fix: if signature not exist dont add it

---
 frontend/src/components/CommunicationArea.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/CommunicationArea.vue b/frontend/src/components/CommunicationArea.vue
index eb2f8470..6e5e419c 100644
--- a/frontend/src/components/CommunicationArea.vue
+++ b/frontend/src/components/CommunicationArea.vue
@@ -133,7 +133,8 @@ const signature = createResource({
 })
 
 function setSignature(editor) {
-  signature.data = signature.data?.replace(/\n/g, '<br>')
+  if (!signature.data) return
+  signature.data = signature.data.replace(/\n/g, '<br>')
   let emailContent = editor.getHTML()
   emailContent = emailContent.startsWith('<p></p>')
     ? emailContent.slice(7)

From 02b36e96473cc47c36b3b171f3080bb3e2b15d1d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 10 Jul 2024 19:29:53 +0530
Subject: [PATCH 07/15] fix: make CC BCC ghosted button

---
 frontend/src/components/EmailEditor.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index 47a5527e..d7f88179 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -23,13 +23,15 @@
           <div class="flex gap-1.5">
             <Button
               :label="__('CC')"
+              variant="ghost"
               @click="toggleCC()"
-              :class="[cc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+              :class="[cc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500']"
             />
             <Button
               :label="__('BCC')"
+              variant="ghost"
               @click="toggleBCC()"
-              :class="[bcc ? 'bg-gray-300 hover:bg-gray-200' : '']"
+              :class="[bcc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500']"
             />
           </div>
         </div>

From 475c50b101cbeb70a9e8e25c12ddd2e99de9616d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 17:21:06 +0530
Subject: [PATCH 08/15] build(deps): added tiptap paragraph extension

---
 frontend/package.json | 1 +
 yarn.lock             | 5 +++++
 2 files changed, 6 insertions(+)

diff --git a/frontend/package.json b/frontend/package.json
index 4f46436b..b899efda 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,7 @@
     "serve": "vite preview"
   },
   "dependencies": {
+    "@tiptap/extension-paragraph": "^2.4.0",
     "@twilio/voice-sdk": "^2.10.2",
     "@vueuse/core": "^10.3.0",
     "@vueuse/integrations": "^10.3.0",
diff --git a/yarn.lock b/yarn.lock
index 085c4557..af6a364a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1808,6 +1808,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.2.6.tgz#0e66d2ce21116e43fd006961c42f187ee5e5beab"
   integrity sha512-M2rM3pfzziUb7xS9x2dANCokO89okbqg5IqU4VPkZhk0Mfq9czyCatt58TYkAsE3ccsGhdTYtFBTDeKBtsHUqg==
 
+"@tiptap/extension-paragraph@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-paragraph/-/extension-paragraph-2.4.0.tgz#5b9aea8775937b327bbe6754be12ae3144fb09ff"
+  integrity sha512-+yse0Ow67IRwcACd9K/CzBcxlpr9OFnmf0x9uqpaWt1eHck1sJnti6jrw5DVVkyEBHDh/cnkkV49gvctT/NyCw==
+
 "@tiptap/extension-placeholder@^2.0.3":
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-placeholder/-/extension-placeholder-2.2.6.tgz#7cb63e398a5301d1e132d4145daef3acb87e7dc5"

From ee8fdf099f4037691ea6caa059c7530e569dada9 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 17:22:43 +0530
Subject: [PATCH 09/15] fix: added custom paragraph in tiptap editor to allow
 adding class attribute

---
 frontend/src/components/Activities.vue  | 20 ++++++++-----
 frontend/src/components/EmailEditor.vue | 39 ++++++++++++++++++++++---
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 3bf06991..8df55c2d 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -442,7 +442,7 @@
               'outgoing_call',
             ].includes(activity.activity_type),
             'bg-white': ['added', 'removed', 'changed'].includes(
-              activity.activity_type
+              activity.activity_type,
             ),
           }"
         >
@@ -528,7 +528,10 @@
             <span v-if="activity.data.bcc">{{ activity.data.bcc }}</span>
           </div>
           <EmailContent :content="activity.data.content" />
-          <div class="flex flex-wrap gap-2">
+          <div
+            v-if="activity.data?.attachments?.length"
+            class="flex flex-wrap gap-2"
+          >
             <AttachmentItem
               v-for="a in activity.data.attachments"
               :key="a.file_url"
@@ -1102,7 +1105,7 @@ const defaultActions = computed(() => {
     },
   ]
   return actions.filter((action) =>
-    action.condition ? action.condition() : true
+    action.condition ? action.condition() : true,
   )
 })
 
@@ -1120,12 +1123,12 @@ const activities = computed(() => {
   } else if (props.title == 'Emails') {
     if (!all_activities.data?.versions) return []
     activities = all_activities.data.versions.filter(
-      (activity) => activity.activity_type === 'communication'
+      (activity) => activity.activity_type === 'communication',
     )
   } else if (props.title == 'Comments') {
     if (!all_activities.data?.versions) return []
     activities = all_activities.data.versions.filter(
-      (activity) => activity.activity_type === 'comment'
+      (activity) => activity.activity_type === 'comment',
     )
   } else if (props.title == 'Calls') {
     if (!all_activities.data?.calls) return []
@@ -1338,12 +1341,15 @@ function reply(email, reply_all = false) {
     editor.bccEmails = bcc
   }
 
+  let repliedMessage = `<blockquote>${message}</blockquote>`
+
   editor.editor
     .chain()
     .clearContent()
-    .insertContent(message)
+    .insertContent('<p>.</p>')
+    .updateAttributes('paragraph', {class:'reply-to-content'})
+    .insertContent(repliedMessage)
     .focus('all')
-    .setBlockquote()
     .insertContentAt(0, { type: 'paragraph' })
     .focus('start')
     .run()
diff --git a/frontend/src/components/EmailEditor.vue b/frontend/src/components/EmailEditor.vue
index d7f88179..2398aba5 100644
--- a/frontend/src/components/EmailEditor.vue
+++ b/frontend/src/components/EmailEditor.vue
@@ -1,12 +1,20 @@
 <template>
   <TextEditor
     ref="textEditor"
-    :editor-class="['prose-sm max-w-none', editable && 'min-h-[7rem]']"
+    :editor-class="[
+      'prose-sm max-w-none',
+      editable && 'min-h-[7rem]',
+      '[&_p.reply-to-content]:hidden',
+    ]"
     :content="content"
     @change="editable ? (content = $event) : null"
-    :starterkit-options="{ heading: { levels: [2, 3, 4, 5, 6] } }"
+    :starterkit-options="{
+      heading: { levels: [2, 3, 4, 5, 6] },
+      paragraph: false,
+    }"
     :placeholder="placeholder"
     :editable="editable"
+    :extensions="[CustomParagraph]"
   >
     <template #top>
       <div class="flex flex-col gap-3">
@@ -25,13 +33,17 @@
               :label="__('CC')"
               variant="ghost"
               @click="toggleCC()"
-              :class="[cc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500']"
+              :class="[
+                cc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500',
+              ]"
             />
             <Button
               :label="__('BCC')"
               variant="ghost"
               @click="toggleBCC()"
-              :class="[bcc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500']"
+              :class="[
+                bcc ? '!bg-gray-300 hover:bg-gray-200' : '!text-gray-500',
+              ]"
             />
           </div>
         </div>
@@ -164,6 +176,7 @@ import MultiselectInput from '@/components/Controls/MultiselectInput.vue'
 import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelectorModal.vue'
 import { TextEditorBubbleMenu, TextEditor, FileUploader, call } from 'frappe-ui'
 import { validateEmail } from '@/utils'
+import Paragraph from '@tiptap/extension-paragraph'
 import { EditorContent } from '@tiptap/vue-3'
 import { ref, computed, defineModel, nextTick } from 'vue'
 
@@ -198,6 +211,24 @@ const props = defineProps({
   },
 })
 
+const CustomParagraph = Paragraph.extend({
+  addAttributes() {
+    return {
+      class: {
+        default: null,
+        renderHTML: (attributes) => {
+          if (!attributes.class) {
+            return {}
+          }
+          return {
+            class: `${attributes.class}`,
+          }
+        },
+      },
+    }
+  },
+})
+
 const modelValue = defineModel()
 const attachments = defineModel('attachments')
 const content = defineModel('content')

From f7449481df8bd375f82b2f02debcb0391fe07508 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 17:28:18 +0530
Subject: [PATCH 10/15] feat: email replied collapser for replied email

---
 frontend/src/components/EmailContent.vue | 97 +++++++++++++++++++++++-
 1 file changed, 96 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/EmailContent.vue b/frontend/src/components/EmailContent.vue
index f68ea6b6..17b2778a 100644
--- a/frontend/src/components/EmailContent.vue
+++ b/frontend/src/components/EmailContent.vue
@@ -27,6 +27,72 @@ const files = import.meta.globEager('/src/index.css', { query: '?inline' })
 const css = files['/src/index.css'].default
 
 const iframeRef = ref(null)
+const _content = ref(props.content)
+
+const parser = new DOMParser()
+const doc = parser.parseFromString(_content.value, 'text/html')
+
+const replyToContent = doc.querySelectorAll('p.reply-to-content')
+
+if (replyToContent.length) {
+  _content.value = parseReplyToContent(doc)
+}
+
+function parseReplyToContent(doc) {
+  function handleAllInstances(doc) {
+    const replyToContentElements = doc.querySelectorAll('p.reply-to-content')
+    if (replyToContentElements.length === 0) {
+      return
+    }
+    const replyToContentElement = replyToContentElements[0]
+    replaceReplyToContent(replyToContentElement)
+    handleAllInstances(doc)
+  }
+
+  handleAllInstances(doc)
+
+  return doc.body.innerHTML
+}
+
+function replaceReplyToContent(replyToContentElement) {
+  let randomId = Math.random().toString(36).substring(2, 7)
+  const wrapper = doc.createElement('div')
+  wrapper.classList.add('replied-content')
+
+  const collapseLabel = doc.createElement('label')
+  collapseLabel.classList.add('collapse')
+  collapseLabel.setAttribute('for', randomId)
+  collapseLabel.innerHTML = '...'
+  wrapper.appendChild(collapseLabel)
+
+  const collapseInput = doc.createElement('input')
+  collapseInput.setAttribute('id', randomId)
+  collapseInput.setAttribute('class', 'replyCollapser')
+  collapseInput.setAttribute('type', 'checkbox')
+  wrapper.appendChild(collapseInput)
+
+  const allSiblings = Array.from(replyToContentElement.parentElement.children)
+  const replyToContentIndex = allSiblings.indexOf(replyToContentElement)
+  const followingSiblings = allSiblings.slice(replyToContentIndex + 1)
+
+  let clonedFollowingSiblings = followingSiblings.map((sibling) =>
+    sibling.cloneNode(true),
+  )
+
+  const div = doc.createElement('div')
+  div.append(...clonedFollowingSiblings)
+
+  wrapper.append(div)
+
+  for (let i = replyToContentIndex + 1; i < allSiblings.length; i++) {
+    replyToContentElement.parentElement.removeChild(allSiblings[i])
+  }
+
+  replyToContentElement.parentElement.replaceChild(
+    wrapper,
+    replyToContentElement,
+  )
+}
 
 const htmlContent = `
 <!DOCTYPE html>
@@ -35,6 +101,35 @@ const htmlContent = `
   <style>
     ${css}
 
+    .replied-content .collapse {
+      margin: 10px 0 10px 0;
+      visibility: visible;
+      cursor: pointer;
+      display: flex;
+      font-size: larger;
+      font-weight: 700;
+      height: 12px;
+      line-height: 0.1;
+      background: #e8eaed;
+      width: 23px;
+      justify-content: center;
+      border-radius: 5px;
+    }
+
+    .replied-content .collapse:hover {
+      background: #dadce0;
+    }
+
+    .replied-content .collapse + input {
+      display: none;
+    }
+    .replied-content .collapse + input + div {
+      display: none;
+    }
+    .replied-content .collapse + input:checked + div {
+      display: block;
+    }
+
     .email-content {
         word-break: break-word;
     }
@@ -110,7 +205,7 @@ const htmlContent = `
   </style>
 </head>
 <body>
-    <div ref="emailContentRef" class="email-content prose-f">${props.content}</div>
+    <div ref="emailContentRef" class="email-content prose-f">${_content.value}</div>
 </body>
 </html>
 `

From acf761694f00989da22a0fcb744eccf00366d27b Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 17:33:26 +0530
Subject: [PATCH 11/15] fix: email replied collapser for gmail

---
 frontend/src/components/EmailContent.vue | 47 +++++++++++++++---------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/EmailContent.vue b/frontend/src/components/EmailContent.vue
index 17b2778a..7a110a4e 100644
--- a/frontend/src/components/EmailContent.vue
+++ b/frontend/src/components/EmailContent.vue
@@ -32,20 +32,23 @@ const _content = ref(props.content)
 const parser = new DOMParser()
 const doc = parser.parseFromString(_content.value, 'text/html')
 
+const gmailReplyToContent = doc.querySelectorAll('div.gmail_quote')
 const replyToContent = doc.querySelectorAll('p.reply-to-content')
 
-if (replyToContent.length) {
-  _content.value = parseReplyToContent(doc)
+if (gmailReplyToContent.length) {
+  _content.value = parseReplyToContent(doc, 'div.gmail_quote', true)
+} else if (replyToContent.length) {
+  _content.value = parseReplyToContent(doc, 'p.reply-to-content')
 }
 
-function parseReplyToContent(doc) {
+function parseReplyToContent(doc, selector, forGmail = false) {
   function handleAllInstances(doc) {
-    const replyToContentElements = doc.querySelectorAll('p.reply-to-content')
+    const replyToContentElements = doc.querySelectorAll(selector)
     if (replyToContentElements.length === 0) {
       return
     }
     const replyToContentElement = replyToContentElements[0]
-    replaceReplyToContent(replyToContentElement)
+    replaceReplyToContent(replyToContentElement, forGmail)
     handleAllInstances(doc)
   }
 
@@ -54,7 +57,7 @@ function parseReplyToContent(doc) {
   return doc.body.innerHTML
 }
 
-function replaceReplyToContent(replyToContentElement) {
+function replaceReplyToContent(replyToContentElement, forGmail) {
   let randomId = Math.random().toString(36).substring(2, 7)
   const wrapper = doc.createElement('div')
   wrapper.classList.add('replied-content')
@@ -71,21 +74,31 @@ function replaceReplyToContent(replyToContentElement) {
   collapseInput.setAttribute('type', 'checkbox')
   wrapper.appendChild(collapseInput)
 
-  const allSiblings = Array.from(replyToContentElement.parentElement.children)
-  const replyToContentIndex = allSiblings.indexOf(replyToContentElement)
-  const followingSiblings = allSiblings.slice(replyToContentIndex + 1)
+  if (forGmail) {
+    const prevSibling = replyToContentElement.previousElementSibling
+    if (prevSibling && prevSibling.tagName === 'BR') {
+      prevSibling.remove()
+    }
+    let cloned = replyToContentElement.cloneNode(true)
+    cloned.classList.remove('gmail_quote')
+    wrapper.appendChild(cloned)
+  } else {
+    const allSiblings = Array.from(replyToContentElement.parentElement.children)
+    const replyToContentIndex = allSiblings.indexOf(replyToContentElement)
+    const followingSiblings = allSiblings.slice(replyToContentIndex + 1)
 
-  let clonedFollowingSiblings = followingSiblings.map((sibling) =>
-    sibling.cloneNode(true),
-  )
+    let clonedFollowingSiblings = followingSiblings.map((sibling) =>
+      sibling.cloneNode(true),
+    )
 
-  const div = doc.createElement('div')
-  div.append(...clonedFollowingSiblings)
+    const div = doc.createElement('div')
+    div.append(...clonedFollowingSiblings)
 
-  wrapper.append(div)
+    wrapper.append(div)
 
-  for (let i = replyToContentIndex + 1; i < allSiblings.length; i++) {
-    replyToContentElement.parentElement.removeChild(allSiblings[i])
+    for (let i = replyToContentIndex + 1; i < allSiblings.length; i++) {
+      replyToContentElement.parentElement.removeChild(allSiblings[i])
+    }
   }
 
   replyToContentElement.parentElement.replaceChild(

From 5ac60ce27a41289f57a0b010b229a5a072d337e3 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 17:33:51 +0530
Subject: [PATCH 12/15] fix: email replied collapser for outlook

---
 frontend/src/components/EmailContent.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/frontend/src/components/EmailContent.vue b/frontend/src/components/EmailContent.vue
index 7a110a4e..fb095cc8 100644
--- a/frontend/src/components/EmailContent.vue
+++ b/frontend/src/components/EmailContent.vue
@@ -33,10 +33,13 @@ const parser = new DOMParser()
 const doc = parser.parseFromString(_content.value, 'text/html')
 
 const gmailReplyToContent = doc.querySelectorAll('div.gmail_quote')
+const outlookReplyToContent = doc.querySelectorAll('div#appendonsend')
 const replyToContent = doc.querySelectorAll('p.reply-to-content')
 
 if (gmailReplyToContent.length) {
   _content.value = parseReplyToContent(doc, 'div.gmail_quote', true)
+} else if (outlookReplyToContent.length) {
+  _content.value = parseReplyToContent(doc, 'div#appendonsend')
 } else if (replyToContent.length) {
   _content.value = parseReplyToContent(doc, 'p.reply-to-content')
 }

From c39df37db80ff15f05c5bb7114ea24680f4a7018 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 17:34:29 +0530
Subject: [PATCH 13/15] fix: resize iframe if collapser is clicked based on
 content height

---
 frontend/src/components/EmailContent.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/components/EmailContent.vue b/frontend/src/components/EmailContent.vue
index fb095cc8..f2eb2329 100644
--- a/frontend/src/components/EmailContent.vue
+++ b/frontend/src/components/EmailContent.vue
@@ -232,6 +232,15 @@ watch(iframeRef, (iframe) => {
       const emailContent =
         iframe.contentWindow.document.querySelector('.email-content')
       iframe.style.height = emailContent.offsetHeight + 25 + 'px'
+
+      let replyCollapsers = emailContent.querySelectorAll('.replyCollapser')
+      if (replyCollapsers.length) {
+        replyCollapsers.forEach((replyCollapser) => {
+          replyCollapser.addEventListener('change', () => {
+            iframe.style.height = emailContent.offsetHeight + 25 + 'px'
+          })
+        })
+      }
     }
   }
 })

From ab05e9342b522640c1631c9e5b428764584d2a45 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 18:23:56 +0530
Subject: [PATCH 14/15] fix: consider actual email content height

---
 frontend/src/components/EmailContent.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/EmailContent.vue b/frontend/src/components/EmailContent.vue
index f2eb2329..061dd7c1 100644
--- a/frontend/src/components/EmailContent.vue
+++ b/frontend/src/components/EmailContent.vue
@@ -6,7 +6,7 @@
     style="
       mask-image: linear-gradient(
         to bottom,
-        black calc(100% - 30px),
+        black calc(100% - 20px),
         transparent 100%
       );
     "
@@ -47,9 +47,7 @@ if (gmailReplyToContent.length) {
 function parseReplyToContent(doc, selector, forGmail = false) {
   function handleAllInstances(doc) {
     const replyToContentElements = doc.querySelectorAll(selector)
-    if (replyToContentElements.length === 0) {
-      return
-    }
+    if (replyToContentElements.length === 0) return
     const replyToContentElement = replyToContentElements[0]
     replaceReplyToContent(replyToContentElement, forGmail)
     handleAllInstances(doc)
@@ -61,6 +59,7 @@ function parseReplyToContent(doc, selector, forGmail = false) {
 }
 
 function replaceReplyToContent(replyToContentElement, forGmail) {
+  if (!replyToContentElement) return
   let randomId = Math.random().toString(36).substring(2, 7)
   const wrapper = doc.createElement('div')
   wrapper.classList.add('replied-content')
@@ -90,6 +89,8 @@ function replaceReplyToContent(replyToContentElement, forGmail) {
     const replyToContentIndex = allSiblings.indexOf(replyToContentElement)
     const followingSiblings = allSiblings.slice(replyToContentIndex + 1)
 
+    if (followingSiblings.length === 0) return
+
     let clonedFollowingSiblings = followingSiblings.map((sibling) =>
       sibling.cloneNode(true),
     )
@@ -99,6 +100,7 @@ function replaceReplyToContent(replyToContentElement, forGmail) {
 
     wrapper.append(div)
 
+    // Remove all siblings after the reply-to-content element
     for (let i = replyToContentIndex + 1; i < allSiblings.length; i++) {
       replyToContentElement.parentElement.removeChild(allSiblings[i])
     }
@@ -231,13 +233,15 @@ watch(iframeRef, (iframe) => {
     iframe.onload = () => {
       const emailContent =
         iframe.contentWindow.document.querySelector('.email-content')
-      iframe.style.height = emailContent.offsetHeight + 25 + 'px'
+      let parent = emailContent.closest('html')
+
+      iframe.style.height = parent.offsetHeight + 'px'
 
       let replyCollapsers = emailContent.querySelectorAll('.replyCollapser')
       if (replyCollapsers.length) {
         replyCollapsers.forEach((replyCollapser) => {
           replyCollapser.addEventListener('change', () => {
-            iframe.style.height = emailContent.offsetHeight + 25 + 'px'
+            iframe.style.height = parent.offsetHeight + 'px'
           })
         })
       }

From df767cb1bab36691c400ea9e24a87aa3e25f8270 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Fri, 12 Jul 2024 18:53:28 +0530
Subject: [PATCH 15/15] fix: minor scroll in email content

---
 frontend/src/components/EmailContent.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/EmailContent.vue b/frontend/src/components/EmailContent.vue
index 061dd7c1..310a452b 100644
--- a/frontend/src/components/EmailContent.vue
+++ b/frontend/src/components/EmailContent.vue
@@ -4,6 +4,7 @@
     :srcdoc="htmlContent"
     class="prose-f block h-screen max-h-[500px] w-full"
     style="
+      height: 40px;
       mask-image: linear-gradient(
         to bottom,
         black calc(100% - 20px),
@@ -235,13 +236,13 @@ watch(iframeRef, (iframe) => {
         iframe.contentWindow.document.querySelector('.email-content')
       let parent = emailContent.closest('html')
 
-      iframe.style.height = parent.offsetHeight + 'px'
+      iframe.style.height = parent.offsetHeight + 1 + 'px'
 
       let replyCollapsers = emailContent.querySelectorAll('.replyCollapser')
       if (replyCollapsers.length) {
         replyCollapsers.forEach((replyCollapser) => {
           replyCollapser.addEventListener('change', () => {
-            iframe.style.height = parent.offsetHeight + 'px'
+            iframe.style.height = parent.offsetHeight + 1 + 'px'
           })
         })
       }