fix(viewer): remove double sanitize, fix yt directive

src/components/Markdown/YoutubeDirective.tsx

@@ -9,6 +9,14 @@ export const youtubeDirective: DirectiveConfig = {
     //::youtube{#<VIDEO_ID>}
     let vid: string = ''
     if (token.attrs && token.meta.name === 'youtube') {
+      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) &&
@@ -18,6 +26,7 @@ export const youtubeDirective: DirectiveConfig = {
           }
         }
       }
+    }
 
     if (vid) {
       return `<iframe title="Video embed" width="560" height="315" src="https://www.youtube.com/embed/${vid}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>`

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)