style: image drop node

packages/editor/src/ce/extensions/document-extensions.tsx

@@ -4,20 +4,19 @@ import { SlashCommand } from "@/extensions";
 // plane editor types
 import { TIssueEmbedConfig } from "@/plane-editor/types";
 // types
-import { TExtensions, TFileHandler, TUserDetails } from "@/types";
+import { TExtensions, TUserDetails } from "@/types";
 
 type Props = {
   disabledExtensions?: TExtensions[];
-  fileHandler: TFileHandler;
   issueEmbedConfig: TIssueEmbedConfig | undefined;
   provider: HocuspocusProvider;
   userDetails: TUserDetails;
 };
 
 export const DocumentEditorAdditionalExtensions = (props: Props) => {
-  const { fileHandler } = props;
+  const {} = props;
 
-  const extensions: Extensions = [SlashCommand(fileHandler.upload)];
+  const extensions: Extensions = [SlashCommand()];
 
   return extensions;
 };

packages/editor/src/core/components/editors/rich-text/editor.tsx

@@ -11,7 +11,7 @@ const RichTextEditor = (props: IRichTextEditor) => {
   const { dragDropEnabled, fileHandler } = props;
 
   const getExtensions = useCallback(() => {
-    const extensions = [SlashCommand(fileHandler.upload)];
+    const extensions = [SlashCommand()];
 
     extensions.push(
       SideMenuExtension({

packages/editor/src/core/extensions/image-upload/view/image-uploader.tsx

@@ -1,7 +1,9 @@
 import { ChangeEvent, useCallback, useEffect, useRef } from "react";
 import { Editor } from "@tiptap/core";
 import { ImageIcon } from "lucide-react";
+// helpers
 import { cn } from "@/helpers/common";
+// hooks
 import { useUploader, useFileUpload, useDropZone } from "@/hooks/use-file-upload";
 
 type RefType = React.RefObject<HTMLInputElement> | ((instance: HTMLInputElement | null) => void);
@@ -42,28 +44,26 @@ export const ImageUploader = ({
     }
   }, [existingFile, uploadFile]);
 
-  const wrapperClass = cn(
-    "flex items-center justify-start px-2 py-2 rounded-lg bg-opacity-80 border-2 border-dotted border-custom-border-400 cursor-pointer gap-2",
-    "transition-all duration-200 ease-in-out",
-    "hover:bg-custom-background-80 hover:border-custom-border-200",
-    draggedInside && "bg-custom-background-80"
-  );
-
   return (
     <div
-      className={wrapperClass}
+      className={cn(
+        "flex items-center justify-start gap-2 py-3 px-2 rounded-lg text-custom-text-300 hover:text-custom-text-200 bg-custom-background-90 hover:bg-custom-background-80 border border-dashed border-custom-border-300 cursor-pointer transition-all duration-200 ease-in-out",
+        {
+          "bg-custom-background-80 text-custom-text-200": draggedInside,
+        }
+      )}
       onDrop={onDrop}
       onDragOver={onDragEnter}
       onDragLeave={onDragLeave}
       contentEditable={false}
       onClick={handleUploadClick}
     >
-      <ImageIcon name="Image" className="h-4 w-4 text-custom-text-200" />
-      <div className="text-sm font-medium text-center">
+      <ImageIcon className="size-4" />
+      <div className="text-base font-medium">
         {loading ? "Uploading..." : draggedInside ? "Drop image here" : existingFile ? "Uploading..." : "Add an image"}
       </div>
       <input
-        className="w-0 h-0 overflow-hidden opacity-0"
+        className="size-0 overflow-hidden opacity-0"
         ref={(element) => {
           localRef.current = element;
           assignRef(fileInputRef, element);

packages/editor/src/core/extensions/slash-commands.tsx

@@ -89,7 +89,7 @@ const Command = Extension.create<SlashCommandOptions>({
 });
 
 const getSuggestionItems =
-  (uploadFile: UploadImage, additionalOptions?: Array<ISlashCommandItem>) =>
+  (additionalOptions?: Array<ISlashCommandItem>) =>
   ({ query }: { query: string }) => {
     let slashCommands: ISlashCommandItem[] = [
       {
@@ -415,10 +415,10 @@ const renderItems = () => {
   };
 };
 
-export const SlashCommand = (uploadFile: UploadImage, additionalOptions?: Array<ISlashCommandItem>) =>
+export const SlashCommand = (additionalOptions?: Array<ISlashCommandItem>) =>
   Command.configure({
     suggestion: {
-      items: getSuggestionItems(uploadFile, additionalOptions),
+      items: getSuggestionItems(additionalOptions),
       render: renderItems,
     },
   });

packages/editor/src/core/hooks/use-collaborative-editor.ts

@@ -84,7 +84,6 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
       ...(extensions ?? []),
       ...DocumentEditorAdditionalExtensions({
         disabledExtensions,
-        fileHandler,
         issueEmbedConfig: embedHandler?.issue,
         provider,
         userDetails: user,