fix: remove autofocus from text editor as create conversation form opens.

- Adds new prop autofocus on text editor
- rename ConversationTextEditor to TextEditor

Author: abhinavxd

frontend/src/features/conversation/ConversationTextEditor.vue renamed to frontend/src/components/editor/TextEditor.vue

@@ -91,7 +91,7 @@
 </template>
 
 <script setup>
-import { ref, watch, watchEffect, onUnmounted } from 'vue'
+import { ref, watch, watchEffect, onUnmounted, computed } from 'vue'
 import { useEditor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
 import {
   ChevronDown,
@@ -136,6 +136,10 @@ const props = defineProps({
   setInlineImage: Object,
   insertContent: String,
   clearContent: Boolean,
+  autoFocus: {
+    type: Boolean,
+    default: true
+  },
   aiPrompts: {
     type: Array,
     default: () => []
@@ -188,7 +192,7 @@ const CustomTableHeader = TableHeader.extend({
   }
 })
 
-const editorConfig = {
+const editorConfig = computed(() => ({
   extensions: [
     StarterKit.configure(),
     Image.configure({ HTMLAttributes: { class: 'inline-image' } }),
@@ -201,7 +205,7 @@ const editorConfig = {
     CustomTableCell,
     CustomTableHeader
   ],
-  autofocus: true,
+  autofocus: props.autoFocus,
   editorProps: {
     attributes: { class: 'outline-none' },
     handleKeyDown: (view, event) => {
@@ -210,17 +214,17 @@ const editorConfig = {
         return true
       }
       if (event.ctrlKey && event.key.toLowerCase() === 'b') {
-         // Prevent outer listeners
+        // Prevent outer listeners
         event.stopPropagation()
         return false
       }
     }
   }
-}
+}))
 
 const editor = ref(
   useEditor({
-    ...editorConfig,
+    ...editorConfig.value,
     content: htmlContent.value,
     onSelectionUpdate: ({ editor }) => {
       const { from, to } = editor.state.selection

frontend/src/features/admin/automation/ActionBox.vue

@@ -68,7 +68,7 @@
             <Editor
               v-model:htmlContent="action.value[0]"
               @update:htmlContent="(value) => handleEditorChange(value, index)"
-              :placeholder="t('editor.placeholder')"
+              :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
             />
           </div>
         </div>
@@ -101,7 +101,7 @@ import { SelectTag } from '@/components/ui/select'
 import { useConversationFilters } from '@/composables/useConversationFilters'
 import { getTextFromHTML } from '@/utils/strings.js'
 import { useI18n } from 'vue-i18n'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 
 const props = defineProps({

frontend/src/features/admin/macros/MacroForm.vue

@@ -19,7 +19,7 @@
             <Editor
               v-model:htmlContent="componentField.modelValue"
               @update:htmlContent="(value) => componentField.onChange(value)"
-              :placeholder="t('editor.placeholder')"
+              :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
             />
           </div>
         </FormControl>
@@ -167,7 +167,7 @@ import {
   SelectTag
 } from '@/components/ui/select'
 import { useI18n } from 'vue-i18n'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 
 const { macroActions } = useConversationFilters()
 const { t } = useI18n()

frontend/src/features/contact/ContactNotes.vue

@@ -27,7 +27,7 @@
             <Editor
               v-model:htmlContent="newNote"
               @update:htmlContent="(value) => (newNote = value)"
-              :placeholder="t('editor.placeholder')"
+              :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
             />
           </div>
           <div class="flex justify-end space-x-3 pt-2">
@@ -148,7 +148,7 @@ import {
   ClockIcon,
   MessageSquareIcon
 } from 'lucide-vue-next'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 import { useI18n } from 'vue-i18n'
 import { useEmitter } from '@/composables/useEmitter'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'

frontend/src/features/conversation/CreateConversation.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <Dialog :open="dialogOpen" @update:open="dialogOpen = false">
+    <Dialog v-model:open="dialogOpen">
       <DialogContent class="max-w-5xl w-full h-[90vh] flex flex-col">
         <DialogHeader>
           <DialogTitle>
@@ -13,7 +13,7 @@
         </DialogHeader>
         <form @submit="createConversation" class="flex flex-col flex-1 overflow-hidden">
           <!-- Form Fields Section -->
-          <div class="space-y-4 overflow-y-auto pb-2 flex-shrink-0">
+          <div class="space-y-4 pb-2 flex-shrink-0">
             <div class="space-y-2">
               <FormField name="contact_email">
                 <FormItem class="relative">
@@ -31,7 +31,7 @@
 
                   <ul
                     v-if="searchResults.length"
-                    class="border rounded p-2 max-h-60 overflow-y-auto absolute w-full z-50 shadow-lg bg-background"
+                    class="border rounded p-2 max-h-60 overflow-y-auto absolute w-full z-50 shadow bg-background"
                   >
                     <li
                       v-for="contact in searchResults"
@@ -161,11 +161,11 @@
                     <Editor
                       v-model:htmlContent="componentField.modelValue"
                       @update:htmlContent="(value) => componentField.onChange(value)"
-                      v-model:cursorPosition="cursorPosition"
                       :contentToSet="contentToSet"
-                      :placeholder="t('editor.placeholder')"
+                      :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
                       :clearContent="clearEditorContent"
                       :insertContent="insertContent"
+                      :autoFocus="false"
                       class="w-full flex-1 overflow-y-auto p-2 box min-h-0"
                     />
 
@@ -244,7 +244,7 @@ import {
 } from '@/components/ui/select'
 import { useI18n } from 'vue-i18n'
 import { useFileUpload } from '@/composables/useFileUpload'
-import Editor from '@/features/conversation/ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 import { useMacroStore } from '@/stores/macro'
 import SelectComboBox from '@/components/combobox/SelectCombobox.vue'
 import api from '@/api'
@@ -266,7 +266,6 @@ const conversationStore = useConversationStore()
 const macroStore = useMacroStore()
 let timeoutId = null
 
-const cursorPosition = ref(null)
 const contentToSet = ref('')
 const clearEditorContent = ref(false)
 const insertContent = ref('')

frontend/src/features/conversation/ReplyBoxContent.vue

@@ -90,14 +90,15 @@
         v-model:htmlContent="htmlContent"
         v-model:textContent="textContent"
         v-model:cursorPosition="cursorPosition"
-        :placeholder="editorPlaceholder"
+        :placeholder="t('editor.newLine') + t('editor.send') + t('editor.cmdK')"
         :aiPrompts="aiPrompts"
         @aiPromptSelected="handleAiPromptSelected"
         :contentToSet="contentToSet"
         @send="handleSend"
         :clearContent="clearEditorContent"
         :setInlineImage="setInlineImage"
         :insertContent="insertContent"
+        :autoFocus="true"
       />
     </div>
 
@@ -140,7 +141,7 @@
 import { ref, computed, nextTick, watch } from 'vue'
 import { EMITTER_EVENTS } from '@/constants/emitterEvents.js'
 import { Maximize2, Minimize2 } from 'lucide-vue-next'
-import Editor from './ConversationTextEditor.vue'
+import Editor from '@/components/editor/TextEditor.vue'
 import { useConversationStore } from '@/stores/conversation'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
@@ -214,7 +215,6 @@ const { t } = useI18n()
 
 const insertContent = ref(null)
 const setInlineImage = ref(null)
-const editorPlaceholder = t('replyBox.editor.placeholder')
 
 const toggleBcc = async () => {
   showBcc.value = !showBcc.value
@@ -304,11 +304,15 @@ const handleAiPromptSelected = (key) => {
 }
 
 // Watch and update macro view based on message type this filters our macros.
-watch(messageType, (newType) => {
-  if (newType === 'reply') {
-    macroStore.setCurrentView('replying')
-  } else if (newType === 'private_note') {
-    macroStore.setCurrentView('adding_private_note')
-  }
-}, { immediate: true })
+watch(
+  messageType,
+  (newType) => {
+    if (newType === 'reply') {
+      macroStore.setCurrentView('replying')
+    } else if (newType === 'private_note') {
+      macroStore.setCurrentView('adding_private_note')
+    }
+  },
+  { immediate: true }
+)
 </script>

frontend/src/features/conversation/sidebar/ConversationSideBarWrapper.vue

@@ -14,9 +14,9 @@
         <button
           v-if="!conversationSidebarOpen"
           @click="toggleSidebar"
-          class="absolute right-full top-16 p-2 rounded-l-full bg-background text-primary hover:bg-opacity-90 transition-all duration-200 shadow-lg group dark:border"
+          class="absolute right-full top-16 p-2 rounded-l-full bg-background text-primary hover:bg-opacity-90 transition-all duration-200 border shadow hover:scale-105"
         >
-          <ChevronLeft size="16" class="group-hover:scale-110 transition-transform" />
+          <ChevronLeft size="16"/>
         </button>
       </Sidebar>
     </SidebarProvider>

i18n/en.json

@@ -589,13 +589,14 @@
   "conversation.sidebar.previousConvo": "Previous conversations",
   "conversation.sidebar.noPreviousConvo": "No previous conversations",
   "conversation.sidebar.notAvailable": "Not available",
-  "editor.placeholder": "Shift + Enter to add a new line",
+  "editor.newLine": "Shift + Enter to add a new line. ",
+  "editor.send": " Cmd + Enter to send. ",
+  "editor.cmdK": "Cmd + K to open command bar. ",
   "ai.apiKeyNotSet": "{provider} API Key is not set. Please ask administrator to set it up",
   "ai.enterOpenAIAPIKey": "Enter OpenAI API Key",
   "ai.apiKey.description": "{provider} API Key is not set or invalid. Please enter a valid API key to use AI features.",
   "replyBox.reply": "Reply",
   "replyBox.emailAddresess": "Email addresses separated by comma",
-  "replyBox.editor.placeholder": "Shift + Enter to add a new line. Cmd + Enter to send. Cmd + K to open command bar.",
   "replyBox.invalidEmailsIn": "Invalid email(s) in",
   "replyBox.correctEmailErrors": "Please correct the email errors before sending.",
   "contact.blockConfirm": "Are you sure you want to block this contact? They will no longer be able to interact with you.",