From e6745c4887214196d30c05c28abf2df4201cb5f2 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Tue, 29 Oct 2024 18:09:26 +0530
Subject: [PATCH 1/2] fix: allow controls on video html elements in tip tap

---
 desk/src/components/TextEditor.vue            |  4 +-
 desk/src/pages/KnowledgeBaseArticle.vue       | 29 +-----------
 desk/src/pages/ticket/TicketCommunication.vue |  7 ++-
 desk/src/pages/ticket/TicketTextEditor.vue    |  2 +-
 desk/src/tiptap-extensions.ts                 | 44 +++++++++++++++++++
 5 files changed, 56 insertions(+), 30 deletions(-)
 create mode 100644 desk/src/tiptap-extensions.ts

diff --git a/desk/src/components/TextEditor.vue b/desk/src/components/TextEditor.vue
index 9b5d1b7fd..f69002250 100644
--- a/desk/src/components/TextEditor.vue
+++ b/desk/src/components/TextEditor.vue
@@ -2,6 +2,7 @@
   <div class="rounded p-3 shadow">
     <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]"
       bubble-menu
@@ -57,6 +58,7 @@ import { computed, nextTick, ref } from "vue";
 import { TextEditor as FTextEditor, TextEditorFixedMenu } from "frappe-ui";
 import { useAuthStore } from "@/stores/auth";
 import { UserAvatar } from "@/components";
