Merge pull request #3103 from frappe/main-hotfix

chore(release): hotfix to main

Author: RitvikSardana

desk/src/components/EmailContent.vue

@@ -171,31 +171,6 @@ const htmlContent = computed(
       .email-content {
         word-break: break-word;
       }
-      .email-content :is(:where(table):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
-        table-layout: auto;
-      }
-      .email-content :where(table):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-        width: unset;
-        table-layout: auto;
-        text-align: unset;
-        margin-top: unset;
-        margin-bottom: unset;
-        font-size: unset;
-        line-height: unset;
-      }
-      .email-content :where(tbody tr):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-        border-bottom-width: 0;
-        border-bottom-color: transparent;
-      }
-      .email-content :is(:where(td):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
-        position: unset;
-        border-width: 0;
-        border-color: transparent;
-        padding: 0;
-      }
-      .email-content :where(tbody td):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
-        vertical-align: revert;
-      }
       .email-content :is(:where(img):not(:where([class~='not-prose'], [class~='not-prose'] *))) {
         border-width: 0;
       }

desk/src/components/EmailEditor.vue

@@ -2,10 +2,8 @@
   <TextEditor
     ref="editorRef"
     :editor-class="[
-      'prose-sm max-w-full mx-6 md:mx-10 max-h-[50vh] py-3',
-      'min-h-[7rem]',
+      'prose-sm max-w-full mx-6 md:mx-10 py-3',
       getFontFamily(newEmail),
-      editable && '!max-h-[35vh] overflow-y-auto',
       '[&_p.reply-to-content]:hidden',
     ]"
     :content="newEmail"
@@ -15,6 +13,7 @@
     @change="editable ? (newEmail = $event) : null"
     :extensions="[ComponentUtils, HandleExcelPaste]"
     :uploadFunction="(file:any)=>uploadFunction(file, doctype, ticketId)"
+    @keydown.capture.stop="handleKeydown"
   >
     <template #top>
       <div class="mx-6 md:mx-10 flex items-center gap-2 border-y py-2.5">
@@ -65,12 +64,19 @@
         />
       </div>
     </template>
-    <!-- <template v-slot:editor="{ _editor }">
-      <EditorContent
-        :class="[editable && 'max-h-[35vh] overflow-y-auto']"
-        :editor="_editor"
-      />
-    </template> -->
+
+    <template #editor>
+      <div class="overflow-y-auto min-h-[7rem] max-h-[30vh]">
+        <EditorContent :editor="editor" />
+        <div
+          v-if="quotedContent"
+          ref="quotedContentRef"
+          contenteditable="true"
+          class="prose !max-w-full mx-6 md:mx-10 my-2 border-l-4 border-gray-300 pl-4 text-sm focus:outline-none"
+          @input="onQuotedInput"
+        />
+      </div>
+    </template>
     <template #bottom>
       <!-- Attachments -->
       <div class="flex flex-wrap gap-2 px-10">
@@ -165,9 +171,10 @@
 <script setup lang="ts">
 import {
   AttachmentItem,
-  SavedRepliesSelectorModal,
   MultiSelectInput,
+  SavedRepliesSelectorModal,
 } from "@/components";
+import { EditorContent } from "@tiptap/vue-3";
 import { AttachmentIcon } from "@/components/icons";
 import { useTyping } from "@/composables/realtime";
 import { useAuthStore } from "@/stores/auth";
@@ -180,7 +187,6 @@ import {
   uploadFunction,
   validateEmailWithZod,
 } from "@/utils";
