fix: seperated display message logic from ui

Author: Palanikannan1437

packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx

@@ -119,6 +119,18 @@ export const CustomImageUploader = (props: {
     [uploadFile]
   );
 
+  // derived states
+  const isUploading = isImageBeingUploaded || existingFile;
+
+  // derived message to display
+  const displayMessage = failedToLoadImage
+    ? "Error loading image"
+    : isUploading
+      ? "Uploading..."
+      : draggedInside
+        ? "Drop image here"
+        : "Add an image";
+
   return (
     <div
       className={cn(
@@ -137,17 +149,7 @@ export const CustomImageUploader = (props: {
       onClick={() => fileInputRef.current?.click()}
     >
       <ImageIcon className="size-4" />
-      <div className="text-base font-medium">
-        {failedToLoadImage
-          ? "Error loading image"
-          : isImageBeingUploaded
-            ? "Uploading..."
-            : draggedInside
-              ? "Drop image here"
-              : existingFile
-                ? "Uploading..."
-                : "Add an image"}
-      </div>
+      <div className="text-base font-medium">{displayMessage}</div>
       <input
         className="size-0 overflow-hidden"
         ref={fileInputRef}