markdown img insert work as intended

frontend/package.json

@@ -28,7 +28,9 @@
     "@tanstack/react-router": "^1.144.0",
     "date-fns": "^4.1.0",
     "react": "^19.2.0",
-    "react-dom": "^19.2.0"
+    "react-dom": "^19.2.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",

frontend/src/components/routes/ArticleDetailComponent.tsx

@@ -1,6 +1,8 @@
 import { useQuery } from '@tanstack/react-query'
 import { Link } from '@tanstack/react-router'
 import * as api from '@/lib/api'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
 
 export function ArticleDetailComponent({ id }: { id: string }) {
   const { data, isLoading, error } = useQuery({
@@ -65,8 +67,28 @@ export function ArticleDetailComponent({ id }: { id: string }) {
         )}
       </div>
 
-      {data.featuredImage && (
-        <div className="relative w-full h-64 md:h-96 mb-8">
+      {data.featuredImage && data.imagePosition !== 'none' && (
+        <div className={`relative ${
+          data.imagePosition === 'top' 
+            ? 'w-full h-64 md:h-96 mb-8' 
+            : data.imagePosition === 'left' 
+              ? 'float-none md:float-left mr-0 md:mr-6 mb-4 w-full md:w-auto' 
+              : data.imagePosition === 'right'
+                ? 'float-none md:float-right ml-0 md:ml-6 mb-4 w-full md:w-auto'
+                : ''
+        } ${
+          data.imagePosition === 'top'
+            ? data.imageSize === 'small' 
+              ? 'h-32' 
+              : data.imageSize === 'medium' 
+                ? 'h-48' 
+                : 'h-64'
+            : data.imageSize === 'small' 
+              ? 'w-full md:w-48 h-32' 
+              : data.imageSize === 'medium' 
+                ? 'w-full md:w-64 h-48' 
+                : 'w-full md:w-96 h-64'
+        }`}>
           <img
             src={data.featuredImage}
             alt={data.title}
@@ -90,8 +112,23 @@ export function ArticleDetailComponent({ id }: { id: string }) {
         </div>
       )}
 
-      <div className="prose prose-slate max-w-none">
-        <p className="text-lg leading-relaxed mb-6">{data.content}</p>
+      <div className="prose prose-slate max-w-none clear-both md:clear-none">
+        <div className="text-lg leading-relaxed mb-6">
+          <ReactMarkdown 
+            remarkPlugins={[remarkGfm]}
+            components={{
+              img: (props) => (
+                <img 
+                  {...props} 
+                  className="max-w-full h-auto rounded-lg my-4"
+                  alt={props.alt || 'Article image'}
+                />
+              )
+            }}
+          >
+            {data.content}
+          </ReactMarkdown>
+        </div>
       </div>
 
       {data.tags && Array.isArray(data.tags) && data.tags.length > 0 && (

frontend/src/lib/api.ts

@@ -11,6 +11,8 @@ export interface Article {
   excerpt: string | null;
   slug: string;
   featuredImage: string;
+  imagePosition: 'top' | 'left' | 'right' | 'none';
+  imageSize: 'small' | 'medium' | 'large';
   tags: string[];
   status: 'draft' | 'published' | 'archived';
   views: number;
@@ -126,6 +128,9 @@ export interface LiveBlog {
   strapiId: string | null;
   authorId: string | null;
   categoryId: string | null;
+  featuredImage: string;
+  imagePosition: 'top' | 'left' | 'right' | 'none';
+  imageSize: 'small' | 'medium' | 'large';
   viewCount: number;
   author?: {
     id: string;