-// import { EditorContent } from "@tiptap/vue-3";
 import { useStorage } from "@vueuse/core";
 import {
   FileUploader,
@@ -190,11 +196,19 @@ import {
   toast,
 } from "frappe-ui";
 import { useOnboarding } from "frappe-ui/frappe";
-import { computed, nextTick, onBeforeUnmount, ref, watch } from "vue";
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from "vue";
 import SavedReplyIcon from "./icons/SavedReplyIcon.vue";
 
 const editorRef = ref(null);
 const showSavedRepliesSelectorModal = ref(false);
+const quotedContentRef = ref<HTMLElement | null>(null);
 
 const props = defineProps({
   ticketId: {
@@ -241,6 +255,12 @@ const newEmail = useStorage<null | string>(
   "emailBoxContent" + props.ticketId,
   null
 );
+
+const quotedContent = useStorage<null | string>(
+  "quotedEmailBoxContent" + props.ticketId,
+  null
+);
+
 const { updateOnboardingStep } = useOnboarding("helpdesk");
 const { isManager } = useAuthStore();
 
@@ -249,10 +269,11 @@ const { onUserType, cleanup } = useTyping(props.ticketId);
 
 const attachments = ref([]);
 const isUploading = ref(false);
-
 const isDisabled = computed(() => {
   return (
-    isContentEmpty(newEmail.value) || sendMail.loading || isUploading.value
+    (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) ||
+    sendMail.loading ||
+    isUploading.value
   );
 });
 
@@ -295,7 +316,11 @@ const sendMail = createResource({
       to: toEmailsClone.value.join(","),
       cc: ccEmailsClone.value?.join(","),
       bcc: bccEmailsClone.value?.join(","),
-      message: newEmail.value,
+      message:
+        newEmail.value +
+        (quotedContentRef.value
+          ? `<p class="reply-to-content"><p><blockquote>${quotedContentRef.value.innerHTML}</blockquote>`
+          : ""),
     },
   }),
   onSuccess: () => {
@@ -310,7 +335,7 @@ const sendMail = createResource({
 });
 
 function submitMail() {
-  if (isContentEmpty(newEmail.value)) {
+  if (isContentEmpty(newEmail.value) && isContentEmpty(quotedContent.value)) {
     return false;
   }
   if (!toEmailsClone.value.length) {
@@ -323,6 +348,21 @@ function submitMail() {
   sendMail.submit();
 }
 
+watch(quotedContent, (newVal, oldVal) => {
+  if (!oldVal && newVal) {
+    nextTick(() => {
+      if (quotedContentRef.value) {
+        quotedContentRef.value.innerHTML = newVal;
+      }
+    });
+  }
+});
+function onQuotedInput() {
+  const el = quotedContentRef.value;
+  if (!el) return;
+  quotedContent.value = el.innerHTML || null;
+}
+
 function toggleCC() {
   showCC.value = !showCC.value;
 
@@ -354,15 +394,16 @@ function addToReply(
   toEmailsClone.value = toEmails;
   ccEmailsClone.value = ccEmails;
   bccEmailsClone.value = bccEmails;
-  const repliedMessage = `<p class="reply-to-content"><p><blockquote>${body}</blockquote>`;
-  editorRef.value.editor
-    .chain()
-    .clearContent()
-    .insertContent(repliedMessage)
-    .focus("all")
-    .insertContentAt(0, { type: "paragraph" })
-    .focus("start")
-    .run();
+
+  if (body !== quotedContent.value) {
+    //trigger change for watch when replied to body data is different from current quoted content
+    quotedContent.value = null;
+    nextTick(() => {
+      quotedContent.value = body;
+    });
+  }
+
+  editorRef.value.editor.chain().clearContent().focus("start").run();
   nextTick(() => {
     newEmail.value = editorRef.value.editor.getHTML();
   });
@@ -371,21 +412,94 @@ function addToReply(
 function resetState() {
   newEmail.value = null;
   attachments.value = [];
+  quotedContent.value = null;
 }
 
 function handleDiscard() {
   attachments.value = [];
   newEmail.value = null;
-
+  quotedContent.value = null;
   ccEmailsClone.value = [];
   bccEmailsClone.value = [];
-  ccEmailsClone.value = [];
   showCC.value = false;
   showBCC.value = false;
 
   emit("discard");
 }
 
+//on load set quoted content from storage
+onMounted(() => {
+  if (quotedContent.value) {
+    nextTick(() => {
+      if (quotedContentRef.value) {
+        quotedContentRef.value.innerHTML = quotedContent.value;
+      }
+    });
+  }
+});
+
+function handleSelectAll(e: KeyboardEvent) {
+  const active = document.activeElement;
+  const editorDom = editorRef.value?.editor?.view?.dom as
+    | HTMLElement
+    | undefined;
+  const quotedEl = quotedContentRef.value;
+  const sel = window.getSelection();
+  if (!sel || !editorDom) return;
+  if (!editorDom.contains(active) && !(quotedEl && quotedEl.contains(active))) {
+    return;
+  }
+  e.preventDefault();
+  sel.removeAllRanges();
+  const range = document.createRange();
+
+  if (quotedEl) {
+    range.setStartBefore(editorDom);
+    range.setEndAfter(quotedEl);
+  } else {
+    range.selectNodeContents(editorDom);
+  }
+  sel.addRange(range);
+}
+
+function handleDelete(e: KeyboardEvent) {
+  const sel = window.getSelection();
+  const quotedEl = quotedContentRef.value;
+  const editorDom = editorRef.value?.editor?.view?.dom as
+    | HTMLElement
+    | undefined;
+
+  if (!sel || sel.isCollapsed || !quotedEl || !editorDom) return;
+
+  const isSelectingEntireEditor = sel.containsNode(editorDom, true);
+
+  const isSelectingEntireQuote = sel.containsNode(quotedEl, true);
+
+  if (isSelectingEntireEditor && isSelectingEntireQuote) {
+    e.preventDefault();
+
+    editorRef.value?.editor?.commands?.clearContent();
+    newEmail.value = null;
+    quotedContent.value = null;
+
+    sel.removeAllRanges();
+  }
+}
+
+function handleKeydown(e: KeyboardEvent) {
+  const key = e.key.toLowerCase();
+
+  if ((e.metaKey || e.ctrlKey) && key === "a") {
+    handleSelectAll(e);
+    return;
+  }
+
+  if (key === "backspace" || key === "delete") {
+    handleDelete(e);
+    return;
+  }
+}
+
 const editor = computed(() => {
   return editorRef.value.editor;
 });

desk/src/components/SavedRepliesSelectorModal.vue

@@ -201,7 +201,7 @@ const selectedTemplate = ref({
 });
 
 const scope = computed(() => {
-  return filters.value.find((f) => f.label === activeFilter.value)?.value;
+  return filters.value.find((f) => f.value === activeFilter.value)?.value;
 });
 
 const savedReplyListResource = createListResource({

desk/src/index.css

@@ -6,7 +6,7 @@
 
 @layer components {
   .prose-f {
-    @apply break-normal max-w-none prose prose-code:break-all prose-code:whitespace-pre-wrap prose-img:border prose-img:rounded-lg prose-sm prose-table:table-fixed prose-td:border prose-td:border-gray-300 prose-td:p-2 prose-td:relative prose-th:bg-gray-100 prose-th:border prose-th:border-gray-300 prose-th:p-2 prose-th:relative;
+    @apply break-normal max-w-none prose prose-code:break-all prose-code:whitespace-pre-wrap prose-img:border prose-img:rounded-lg prose-sm;
   }
 }
 .tiptap input[placeholder="Add caption"] {
@@ -16,4 +16,4 @@
 html,
 body {
   color: var(--ink-gray-9);
-}
+}

desk/src/pages/ticket/TicketCommunication.vue

@@ -61,6 +61,9 @@ function sanitize(html: string) {
       a: ["href"],
       video: ["src", "controls"],
       img: ["src"],
+      table: ["border", "cellpadding", "cellspacing", "width", "data-type"],
+      td: ["colspan", "rowspan", "width", "align", "valign"],
+      th: ["colspan", "rowspan", "width", "align", "valign"],
     },
   });
 }

helpdesk/__init__.py

@@ -1 +1 @@
-__version__ = "1.21.1"
+__version__ = "1.21.2"

helpdesk/helpdesk/doctype/hd_ticket/hd_ticket.py

@@ -1167,10 +1167,8 @@ def parse_content(self, content):
                 tag["embed"] = tag.get("src")
                 tag["width"] = "80%"
                 tag["height"] = "80%"
-                del tag["src"]
             elif tag.name == "video":
                 tag["embed"] = tag.get("src")
-                del tag["src"]
 
         return str(soup)