feat: enhance Markdown editor with direct image upload support and drag-and-drop functionality

- Added direct image upload handling in the Markdown editor, allowing users to upload images via drag-and-drop or paste.
- Updated the editor to display a loading state during image uploads.
- Improved the overall user experience with visual feedback during drag-and-drop actions.

Author: shoaibsharif

src/app/dashboard/_components/DashboardArticleList.tsx

@@ -133,7 +133,7 @@ const DashboardArticleList = () => {
       <div className="flex flex-col divide-y divide-dashed divide-border-color mt-2">
         {feedInfiniteQuery.isFetching &&
           Array.from({ length: 10 }).map((_, i) => (
-            <article key={i} className=" bg-muted h-20 animate-pulse" />
+            <article key={i} className=" bg-muted h-20 animate-pulse" suppressHydrationWarning />
           ))}
 
         {feedInfiniteQuery.data?.pages.map((page) => {
@@ -207,11 +207,9 @@ const DashboardArticleList = () => {
                 </div> */}
                 </div>
                 <DropdownMenu>
-                  <DropdownMenuTrigger>
-                    <button className="flex items-center gap-2">
-                      <p className="text-sm md:hidden">{_t("Actions")}</p>
-                      <DotsHorizontalIcon className="h-5 w-5" />
-                    </button>
+                  <DropdownMenuTrigger className="flex items-center gap-2">
+                    <p className="text-sm md:hidden">{_t("Actions")}</p>
+                    <DotsHorizontalIcon className="h-5 w-5" />
                   </DropdownMenuTrigger>
                   <DropdownMenuContent>
                     <DropdownMenuItem asChild>

src/app/dashboard/_components/DashboardScaffold.tsx

@@ -70,7 +70,7 @@ const DashboardScaffold: React.FC<
         <div className="p-4 flex items-center gap-2 justify-between">
           <TooltipProvider>
             <Tooltip>
-              <TooltipTrigger>
+              <TooltipTrigger asChild>
                 <SidebarTrigger />
               </TooltipTrigger>
               <TooltipContent>

src/app/dashboard/_components/MatrixReport.tsx

@@ -24,7 +24,7 @@ const MatrixReport = () => {
           <CardContent className="flex flex-col gap-2">
             <p className="text-3xl font-semibold h-9">
               {query.isFetching && (
-                <LoaderIcon className="animate-spin size-8 text-muted-foreground" />
+                <LoaderIcon className="animate-spin size-8 text-muted-foreground" suppressHydrationWarning />
               )}
               {query.data?.total_articles}
             </p>
@@ -38,7 +38,7 @@ const MatrixReport = () => {
           <CardContent className="flex flex-col gap-2">
             <p className="text-3xl font-semibold h-9">
               {query.isFetching && (
-                <LoaderIcon className="animate-spin size-8 text-muted-foreground" />
+                <LoaderIcon className="animate-spin size-8 text-muted-foreground" suppressHydrationWarning />
               )}
               {query.data?.total_comments}
             </p>

src/components/Editor/MarkdownEditorContent.tsx

@@ -1,6 +1,14 @@
 "use client";
 
-import { HeadingIcon, FontBoldIcon, FontItalicIcon, Link2Icon, UploadIcon } from "@radix-ui/react-icons";
+import { useTranslation } from "@/i18n/use-translation";
+import {
+  FontBoldIcon,
+  FontItalicIcon,
+  HeadingIcon,
+  Link2Icon,
+  UploadIcon,
+} from "@radix-ui/react-icons";
+import { Loader } from "lucide-react";
 import React from "react";
 import EditorCommandButton from "./EditorCommandButton";
 import { useMarkdownEditor } from "./useMarkdownEditor";
@@ -10,7 +18,11 @@ interface MarkdownEditorContentProps {
   onChange: (value: string) => void;
 }
 
-export function MarkdownEditorContent({ bodyRef, onChange }: MarkdownEditorContentProps) {
+export function MarkdownEditorContent({
+  bodyRef,
+  onChange,
+}: MarkdownEditorContentProps) {
+  const { _t } = useTranslation();
   const editor = useMarkdownEditor({
     ref: bodyRef,
     onChange,
@@ -40,15 +52,35 @@ export function MarkdownEditorContent({ bodyRef, onChange }: MarkdownEditorConte
       />
       <EditorCommandButton
         onClick={() => editor?.executeCommand("upload-image")}
-        Icon={<UploadIcon />}
+        Icon={
+          editor?.isUploading ? (
+            <Loader className="w-4 h-4 animate-spin" />
+          ) : (
+            <UploadIcon />
+          )
+        }
         title="Upload Image (Ctrl/Cmd + U)"
+        isDisabled={editor?.isUploading}
       />
+
+      {editor?.isUploading && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader className="w-4 h-4 animate-spin" />
+          <span>{_t("Uploading image")}...</span>
+        </div>
+      )}
     </div>
   );
 
   return (
-    <div className="flex flex-col justify-between md:items-center md:flex-row">
-      {renderEditorToolbar()}
+    <div className="flex flex-col justify-between">
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between">
+        {renderEditorToolbar()}
+
+        <div className="text-xs text-muted-foreground mt-2 md:mt-0 md:ml-4">
+          {_t("Tip: Drag & drop or paste images directly into the editor")}
+        </div>
+      </div>
     </div>
   );
-}
+}