fix: added custom paragraph in tiptap editor to allow adding class attribute

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()

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')