diff --git a/packages/editor/src/core/extensions/image-block/image-block.ts b/packages/editor/src/core/extensions/image-block/image-block.ts
index 00f137aa4e..d297368230 100644
--- a/packages/editor/src/core/extensions/image-block/image-block.ts
+++ b/packages/editor/src/core/extensions/image-block/image-block.ts
@@ -1,8 +1,9 @@
-import { UploadImage, DeleteImage, RestoreImage } from "@/types";
 import { mergeAttributes, Range } from "@tiptap/core";
 import { Image } from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 import { v4 as uuidv4 } from "uuid";
+import { UploadImage, DeleteImage, RestoreImage } from "@/types";
+
 import { UploadImageExtensionStorage } from "../image-upload";
 import { ImageUpload } from "../image-upload/view";
 
@@ -108,9 +109,16 @@ export const ImageBlock = ({
                 event: props.event,
               });
             }
-            return commands.insertContent(
-              `<image-block data-type="${this.name}" id="${fileId}" ${props?.file ? `data-file="${props.file}"` : ""} />`
-            );
+            const attributes = {
+              "data-type": this.name,
+              id: fileId,
+              "data-file": props?.file ? `data-file="${props.file}"` : "",
+            };
+
+            return commands.insertContent({
+              type: this.name,
+              attrs: attributes,
+            });
           },
         uploadImage: (file: File) => async () => {
           const fileUrl = await uploadFile(file);
diff --git a/packages/editor/src/core/extensions/image-upload/view/image-upload.tsx b/packages/editor/src/core/extensions/image-upload/view/image-upload.tsx
index d2b0c3d2e6..50743d61ea 100644
--- a/packages/editor/src/core/extensions/image-upload/view/image-upload.tsx
+++ b/packages/editor/src/core/extensions/image-upload/view/image-upload.tsx
@@ -21,7 +21,6 @@ export const ImageUpload: React.FC<ImageUploadProps> = ({ getPos, editor, node,
   const fileInputRef = useRef<HTMLInputElement>(null);
   const hasTriggeredFilePickerRef = useRef(false);
   const [isUploaded, setIsUploaded] = useState(!!node.attrs.src);
-  const [uploadedImageUrl, setUploadedImageUrl] = useState("");
 
   const id = node.attrs.id as string;
   const editorStorage = editor.storage.imageBlock as UploadImageExtensionStorage | undefined;
@@ -34,9 +33,8 @@ export const ImageUpload: React.FC<ImageUploadProps> = ({ getPos, editor, node,
   const onUpload = useCallback(
     (url: string) => {
       if (url) {
-        setUploadedImageUrl(url);
         setIsUploaded(true);
-        // Update the node attributes with the new image URL
+        // Update the node view's src attribute
         updateAttributes({ src: url });
         editorStorage?.fileMap.delete(id);
       }
@@ -99,7 +97,13 @@ export const ImageUpload: React.FC<ImageUploadProps> = ({ getPos, editor, node,
             updateAttributes={updateAttributes}
           />
         ) : (
-          <ImageUploader onUpload={onUpload} editor={editor} fileInputRef={fileInputRef} existingFile={existingFile} />
+          <ImageUploader
+            onUpload={onUpload}
+            editor={editor}
+            fileInputRef={fileInputRef}
+            existingFile={existingFile}
+            id={id}
+          />
         )}
       </div>
     </NodeViewWrapper>
diff --git a/packages/editor/src/core/extensions/slash-commands.tsx b/packages/editor/src/core/extensions/slash-commands.tsx
index 15ffe0d5d0..3b1789781c 100644
--- a/packages/editor/src/core/extensions/slash-commands.tsx
+++ b/packages/editor/src/core/extensions/slash-commands.tsx
@@ -34,10 +34,9 @@ import {
   toggleHeadingFour,
   toggleHeadingFive,
   toggleHeadingSix,
-  insertImageCommand,
 } from "@/helpers/editor-commands";
 // types
-import { CommandProps, ISlashCommandItem, UploadImage } from "@/types";
+import { CommandProps, ISlashCommandItem } from "@/types";
 
 interface CommandItemProps {
   key: string;