src/components/ModForm.tsx

@@ -22,7 +22,12 @@ import {
   ModPageLoaderResult,
   SubmitModActionResult
 } from '../types'
-import { initializeFormState, MOD_DRAFT_CACHE_KEY } from '../utils'
+import {
+  initializeFormState,
+  log,
+  LogType,
+  MOD_DRAFT_CACHE_KEY
+} from '../utils'
 import { CheckboxField, InputField, InputFieldWithImageUpload } from './Inputs'
 import { OriginalAuthor } from './OriginalAuthor'
 import { CategoryAutocomplete } from './CategoryAutocomplete'
@@ -32,6 +37,7 @@ import { MEDIA_OPTIONS } from 'controllers'
 import { InputError } from './Inputs/Error'
 import { ImageUpload } from './Inputs/ImageUpload'
 import { useLocalCache } from 'hooks/useLocalCache'
+import { toast } from 'react-toastify'
 
 interface GameOption {
   value: string
@@ -59,6 +65,13 @@ export const ModForm = () => {
     isEditing ? initializeFormState(mod) : cache ? cache : initializeFormState()
   )
 
+  // Enable backwards compatibility with the mods that used html
+  const body = useMemo(() => {
+    // Replace the most problematic HTML tags (<br>)
+    const fixed = formState.body.replaceAll(/<br>/g, '\r\n')
+    return fixed
+  }, [formState.body])
+
   useEffect(() => {
     if (!isEditing) {
       const newCache = _.cloneDeep(formState)
@@ -253,11 +266,15 @@ export const ModForm = () => {
         <div className='inputMain'>
           <Editor
             ref={editorRef}
-            markdown={formState.body}
+            markdown={body}
             placeholder="Here's what this mod is all about"
             onChange={(md) => {
               handleInputChange('body', md)
             }}
+            onError={(payload) => {
+              toast.error('Markdown error. Fix manually in the source mode.')
+              log(true, LogType.Error, payload.error)
+            }}
           />
         </div>
         {typeof formErrors?.body !== 'undefined' && (