fix: update InputFile component to conditionally reset uploaded file state based on upload status

app/components/text-editor/editor-menubar.tsx

@@ -1,3 +1,4 @@
+import { Input } from '@headlessui/react'
 import {
   ArrowUturnLeftIcon,
   ArrowUturnRightIcon,
@@ -6,6 +7,7 @@ import {
   Bars3Icon,
   Bars4Icon,
   BoldIcon,
+  CloudArrowUpIcon,
   CodeBracketIcon,
   DocumentTextIcon,
   H1Icon,
@@ -27,9 +29,12 @@ import {
   useState,
   useRef,
   useCallback,
+  useEffect,
 } from 'react'
 import { HexColorInput, HexColorPicker } from 'react-colorful'
 
+import { Button } from '~/components/ui/button'
+import { useAdminContext } from '~/contexts/admin'
 import { useClickOutside } from '~/hooks/use-click-outside'
 import { isHexCompatible, rgbToHex } from '~/utils/color'
 
@@ -49,10 +54,27 @@ export const EditorMenuBar = (properties: TProperties) => {
     // category,
     disabled = false,
   } = properties
-  // const [isOpenImage, setIsOpenImage] = useState(false)
+  const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext()
+  const [isOpenImage, setIsOpenImage] = useState(false)
+  const [imageUrl, setImageUrl] = useState('')
   const [isOpenColor, setIsOpenColor] = useState(false)
   const popover = useRef<HTMLDivElement>(null)
-  const close = useCallback(() => setIsOpenColor(false), [])
+  const close = useCallback(() => {
+    setIsOpenColor(false)
+    setIsOpenImage(false)
+    if (imageUrl) {
+      addImage(imageUrl)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  useEffect(() => {
+    if (uploadedFile) {
+      addImage(uploadedFile)
+      setUploadedFile(undefined)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uploadedFile])
 
   useClickOutside(popover, close)
 
@@ -96,20 +118,7 @@ export const EditorMenuBar = (properties: TProperties) => {
     }
   }
 
-  const uploadEnabled = false
-  const toggleUpload = () => {
-    if (uploadEnabled) {
-      // setIsOpenImage(true)
-    } else {
-      const urlImage = globalThis.prompt('URL')
-      if (urlImage) {
-        addImage(urlImage)
-      }
-    }
-  }
-
   return (
-    <>
     <div className="flex items-start justify-between gap-4 px-4 py-3">
       <div className="flex divide-x">
         <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@@ -161,7 +170,7 @@ export const EditorMenuBar = (properties: TProperties) => {
                 ref={popover}
               >
                 <HexColorPicker
-                    className="z-10"
+                  className="z-10 rounded-lg shadow"
                   color={rgbColor}
                   onChange={handleChangeColor}
                 />
@@ -170,7 +179,7 @@ export const EditorMenuBar = (properties: TProperties) => {
                     color={rgbColor}
                     onChange={handleChangeColor}
                     prefixed
-                      className="relative z-10 mt-1 flex w-full rounded-lg border px-3 py-2 text-sm focus:ring-0 focus-visible:outline-0"
+                    className="relative z-10 mt-1 flex w-full rounded-lg border-0 bg-white px-3 py-2 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
                   />
                 </div>
               </div>
@@ -188,9 +197,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             <Bars3BottomLeftIcon />
           </EditorButton>
           <EditorButton
-              onClick={() =>
-                editor.chain().focus().setTextAlign('center').run()
-              }
+            onClick={() => editor.chain().focus().setTextAlign('center').run()}
             disabled={
               disabled ||
               !editor.can().chain().focus().setTextAlign('center').run()
@@ -212,9 +219,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             <Bars3BottomRightIcon />
           </EditorButton>
           <EditorButton
-              onClick={() =>
-                editor.chain().focus().setTextAlign('justify').run()
-              }
+            onClick={() => editor.chain().focus().setTextAlign('justify').run()}
             disabled={
               disabled ||
               !editor.can().chain().focus().setTextAlign('justify').run()
@@ -326,13 +331,43 @@ export const EditorMenuBar = (properties: TProperties) => {
             </EditorButton>
           </div> */}
         <div className="flex items-start gap-1 px-1">
+          <div className="relative">
             <EditorButton
-              onClick={() => toggleUpload()}
+              onClick={() => setIsOpenImage(true)}
               title="Insert Image"
               disabled={disabled}
             >
               <PhotoIcon />
             </EditorButton>
+            {isOpenImage && (
+              <div
+                className="border-md absolute top-8 left-0 w-50"
+                ref={popover}
+              >
+                <div className="relative">
+                  <Input
+                    placeholder="Masukkan URL Gambar"
+                    color={rgbColor}
+                    onChange={(event) => {
+                      setImageUrl(event.target.value)
+                    }}
+                    className="z-10 flex h-[42px] w-full rounded-lg border-0 bg-white p-2 pr-8 text-sm shadow read-only:bg-gray-100 focus:ring-1 focus:ring-[#2E2F7C] focus:outline-none focus-visible:outline-0 disabled:bg-gray-100"
+                  />
+                  <Button
+                    type="button"
+                    variant="icon"
+                    size="fit"
+                    className="absolute top-0 right-3 h-[42px]"
+                    onClick={() => {
+                      setIsUploadOpen('content')
+                    }}
+                  >
+                    <CloudArrowUpIcon className="h-4 w-4 text-gray-500/50" />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
           <EditorButton
             onClick={() => setLink()}
             disabled={
@@ -386,28 +421,5 @@ export const EditorMenuBar = (properties: TProperties) => {
         </div>
       </div>
     </div>
-
-      {/* <Dialog
-        isOpen={isOpenImage}
-        setIsOpen={setIsOpenImage}
-        title="Insert Image"
-        showCloseButton={true}
-      >
-        <UploadProvider
-          data={{
-            onCancel: () => setIsOpenImage(false),
-            onSave: (file) => {
-              addImage(file)
-              setIsOpenImage(false)
-            },
-            category: category,
-            maxFileSize: 300,
-            selectedFile: '',
-          }}
-        >
-          <Upload />
-        </UploadProvider>
-      </Dialog> */}
-    </>
   )
 }

app/components/ui/input-file.tsx

@@ -42,7 +42,8 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
     labelClassName,
     ...restProperties
   } = properties
-  const { setIsUploadOpen, uploadedFile, setUploadedFile } = useAdminContext()
+  const { setIsUploadOpen, uploadedFile, setUploadedFile, isUploadOpen } =
+    useAdminContext()
 
   const {
     register,
@@ -53,7 +54,7 @@ export const InputFile = <TFormValues extends Record<string, unknown>>(
   const error: FieldError = get(errors, name)
 
   useEffect(() => {
-    if (uploadedFile) {
+    if (uploadedFile && isUploadOpen === name) {
       setValue(name as string, uploadedFile)
       setUploadedFile(undefined)
     }