From 2440620328824b6d1bfc28730fabe40e4be0bea6 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Tue, 24 Dec 2024 20:20:13 +0100
Subject: [PATCH] fix(viewer): remove double sanitize, fix yt directive

---
 src/components/Markdown/YoutubeDirective.tsx | 21 ++++++++++++++------
 src/components/ModForm.tsx                   |  8 +-------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/Markdown/YoutubeDirective.tsx b/src/components/Markdown/YoutubeDirective.tsx
index 4908d0d..e8da4af 100644
--- a/src/components/Markdown/YoutubeDirective.tsx
+++ b/src/components/Markdown/YoutubeDirective.tsx
@@ -9,12 +9,21 @@ export const youtubeDirective: DirectiveConfig = {
     //::youtube{#<VIDEO_ID>}
     let vid: string = ''
     if (token.attrs && token.meta.name === 'youtube') {
-      for (const attr in token.attrs) {
-        if (
-          Object.prototype.hasOwnProperty.call(token.attrs, attr) &&
-          attr.startsWith('#')
-        ) {
-          vid = attr.replace('#', '')
+      if (token.attrs.id) {
+        vid = token.attrs.id as string // Get the video `id` attribute (common id style)
+      } else if (token.attrs.vid) {
+        vid = token.attrs.vid as string // Check for the `vid` attribute (youtube directive attribute style)
+      } else {
+        // Fallback for id
+        // In case that video starts with the number it will not be recongizned as an id
+        // We have to manually fetch it
+        for (const attr in token.attrs) {
+          if (
+            Object.prototype.hasOwnProperty.call(token.attrs, attr) &&
+            attr.startsWith('#')
+          ) {
+            vid = attr.replace('#', '')
+          }
         }
       }
     }
diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx
index 19d0326..98cdc22 100644
--- a/src/components/ModForm.tsx
+++ b/src/components/ModForm.tsx
@@ -28,8 +28,6 @@ import { OriginalAuthor } from './OriginalAuthor'
 import { CategoryAutocomplete } from './CategoryAutocomplete'
 import { AlertPopup } from './AlertPopup'
 import { Editor, EditorRef } from './Markdown/Editor'
-import TurndownService from 'turndown'
-import DOMPurify from 'dompurify'
 
 interface GameOption {
   value: string
@@ -48,10 +46,6 @@ export const ModForm = () => {
     initializeFormState(mod)
   )
   const editorRef = useRef<EditorRef>(null)
-  const sanitized = DOMPurify.sanitize(formState.body)
-  const turndown = new TurndownService()
-  turndown.keep(['sup', 'sub'])
-  const markdown = turndown.turndown(sanitized)
 
   useEffect(() => {
     const options = games.map((game) => ({
@@ -208,7 +202,7 @@ export const ModForm = () => {
         <div className='inputMain'>
           <Editor
             ref={editorRef}
-            markdown={markdown}
+            markdown={formState.body}
             placeholder="Here's what this mod is all about"
             onChange={(md) => {
               handleInputChange('body', md)