+import { PreserveVideoControls } from "@/tiptap-extensions";
 
 interface P {
   modelValue: string;
@@ -65,7 +67,7 @@ interface P {
 
 interface E {
   (event: "clear"): void;
-  (event: "update:modelValue"): string;
+  (event: "update:modelValue", any): string;
 }
 
 const props = withDefaults(defineProps<P>(), {
diff --git a/desk/src/pages/KnowledgeBaseArticle.vue b/desk/src/pages/KnowledgeBaseArticle.vue
index 06e6326a2..4165cc881 100644
--- a/desk/src/pages/KnowledgeBaseArticle.vue
+++ b/desk/src/pages/KnowledgeBaseArticle.vue
@@ -94,15 +94,14 @@ import {
 import { createToast } from "@/utils";
 import { useAuthStore } from "@/stores/auth";
 import { useError } from "@/composables/error";
-
-import { LayoutHeader, PageTitle } from "@/components";
+import { LayoutHeader } from "@/components";
 import KnowledgeBaseArticleActionsEdit from "./knowledge-base/KnowledgeBaseArticleActionsEdit.vue";
 import KnowledgeBaseArticleActionsNew from "./knowledge-base/KnowledgeBaseArticleActionsNew.vue";
 import KnowledgeBaseArticleActionsView from "./knowledge-base/KnowledgeBaseArticleActionsView.vue";
 import KnowledgeBaseArticleTopEdit from "./knowledge-base/KnowledgeBaseArticleTopEdit.vue";
 import KnowledgeBaseArticleTopNew from "./knowledge-base/KnowledgeBaseArticleTopNew.vue";
 import KnowledgeBaseArticleTopView from "./knowledge-base/KnowledgeBaseArticleTopView.vue";
-import { Extension } from "@tiptap/core";
+import { PreserveIds } from "@/tiptap-extensions";
 
 const props = defineProps({
   articleId: {
@@ -390,30 +389,6 @@ const textEditorMenuButtons = [
   ],
 ];
 
-// extension to preserve ids in html of headings
-const PreserveIds: Extension = Extension.create({
-  name: "preserveIds",
-  addGlobalAttributes() {
-    return [
-      {
-        types: ["heading"],
-        attributes: {
-          id: {
-            default: null,
-            parseHTML: (element) => element.getAttribute("id"),
-            renderHTML: (attributes) => {
-              if (!attributes.id) {
-                return {};
-              }
-              return { id: attributes.id };
-            },
-          },
-        },
-      },
-    ];
-  },
-});
-
 const textEditorContentWithIDs = computed(() =>
   article.data?.content ? addLinksToHeadings(article.data?.content) : null
 );
diff --git a/desk/src/pages/ticket/TicketCommunication.vue b/desk/src/pages/ticket/TicketCommunication.vue
index 61b26de94..430308aac 100644
--- a/desk/src/pages/ticket/TicketCommunication.vue
+++ b/desk/src/pages/ticket/TicketCommunication.vue
@@ -54,7 +54,12 @@ withDefaults(defineProps<P>(), {
 
 function sanitize(html: string) {
   return sanitizeHtml(html, {
-    allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
+    allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img", "video"]),
+    allowedAttributes: {
+      a: ["href"],
+      video: ["src", "controls"],
+      img: ["src"],
+    },
   });
 }
 </script>
diff --git a/desk/src/pages/ticket/TicketTextEditor.vue b/desk/src/pages/ticket/TicketTextEditor.vue
index 06966e0c4..e1e1b4a97 100644
--- a/desk/src/pages/ticket/TicketTextEditor.vue
+++ b/desk/src/pages/ticket/TicketTextEditor.vue
@@ -75,6 +75,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import { FileUploader } from "frappe-ui";
 import { Icon } from "@iconify/vue";
 import { useAuthStore } from "@/stores/auth";
@@ -84,7 +85,6 @@ import {
   UserAvatar,
 } from "@/components";
 import { File } from "@/types";
-import { computed, ref } from "vue";
 
 interface P {
   content: string;
diff --git a/desk/src/tiptap-extensions.ts b/desk/src/tiptap-extensions.ts
new file mode 100644
index 000000000..f344d7080
--- /dev/null
+++ b/desk/src/tiptap-extensions.ts
@@ -0,0 +1,44 @@
+import { Extension } from "@tiptap/core";
+
+export const PreserveVideoControls: Extension = Extension.create({
+  name: "preserveIds",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["video"],
+        attributes: {
+          controls: {
+            default: true,
+            parseHTML: (element) => element.getAttribute("controls"),
+            renderHTML: () => {
+              return { controls: true };
+            },
+          },
+        },
+      },
+    ];
+  },
+});
+
+export const PreserveIds: Extension = Extension.create({
+  name: "preserveIds",
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["heading"],
+        attributes: {
+          id: {
+            default: null,
+            parseHTML: (element) => element.getAttribute("id"),
+            renderHTML: (attributes) => {
+              if (!attributes.id) {
+                return {};
+              }
+              return { id: attributes.id };
+            },
+          },
+        },
+      },
+    ];
+  },
+});

From aefdf05a4c8cce4cf080fef8f182cca70b989114 Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Thu, 31 Oct 2024 03:27:36 +0530
Subject: [PATCH 2/2] fix: add important for dropdown classes

---
 desk/src/stores/ticketStatus.ts | 10 +++++-----
 desk/src/tiptap-extensions.ts   |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/desk/src/stores/ticketStatus.ts b/desk/src/stores/ticketStatus.ts
index b99ce11ec..4b1ea52e2 100644
--- a/desk/src/stores/ticketStatus.ts
+++ b/desk/src/stores/ticketStatus.ts
@@ -16,11 +16,11 @@ export const useTicketStatusStore = defineStore("ticketStatus", () => {
     Closed: "gray",
   };
   const textColorMap = {
-    Open: "text-red-600",
-    Replied: "text-blue-600",
-    "Awaiting Response": "text-blue-600",
-    Resolved: "text-green-700",
-    Closed: "text-gray-700",
+    Open: "!text-red-600",
+    Replied: "!text-blue-600",
+    "Awaiting Response": "!text-blue-600",
+    Resolved: "!text-green-700",
+    Closed: "!text-gray-700",
   };
   const stateActive = ["Open", "Replied"];
   const stateInactive = ["Resolved", "Closed"];
diff --git a/desk/src/tiptap-extensions.ts b/desk/src/tiptap-extensions.ts
index f344d7080..929848471 100644
--- a/desk/src/tiptap-extensions.ts
+++ b/desk/src/tiptap-extensions.ts
@@ -1,7 +1,7 @@
 import { Extension } from "@tiptap/core";
 
 export const PreserveVideoControls: Extension = Extension.create({
-  name: "preserveIds",
+  name: "preserveVideoControls",
   addGlobalAttributes() {
     return [
       {