From 25f3602aeab451f3463a872256706dd91f35db5b Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Mon, 23 Mar 2026 12:11:51 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20video=20not=20rendering=20=E2=80=94=20ad?=
 =?UTF-8?q?d=20TipTap=20Video=20extension,=20allow=20HTTP=20src?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

TipTap didn't recognize <video> tags without a custom node extension,
serializing them as escaped text. Also revert video src to allow HTTP
since request.base_url returns http:// behind reverse proxy.
---
 src/lib/tiptap-video.ts       | 30 ++++++++++++++++++++++++++++++
 src/pages/AdminNewsCreate.tsx | 10 ++++++----
 src/pages/NewsArticle.tsx     |  5 +++--
 3 files changed, 39 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/tiptap-video.ts

diff --git a/src/lib/tiptap-video.ts b/src/lib/tiptap-video.ts
new file mode 100644
index 0000000..2878b21
--- /dev/null
+++ b/src/lib/tiptap-video.ts
@@ -0,0 +1,30 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+/**
+ * TipTap extension for inline <video> elements.
+ *
+ * Without this extension, TipTap does not recognize <video> tags and
+ * serializes them as escaped text when calling editor.getHTML().
+ */
+export const VideoExtension = Node.create({
+  name: 'video',
+  group: 'block',
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: { default: null },
+      controls: { default: true },
+      class: { default: null },
+      preload: { default: 'metadata' },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'video' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['video', mergeAttributes(HTMLAttributes, { controls: '' })];
+  },
+});
diff --git a/src/pages/AdminNewsCreate.tsx b/src/pages/AdminNewsCreate.tsx
index c5578d1..553ae57 100644
--- a/src/pages/AdminNewsCreate.tsx
+++ b/src/pages/AdminNewsCreate.tsx
@@ -10,6 +10,7 @@ import PlaceholderExtension from '@tiptap/extension-placeholder';
 import TextAlignExtension from '@tiptap/extension-text-align';
 import UnderlineExtension from '@tiptap/extension-underline';
 import HighlightExtension from '@tiptap/extension-highlight';
+import { VideoExtension } from '../lib/tiptap-video';
 import { newsApi } from '../api/news';
 import { AdminBackButton } from '../components/admin';
 import { Toggle } from '../components/admin/Toggle';
@@ -246,6 +247,7 @@ export default function AdminNewsCreate() {
         types: ['heading', 'paragraph'],
       }),
       HighlightExtension,
+      VideoExtension,
     ],
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
@@ -319,13 +321,13 @@ export default function AdminNewsCreate() {
         if (result.media_type === 'image') {
           editor.chain().focus().setImage({ src: result.url, alt: file.name }).run();
         } else {
-          const safeUrl = result.url.replace(/"/g, '&quot;');
           editor
             .chain()
             .focus()
-            .insertContent(
-              `<video src="${safeUrl}" controls class="w-full rounded-xl max-h-96"></video>`,
-            )
+            .insertContent({
+              type: 'video',
+              attrs: { src: result.url, class: 'w-full rounded-xl max-h-96' },
+            })
             .run();
         }
         haptic.success();
diff --git a/src/pages/NewsArticle.tsx b/src/pages/NewsArticle.tsx
index 25d3e3b..04962e7 100644
--- a/src/pages/NewsArticle.tsx
+++ b/src/pages/NewsArticle.tsx
@@ -189,13 +189,14 @@ function sanitizeHtml(html: string): string {
     }
   });
 
-  // Hook: validate <video> src — HTTPS only
+  // Hook: validate <video> src — only allow http/https (block javascript:, data:, etc.)
+  // HTTP is permitted because request.base_url behind a reverse proxy returns http://
   DOMPurify.addHook('afterSanitizeAttributes', (node) => {
     if (node.tagName === 'VIDEO') {
       const src = node.getAttribute('src') ?? '';
       try {
         const url = new URL(src);
-        if (url.protocol !== 'https:') {
+        if (url.protocol !== 'https:' && url.protocol !== 'http:') {
           node.remove();
           return;
         }