Merge pull request #24 from Sorok-Dva/fix/admin/editTuto

🎨 feat: Enhance tutorial preview with image support
Sorok-Dva · Aug 22, 2024 · fe5d6f9 · fe5d6f9
2 parents 114de2d + cfb4e00
commit fe5d6f9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/pages/admin/tutorials/AddTutorial.tsx b/src/pages/admin/tutorials/AddTutorial.tsx
@@ -8,6 +8,7 @@ import { toast } from 'react-toastify'
 import { ToastDefaultOptions } from 'utils/toastOptions'
 import { slugify } from 'utils/slugify'
 import { useNavigate } from 'react-router-dom'
+import { Img as Image } from 'react-image'
 
 const AdminContainer = styled.div`
   padding: 2rem;
@@ -217,10 +218,30 @@ const AddTutorial = () => {
 
             {isPreview && (
               <PreviewContainer>
-                <h3>{title}</h3>
-                <div dangerouslySetInnerHTML={{ __html: content }} />
+                <div className="col-lg-8 col-md-12">
+                  <div className="blog-details-desc">
+                    { image && (
+                      <div className="d-flex justify-content-center">
+                        <Image
+                          src={ image }
+                          alt="Image"
+                          width={ 900 }
+                          height={ 500 }
+                          className="mx-auto d-block"
+                        />
+                      </div>
+                    ) }
+                  </div>
+                </div>
+                <h1 style={ { marginTop: '1rem' } }>{ title }</h1>
+
+                <div className="pt-5"
+                  dangerouslySetInnerHTML={ {
+                    __html: content.replace(/(<? *script)/gi, 'illegalscript')
+                  } }>
+                </div>
               </PreviewContainer>
-            )}
+            ) }
           </AdminContainer>
         </div>
       </div>

diff --git a/src/pages/admin/tutorials/EditTutorial.tsx b/src/pages/admin/tutorials/EditTutorial.tsx
@@ -4,7 +4,7 @@ import { useAuth } from 'context/AuthContext'
 import { Editor } from '@tinymce/tinymce-react'
 import PageBanner from 'components/Common/PageBanner'
 import { Link, useNavigate, useParams } from 'react-router-dom'
-import { Tutorial } from 'types/tutorial'
+import type { Tutorial } from 'types/tutorial'
 import { toast } from 'react-toastify'
 import { ToastDefaultOptions } from 'utils/toastOptions'
 import { slugify } from 'utils/slugify'