fix: accomodate changes in text editor from updating frappe-ui

desk/src/components/CommentBox.vue

@@ -53,13 +53,14 @@
       <TextEditor
         ref="editorRef"
         :editor-class="[
-          'prose-f shrink  text-p-sm transition-all duration-300 ease-in-out block w-full content',
+          'prose-f shrink text-p-sm transition-all duration-300 ease-in-out block w-full content',
           getFontFamily(_content),
         ]"
         :content="_content"
         :editable="editable"
         :bubble-menu="textEditorMenuButtons"
         @change="(event:string) => {_content = event}"
+        :upload-function="uploadFunction"
       >
         <template #bottom v-if="editable">
           <div class="flex flex-row-reverse gap-2">
@@ -108,6 +109,7 @@ import {
   isContentEmpty,
   textEditorMenuButtons,
   timeAgo,
+  uploadFunction,
 } from "@/utils";
 import {
   Avatar,

desk/src/components/CommentTextEditor.vue

@@ -15,6 +15,7 @@
     :mentions="agents"
     @change="editable ? (newComment = $event) : null"
     :extensions="[PreserveVideoControls]"
+    :upload-function="uploadFunction"
   >
     <template #bottom>
       <div v-if="editable" class="flex flex-col gap-2 px-6 md:pl-10 md:pr-9">
@@ -111,7 +112,12 @@ import { useAgentStore } from "@/stores/agent";
 
 import { useAuthStore } from "@/stores/auth";
 import { PreserveVideoControls } from "@/tiptap-extensions";
-import { getFontFamily, isContentEmpty, textEditorMenuButtons } from "@/utils";
+import {
+  getFontFamily,
+  isContentEmpty,
+  textEditorMenuButtons,
+  uploadFunction,
+} from "@/utils";
 import { useStorage } from "@vueuse/core";
 
 const { updateOnboardingStep } = useOnboarding("helpdesk");
@@ -158,7 +164,7 @@ const commentEmpty = computed(() => {
 const loading = ref(false);
 
 const label = computed(() => {
-  return loading ? "Sending..." : props.label;
+  return loading.value ? "Sending..." : props.label;
 });
 
 const agents = computed(() => {

desk/src/components/EmailEditor.vue

@@ -13,6 +13,7 @@
     :editable="editable"
     @change="editable ? (newEmail = $event) : null"
     :extensions="[PreserveVideoControls]"
+    :upload-function="uploadFunction"
   >
     <template #top>
       <div class="mx-6 md:mx-10 flex items-center gap-2 border-y py-2.5">
@@ -63,12 +64,12 @@
         />
       </div>
     </template>
-    <template v-slot:editor="{ editor }">
+    <!-- <template v-slot:editor="{ _editor }">
       <EditorContent
         :class="[editable && 'max-h-[35vh] overflow-y-auto']"
-        :editor="editor"
+        :editor="_editor"
       />
-    </template>
+    </template> -->
     <template #bottom>
       <!-- Attachments -->
       <div class="flex flex-wrap gap-2 px-10">
@@ -168,9 +169,10 @@ import {
   getFontFamily,
   isContentEmpty,
   textEditorMenuButtons,
+  uploadFunction,
   validateEmail,
 } from "@/utils";
-import { EditorContent } from "@tiptap/vue-3";
+// import { EditorContent } from "@tiptap/vue-3";
 import { useStorage } from "@vueuse/core";
 import {
   FileUploader,

desk/src/components/TextEditor.vue

@@ -1,16 +1,17 @@
 <template>
-  <div class="rounded p-3 shadow">
+  <div class="rounded p-3 shadow w-full">
     <FTextEditor
       ref="e"
       :extensions="[PreserveVideoControls]"
       v-bind="$attrs"
       :editor-class="[
-        'prose-f max-h-64 max-w-none overflow-auto my-4 min-h-[5rem',
+        'prose-f max-h-64 max-w-none  overflow-auto my-4 min-h-5rem',
         getFontFamily(modelValue),
       ]"
       bubble-menu
       :content="modelValue"
       @change="$emit('update:modelValue', $event)"
+      :upload-function="uploadFunction"
     >
       <template #top>
         <span class="text-base">
@@ -57,12 +58,12 @@
   </div>
 </template>
 <script setup lang="ts">
-import { computed, nextTick, ref } from "vue";
-import { TextEditor as FTextEditor, TextEditorFixedMenu } from "frappe-ui";
-import { useAuthStore } from "@/stores/auth";
 import { UserAvatar } from "@/components";
+import { useAuthStore } from "@/stores/auth";
 import { PreserveVideoControls } from "@/tiptap-extensions";
-import { getFontFamily } from "@/utils";
+import { getFontFamily, uploadFunction } from "@/utils";
+import { TextEditor as FTextEditor, TextEditorFixedMenu } from "frappe-ui";
+import { computed, nextTick, ref } from "vue";
 
 interface P {
   modelValue: string;

desk/src/components/canned-response/CannedResponseModal.vue

@@ -39,6 +39,7 @@
             :content="message"
             :placeholder="'Your query has been resolved. Thank you for reaching out.'"
             @change="(val) => (message = val)"
+            :upload-function="uploadFunction"
           />
         </div>
       </div>
@@ -47,6 +48,7 @@
 </template>
 
 <script setup>
+import { uploadFunction } from "@/utils";
 import { TextEditor, call, TextInput } from "frappe-ui";
 
 const props = defineProps({

desk/src/components/ticket/TicketAgentContact.vue

@@ -10,7 +10,9 @@
       <div class="flex gap-1.5">
         <Tooltip :text="contact.email_id">
           <Button class="h-7 w-7">
-            <EmailIcon class="h-4 w-4" @click="openEmailBox()" />
+            <template #icon>
+              <EmailIcon class="h-4 w-4" @click="openEmailBox()" />
+            </template>
           </Button>
         </Tooltip>
         <!-- <RouterLink
@@ -39,8 +41,8 @@
 </template>
 
 <script setup lang="ts">
-import { Tooltip, Avatar } from "frappe-ui";
-import { EmailIcon, TicketIcon } from "@/components/icons/";
+import { EmailIcon } from "@/components/icons/";
+import { Avatar, Tooltip } from "frappe-ui";
 
 const props = defineProps({
   contact: {

desk/src/components/ticket/TicketCustomerSidebar.vue

@@ -22,7 +22,9 @@
           <div class="flex gap-1.5" v-if="!ticket.data.feedback_rating">
             <Tooltip :text="ticket.data.contact.email_id">
               <Button class="h-7 w-7" @click="emit('open')">
-                <EmailIcon class="h-4 w-4" />
+                <template #icon>
+                  <EmailIcon class="h-4 w-4" />
+                </template>
               </Button>
             </Tooltip>
           </div>
@@ -76,12 +78,12 @@
 </template>
 
 <script setup lang="ts">
-import { inject, computed } from "vue";
-import { ITicket } from "@/pages/ticket/symbols";
-import { Tooltip, Avatar } from "frappe-ui";
 import { dayjs } from "@/dayjs";
-import { formatTime } from "@/utils";
+import { ITicket } from "@/pages/ticket/symbols";
 import { Field } from "@/types";
+import { formatTime } from "@/utils";
+import { Avatar, Tooltip } from "frappe-ui";
+import { computed, inject } from "vue";
 
 const emit = defineEmits(["open"]);
 

desk/src/pages/knowledge-base/Article.vue

@@ -93,6 +93,7 @@
 			      content = event;
 		      }"
           placeholder="Write your article here..."
+          :upload-function="uploadFunction"
         >
           <template #bottom v-if="editable">
             <TextEditorFixedMenu
@@ -131,6 +132,7 @@ import {
   copyToClipboard,
   isCustomerPortal,
   textEditorMenuButtons,
+  uploadFunction,
 } from "@/utils";
 import {
   Avatar,

desk/src/pages/knowledge-base/NewArticle.vue

@@ -56,6 +56,7 @@
           @change="content = $event"
           placeholder="Write your article here..."
           editor-class="rounded-b-lg max-w-[unset] prose-sm h-[calc(100vh-340px)] sm:h-[calc(100vh-250px)] overflow-auto"
+          :upload-function="uploadFunction"
         >
           <template #bottom>
             <TextEditorFixedMenu
@@ -86,7 +87,7 @@ import { globalStore } from "@/stores/globalStore";
 import { newArticle } from "@/stores/knowledgeBase";
 import { useUserStore } from "@/stores/user";
 import { Article } from "@/types";
-import { textEditorMenuButtons } from "@/utils";
+import { textEditorMenuButtons, uploadFunction } from "@/utils";
 import { useRoute, useRouter } from "vue-router";
 
 const userStore = useUserStore();

desk/src/pages/ticket/TicketCustomer.vue

@@ -22,15 +22,15 @@
         </Button>
       </template>
     </LayoutHeader>
-    <div class="flex overflow-hidden h-full">
+    <div class="flex overflow-hidden h-full w-full">
       <!-- Main Ticket Comm -->
-      <section class="flex flex-col flex-1">
+      <section class="flex flex-col flex-1 max-w-[calc(100%-382px)]">
         <!-- show for only mobile -->
         <TicketCustomerTemplateFields v-if="isMobileView" />
 
         <TicketConversation class="grow" />
         <div
-          class="m-5"
+          class="w-full p-5"
           @keydown.ctrl.enter.capture.stop="sendEmail"
           @keydown.meta.enter.capture.stop="sendEmail"
         >
@@ -40,7 +40,7 @@
             v-model:attachments="attachments"
             v-model:content="editorContent"
             v-model:expand="isExpanded"
-            :placeholder="placeholder"
+            placeholder="Type a message"
             autofocus
             @clear="() => (isExpanded = false)"
           >
@@ -112,7 +112,6 @@ const ticket = useTicket(
 );
 provide(ITicket, ticket);
 const editor = ref(null);
-const placeholder = "Type a message";
 const editorContent = ref("");
 const attachments = ref([]);
 const showFeedbackDialog = ref(false);

desk/src/utils.ts

@@ -1,6 +1,7 @@
 import { useClipboard, useDateFormat, useTimeAgo } from "@vueuse/core";
 import dayjs from "dayjs";
 import { toast } from "frappe-ui";
+import { useFileUpload } from "frappe-ui/src/utils/useFileUpload";
 import { gemoji } from "gemoji";
 import { h, markRaw, ref } from "vue";
 import zod from "zod";
@@ -197,3 +198,10 @@ export function getFontFamily(content: string) {
   }
   return langMap[lang];
 }
+
+export function uploadFunction(file: File) {
+  let fileUpload = useFileUpload();
+  return fileUpload.upload(file).then((fileDoc: any) => {
+    return { src: fileDoc.file_url };
+  });
+}