Merge pull request #2030 from frappe/video-element-controls

fix: add video controls in video HTML elements

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

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

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>

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;

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"];

desk/src/tiptap-extensions.ts

@@ -0,0 +1,44 @@
+import { Extension } from "@tiptap/core";
+
+export const PreserveVideoControls: Extension = Extension.create({
+  name: "preserveVideoControls",
+  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 };
+            },
+          },
+        },
+      },
+    ];
+  },
+});