From 9b09737cff708d03c24c8d6b278981358b34fdbc Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 20 Jun 2025 16:20:23 +0530
Subject: [PATCH 01/11] refactor: custom image extension

---
 packages/editor/src/ce/types/storage.ts       |   2 +-
 .../components/{image-block.tsx => block.tsx} |  79 +++-----
 .../custom-image/components/index.ts          |   4 -
 .../{image-node.tsx => node-view.tsx}         |  42 ++--
 .../components/toolbar/full-screen.tsx        |  21 +-
 .../custom-image/components/toolbar/root.tsx  |  12 +-
 .../{image-uploader.tsx => uploader.tsx}      |  24 +--
 .../extensions/custom-image/custom-image.ts   | 180 ------------------
 .../custom-image/extension-config.ts          |  47 +++++
 .../core/extensions/custom-image/extension.ts | 121 ++++++++++++
 .../src/core/extensions/custom-image/index.ts |   3 -
 .../custom-image/read-only-custom-image.ts    |  79 --------
 .../src/core/extensions/custom-image/types.ts |  51 +++++
 .../src/core/extensions/custom-image/utils.ts |  33 ++++
 .../editor/src/core/extensions/extensions.ts  |  14 +-
 .../src/core/extensions/image/extension.tsx   |  39 ++--
 .../editor/src/core/extensions/image/index.ts |   1 -
 .../core/extensions/image/read-only-image.tsx |  37 ----
 packages/editor/src/core/extensions/index.ts  |   1 -
 .../core/extensions/read-only-extensions.ts   |  16 +-
 20 files changed, 361 insertions(+), 445 deletions(-)
 rename packages/editor/src/core/extensions/custom-image/components/{image-block.tsx => block.tsx} (88%)
 delete mode 100644 packages/editor/src/core/extensions/custom-image/components/index.ts
 rename packages/editor/src/core/extensions/custom-image/components/{image-node.tsx => node-view.tsx} (71%)
 rename packages/editor/src/core/extensions/custom-image/components/{image-uploader.tsx => uploader.tsx} (91%)
 delete mode 100644 packages/editor/src/core/extensions/custom-image/custom-image.ts
 create mode 100644 packages/editor/src/core/extensions/custom-image/extension-config.ts
 create mode 100644 packages/editor/src/core/extensions/custom-image/extension.ts
 delete mode 100644 packages/editor/src/core/extensions/custom-image/index.ts
 delete mode 100644 packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
 create mode 100644 packages/editor/src/core/extensions/custom-image/types.ts
 create mode 100644 packages/editor/src/core/extensions/custom-image/utils.ts
 delete mode 100644 packages/editor/src/core/extensions/image/read-only-image.tsx

diff --git a/packages/editor/src/ce/types/storage.ts b/packages/editor/src/ce/types/storage.ts
index 5f576df5090..84eee65f982 100644
--- a/packages/editor/src/ce/types/storage.ts
+++ b/packages/editor/src/ce/types/storage.ts
@@ -2,7 +2,7 @@
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
 import { type HeadingExtensionStorage } from "@/extensions";
-import { type CustomImageExtensionStorage } from "@/extensions/custom-image";
+import { type CustomImageExtensionStorage } from "@/extensions/custom-image/types";
 import { type CustomLinkStorage } from "@/extensions/custom-link";
 import { type ImageExtensionStorage } from "@/extensions/image";
 import { type MentionExtensionStorage } from "@/extensions/mentions";
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
similarity index 88%
rename from packages/editor/src/core/extensions/custom-image/components/image-block.tsx
rename to packages/editor/src/core/extensions/custom-image/components/block.tsx
index 5dfbad01294..b373b47198e 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -1,68 +1,42 @@
 import { NodeSelection } from "@tiptap/pm/state";
 import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
-// extensions
-import { CustomBaseImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image";
+// local imports
+import { Pixel, TCustomImageAttributes, TCustomImageSize } from "../types";
+import { ensurePixelString } from "../utils";
+import type { CustomImageNodeViewProps } from "./node-view";
+import { ImageToolbarRoot } from "./toolbar";
 import { ImageUploadStatus } from "./upload-status";
 
 const MIN_SIZE = 100;
 
-type Pixel = `${number}px`;
-
-type PixelAttribute<TDefault> = Pixel | TDefault;
-
-export type ImageAttributes = {
-  src: string | null;
-  width: PixelAttribute<"35%" | number>;
-  height: PixelAttribute<"auto" | number>;
-  aspectRatio: number | null;
-  id: string | null;
-};
-
-type Size = {
-  width: PixelAttribute<"35%">;
-  height: PixelAttribute<"auto">;
-  aspectRatio: number | null;
-};
-
-const ensurePixelString = <TDefault,>(value: Pixel | TDefault | number | undefined | null, defaultValue?: TDefault) => {
-  if (!value || value === defaultValue) {
-    return defaultValue;
-  }
-
-  if (typeof value === "number") {
-    return `${value}px` satisfies Pixel;
-  }
-
-  return value;
-};
-
-type CustomImageBlockProps = CustomBaseImageNodeViewProps & {
-  imageFromFileSystem: string | undefined;
-  setFailedToLoadImage: (isError: boolean) => void;
+type CustomImageBlockProps = CustomImageNodeViewProps & {
   editorContainer: HTMLDivElement | null;
+  imageFromFileSystem: string | undefined;
   setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
+  setFailedToLoadImage: (isError: boolean) => void;
   src: string | undefined;
 };
 
 export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // props
   const {
-    node,
-    updateAttributes,
-    setFailedToLoadImage,
-    imageFromFileSystem,
-    selected,
-    getPos,
     editor,
     editorContainer,
-    src: resolvedImageSrc,
+    extension,
+    getPos,
+    imageFromFileSystem,
+    node,
+    selected,
     setEditorContainer,
+    setFailedToLoadImage,
+    src: resolvedImageSrc,
+    updateAttributes,
   } = props;
   const { width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio, src: imgNodeSrc } = node.attrs;
   // states
-  const [size, setSize] = useState<Size>({
+  const [size, setSize] = useState<TCustomImageSize>({
     width: ensurePixelString(nodeWidth, "35%") ?? "35%",
     height: ensurePixelString(nodeHeight, "auto") ?? "auto",
     aspectRatio: nodeAspectRatio || null,
@@ -77,7 +51,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const [hasTriedRestoringImageOnce, setHasTriedRestoringImageOnce] = useState(false);
 
   const updateAttributesSafely = useCallback(
-    (attributes: Partial<ImageAttributes>, errorMessage: string) => {
+    (attributes: Partial<TCustomImageAttributes>, errorMessage: string) => {
       try {
         updateAttributes(attributes);
       } catch (error) {
@@ -139,7 +113,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       }
     }
     setInitialResizeComplete(true);
-  }, [nodeWidth, updateAttributes, editorContainer, nodeAspectRatio]);
+  }, [nodeWidth, updateAttributesSafely, editorContainer, nodeAspectRatio]);
 
   // for real time resizing
   useLayoutEffect(() => {
@@ -168,7 +142,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   const handleResizeEnd = useCallback(() => {
     setIsResizing(false);
     updateAttributesSafely(size, "Failed to update attributes at the end of resizing:");
-  }, [size, updateAttributes]);
+  }, [size, updateAttributesSafely]);
 
   const handleResizeStart = useCallback((e: React.MouseEvent | React.TouchEvent) => {
     e.preventDefault();
@@ -242,7 +216,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         onLoad={handleImageLoad}
         onError={async (e) => {
           // for old image extension this command doesn't exist or if the image failed to load for the first time
-          if (!editor?.commands.restoreImage || hasTriedRestoringImageOnce) {
+          if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
             setFailedToLoadImage(true);
             return;
           }
@@ -253,7 +227,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
             if (!imgNodeSrc) {
               throw new Error("No source image to restore from");
             }
-            await editor?.commands.restoreImage?.(imgNodeSrc);
+            await extension.options.restoreImage?.(imgNodeSrc);
             if (!imageRef.current) {
               throw new Error("Image reference not found");
             }
@@ -288,12 +262,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           containerClassName={
             "absolute top-1 right-1 z-20 bg-black/40 rounded opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity"
           }
-          image={{
-            src: resolvedImageSrc,
-            aspectRatio: size.aspectRatio === null ? 1 : size.aspectRatio,
-            height: size.height,
-            width: size.width,
-          }}
+          image={node.attrs}
         />
       )}
       {selected && displayedImageSrc === resolvedImageSrc && (
diff --git a/packages/editor/src/core/extensions/custom-image/components/index.ts b/packages/editor/src/core/extensions/custom-image/components/index.ts
deleted file mode 100644
index 9d12c3ecf19..00000000000
--- a/packages/editor/src/core/extensions/custom-image/components/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from "./toolbar";
-export * from "./image-block";
-export * from "./image-node";
-export * from "./image-uploader";
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
similarity index 71%
rename from packages/editor/src/core/extensions/custom-image/components/image-node.tsx
rename to packages/editor/src/core/extensions/custom-image/components/node-view.tsx
index 8dfe6974b75..07fa8047a88 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-node.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
@@ -2,25 +2,26 @@ import { Editor, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
 import { useEffect, useRef, useState } from "react";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
-// extensions
-import { CustomImageBlock, CustomImageUploader, ImageAttributes } from "@/extensions/custom-image";
 // helpers
 import { getExtensionStorage } from "@/helpers/get-extension-storage";
+// local imports
+import type { CustomImageExtension, TCustomImageAttributes } from "../types";
+import { CustomImageBlock } from "./block";
+import { CustomImageUploader } from "./uploader";
 
-export type CustomBaseImageNodeViewProps = {
+export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension"> & {
+  extension: CustomImageExtension;
   getPos: () => number;
   editor: Editor;
   node: NodeViewProps["node"] & {
-    attrs: ImageAttributes;
+    attrs: TCustomImageAttributes;
   };
-  updateAttributes: (attrs: Partial<ImageAttributes>) => void;
+  updateAttributes: (attrs: Partial<TCustomImageAttributes>) => void;
   selected: boolean;
 };
 
-export type CustomImageNodeProps = NodeViewProps & CustomBaseImageNodeViewProps;
-
-export const CustomImageNode = (props: CustomImageNodeProps) => {
-  const { getPos, editor, node, updateAttributes, selected } = props;
+export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) => {
+  const { editor, extension, node } = props;
   const { src: imgNodeSrc } = node.attrs;
 
   const [isUploaded, setIsUploaded] = useState(false);
@@ -50,41 +51,34 @@ export const CustomImageNode = (props: CustomImageNodeProps) => {
   }, [resolvedSrc]);
 
   useEffect(() => {
+    if (!imgNodeSrc) return;
+
     const getImageSource = async () => {
-      // @ts-expect-error function not expected here, but will still work and don't remove await
-      const url: string = await editor?.commands?.getImageSource?.(imgNodeSrc);
+      const url: string = await extension.options.getImageSource?.(imgNodeSrc);
       setResolvedSrc(url as string);
     };
     getImageSource();
-  }, [imgNodeSrc]);
+  }, [imgNodeSrc, extension.options]);
 
   return (
     <NodeViewWrapper>
       <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
         {(isUploaded || imageFromFileSystem) && !failedToLoadImage ? (
           <CustomImageBlock
-            imageFromFileSystem={imageFromFileSystem}
             editorContainer={editorContainer}
-            editor={editor}
-            src={resolvedSrc}
-            getPos={getPos}
-            node={node}
+            imageFromFileSystem={imageFromFileSystem}
             setEditorContainer={setEditorContainer}
             setFailedToLoadImage={setFailedToLoadImage}
-            selected={selected}
-            updateAttributes={updateAttributes}
+            src={resolvedSrc}
+            {...props}
           />
         ) : (
           <CustomImageUploader
-            editor={editor}
             failedToLoadImage={failedToLoadImage}
-            getPos={getPos}
             loadImageFromFileSystem={setImageFromFileSystem}
             maxFileSize={getExtensionStorage(editor, CORE_EXTENSIONS.CUSTOM_IMAGE).maxFileSize}
-            node={node}
             setIsUploaded={setIsUploaded}
-            selected={selected}
-            updateAttributes={updateAttributes}
+            {...props}
           />
         )}
       </div>
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
index 61ae307bb66..5921e95c2b7 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
@@ -1,15 +1,12 @@
 import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
+// local imports
+import { TCustomImageAttributes } from "../../types";
 
 type Props = {
-  image: {
-    src: string;
-    height: string;
-    width: string;
-    aspectRatio: number;
-  };
+  image: TCustomImageAttributes;
   isOpen: boolean;
   toggleFullScreenMode: (val: boolean) => void;
 };
@@ -31,7 +28,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
   const modalRef = useRef<HTMLDivElement>(null);
   const imgRef = useRef<HTMLImageElement | null>(null);
 
-  const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
+  const widthInNumber = useMemo(() => Number(width?.toString()?.replace("px", "")), [width]);
 
   const setImageRef = useCallback(
     (node: HTMLImageElement | null) => {
@@ -42,7 +39,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
       const viewportWidth = window.innerWidth * 0.9;
       const viewportHeight = window.innerHeight * 0.75;
       const imageWidth = widthInNumber;
-      const imageHeight = imageWidth / aspectRatio;
+      const imageHeight = imageWidth / (aspectRatio ?? 1);
 
       const widthRatio = viewportWidth / imageWidth;
       const heightRatio = viewportHeight / imageHeight;
@@ -208,13 +205,13 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
           </button>
           <img
             ref={setImageRef}
-            src={src}
+            src={src ?? undefined}
             className="read-only-image rounded-lg"
             style={{
               width: `${widthInNumber * initialMagnification}px`,
               maxWidth: "none",
               maxHeight: "none",
-              aspectRatio,
+              aspectRatio: aspectRatio ?? 1,
               position: "relative",
               transform: `scale(${magnification})`,
               transformOrigin: "center",
@@ -244,7 +241,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
             </div>
             <button
               type="button"
-              onClick={() => window.open(src, "_blank")}
+              onClick={() => window.open(src ?? undefined, "_blank")}
               className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
             >
               <ExternalLink className="size-4" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index 3179db0d4cd..9e140136ae8 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -1,17 +1,13 @@
 import { useState } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
-// components
+// local imports
+import { TCustomImageAttributes } from "../../types";
 import { ImageFullScreenAction } from "./full-screen";
 
 type Props = {
   containerClassName?: string;
-  image: {
-    src: string;
-    height: string;
-    width: string;
-    aspectRatio: number;
-  };
+  image: TCustomImageAttributes;
 };
 
 export const ImageToolbarRoot: React.FC<Props> = (props) => {
diff --git a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
similarity index 91%
rename from packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
rename to packages/editor/src/core/extensions/custom-image/components/uploader.tsx
index 17c9f817736..68626084ab8 100644
--- a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/uploader.tsx
@@ -1,28 +1,30 @@
 import { ImageIcon } from "lucide-react";
 import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react";
-// plane utils
+// plane imports
 import { cn } from "@plane/utils";
 // constants
 import { ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
 import { CORE_EXTENSIONS } from "@/constants/extension";
-// extensions
-import { CustomBaseImageNodeViewProps, getImageComponentImageFileMap } from "@/extensions/custom-image";
 // helpers
 import { EFileError } from "@/helpers/file";
 import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // hooks
 import { useUploader, useDropZone, uploadFirstFileAndInsertRemaining } from "@/hooks/use-file-upload";
+// local imports
+import { getImageComponentImageFileMap } from "../utils";
+import type { CustomImageNodeViewProps } from "./node-view";
 
-type CustomImageUploaderProps = CustomBaseImageNodeViewProps & {
-  maxFileSize: number;
-  loadImageFromFileSystem: (file: string) => void;
+type CustomImageUploaderProps = CustomImageNodeViewProps & {
   failedToLoadImage: boolean;
+  loadImageFromFileSystem: (file: string) => void;
+  maxFileSize: number;
   setIsUploaded: (isUploaded: boolean) => void;
 };
 
 export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   const {
     editor,
+    extension,
     failedToLoadImage,
     getPos,
     loadImageFromFileSystem,
@@ -71,12 +73,13 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         }
       }
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [imageComponentImageFileMap, imageEntityId, updateAttributes, getPos]
   );
 
   const uploadImageEditorCommand = useCallback(
-    async (file: File) => await editor?.commands.uploadImage(imageEntityId ?? "", file),
-    [editor, imageEntityId]
+    async (file: File) => await extension.options.uploadImage?.(imageEntityId ?? "", file),
+    [extension.options, imageEntityId]
   );
 
   const handleProgressStatus = useCallback(
@@ -93,7 +96,6 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
   // hooks
   const { isUploading: isImageBeingUploaded, uploadFile } = useUploader({
     acceptedMimeTypes: ACCEPTED_IMAGE_MIME_TYPES,
-    // @ts-expect-error - TODO: fix typings, and don't remove await from here for now
     editorCommand: uploadImageEditorCommand,
     handleProgressStatus,
     loadFileFromFileSystem: loadImageFromFileSystem,
@@ -128,7 +130,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
         imageComponentImageFileMap?.set(imageEntityId ?? "", { ...meta, hasOpenedFileInputOnce: true });
       }
     }
-  }, [meta, uploadFile, imageComponentImageFileMap]);
+  }, [meta, uploadFile, imageComponentImageFileMap, imageEntityId]);
 
   const onFileChange = useCallback(
     async (e: ChangeEvent<HTMLInputElement>) => {
@@ -163,7 +165,7 @@ export const CustomImageUploader = (props: CustomImageUploaderProps) => {
     }
 
     return "Add an image";
-  }, [draggedInside, failedToLoadImage, isImageBeingUploaded]);
+  }, [draggedInside, failedToLoadImage, isImageBeingUploaded, editor.isEditable]);
 
   return (
     <div
diff --git a/packages/editor/src/core/extensions/custom-image/custom-image.ts b/packages/editor/src/core/extensions/custom-image/custom-image.ts
deleted file mode 100644
index afd02fd099b..00000000000
--- a/packages/editor/src/core/extensions/custom-image/custom-image.ts
+++ /dev/null
@@ -1,180 +0,0 @@
-import { Editor, mergeAttributes } from "@tiptap/core";
-import { Image as BaseImageExtension } from "@tiptap/extension-image";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-import { v4 as uuidv4 } from "uuid";
-// constants
-import { ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
-import { CORE_EXTENSIONS } from "@/constants/extension";
-// extensions
-import { CustomImageNode } from "@/extensions/custom-image";
-// helpers
-import { isFileValid } from "@/helpers/file";
-import { getExtensionStorage } from "@/helpers/get-extension-storage";
-import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
-// types
-import { TFileHandler } from "@/types";
-
-export type InsertImageComponentProps = {
-  file?: File;
-  pos?: number;
-  event: "insert" | "drop";
-};
-
-declare module "@tiptap/core" {
-  interface Commands<ReturnType> {
-    [CORE_EXTENSIONS.CUSTOM_IMAGE]: {
-      insertImageComponent: ({ file, pos, event }: InsertImageComponentProps) => ReturnType;
-      uploadImage: (blockId: string, file: File) => () => Promise<string> | undefined;
-      getImageSource?: (path: string) => () => Promise<string>;
-      restoreImage: (src: string) => () => Promise<void>;
-    };
-  }
-}
-
-export const getImageComponentImageFileMap = (editor: Editor) =>
-  getExtensionStorage(editor, CORE_EXTENSIONS.CUSTOM_IMAGE)?.fileMap;
-
-export interface CustomImageExtensionStorage {
-  fileMap: Map<string, UploadEntity>;
-  deletedImageSet: Map<string, boolean>;
-  maxFileSize: number;
-}
-
-export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
-
-export const CustomImageExtension = (props: TFileHandler) => {
-  const {
-    getAssetSrc,
-    upload,
-    restore: restoreImageFn,
-    validation: { maxFileSize },
-  } = props;
-
-  return BaseImageExtension.extend<Record<string, unknown>, CustomImageExtensionStorage>({
-    name: CORE_EXTENSIONS.CUSTOM_IMAGE,
-    selectable: true,
-    group: "block",
-    atom: true,
-    draggable: true,
-
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        width: {
-          default: "35%",
-        },
-        src: {
-          default: null,
-        },
-        height: {
-          default: "auto",
-        },
-        ["id"]: {
-          default: null,
-        },
-        aspectRatio: {
-          default: null,
-        },
-      };
-    },
-
-    parseHTML() {
-      return [
-        {
-          tag: "image-component",
-        },
-      ];
-    },
-
-    renderHTML({ HTMLAttributes }) {
-      return ["image-component", mergeAttributes(HTMLAttributes)];
-    },
-
-    addKeyboardShortcuts() {
-      return {
-        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
-        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
-      };
-    },
-
-    addStorage() {
-      return {
-        fileMap: new Map(),
-        deletedImageSet: new Map<string, boolean>(),
-        maxFileSize,
-        // escape markdown for images
-        markdown: {
-          serialize() {},
-        },
-      };
-    },
-
-    addCommands() {
-      return {
-        insertImageComponent:
-          (props) =>
-          ({ commands }) => {
-            // Early return if there's an invalid file being dropped
-            if (
-              props?.file &&
-              !isFileValid({
-                acceptedMimeTypes: ACCEPTED_IMAGE_MIME_TYPES,
-                file: props.file,
-                maxFileSize,
-                onError: (_error, message) => alert(message),
-              })
-            ) {
-              return false;
-            }
-
-            // generate a unique id for the image to keep track of dropped
-            // files' file data
-            const fileId = uuidv4();
-
-            const imageComponentImageFileMap = getImageComponentImageFileMap(this.editor);
-
-            if (imageComponentImageFileMap) {
-              if (props?.event === "drop" && props.file) {
-                imageComponentImageFileMap.set(fileId, {
-                  file: props.file,
-                  event: props.event,
-                });
-              } else if (props.event === "insert") {
-                imageComponentImageFileMap.set(fileId, {
-                  event: props.event,
-                  hasOpenedFileInputOnce: false,
-                });
-              }
-            }
-
-            const attributes = {
-              id: fileId,
-            };
-
-            if (props.pos) {
-              return commands.insertContentAt(props.pos, {
-                type: this.name,
-                attrs: attributes,
-              });
-            }
-            return commands.insertContent({
-              type: this.name,
-              attrs: attributes,
-            });
-          },
-        uploadImage: (blockId, file) => async () => {
-          const fileUrl = await upload(blockId, file);
-          return fileUrl;
-        },
-        getImageSource: (path) => async () => await getAssetSrc(path),
-        restoreImage: (src) => async () => {
-          await restoreImageFn(src);
-        },
-      };
-    },
-
-    addNodeView() {
-      return ReactNodeViewRenderer(CustomImageNode);
-    },
-  });
-};
diff --git a/packages/editor/src/core/extensions/custom-image/extension-config.ts b/packages/editor/src/core/extensions/custom-image/extension-config.ts
new file mode 100644
index 00000000000..56714f53393
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/extension-config.ts
@@ -0,0 +1,47 @@
+import { mergeAttributes } from "@tiptap/core";
+import { Image as BaseImageExtension } from "@tiptap/extension-image";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// local imports
+import { type CustomImageExtension, ECustomImageAttributeNames, type InsertImageComponentProps } from "./types";
+import { DEFAULT_CUSTOM_IMAGE_ATTRIBUTES } from "./utils";
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    [CORE_EXTENSIONS.CUSTOM_IMAGE]: {
+      insertImageComponent: ({ file, pos, event }: InsertImageComponentProps) => ReturnType;
+    };
+  }
+}
+
+export const CustomImageExtensionConfig: CustomImageExtension = BaseImageExtension.extend({
+  name: CORE_EXTENSIONS.CUSTOM_IMAGE,
+  group: "block",
+  atom: true,
+
+  addAttributes() {
+    const attributes = {
+      ...this.parent?.(),
+      ...Object.values(ECustomImageAttributeNames).reduce((acc, value) => {
+        acc[value] = {
+          default: DEFAULT_CUSTOM_IMAGE_ATTRIBUTES[value],
+        };
+        return acc;
+      }, {}),
+    };
+
+    return attributes;
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: "image-component",
+      },
+    ];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ["image-component", mergeAttributes(HTMLAttributes)];
+  },
+});
diff --git a/packages/editor/src/core/extensions/custom-image/extension.ts b/packages/editor/src/core/extensions/custom-image/extension.ts
new file mode 100644
index 00000000000..ec795da842b
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/extension.ts
@@ -0,0 +1,121 @@
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import { v4 as uuidv4 } from "uuid";
+// constants
+import { ACCEPTED_IMAGE_MIME_TYPES } from "@/constants/config";
+// helpers
+import { isFileValid } from "@/helpers/file";
+import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
+// types
+import type { TFileHandler, TReadOnlyFileHandler } from "@/types";
+// local imports
+import { CustomImageNodeView } from "./components/node-view";
+import { CustomImageExtensionConfig } from "./extension-config";
+import { getImageComponentImageFileMap } from "./utils";
+
+type Props = {
+  fileHandler: TFileHandler | TReadOnlyFileHandler;
+  isEditable: boolean;
+};
+
+export const CustomImageExtension = (props: Props) => {
+  const { fileHandler, isEditable } = props;
+  // derived values
+  const { getAssetSrc, restore: restoreImageFn } = fileHandler;
+
+  return CustomImageExtensionConfig.extend({
+    selectable: isEditable,
+    draggable: isEditable,
+
+    addOptions() {
+      const upload = "upload" in fileHandler ? fileHandler.upload : undefined;
+
+      return {
+        ...this.parent?.(),
+        getImageSource: getAssetSrc,
+        restoreImage: restoreImageFn,
+        uploadImage: upload,
+      };
+    },
+
+    addStorage() {
+      const maxFileSize = "validation" in fileHandler ? fileHandler.validation?.maxFileSize : 0;
+
+      return {
+        fileMap: new Map(),
+        deletedImageSet: new Map<string, boolean>(),
+        maxFileSize,
+        // escape markdown for images
+        markdown: {
+          serialize() {},
+        },
+      };
+    },
+
+    addCommands() {
+      return {
+        insertImageComponent:
+          (props) =>
+          ({ commands }) => {
+            // Early return if there's an invalid file being dropped
+            if (
+              props?.file &&
+              !isFileValid({
+                acceptedMimeTypes: ACCEPTED_IMAGE_MIME_TYPES,
+                file: props.file,
+                maxFileSize: this.storage.maxFileSize,
+                onError: (_error, message) => alert(message),
+              })
+            ) {
+              return false;
+            }
+
+            // generate a unique id for the image to keep track of dropped
+            // files' file data
+            const fileId = uuidv4();
+
+            const imageComponentImageFileMap = getImageComponentImageFileMap(this.editor);
+
+            if (imageComponentImageFileMap) {
+              if (props?.event === "drop" && props.file) {
+                imageComponentImageFileMap.set(fileId, {
+                  file: props.file,
+                  event: props.event,
+                });
+              } else if (props.event === "insert") {
+                imageComponentImageFileMap.set(fileId, {
+                  event: props.event,
+                  hasOpenedFileInputOnce: false,
+                });
+              }
+            }
+
+            const attributes = {
+              id: fileId,
+            };
+
+            if (props.pos) {
+              return commands.insertContentAt(props.pos, {
+                type: this.name,
+                attrs: attributes,
+              });
+            }
+            return commands.insertContent({
+              type: this.name,
+              attrs: attributes,
+            });
+          },
+      };
+    },
+
+    addKeyboardShortcuts() {
+      return {
+        ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
+        ArrowUp: insertEmptyParagraphAtNodeBoundaries("up", this.name),
+      };
+    },
+
+    addNodeView() {
+      return ReactNodeViewRenderer(CustomImageNodeView);
+    },
+  });
+};
diff --git a/packages/editor/src/core/extensions/custom-image/index.ts b/packages/editor/src/core/extensions/custom-image/index.ts
deleted file mode 100644
index de2bb38789d..00000000000
--- a/packages/editor/src/core/extensions/custom-image/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from "./components";
-export * from "./custom-image";
-export * from "./read-only-custom-image";
diff --git a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts b/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
deleted file mode 100644
index 4a85ffd94cb..00000000000
--- a/packages/editor/src/core/extensions/custom-image/read-only-custom-image.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { mergeAttributes } from "@tiptap/core";
-import { Image as BaseImageExtension } from "@tiptap/extension-image";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-// constants
-import { CORE_EXTENSIONS } from "@/constants/extension";
-// components
-import { CustomImageNode, CustomImageExtensionStorage } from "@/extensions/custom-image";
-// types
-import { TReadOnlyFileHandler } from "@/types";
-
-export const CustomReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
-  const { getAssetSrc, restore: restoreImageFn } = props;
-
-  return BaseImageExtension.extend<Record<string, unknown>, CustomImageExtensionStorage>({
-    name: CORE_EXTENSIONS.CUSTOM_IMAGE,
-    selectable: false,
-    group: "block",
-    atom: true,
-    draggable: false,
-
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        width: {
-          default: "35%",
-        },
-        src: {
-          default: null,
-        },
-        height: {
-          default: "auto",
-        },
-        ["id"]: {
-          default: null,
-        },
-        aspectRatio: {
-          default: null,
-        },
-      };
-    },
-
-    parseHTML() {
-      return [
-        {
-          tag: "image-component",
-        },
-      ];
-    },
-
-    renderHTML({ HTMLAttributes }) {
-      return ["image-component", mergeAttributes(HTMLAttributes)];
-    },
-
-    addStorage() {
-      return {
-        fileMap: new Map(),
-        deletedImageSet: new Map<string, boolean>(),
-        maxFileSize: 0,
-        // escape markdown for images
-        markdown: {
-          serialize() {},
-        },
-      };
-    },
-
-    addCommands() {
-      return {
-        getImageSource: (path: string) => async () => await getAssetSrc(path),
-        restoreImage: (src) => async () => {
-          await restoreImageFn(src);
-        },
-      };
-    },
-
-    addNodeView() {
-      return ReactNodeViewRenderer(CustomImageNode);
-    },
-  });
-};
diff --git a/packages/editor/src/core/extensions/custom-image/types.ts b/packages/editor/src/core/extensions/custom-image/types.ts
new file mode 100644
index 00000000000..675d8a22155
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/types.ts
@@ -0,0 +1,51 @@
+import type { Node } from "@tiptap/core";
+// types
+import type { TFileHandler } from "@/types";
+
+export enum ECustomImageAttributeNames {
+  ID = "id",
+  WIDTH = "width",
+  HEIGHT = "height",
+  ASPECT_RATIO = "aspectRatio",
+  SOURCE = "src",
+}
+
+export type Pixel = `${number}px`;
+
+export type PixelAttribute<TDefault> = Pixel | TDefault;
+
+export type TCustomImageSize = {
+  width: PixelAttribute<"35%">;
+  height: PixelAttribute<"auto">;
+  aspectRatio: number | null;
+};
+
+export type TCustomImageAttributes = {
+  [ECustomImageAttributeNames.ID]: string | null;
+  [ECustomImageAttributeNames.WIDTH]: PixelAttribute<"35%" | number> | null;
+  [ECustomImageAttributeNames.HEIGHT]: PixelAttribute<"auto" | number> | null;
+  [ECustomImageAttributeNames.ASPECT_RATIO]: number | null;
+  [ECustomImageAttributeNames.SOURCE]: string | null;
+};
+
+export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
+
+export type InsertImageComponentProps = {
+  file?: File;
+  pos?: number;
+  event: "insert" | "drop";
+};
+
+export type CustomImageExtensionOptions = {
+  getImageSource: TFileHandler["getAssetSrc"];
+  restoreImage: TFileHandler["restore"];
+  uploadImage?: TFileHandler["upload"];
+};
+
+export type CustomImageExtensionStorage = {
+  fileMap: Map<string, UploadEntity>;
+  deletedImageSet: Map<string, boolean>;
+  maxFileSize: number;
+};
+
+export type CustomImageExtension = Node<CustomImageExtensionOptions, CustomImageExtensionStorage>;
diff --git a/packages/editor/src/core/extensions/custom-image/utils.ts b/packages/editor/src/core/extensions/custom-image/utils.ts
new file mode 100644
index 00000000000..0711e094f1b
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/utils.ts
@@ -0,0 +1,33 @@
+import type { Editor } from "@tiptap/core";
+// constants
+import { CORE_EXTENSIONS } from "@/constants/extension";
+// helpers
+import { getExtensionStorage } from "@/helpers/get-extension-storage";
+// local imports
+import { ECustomImageAttributeNames, type Pixel, type TCustomImageAttributes } from "./types";
+
+export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
+  [ECustomImageAttributeNames.SOURCE]: null,
+  [ECustomImageAttributeNames.ID]: null,
+  [ECustomImageAttributeNames.WIDTH]: "35%",
+  [ECustomImageAttributeNames.HEIGHT]: "auto",
+  [ECustomImageAttributeNames.ASPECT_RATIO]: null,
+};
+
+export const getImageComponentImageFileMap = (editor: Editor) =>
+  getExtensionStorage(editor, CORE_EXTENSIONS.CUSTOM_IMAGE)?.fileMap;
+
+export const ensurePixelString = <TDefault>(
+  value: Pixel | TDefault | number | undefined | null,
+  defaultValue?: TDefault
+) => {
+  if (!value || value === defaultValue) {
+    return defaultValue;
+  }
+
+  if (typeof value === "number") {
+    return `${value}px` satisfies Pixel;
+  }
+
+  return value;
+};
diff --git a/packages/editor/src/core/extensions/extensions.ts b/packages/editor/src/core/extensions/extensions.ts
index 0807fa62d43..cc888200589 100644
--- a/packages/editor/src/core/extensions/extensions.ts
+++ b/packages/editor/src/core/extensions/extensions.ts
@@ -16,7 +16,6 @@ import {
   CustomCodeInlineExtension,
   CustomColorExtension,
   CustomHorizontalRule,
-  CustomImageExtension,
   CustomKeymap,
   CustomLinkExtension,
   CustomMentionExtension,
@@ -38,6 +37,8 @@ import { getExtensionStorage } from "@/helpers/get-extension-storage";
 import { CoreEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
 import type { IEditorProps } from "@/types";
+// local imports
+import { CustomImageExtension } from "./custom-image/extension";
 
 type TArguments = Pick<
   IEditorProps,
@@ -191,12 +192,13 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
 
   if (!disabledExtensions.includes("image")) {
     extensions.push(
-      ImageExtension(fileHandler).configure({
-        HTMLAttributes: {
-          class: "rounded-md",
-        },
+      ImageExtension({
+        fileHandler,
       }),
-      CustomImageExtension(fileHandler)
+      CustomImageExtension({
+        fileHandler,
+        isEditable: editable,
+      })
     );
   }
 
diff --git a/packages/editor/src/core/extensions/image/extension.tsx b/packages/editor/src/core/extensions/image/extension.tsx
index 12844149cf8..b94de7002c4 100644
--- a/packages/editor/src/core/extensions/image/extension.tsx
+++ b/packages/editor/src/core/extensions/image/extension.tsx
@@ -1,23 +1,34 @@
 import { Image as BaseImageExtension } from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
-// extensions
-import { CustomImageNode } from "@/extensions";
 // helpers
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
 // types
-import { TFileHandler } from "@/types";
+import type { TFileHandler, TReadOnlyFileHandler } from "@/types";
+// local imports
+import { CustomImageNodeView } from "../custom-image/components/node-view";
+import { CustomImageExtensionOptions } from "../custom-image/types";
 
 export type ImageExtensionStorage = {
   deletedImageSet: Map<string, boolean>;
 };
 
-export const ImageExtension = (fileHandler: TFileHandler) => {
-  const {
-    getAssetSrc,
-    validation: { maxFileSize },
-  } = fileHandler;
+type Props = {
+  fileHandler: TFileHandler | TReadOnlyFileHandler;
+};
+
+export const ImageExtension = (props: Props) => {
+  const { fileHandler } = props;
+  // derived values
+  const { getAssetSrc } = fileHandler;
+
+  return BaseImageExtension.extend<Pick<CustomImageExtensionOptions, "getImageSource">, ImageExtensionStorage>({
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        getImageSource: getAssetSrc,
+      };
+    },
 
-  return BaseImageExtension.extend<unknown, ImageExtensionStorage>({
     addKeyboardShortcuts() {
       return {
         ArrowDown: insertEmptyParagraphAtNodeBoundaries("down", this.name),
@@ -27,6 +38,8 @@ export const ImageExtension = (fileHandler: TFileHandler) => {
 
     // storage to keep track of image states Map<src, isDeleted>
     addStorage() {
+      const maxFileSize = "validation" in fileHandler ? fileHandler.validation?.maxFileSize : 0;
+
       return {
         deletedImageSet: new Map<string, boolean>(),
         maxFileSize,
@@ -48,15 +61,9 @@ export const ImageExtension = (fileHandler: TFileHandler) => {
       };
     },
 
-    addCommands() {
-      return {
-        getImageSource: (path: string) => async () => await getAssetSrc(path),
-      };
-    },
-
     // render custom image node
     addNodeView() {
-      return ReactNodeViewRenderer(CustomImageNode);
+      return ReactNodeViewRenderer(CustomImageNodeView);
     },
   });
 };
diff --git a/packages/editor/src/core/extensions/image/index.ts b/packages/editor/src/core/extensions/image/index.ts
index 9c7dc65d783..675421bbcd0 100644
--- a/packages/editor/src/core/extensions/image/index.ts
+++ b/packages/editor/src/core/extensions/image/index.ts
@@ -1,3 +1,2 @@
 export * from "./extension";
 export * from "./image-extension-without-props";
-export * from "./read-only-image";
diff --git a/packages/editor/src/core/extensions/image/read-only-image.tsx b/packages/editor/src/core/extensions/image/read-only-image.tsx
deleted file mode 100644
index 271c39fd8d5..00000000000
--- a/packages/editor/src/core/extensions/image/read-only-image.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Image as BaseImageExtension } from "@tiptap/extension-image";
-import { ReactNodeViewRenderer } from "@tiptap/react";
-// extensions
-import { CustomImageNode } from "@/extensions";
-// types
-import { TReadOnlyFileHandler } from "@/types";
-
-export const ReadOnlyImageExtension = (props: TReadOnlyFileHandler) => {
-  const { getAssetSrc } = props;
-
-  return BaseImageExtension.extend({
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        width: {
-          default: "35%",
-        },
-        height: {
-          default: null,
-        },
-        aspectRatio: {
-          default: null,
-        },
-      };
-    },
-
-    addCommands() {
-      return {
-        getImageSource: (path: string) => async () => await getAssetSrc(path),
-      };
-    },
-
-    addNodeView() {
-      return ReactNodeViewRenderer(CustomImageNode);
-    },
-  });
-};
diff --git a/packages/editor/src/core/extensions/index.ts b/packages/editor/src/core/extensions/index.ts
index 3c3232885fc..c3a8e5d5c7a 100644
--- a/packages/editor/src/core/extensions/index.ts
+++ b/packages/editor/src/core/extensions/index.ts
@@ -1,7 +1,6 @@
 export * from "./callout";
 export * from "./code";
 export * from "./code-inline";
-export * from "./custom-image";
 export * from "./custom-link";
 export * from "./custom-list-keymap";
 export * from "./image";
diff --git a/packages/editor/src/core/extensions/read-only-extensions.ts b/packages/editor/src/core/extensions/read-only-extensions.ts
index 0f422c620ba..c99b02312c8 100644
--- a/packages/editor/src/core/extensions/read-only-extensions.ts
+++ b/packages/editor/src/core/extensions/read-only-extensions.ts
@@ -12,7 +12,6 @@ import {
   CustomHorizontalRule,
   CustomLinkExtension,
   CustomTypographyExtension,
-  ReadOnlyImageExtension,
   CustomCodeBlockExtension,
   CustomCodeInlineExtension,
   TableHeader,
@@ -20,11 +19,11 @@ import {
   TableRow,
   Table,
   CustomMentionExtension,
-  CustomReadOnlyImageExtension,
   CustomTextAlignExtension,
   CustomCalloutReadOnlyExtension,
   CustomColorExtension,
   UtilityExtension,
+  ImageExtension,
 } from "@/extensions";
 // helpers
 import { isValidHttpUrl } from "@/helpers/common";
@@ -32,6 +31,8 @@ import { isValidHttpUrl } from "@/helpers/common";
 import { CoreReadOnlyEditorAdditionalExtensions } from "@/plane-editor/extensions";
 // types
 import type { IReadOnlyEditorProps } from "@/types";
+// local imports
+import { CustomImageExtension } from "./custom-image/extension";
 
 type Props = Pick<IReadOnlyEditorProps, "disabledExtensions" | "flaggedExtensions" | "fileHandler" | "mentionHandler">;
 
@@ -135,12 +136,13 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
 
   if (!disabledExtensions.includes("image")) {
     extensions.push(
-      ReadOnlyImageExtension(fileHandler).configure({
-        HTMLAttributes: {
-          class: "rounded-md",
-        },
+      ImageExtension({
+        fileHandler,
       }),
-      CustomReadOnlyImageExtension(fileHandler)
+      CustomImageExtension({
+        fileHandler,
+        isEditable: false,
+      })
     );
   }
 

From b6690180ef6e0bf378baf879b34978e0fc715382 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 20 Jun 2025 17:10:33 +0530
Subject: [PATCH 02/11] refactor: extension config

---
 .../src/core/extensions/core-without-props.ts | 12 ++--
 ...without-props.tsx => extension-config.tsx} |  8 ++-
 .../src/core/extensions/image/extension.tsx   | 20 +------
 .../image/image-component-without-props.tsx   | 56 -------------------
 .../editor/src/core/extensions/image/index.ts |  2 +-
 5 files changed, 14 insertions(+), 84 deletions(-)
 rename packages/editor/src/core/extensions/image/{image-extension-without-props.tsx => extension-config.tsx} (50%)
 delete mode 100644 packages/editor/src/core/extensions/image/image-component-without-props.tsx

diff --git a/packages/editor/src/core/extensions/core-without-props.ts b/packages/editor/src/core/extensions/core-without-props.ts
index a309c2013af..d66cae7bde9 100644
--- a/packages/editor/src/core/extensions/core-without-props.ts
+++ b/packages/editor/src/core/extensions/core-without-props.ts
@@ -12,10 +12,10 @@ import { CustomCalloutExtensionConfig } from "./callout/extension-config";
 import { CustomCodeBlockExtensionWithoutProps } from "./code/without-props";
 import { CustomCodeInlineExtension } from "./code-inline";
 import { CustomColorExtension } from "./custom-color";
+import { CustomImageExtensionConfig } from "./custom-image/extension-config";
 import { CustomLinkExtension } from "./custom-link";
 import { CustomHorizontalRule } from "./horizontal-rule";
-import { ImageExtensionWithoutProps } from "./image";
-import { CustomImageComponentWithoutProps } from "./image/image-component-without-props";
+import { ImageExtensionConfig } from "./image";
 import { CustomMentionExtensionConfig } from "./mentions/extension-config";
 import { CustomQuoteExtension } from "./quote";
 import { TableHeader, TableCell, TableRow, Table } from "./table";
@@ -72,12 +72,8 @@ export const CoreEditorExtensionsWithoutProps = [
         "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
     },
   }),
-  ImageExtensionWithoutProps.configure({
-    HTMLAttributes: {
-      class: "rounded-md",
-    },
-  }),
-  CustomImageComponentWithoutProps,
+  ImageExtensionConfig,
+  CustomImageExtensionConfig,
   TiptapUnderline,
   TextStyle,
   TaskList.configure({
diff --git a/packages/editor/src/core/extensions/image/image-extension-without-props.tsx b/packages/editor/src/core/extensions/image/extension-config.tsx
similarity index 50%
rename from packages/editor/src/core/extensions/image/image-extension-without-props.tsx
rename to packages/editor/src/core/extensions/image/extension-config.tsx
index ba064bef485..6dbad2d24d6 100644
--- a/packages/editor/src/core/extensions/image/image-extension-without-props.tsx
+++ b/packages/editor/src/core/extensions/image/extension-config.tsx
@@ -1,6 +1,12 @@
 import { Image as BaseImageExtension } from "@tiptap/extension-image";
+// local imports
+import { CustomImageExtensionOptions } from "../custom-image/types";
+import { ImageExtensionStorage } from "./extension";
 
-export const ImageExtensionWithoutProps = BaseImageExtension.extend({
+export const ImageExtensionConfig = BaseImageExtension.extend<
+  Pick<CustomImageExtensionOptions, "getImageSource">,
+  ImageExtensionStorage
+>({
   addAttributes() {
     return {
       ...this.parent?.(),
diff --git a/packages/editor/src/core/extensions/image/extension.tsx b/packages/editor/src/core/extensions/image/extension.tsx
index b94de7002c4..80cf7c182b6 100644
--- a/packages/editor/src/core/extensions/image/extension.tsx
+++ b/packages/editor/src/core/extensions/image/extension.tsx
@@ -1,4 +1,3 @@
-import { Image as BaseImageExtension } from "@tiptap/extension-image";
 import { ReactNodeViewRenderer } from "@tiptap/react";
 // helpers
 import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-paragraph-at-node-boundary";
@@ -6,7 +5,7 @@ import { insertEmptyParagraphAtNodeBoundaries } from "@/helpers/insert-empty-par
 import type { TFileHandler, TReadOnlyFileHandler } from "@/types";
 // local imports
 import { CustomImageNodeView } from "../custom-image/components/node-view";
-import { CustomImageExtensionOptions } from "../custom-image/types";
+import { ImageExtensionConfig } from "./extension-config";
 
 export type ImageExtensionStorage = {
   deletedImageSet: Map<string, boolean>;
@@ -21,7 +20,7 @@ export const ImageExtension = (props: Props) => {
   // derived values
   const { getAssetSrc } = fileHandler;
 
-  return BaseImageExtension.extend<Pick<CustomImageExtensionOptions, "getImageSource">, ImageExtensionStorage>({
+  return ImageExtensionConfig.extend({
     addOptions() {
       return {
         ...this.parent?.(),
@@ -46,21 +45,6 @@ export const ImageExtension = (props: Props) => {
       };
     },
 
-    addAttributes() {
-      return {
-        ...this.parent?.(),
-        width: {
-          default: "35%",
-        },
-        height: {
-          default: null,
-        },
-        aspectRatio: {
-          default: null,
-        },
-      };
-    },
-
     // render custom image node
     addNodeView() {
       return ReactNodeViewRenderer(CustomImageNodeView);
diff --git a/packages/editor/src/core/extensions/image/image-component-without-props.tsx b/packages/editor/src/core/extensions/image/image-component-without-props.tsx
deleted file mode 100644
index bd2c3f16b5f..00000000000
--- a/packages/editor/src/core/extensions/image/image-component-without-props.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { mergeAttributes } from "@tiptap/core";
-import { Image as BaseImageExtension } from "@tiptap/extension-image";
-// local imports
-import { ImageExtensionStorage } from "./extension";
-
-export const CustomImageComponentWithoutProps = BaseImageExtension.extend<
-  Record<string, unknown>,
-  ImageExtensionStorage
->({
-  name: "imageComponent",
-  selectable: true,
-  group: "block",
-  atom: true,
-  draggable: true,
-
-  addAttributes() {
-    return {
-      ...this.parent?.(),
-      width: {
-        default: "35%",
-      },
-      src: {
-        default: null,
-      },
-      height: {
-        default: "auto",
-      },
-      ["id"]: {
-        default: null,
-      },
-      aspectRatio: {
-        default: null,
-      },
-    };
-  },
-
-  parseHTML() {
-    return [
-      {
-        tag: "image-component",
-      },
-    ];
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    return ["image-component", mergeAttributes(HTMLAttributes)];
-  },
-
-  addStorage() {
-    return {
-      fileMap: new Map(),
-      deletedImageSet: new Map<string, boolean>(),
-      maxFileSize: 0,
-    };
-  },
-});
diff --git a/packages/editor/src/core/extensions/image/index.ts b/packages/editor/src/core/extensions/image/index.ts
index 675421bbcd0..02b5a53d639 100644
--- a/packages/editor/src/core/extensions/image/index.ts
+++ b/packages/editor/src/core/extensions/image/index.ts
@@ -1,2 +1,2 @@
 export * from "./extension";
-export * from "./image-extension-without-props";
+export * from "./extension-config";

From 6d9fc4f67d8a5bfb8d25c1eea2876cc27e80da2a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 20 Jun 2025 17:33:01 +0530
Subject: [PATCH 03/11] revert: image full screen component

---
 .../custom-image/components/block.tsx         |  7 ++++++-
 .../components/toolbar/full-screen.tsx        | 19 +++++++++++--------
 .../custom-image/components/toolbar/root.tsx  |  8 ++++++--
 .../src/core/helpers/editor-commands.ts       |  2 +-
 4 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index b373b47198e..04637b186a0 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -262,7 +262,12 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           containerClassName={
             "absolute top-1 right-1 z-20 bg-black/40 rounded opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity"
           }
-          image={node.attrs}
+          image={{
+            width: size.width,
+            height: size.height,
+            aspectRatio: size.aspectRatio === null ? 1 : size.aspectRatio,
+            src: resolvedImageSrc,
+          }}
         />
       )}
       {selected && displayedImageSrc === resolvedImageSrc && (
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
index 5921e95c2b7..43f178dc8f4 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
@@ -2,11 +2,14 @@ import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 // plane imports
 import { cn } from "@plane/utils";
-// local imports
-import { TCustomImageAttributes } from "../../types";
 
 type Props = {
-  image: TCustomImageAttributes;
+  image: {
+    width: string;
+    height: string;
+    aspectRatio: number;
+    src: string;
+  };
   isOpen: boolean;
   toggleFullScreenMode: (val: boolean) => void;
 };
@@ -28,7 +31,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
   const modalRef = useRef<HTMLDivElement>(null);
   const imgRef = useRef<HTMLImageElement | null>(null);
 
-  const widthInNumber = useMemo(() => Number(width?.toString()?.replace("px", "")), [width]);
+  const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
 
   const setImageRef = useCallback(
     (node: HTMLImageElement | null) => {
@@ -39,7 +42,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
       const viewportWidth = window.innerWidth * 0.9;
       const viewportHeight = window.innerHeight * 0.75;
       const imageWidth = widthInNumber;
-      const imageHeight = imageWidth / (aspectRatio ?? 1);
+      const imageHeight = imageWidth / aspectRatio;
 
       const widthRatio = viewportWidth / imageWidth;
       const heightRatio = viewportHeight / imageHeight;
@@ -205,13 +208,13 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
           </button>
           <img
             ref={setImageRef}
-            src={src ?? undefined}
+            src={src}
             className="read-only-image rounded-lg"
             style={{
               width: `${widthInNumber * initialMagnification}px`,
               maxWidth: "none",
               maxHeight: "none",
-              aspectRatio: aspectRatio ?? 1,
+              aspectRatio,
               position: "relative",
               transform: `scale(${magnification})`,
               transformOrigin: "center",
@@ -241,7 +244,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
             </div>
             <button
               type="button"
-              onClick={() => window.open(src ?? undefined, "_blank")}
+              onClick={() => window.open(src, "_blank")}
               className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
             >
               <ExternalLink className="size-4" />
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index 9e140136ae8..f9cd28d48d0 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -2,12 +2,16 @@ import { useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // local imports
-import { TCustomImageAttributes } from "../../types";
 import { ImageFullScreenAction } from "./full-screen";
 
 type Props = {
   containerClassName?: string;
-  image: TCustomImageAttributes;
+  image: {
+    width: string;
+    height: string;
+    aspectRatio: number;
+    src: string;
+  };
 };
 
 export const ImageToolbarRoot: React.FC<Props> = (props) => {
diff --git a/packages/editor/src/core/helpers/editor-commands.ts b/packages/editor/src/core/helpers/editor-commands.ts
index 5fa15cb08dd..415a42bb3b4 100644
--- a/packages/editor/src/core/helpers/editor-commands.ts
+++ b/packages/editor/src/core/helpers/editor-commands.ts
@@ -2,8 +2,8 @@ import { Editor, Range } from "@tiptap/core";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // extensions
-import { InsertImageComponentProps } from "@/extensions";
 import { replaceCodeWithText } from "@/extensions/code/utils/replace-code-block-with-text";
+import type { InsertImageComponentProps } from "@/extensions/custom-image/types";
 // helpers
 import { findTableAncestor } from "@/helpers/common";
 

From 41717d45e103ecdc5b41587c9688d5211539e32e Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Fri, 20 Jun 2025 17:54:07 +0530
Subject: [PATCH 04/11] fix: undo operation

---
 .../core/extensions/custom-image/components/block.tsx |  4 ++--
 .../extensions/custom-image/components/node-view.tsx  | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index 04637b186a0..1ff36abca77 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -88,7 +88,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       const initialWidth = Math.max(editorWidth * 0.35, MIN_SIZE);
       const initialHeight = initialWidth / aspectRatioCalculated;
 
-      const initialComputedSize = {
+      const initialComputedSize: TCustomImageSize = {
         width: `${Math.round(initialWidth)}px` satisfies Pixel,
         height: `${Math.round(initialHeight)}px` satisfies Pixel,
         aspectRatio: aspectRatioCalculated,
@@ -113,7 +113,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
       }
     }
     setInitialResizeComplete(true);
-  }, [nodeWidth, updateAttributesSafely, editorContainer, nodeAspectRatio]);
+  }, [nodeWidth, updateAttributesSafely, editorContainer, nodeAspectRatio, setEditorContainer]);
 
   // for real time resizing
   useLayoutEffect(() => {
diff --git a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
index 07fa8047a88..74ea2c38c54 100644
--- a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
@@ -9,7 +9,7 @@ import type { CustomImageExtension, TCustomImageAttributes } from "../types";
 import { CustomImageBlock } from "./block";
 import { CustomImageUploader } from "./uploader";
 
-export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension"> & {
+export type CustomImageNodeViewProps = Omit<NodeViewProps, "extension" | "updateAttributes"> & {
   extension: CustomImageExtension;
   getPos: () => number;
   editor: Editor;
@@ -51,11 +51,14 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
   }, [resolvedSrc]);
 
   useEffect(() => {
-    if (!imgNodeSrc) return;
+    if (!imgNodeSrc) {
+      setResolvedSrc(undefined);
+      return;
+    }
 
     const getImageSource = async () => {
-      const url: string = await extension.options.getImageSource?.(imgNodeSrc);
-      setResolvedSrc(url as string);
+      const url = await extension.options.getImageSource?.(imgNodeSrc);
+      setResolvedSrc(url);
     };
     getImageSource();
   }, [imgNodeSrc, extension.options]);

From d98162bc8641f9325e34d792dfef47da7e16f2f0 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 23 Jun 2025 14:11:51 +0530
Subject: [PATCH 05/11] chore: add download and alignment options

---
 .../custom-image/components/block.tsx         | 222 ++++++++++--------
 .../custom-image/components/node-view.tsx     |   5 +
 .../components/toolbar/alignment.tsx          |  64 +++++
 .../components/toolbar/download.tsx           |  24 ++
 .../components/toolbar/full-screen.tsx        |  47 ++--
 .../custom-image/components/toolbar/root.tsx  |  42 ++--
 .../core/extensions/custom-image/extension.ts |   3 +-
 .../src/core/extensions/custom-image/types.ts |   5 +
 .../src/core/extensions/custom-image/utils.ts |  26 +-
 .../core/hooks/use-outside-click-detector.ts  |  29 +++
 packages/editor/src/core/types/config.ts      |   1 +
 packages/utils/src/editor.ts                  |  15 ++
 web/core/hooks/editor/use-editor-config.ts    |  16 +-
 13 files changed, 360 insertions(+), 139 deletions(-)
 create mode 100644 packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
 create mode 100644 packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
 create mode 100644 packages/editor/src/core/hooks/use-outside-click-detector.ts

diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index 1ff36abca77..30039d26850 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -17,6 +17,7 @@ type CustomImageBlockProps = CustomImageNodeViewProps & {
   setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
   setFailedToLoadImage: (isError: boolean) => void;
   src: string | undefined;
+  downloadSrc: string | undefined;
 };
 
 export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
@@ -32,9 +33,16 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     setEditorContainer,
     setFailedToLoadImage,
     src: resolvedImageSrc,
+    downloadSrc: resolvedDownloadSrc,
     updateAttributes,
   } = props;
-  const { width: nodeWidth, height: nodeHeight, aspectRatio: nodeAspectRatio, src: imgNodeSrc } = node.attrs;
+  const {
+    width: nodeWidth,
+    height: nodeHeight,
+    aspectRatio: nodeAspectRatio,
+    src: imgNodeSrc,
+    alignment: nodeAlignment,
+  } = node.attrs;
   // states
   const [size, setSize] = useState<TCustomImageSize>({
     width: ensurePixelString(nodeWidth, "35%") ?? "35%",
@@ -131,12 +139,17 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
 
       const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
 
-      const newWidth = Math.max(clientX - containerRect.current.left, MIN_SIZE);
-      const newHeight = newWidth / size.aspectRatio;
-
-      setSize((prevSize) => ({ ...prevSize, width: `${newWidth}px`, height: `${newHeight}px` }));
+      if (nodeAlignment === "right") {
+        const newWidth = Math.max(containerRect.current.right - clientX, MIN_SIZE);
+        const newHeight = newWidth / size.aspectRatio;
+        setSize((prevSize) => ({ ...prevSize, width: `${newWidth}px`, height: `${newHeight}px` }));
+      } else {
+        const newWidth = Math.max(clientX - containerRect.current.left, MIN_SIZE);
+        const newHeight = newWidth / size.aspectRatio;
+        setSize((prevSize) => ({ ...prevSize, width: `${newWidth}px`, height: `${newHeight}px` }));
+      }
     },
-    [size.aspectRatio]
+    [nodeAlignment, size.aspectRatio]
   );
 
   const handleResizeEnd = useCallback(() => {
@@ -188,7 +201,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // show the image upload status only when the resolvedImageSrc is not ready
   const showUploadStatus = !resolvedImageSrc;
   // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
-  const showImageUtils = resolvedImageSrc && initialResizeComplete;
+  const showImageUtils = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete;
   // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
   const showImageResizer = editor.isEditable && resolvedImageSrc && initialResizeComplete;
   // show the preview image from the file system if the remote image's src is not set
@@ -196,108 +209,117 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
 
   return (
     <div
-      ref={containerRef}
-      className="group/image-component relative inline-block max-w-full"
-      onMouseDown={handleImageMouseDown}
-      style={{
-        width: size.width,
-        ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
-      }}
+      className={cn("w-fit max-w-full transition-all", {
+        "mx-auto": nodeAlignment === "center",
+        "ml-auto": nodeAlignment === "right",
+      })}
     >
-      {showImageLoader && (
-        <div
-          className="animate-pulse bg-custom-background-80 rounded-md"
-          style={{ width: size.width, height: size.height }}
-        />
-      )}
-      <img
-        ref={imageRef}
-        src={displayedImageSrc}
-        onLoad={handleImageLoad}
-        onError={async (e) => {
-          // for old image extension this command doesn't exist or if the image failed to load for the first time
-          if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
-            setFailedToLoadImage(true);
-            return;
-          }
-
-          try {
-            setHasErroredOnFirstLoad(true);
-            // this is a type error from tiptap, don't remove await until it's fixed
-            if (!imgNodeSrc) {
-              throw new Error("No source image to restore from");
-            }
-            await extension.options.restoreImage?.(imgNodeSrc);
-            if (!imageRef.current) {
-              throw new Error("Image reference not found");
-            }
-            if (!resolvedImageSrc) {
-              throw new Error("No resolved image source available");
-            }
-            imageRef.current.src = resolvedImageSrc;
-          } catch {
-            // if the image failed to even restore, then show the error state
-            setFailedToLoadImage(true);
-            console.error("Error while loading image", e);
-          } finally {
-            setHasErroredOnFirstLoad(false);
-            setHasTriedRestoringImageOnce(true);
-          }
-        }}
-        width={size.width}
-        className={cn("image-component block rounded-md", {
-          // hide the image while the background calculations of the image loader are in progress (to avoid flickering) and show the loader until then
-          hidden: showImageLoader,
-          "read-only-image": !editor.isEditable,
-          "blur-sm opacity-80 loading-image": !resolvedImageSrc,
-        })}
+      <div
+        ref={containerRef}
+        className="group/image-component relative inline-block max-w-full"
+        onMouseDown={handleImageMouseDown}
         style={{
           width: size.width,
           ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
         }}
-      />
-      {showUploadStatus && node.attrs.id && <ImageUploadStatus editor={editor} nodeId={node.attrs.id} />}
-      {showImageUtils && (
-        <ImageToolbarRoot
-          containerClassName={
-            "absolute top-1 right-1 z-20 bg-black/40 rounded opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity"
-          }
-          image={{
-            width: size.width,
-            height: size.height,
-            aspectRatio: size.aspectRatio === null ? 1 : size.aspectRatio,
-            src: resolvedImageSrc,
-          }}
-        />
-      )}
-      {selected && displayedImageSrc === resolvedImageSrc && (
-        <div className="absolute inset-0 size-full bg-custom-primary-500/30" />
-      )}
-      {showImageResizer && (
-        <>
+      >
+        {showImageLoader && (
           <div
-            className={cn(
-              "absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
-              {
-                "opacity-100": isResizing,
-                "opacity-0 group-hover/image-component:opacity-100": !isResizing,
-              }
-            )}
+            className="animate-pulse bg-custom-background-80 rounded-md"
+            style={{ width: size.width, height: size.height }}
           />
-          <div
-            className={cn(
-              "absolute bottom-0 right-0 translate-y-1/2 translate-x-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white cursor-nwse-resize transition-opacity duration-100 ease-in-out",
-              {
-                "opacity-100 pointer-events-auto": isResizing,
-                "opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":
-                  !isResizing,
+        )}
+        <img
+          ref={imageRef}
+          src={displayedImageSrc}
+          onLoad={handleImageLoad}
+          onError={async (e) => {
+            // for old image extension this command doesn't exist or if the image failed to load for the first time
+            if (!extension.options.restoreImage || hasTriedRestoringImageOnce) {
+              setFailedToLoadImage(true);
+              return;
+            }
+
+            try {
+              setHasErroredOnFirstLoad(true);
+              // this is a type error from tiptap, don't remove await until it's fixed
+              if (!imgNodeSrc) {
+                throw new Error("No source image to restore from");
+              }
+              await extension.options.restoreImage?.(imgNodeSrc);
+              if (!imageRef.current) {
+                throw new Error("Image reference not found");
+              }
+              if (!resolvedImageSrc) {
+                throw new Error("No resolved image source available");
               }
-            )}
-            onMouseDown={handleResizeStart}
-            onTouchStart={handleResizeStart}
+              imageRef.current.src = resolvedImageSrc;
+            } catch {
+              // if the image failed to even restore, then show the error state
+              setFailedToLoadImage(true);
+              console.error("Error while loading image", e);
+            } finally {
+              setHasErroredOnFirstLoad(false);
+              setHasTriedRestoringImageOnce(true);
+            }
+          }}
+          width={size.width}
+          className={cn("image-component block rounded-md", {
+            // hide the image while the background calculations of the image loader are in progress (to avoid flickering) and show the loader until then
+            hidden: showImageLoader,
+            "read-only-image": !editor.isEditable,
+            "blur-sm opacity-80 loading-image": !resolvedImageSrc,
+          })}
+          style={{
+            width: size.width,
+            ...(size.aspectRatio && { aspectRatio: size.aspectRatio }),
+          }}
+        />
+        {showUploadStatus && node.attrs.id && <ImageUploadStatus editor={editor} nodeId={node.attrs.id} />}
+        {showImageUtils && (
+          <ImageToolbarRoot
+            alignment={nodeAlignment ?? "left"}
+            width={size.width}
+            height={size.height}
+            aspectRatio={size.aspectRatio === null ? 1 : size.aspectRatio}
+            src={resolvedImageSrc}
+            downloadSrc={resolvedDownloadSrc}
+            handleAlignmentChange={(alignment) =>
+              updateAttributesSafely({ alignment }, "Failed to update attributes while changing alignment:")
+            }
           />
-        </>
-      )}
+        )}
+        {selected && displayedImageSrc === resolvedImageSrc && (
+          <div className="absolute inset-0 size-full bg-custom-primary-500/30 pointer-events-none" />
+        )}
+        {showImageResizer && (
+          <>
+            <div
+              className={cn(
+                "absolute inset-0 border-2 border-custom-primary-100 pointer-events-none rounded-md transition-opacity duration-100 ease-in-out",
+                {
+                  "opacity-100": isResizing,
+                  "opacity-0 group-hover/image-component:opacity-100": !isResizing,
+                }
+              )}
+            />
+            <div
+              className={cn(
+                "absolute bottom-0 translate-y-1/2 size-4 rounded-full bg-custom-primary-100 border-2 border-white transition-opacity duration-100 ease-in-out",
+                {
+                  "opacity-100 pointer-events-auto": isResizing,
+                  "opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto":
+                    !isResizing,
+                  "left-0 -translate-x-1/2 cursor-nesw-resize": nodeAlignment === "right",
+                  "right-0 translate-x-1/2 cursor-nwse-resize": nodeAlignment !== "right",
+                }
+              )}
+              onMouseDown={handleResizeStart}
+              onTouchStart={handleResizeStart}
+            />
+          </>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
index 74ea2c38c54..eb38ab40542 100644
--- a/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/node-view.tsx
@@ -26,6 +26,7 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
 
   const [isUploaded, setIsUploaded] = useState(false);
   const [resolvedSrc, setResolvedSrc] = useState<string | undefined>(undefined);
+  const [resolvedDownloadSrc, setResolvedDownloadSrc] = useState<string | undefined>(undefined);
   const [imageFromFileSystem, setImageFromFileSystem] = useState<string | undefined>(undefined);
   const [failedToLoadImage, setFailedToLoadImage] = useState(false);
 
@@ -53,12 +54,15 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
   useEffect(() => {
     if (!imgNodeSrc) {
       setResolvedSrc(undefined);
+      setResolvedDownloadSrc(undefined);
       return;
     }
 
     const getImageSource = async () => {
       const url = await extension.options.getImageSource?.(imgNodeSrc);
       setResolvedSrc(url);
+      const downloadUrl = await extension.options.getImageDownloadSource?.(imgNodeSrc);
+      setResolvedDownloadSrc(downloadUrl);
     };
     getImageSource();
   }, [imgNodeSrc, extension.options]);
@@ -73,6 +77,7 @@ export const CustomImageNodeView: React.FC<CustomImageNodeViewProps> = (props) =
             setEditorContainer={setEditorContainer}
             setFailedToLoadImage={setFailedToLoadImage}
             src={resolvedSrc}
+            downloadSrc={resolvedDownloadSrc}
             {...props}
           />
         ) : (
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
new file mode 100644
index 00000000000..782fef4d295
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -0,0 +1,64 @@
+import { ChevronDown } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+// plane imports
+import { Tooltip } from "@plane/ui";
+// hooks
+import { useOutsideClickDetector } from "@/hooks/use-outside-click-detector";
+// local imports
+import type { TCustomImageAlignment } from "../../types";
+import { IMAGE_ALIGNMENT_OPTIONS } from "../../utils";
+
+type Props = {
+  activeAlignment: TCustomImageAlignment;
+  handleChange: (alignment: TCustomImageAlignment) => void;
+  toggleToolbarViewStatus: (val: boolean) => void;
+};
+
+export const ImageAlignmentAction: React.FC<Props> = (props) => {
+  const { activeAlignment, handleChange, toggleToolbarViewStatus } = props;
+  // states
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+  // refs
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  // derived values
+  const activeAlignmentDetails = IMAGE_ALIGNMENT_OPTIONS.find((option) => option.value === activeAlignment);
+
+  useOutsideClickDetector(dropdownRef, () => setIsDropdownOpen(false));
+
+  useEffect(() => {
+    toggleToolbarViewStatus(isDropdownOpen);
+  }, [isDropdownOpen, toggleToolbarViewStatus]);
+
+  return (
+    <div ref={dropdownRef} className="h-full relative">
+      <Tooltip tooltipContent="Align">
+        <button
+          type="button"
+          className="h-full flex items-center gap-1 text-white/60 hover:text-white transition-colors"
+          onClick={() => setIsDropdownOpen((prev) => !prev)}
+        >
+          {activeAlignmentDetails && <activeAlignmentDetails.icon className="flex-shrink-0 size-3" />}
+          <ChevronDown className="flex-shrink-0 size-2" />
+        </button>
+      </Tooltip>
+      {isDropdownOpen && (
+        <div className="absolute top-full left-1/2 -translate-x-1/2 mt-0.5 h-7 bg-black/80 flex items-center gap-2 px-2 rounded">
+          {IMAGE_ALIGNMENT_OPTIONS.map((option) => (
+            <Tooltip key={option.value} tooltipContent={option.label}>
+              <button
+                type="button"
+                className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+                onClick={() => {
+                  handleChange(option.value);
+                  setIsDropdownOpen(false);
+                }}
+              >
+                <option.icon className="size-3" />
+              </button>
+            </Tooltip>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
new file mode 100644
index 00000000000..ee8fc7f9279
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
@@ -0,0 +1,24 @@
+import { Download } from "lucide-react";
+// plane imports
+import { Tooltip } from "@plane/ui";
+
+type Props = {
+  src: string;
+};
+
+export const ImageDownloadAction: React.FC<Props> = (props) => {
+  const { src } = props;
+
+  return (
+    <Tooltip tooltipContent="Download">
+      <a
+        href={src}
+        className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <Download className="size-3" />
+      </a>
+    </Tooltip>
+  );
+};
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
index 43f178dc8f4..c4fa6707873 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
@@ -1,6 +1,7 @@
 import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 // plane imports
+import { Tooltip } from "@plane/ui";
 import { cn } from "@plane/utils";
 
 type Props = {
@@ -10,8 +11,7 @@ type Props = {
     aspectRatio: number;
     src: string;
   };
-  isOpen: boolean;
-  toggleFullScreenMode: (val: boolean) => void;
+  toggleToolbarViewStatus: (val: boolean) => void;
 };
 
 const MIN_ZOOM = 0.5;
@@ -20,16 +20,19 @@ const ZOOM_SPEED = 0.05;
 const ZOOM_STEPS = [0.5, 1, 1.5, 2];
 
 export const ImageFullScreenAction: React.FC<Props> = (props) => {
-  const { image, isOpen: isFullScreenEnabled, toggleFullScreenMode } = props;
-  const { src, width, aspectRatio } = image;
-
+  const { image, toggleToolbarViewStatus } = props;
+  // state
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
   const [magnification, setMagnification] = useState<number>(1);
   const [initialMagnification, setInitialMagnification] = useState(1);
   const [isDragging, setIsDragging] = useState(false);
+  // refs
   const dragStart = useRef({ x: 0, y: 0 });
   const dragOffset = useRef({ x: 0, y: 0 });
   const modalRef = useRef<HTMLDivElement>(null);
   const imgRef = useRef<HTMLImageElement | null>(null);
+  // derived values
+  const { src, width, aspectRatio } = image;
 
   const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
 
@@ -59,10 +62,10 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
 
   const handleClose = useCallback(() => {
     if (isDragging) return;
-    toggleFullScreenMode(false);
+    setIsFullScreenEnabled(false);
     setMagnification(1);
     setInitialMagnification(1);
-  }, [isDragging, toggleFullScreenMode]);
+  }, [isDragging]);
 
   const handleMagnification = useCallback((direction: "increase" | "decrease") => {
     setMagnification((prev) => {
@@ -165,7 +168,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
         return;
       }
     },
-    [isFullScreenEnabled, magnification]
+    [isFullScreenEnabled]
   );
 
   // Event listeners
@@ -185,6 +188,10 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
     };
   }, [isFullScreenEnabled, handleKeyDown, handleMouseMove, handleMouseUp, handleWheel]);
 
+  useEffect(() => {
+    toggleToolbarViewStatus(isFullScreenEnabled);
+  }, [isFullScreenEnabled, toggleToolbarViewStatus]);
+
   return (
     <>
       <div
@@ -252,17 +259,19 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
           </div>
         </div>
       </div>
-      <button
-        type="button"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          toggleFullScreenMode(true);
-        }}
-        className="size-5 grid place-items-center hover:bg-black/40 text-white rounded transition-colors"
-      >
-        <Maximize className="size-3" />
-      </button>
+      <Tooltip tooltipContent="View in full screen">
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsFullScreenEnabled(true);
+          }}
+          className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+        >
+          <Maximize className="size-3" />
+        </button>
+      </Tooltip>
     </>
   );
 };
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index f9cd28d48d0..d6c35664f77 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -2,35 +2,43 @@ import { useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
 // local imports
+import type { TCustomImageAlignment } from "../../types";
+import { ImageAlignmentAction } from "./alignment";
+import { ImageDownloadAction } from "./download";
 import { ImageFullScreenAction } from "./full-screen";
 
 type Props = {
-  containerClassName?: string;
-  image: {
-    width: string;
-    height: string;
-    aspectRatio: number;
-    src: string;
-  };
+  alignment: TCustomImageAlignment;
+  width: string;
+  height: string;
+  aspectRatio: number;
+  src: string;
+  downloadSrc: string;
+  handleAlignmentChange: (alignment: TCustomImageAlignment) => void;
 };
 
 export const ImageToolbarRoot: React.FC<Props> = (props) => {
-  const { containerClassName, image } = props;
-  // state
-  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
+  const { alignment, downloadSrc, handleAlignmentChange } = props;
+  // states
+  const [shouldShowToolbar, setShouldShowToolbar] = useState(false);
 
   return (
     <>
       <div
-        className={cn(containerClassName, {
-          "opacity-100 pointer-events-auto": isFullScreenEnabled,
-        })}
+        className={cn(
+          "absolute top-1 right-1 h-7 z-20 bg-black/80 rounded flex items-center gap-2 px-2 opacity-0 pointer-events-none group-hover/image-component:opacity-100 group-hover/image-component:pointer-events-auto transition-opacity",
+          {
+            "opacity-100 pointer-events-auto": shouldShowToolbar,
+          }
+        )}
       >
-        <ImageFullScreenAction
-          image={image}
-          isOpen={isFullScreenEnabled}
-          toggleFullScreenMode={(val) => setIsFullScreenEnabled(val)}
+        <ImageDownloadAction src={downloadSrc} />
+        <ImageAlignmentAction
+          activeAlignment={alignment}
+          handleChange={handleAlignmentChange}
+          toggleToolbarViewStatus={setShouldShowToolbar}
         />
+        <ImageFullScreenAction image={props} toggleToolbarViewStatus={setShouldShowToolbar} />
       </div>
     </>
   );
diff --git a/packages/editor/src/core/extensions/custom-image/extension.ts b/packages/editor/src/core/extensions/custom-image/extension.ts
index ec795da842b..3ce93ecd87c 100644
--- a/packages/editor/src/core/extensions/custom-image/extension.ts
+++ b/packages/editor/src/core/extensions/custom-image/extension.ts
@@ -20,7 +20,7 @@ type Props = {
 export const CustomImageExtension = (props: Props) => {
   const { fileHandler, isEditable } = props;
   // derived values
-  const { getAssetSrc, restore: restoreImageFn } = fileHandler;
+  const { getAssetSrc, getAssetDownloadSrc, restore: restoreImageFn } = fileHandler;
 
   return CustomImageExtensionConfig.extend({
     selectable: isEditable,
@@ -31,6 +31,7 @@ export const CustomImageExtension = (props: Props) => {
 
       return {
         ...this.parent?.(),
+        getImageDownloadSource: getAssetDownloadSrc,
         getImageSource: getAssetSrc,
         restoreImage: restoreImageFn,
         uploadImage: upload,
diff --git a/packages/editor/src/core/extensions/custom-image/types.ts b/packages/editor/src/core/extensions/custom-image/types.ts
index 675d8a22155..4ed5cd6ce4a 100644
--- a/packages/editor/src/core/extensions/custom-image/types.ts
+++ b/packages/editor/src/core/extensions/custom-image/types.ts
@@ -8,6 +8,7 @@ export enum ECustomImageAttributeNames {
   HEIGHT = "height",
   ASPECT_RATIO = "aspectRatio",
   SOURCE = "src",
+  ALIGNMENT = "alignment",
 }
 
 export type Pixel = `${number}px`;
@@ -20,12 +21,15 @@ export type TCustomImageSize = {
   aspectRatio: number | null;
 };
 
+export type TCustomImageAlignment = "left" | "center" | "right";
+
 export type TCustomImageAttributes = {
   [ECustomImageAttributeNames.ID]: string | null;
   [ECustomImageAttributeNames.WIDTH]: PixelAttribute<"35%" | number> | null;
   [ECustomImageAttributeNames.HEIGHT]: PixelAttribute<"auto" | number> | null;
   [ECustomImageAttributeNames.ASPECT_RATIO]: number | null;
   [ECustomImageAttributeNames.SOURCE]: string | null;
+  [ECustomImageAttributeNames.ALIGNMENT]: TCustomImageAlignment;
 };
 
 export type UploadEntity = ({ event: "insert" } | { event: "drop"; file: File }) & { hasOpenedFileInputOnce?: boolean };
@@ -37,6 +41,7 @@ export type InsertImageComponentProps = {
 };
 
 export type CustomImageExtensionOptions = {
+  getImageDownloadSource: TFileHandler["getAssetDownloadSrc"];
   getImageSource: TFileHandler["getAssetSrc"];
   restoreImage: TFileHandler["restore"];
   uploadImage?: TFileHandler["upload"];
diff --git a/packages/editor/src/core/extensions/custom-image/utils.ts b/packages/editor/src/core/extensions/custom-image/utils.ts
index 0711e094f1b..e2ed15be279 100644
--- a/packages/editor/src/core/extensions/custom-image/utils.ts
+++ b/packages/editor/src/core/extensions/custom-image/utils.ts
@@ -1,10 +1,11 @@
 import type { Editor } from "@tiptap/core";
+import { AlignCenter, AlignLeft, AlignRight, type LucideIcon } from "lucide-react";
 // constants
 import { CORE_EXTENSIONS } from "@/constants/extension";
 // helpers
 import { getExtensionStorage } from "@/helpers/get-extension-storage";
 // local imports
-import { ECustomImageAttributeNames, type Pixel, type TCustomImageAttributes } from "./types";
+import { ECustomImageAttributeNames, TCustomImageAlignment, type Pixel, type TCustomImageAttributes } from "./types";
 
 export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
   [ECustomImageAttributeNames.SOURCE]: null,
@@ -12,6 +13,7 @@ export const DEFAULT_CUSTOM_IMAGE_ATTRIBUTES: TCustomImageAttributes = {
   [ECustomImageAttributeNames.WIDTH]: "35%",
   [ECustomImageAttributeNames.HEIGHT]: "auto",
   [ECustomImageAttributeNames.ASPECT_RATIO]: null,
+  [ECustomImageAttributeNames.ALIGNMENT]: "left",
 };
 
 export const getImageComponentImageFileMap = (editor: Editor) =>
@@ -31,3 +33,25 @@ export const ensurePixelString = <TDefault>(
 
   return value;
 };
+
+export const IMAGE_ALIGNMENT_OPTIONS: {
+  label: string;
+  value: TCustomImageAlignment;
+  icon: LucideIcon;
+}[] = [
+  {
+    label: "Left",
+    value: "left",
+    icon: AlignLeft,
+  },
+  {
+    label: "Center",
+    value: "center",
+    icon: AlignCenter,
+  },
+  {
+    label: "Right",
+    value: "right",
+    icon: AlignRight,
+  },
+];
diff --git a/packages/editor/src/core/hooks/use-outside-click-detector.ts b/packages/editor/src/core/hooks/use-outside-click-detector.ts
new file mode 100644
index 00000000000..04ebc3c6fdb
--- /dev/null
+++ b/packages/editor/src/core/hooks/use-outside-click-detector.ts
@@ -0,0 +1,29 @@
+import React, { useEffect } from "react";
+
+export const useOutsideClickDetector = (
+  ref: React.RefObject<HTMLElement>,
+  callback: () => void,
+  useCapture = false
+) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as Node)) {
+      // check for the closest element with attribute name data-prevent-outside-click
+      const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
+        "[data-prevent-outside-click]"
+      );
+      // if the closest element with attribute name data-prevent-outside-click is found, return
+      if (preventOutsideClickElement) {
+        return;
+      }
+      // else call the callback
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick, useCapture);
+    return () => {
+      document.removeEventListener("mousedown", handleClick, useCapture);
+    };
+  });
+};
diff --git a/packages/editor/src/core/types/config.ts b/packages/editor/src/core/types/config.ts
index 60ccfa84123..7ef685ad02d 100644
--- a/packages/editor/src/core/types/config.ts
+++ b/packages/editor/src/core/types/config.ts
@@ -3,6 +3,7 @@ import { TWebhookConnectionQueryParams } from "@plane/types";
 
 export type TReadOnlyFileHandler = {
   checkIfAssetExists: (assetId: string) => Promise<boolean>;
+  getAssetDownloadSrc: (path: string) => Promise<string>;
   getAssetSrc: (path: string) => Promise<string>;
   restore: (assetSrc: string) => Promise<void>;
 };
diff --git a/packages/utils/src/editor.ts b/packages/utils/src/editor.ts
index 1bdf3a50419..fb15edd078f 100644
--- a/packages/utils/src/editor.ts
+++ b/packages/utils/src/editor.ts
@@ -22,6 +22,21 @@ export const getEditorAssetSrc = (args: TEditorSrcArgs): string | undefined => {
   return url;
 };
 
+/**
+ * @description generate the file source using assetId
+ * @param {TEditorSrcArgs} args
+ */
+export const getEditorAssetDownloadSrc = (args: TEditorSrcArgs): string | undefined => {
+  const { assetId, projectId, workspaceSlug } = args;
+  let url: string | undefined = "";
+  if (projectId) {
+    url = getFileURL(`/api/assets/v2/workspaces/${workspaceSlug}/projects/${projectId}/download/${assetId}/`);
+  } else {
+    url = getFileURL(`/api/assets/v2/workspaces/${workspaceSlug}/download/${assetId}/`);
+  }
+  return url;
+};
+
 export const getTextContent = (jsx: JSX.Element | React.ReactNode | null | undefined): string => {
   if (!jsx) return "";
 
diff --git a/web/core/hooks/editor/use-editor-config.ts b/web/core/hooks/editor/use-editor-config.ts
index 7e5692b07b5..466ff7d9518 100644
--- a/web/core/hooks/editor/use-editor-config.ts
+++ b/web/core/hooks/editor/use-editor-config.ts
@@ -2,7 +2,7 @@ import { useCallback } from "react";
 // plane editor
 import { TFileHandler, TReadOnlyFileHandler } from "@plane/editor";
 // helpers
-import { getEditorAssetSrc } from "@plane/utils";
+import { getEditorAssetDownloadSrc, getEditorAssetSrc } from "@plane/utils";
 // hooks
 import { useEditorAsset } from "@/hooks/store";
 // plane web hooks
@@ -33,6 +33,20 @@ export const useEditorConfig = () => {
           const res = await fileService.checkIfAssetExists(workspaceSlug, assetId);
           return res?.exists ?? false;
         },
+        getAssetDownloadSrc: async (path) => {
+          if (!path) return "";
+          if (path?.startsWith("http")) {
+            return path;
+          } else {
+            return (
+              getEditorAssetDownloadSrc({
+                assetId: path,
+                projectId,
+                workspaceSlug,
+              }) ?? ""
+            );
+          }
+        },
         getAssetSrc: async (path) => {
           if (!path) return "";
           if (path?.startsWith("http")) {

From ec8636a75dbb8f544eac25f937dc542f666fd534 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 23 Jun 2025 15:22:50 +0530
Subject: [PATCH 06/11] chore: render image full screen modal in a portal

---
 .../custom-image/components/block.tsx         |   8 +-
 .../components/toolbar/full-screen.tsx        | 246 +----------------
 .../components/toolbar/full-screen/index.ts   |   1 +
 .../components/toolbar/full-screen/modal.tsx  | 256 ++++++++++++++++++
 .../components/toolbar/full-screen/root.tsx   |  43 +++
 space/app/layout.tsx                          |   1 +
 web/app/layout.tsx                            |   1 +
 7 files changed, 317 insertions(+), 239 deletions(-)
 create mode 100644 packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts
 create mode 100644 packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
 create mode 100644 packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx

diff --git a/packages/editor/src/core/extensions/custom-image/components/block.tsx b/packages/editor/src/core/extensions/custom-image/components/block.tsx
index 30039d26850..a0e85960c04 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -201,7 +201,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // show the image upload status only when the resolvedImageSrc is not ready
   const showUploadStatus = !resolvedImageSrc;
   // show the image utils only if the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
-  const showImageUtils = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete;
+  const showImageToolbar = resolvedImageSrc && resolvedDownloadSrc && initialResizeComplete;
   // show the image resizer only if the editor is editable, the remote image's (post upload) src is set and the initial resize is complete (but not while we're showing the preview imageFromFileSystem)
   const showImageResizer = editor.isEditable && resolvedImageSrc && initialResizeComplete;
   // show the preview image from the file system if the remote image's src is not set
@@ -210,8 +210,8 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   return (
     <div
       className={cn("w-fit max-w-full transition-all", {
-        "mx-auto": nodeAlignment === "center",
-        "ml-auto": nodeAlignment === "right",
+        "ml-[50%] -translate-x-1/2": nodeAlignment === "center",
+        "ml-[100%] -translate-x-full": nodeAlignment === "right",
       })}
     >
       <div
@@ -276,7 +276,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
           }}
         />
         {showUploadStatus && node.attrs.id && <ImageUploadStatus editor={editor} nodeId={node.attrs.id} />}
-        {showImageUtils && (
+        {showImageToolbar && (
           <ImageToolbarRoot
             alignment={nodeAlignment ?? "left"}
             width={size.width}
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
index c4fa6707873..10d9141c6e0 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
@@ -1,8 +1,9 @@
-import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { Maximize } from "lucide-react";
+import { useEffect, useState } from "react";
 // plane imports
 import { Tooltip } from "@plane/ui";
-import { cn } from "@plane/utils";
+// local imports
+import { ImageFullScreenModal } from "./full-screen/modal";
 
 type Props = {
   image: {
@@ -14,251 +15,26 @@ type Props = {
   toggleToolbarViewStatus: (val: boolean) => void;
 };
 
-const MIN_ZOOM = 0.5;
-const MAX_ZOOM = 2;
-const ZOOM_SPEED = 0.05;
-const ZOOM_STEPS = [0.5, 1, 1.5, 2];
-
 export const ImageFullScreenAction: React.FC<Props> = (props) => {
   const { image, toggleToolbarViewStatus } = props;
   // state
   const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
-  const [magnification, setMagnification] = useState<number>(1);
-  const [initialMagnification, setInitialMagnification] = useState(1);
-  const [isDragging, setIsDragging] = useState(false);
-  // refs
-  const dragStart = useRef({ x: 0, y: 0 });
-  const dragOffset = useRef({ x: 0, y: 0 });
-  const modalRef = useRef<HTMLDivElement>(null);
-  const imgRef = useRef<HTMLImageElement | null>(null);
   // derived values
   const { src, width, aspectRatio } = image;
 
-  const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
-
-  const setImageRef = useCallback(
-    (node: HTMLImageElement | null) => {
-      if (!node || !isFullScreenEnabled) return;
-
-      imgRef.current = node;
-
-      const viewportWidth = window.innerWidth * 0.9;
-      const viewportHeight = window.innerHeight * 0.75;
-      const imageWidth = widthInNumber;
-      const imageHeight = imageWidth / aspectRatio;
-
-      const widthRatio = viewportWidth / imageWidth;
-      const heightRatio = viewportHeight / imageHeight;
-
-      setInitialMagnification(Math.min(widthRatio, heightRatio));
-      setMagnification(1);
-
-      // Reset image position
-      node.style.left = "0px";
-      node.style.top = "0px";
-    },
-    [isFullScreenEnabled, widthInNumber, aspectRatio]
-  );
-
-  const handleClose = useCallback(() => {
-    if (isDragging) return;
-    setIsFullScreenEnabled(false);
-    setMagnification(1);
-    setInitialMagnification(1);
-  }, [isDragging]);
-
-  const handleMagnification = useCallback((direction: "increase" | "decrease") => {
-    setMagnification((prev) => {
-      // Find the appropriate target zoom level based on current magnification
-      let targetZoom: number;
-      if (direction === "increase") {
-        targetZoom = ZOOM_STEPS.find((step) => step > prev) ?? MAX_ZOOM;
-      } else {
-        // Reverse the array to find the next lower step
-        targetZoom = [...ZOOM_STEPS].reverse().find((step) => step < prev) ?? MIN_ZOOM;
-      }
-
-      // Reset position when zoom matches initial magnification
-      if (targetZoom === 1 && imgRef.current) {
-        imgRef.current.style.left = "0px";
-        imgRef.current.style.top = "0px";
-      }
-
-      return targetZoom;
-    });
-  }, []);
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent) => {
-      if (e.key === "Escape" || e.key === "+" || e.key === "=" || e.key === "-") {
-        e.preventDefault();
-        e.stopPropagation();
-
-        if (e.key === "Escape") handleClose();
-        if (e.key === "+" || e.key === "=") handleMagnification("increase");
-        if (e.key === "-") handleMagnification("decrease");
-      }
-    },
-    [handleClose, handleMagnification]
-  );
-
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (!imgRef.current) return;
-
-    const imgWidth = imgRef.current.offsetWidth * magnification;
-    const imgHeight = imgRef.current.offsetHeight * magnification;
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-
-    if (imgWidth > viewportWidth || imgHeight > viewportHeight) {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsDragging(true);
-      dragStart.current = { x: e.clientX, y: e.clientY };
-      dragOffset.current = {
-        x: parseInt(imgRef.current.style.left || "0"),
-        y: parseInt(imgRef.current.style.top || "0"),
-      };
-    }
-  };
-
-  const handleMouseMove = useCallback(
-    (e: MouseEvent) => {
-      if (!isDragging || !imgRef.current) return;
-
-      const dx = e.clientX - dragStart.current.x;
-      const dy = e.clientY - dragStart.current.y;
-
-      // Apply the scale factor to the drag movement
-      const scaledDx = dx / magnification;
-      const scaledDy = dy / magnification;
-
-      imgRef.current.style.left = `${dragOffset.current.x + scaledDx}px`;
-      imgRef.current.style.top = `${dragOffset.current.y + scaledDy}px`;
-    },
-    [isDragging, magnification]
-  );
-
-  const handleMouseUp = useCallback(() => {
-    if (!isDragging || !imgRef.current) return;
-    setIsDragging(false);
-  }, [isDragging]);
-
-  const handleWheel = useCallback(
-    (e: WheelEvent) => {
-      if (!imgRef.current || !isFullScreenEnabled) return;
-
-      e.preventDefault();
-
-      // Handle pinch-to-zoom
-      if (e.ctrlKey) {
-        const delta = e.deltaY;
-        setMagnification((prev) => {
-          const newZoom = prev * (1 - delta * ZOOM_SPEED);
-          const clampedZoom = Math.min(Math.max(newZoom, MIN_ZOOM), MAX_ZOOM);
-
-          // Reset position when zoom matches initial magnification
-          if (clampedZoom === 1 && imgRef.current) {
-            imgRef.current.style.left = "0px";
-            imgRef.current.style.top = "0px";
-          }
-
-          return clampedZoom;
-        });
-        return;
-      }
-    },
-    [isFullScreenEnabled]
-  );
-
-  // Event listeners
-  useEffect(() => {
-    if (!isFullScreenEnabled) return;
-
-    document.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-    window.addEventListener("wheel", handleWheel, { passive: false });
-
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-      window.removeEventListener("wheel", handleWheel);
-    };
-  }, [isFullScreenEnabled, handleKeyDown, handleMouseMove, handleMouseUp, handleWheel]);
-
   useEffect(() => {
     toggleToolbarViewStatus(isFullScreenEnabled);
   }, [isFullScreenEnabled, toggleToolbarViewStatus]);
 
   return (
     <>
-      <div
-        className={cn("fixed inset-0 size-full z-20 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
-          "opacity-100 pointer-events-auto": isFullScreenEnabled,
-          "cursor-default": !isDragging,
-          "cursor-grabbing": isDragging,
-        })}
-      >
-        <div
-          ref={modalRef}
-          onMouseDown={(e) => e.target === modalRef.current && handleClose()}
-          className="relative size-full grid place-items-center overflow-hidden"
-        >
-          <button
-            type="button"
-            onClick={handleClose}
-            className="absolute top-10 right-10 size-8 grid place-items-center"
-          >
-            <X className="size-8 text-white/60 hover:text-white transition-colors" />
-          </button>
-          <img
-            ref={setImageRef}
-            src={src}
-            className="read-only-image rounded-lg"
-            style={{
-              width: `${widthInNumber * initialMagnification}px`,
-              maxWidth: "none",
-              maxHeight: "none",
-              aspectRatio,
-              position: "relative",
-              transform: `scale(${magnification})`,
-              transformOrigin: "center",
-              transition: "width 0.2s ease, transform 0.2s ease",
-            }}
-            onMouseDown={handleMouseDown}
-          />
-          <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
-            <div className="flex items-center">
-              <button
-                type="button"
-                onClick={() => handleMagnification("decrease")}
-                className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
-                disabled={magnification <= MIN_ZOOM}
-              >
-                <Minus className="size-4" />
-              </button>
-              <span className="text-sm w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
-              <button
-                type="button"
-                onClick={() => handleMagnification("increase")}
-                className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
-                disabled={magnification >= MAX_ZOOM}
-              >
-                <Plus className="size-4" />
-              </button>
-            </div>
-            <button
-              type="button"
-              onClick={() => window.open(src, "_blank")}
-              className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
-            >
-              <ExternalLink className="size-4" />
-            </button>
-          </div>
-        </div>
-      </div>
+      <ImageFullScreenModal
+        aspectRatio={aspectRatio}
+        isFullScreenEnabled={isFullScreenEnabled}
+        src={src}
+        width={width}
+        toggleFullScreenMode={setIsFullScreenEnabled}
+      />
       <Tooltip tooltipContent="View in full screen">
         <button
           type="button"
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts
new file mode 100644
index 00000000000..1efe34c51ec
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
new file mode 100644
index 00000000000..97fc30fad74
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -0,0 +1,256 @@
+import { ExternalLink, Minus, Plus, X } from "lucide-react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import ReactDOM from "react-dom";
+// plane imports
+import { cn } from "@plane/utils";
+
+const MIN_ZOOM = 0.5;
+const MAX_ZOOM = 2;
+const ZOOM_SPEED = 0.05;
+const ZOOM_STEPS = [0.5, 1, 1.5, 2];
+
+type Props = {
+  aspectRatio: number;
+  isFullScreenEnabled: boolean;
+  src: string;
+  toggleFullScreenMode: (val: boolean) => void;
+  width: string;
+};
+
+const ImageFullScreenModalWithoutPortal = (props: Props) => {
+  const { aspectRatio, isFullScreenEnabled, src, toggleFullScreenMode, width } = props;
+  // refs
+  const dragStart = useRef({ x: 0, y: 0 });
+  const dragOffset = useRef({ x: 0, y: 0 });
+
+  const [magnification, setMagnification] = useState<number>(1);
+  const [initialMagnification, setInitialMagnification] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+  const imgRef = useRef<HTMLImageElement | null>(null);
+
+  const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
+
+  const setImageRef = useCallback(
+    (node: HTMLImageElement | null) => {
+      if (!node || !isFullScreenEnabled) return;
+
+      imgRef.current = node;
+
+      const viewportWidth = window.innerWidth * 0.9;
+      const viewportHeight = window.innerHeight * 0.75;
+      const imageWidth = widthInNumber;
+      const imageHeight = imageWidth / aspectRatio;
+
+      const widthRatio = viewportWidth / imageWidth;
+      const heightRatio = viewportHeight / imageHeight;
+
+      setInitialMagnification(Math.min(widthRatio, heightRatio));
+      setMagnification(1);
+
+      // Reset image position
+      node.style.left = "0px";
+      node.style.top = "0px";
+    },
+    [isFullScreenEnabled, widthInNumber, aspectRatio]
+  );
+
+  const handleClose = useCallback(() => {
+    if (isDragging) return;
+    toggleFullScreenMode(false);
+    setMagnification(1);
+    setInitialMagnification(1);
+  }, [isDragging, toggleFullScreenMode]);
+
+  const handleMagnification = useCallback((direction: "increase" | "decrease") => {
+    setMagnification((prev) => {
+      // Find the appropriate target zoom level based on current magnification
+      let targetZoom: number;
+      if (direction === "increase") {
+        targetZoom = ZOOM_STEPS.find((step) => step > prev) ?? MAX_ZOOM;
+      } else {
+        // Reverse the array to find the next lower step
+        targetZoom = [...ZOOM_STEPS].reverse().find((step) => step < prev) ?? MIN_ZOOM;
+      }
+
+      // Reset position when zoom matches initial magnification
+      if (targetZoom === 1 && imgRef.current) {
+        imgRef.current.style.left = "0px";
+        imgRef.current.style.top = "0px";
+      }
+
+      return targetZoom;
+    });
+  }, []);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "+" || e.key === "=" || e.key === "-") {
+        e.preventDefault();
+        e.stopPropagation();
+
+        if (e.key === "Escape") handleClose();
+        if (e.key === "+" || e.key === "=") handleMagnification("increase");
+        if (e.key === "-") handleMagnification("decrease");
+      }
+    },
+    [handleClose, handleMagnification]
+  );
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (!imgRef.current) return;
+
+    const imgWidth = imgRef.current.offsetWidth * magnification;
+    const imgHeight = imgRef.current.offsetHeight * magnification;
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    if (imgWidth > viewportWidth || imgHeight > viewportHeight) {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(true);
+      dragStart.current = { x: e.clientX, y: e.clientY };
+      dragOffset.current = {
+        x: parseInt(imgRef.current.style.left || "0"),
+        y: parseInt(imgRef.current.style.top || "0"),
+      };
+    }
+  };
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging || !imgRef.current) return;
+
+      const dx = e.clientX - dragStart.current.x;
+      const dy = e.clientY - dragStart.current.y;
+
+      // Apply the scale factor to the drag movement
+      const scaledDx = dx / magnification;
+      const scaledDy = dy / magnification;
+
+      imgRef.current.style.left = `${dragOffset.current.x + scaledDx}px`;
+      imgRef.current.style.top = `${dragOffset.current.y + scaledDy}px`;
+    },
+    [isDragging, magnification]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging || !imgRef.current) return;
+    setIsDragging(false);
+  }, [isDragging]);
+
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      if (!imgRef.current || !isFullScreenEnabled) return;
+
+      e.preventDefault();
+
+      // Handle pinch-to-zoom
+      if (e.ctrlKey) {
+        const delta = e.deltaY;
+        setMagnification((prev) => {
+          const newZoom = prev * (1 - delta * ZOOM_SPEED);
+          const clampedZoom = Math.min(Math.max(newZoom, MIN_ZOOM), MAX_ZOOM);
+
+          // Reset position when zoom matches initial magnification
+          if (clampedZoom === 1 && imgRef.current) {
+            imgRef.current.style.left = "0px";
+            imgRef.current.style.top = "0px";
+          }
+
+          return clampedZoom;
+        });
+        return;
+      }
+    },
+    [isFullScreenEnabled]
+  );
+
+  // Event listeners
+  useEffect(() => {
+    if (!isFullScreenEnabled) return;
+
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    window.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+      window.removeEventListener("wheel", handleWheel);
+    };
+  }, [isFullScreenEnabled, handleKeyDown, handleMouseMove, handleMouseUp, handleWheel]);
+
+  if (!isFullScreenEnabled) return null;
+
+  return (
+    <div
+      className={cn("fixed inset-0 size-full z-30 bg-black/90 cursor-default", {
+        "cursor-grabbing": isDragging,
+      })}
+    >
+      <div
+        ref={modalRef}
+        onMouseDown={(e) => e.target === modalRef.current && handleClose()}
+        className="relative size-full grid place-items-center overflow-hidden"
+      >
+        <button type="button" onClick={handleClose} className="absolute top-10 right-10 size-8 grid place-items-center">
+          <X className="size-8 text-white/60 hover:text-white transition-colors" />
+        </button>
+        <img
+          ref={setImageRef}
+          src={src}
+          className="read-only-image rounded-lg"
+          style={{
+            width: `${widthInNumber * initialMagnification}px`,
+            maxWidth: "none",
+            maxHeight: "none",
+            aspectRatio,
+            position: "relative",
+            transform: `scale(${magnification})`,
+            transformOrigin: "center",
+            transition: "width 0.2s ease, transform 0.2s ease",
+          }}
+          onMouseDown={handleMouseDown}
+        />
+        <div className="fixed bottom-10 left-1/2 -translate-x-1/2 flex items-center justify-center gap-1 rounded-md border border-white/20 py-2 divide-x divide-white/20 bg-black">
+          <div className="flex items-center">
+            <button
+              type="button"
+              onClick={() => handleMagnification("decrease")}
+              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              disabled={magnification <= MIN_ZOOM}
+            >
+              <Minus className="size-4" />
+            </button>
+            <span className="text-sm w-12 text-center text-white">{Math.round(100 * magnification)}%</span>
+            <button
+              type="button"
+              onClick={() => handleMagnification("increase")}
+              className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
+              disabled={magnification >= MAX_ZOOM}
+            >
+              <Plus className="size-4" />
+            </button>
+          </div>
+          <button
+            type="button"
+            onClick={() => window.open(src, "_blank")}
+            className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+          >
+            <ExternalLink className="size-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const ImageFullScreenModal: React.FC<Props> = (props) => {
+  let modal = <ImageFullScreenModalWithoutPortal {...props} />;
+  const portal = document.querySelector("#editor-portal");
+  if (portal) modal = ReactDOM.createPortal(modal, portal);
+  return modal;
+};
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
new file mode 100644
index 00000000000..4dffc21707e
--- /dev/null
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -0,0 +1,43 @@
+import { Maximize } from "lucide-react";
+// local imports
+import { ImageFullScreenModal } from "./modal";
+
+type Props = {
+  image: {
+    src: string;
+    height: string;
+    width: string;
+    aspectRatio: number;
+  };
+  isOpen: boolean;
+  toggleFullScreenMode: (val: boolean) => void;
+};
+
+export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
+  const { image, isOpen: isFullScreenEnabled, toggleFullScreenMode } = props;
+  // derived values
+  const { src, width, aspectRatio } = image;
+
+  return (
+    <>
+      <ImageFullScreenModal
+        aspectRatio={aspectRatio}
+        isFullScreenEnabled={isFullScreenEnabled}
+        src={src}
+        width={width}
+        toggleFullScreenMode={toggleFullScreenMode}
+      />
+      <button
+        type="button"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          toggleFullScreenMode(true);
+        }}
+        className="size-5 grid place-items-center hover:bg-black/40 text-white rounded transition-colors"
+      >
+        <Maximize className="size-3" />
+      </button>
+    </>
+  );
+};
diff --git a/space/app/layout.tsx b/space/app/layout.tsx
index 96a19227371..d0c7435da93 100644
--- a/space/app/layout.tsx
+++ b/space/app/layout.tsx
@@ -33,6 +33,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <meta name="robots" content="noindex, nofollow" />
       </head>
       <body>
+        <div id="editor-portal" />
         <AppProvider>
           <>{children}</>
         </AppProvider>
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index fc454e54bb0..433dea7f915 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -80,6 +80,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
       </head>
       <body>
         <div id="context-menu-portal" />
+        <div id="editor-portal" />
         <AppProvider>
           <div
             className={cn(

From efb511bd943c76774d7f9e501ae12b1af58eb9ff Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Mon, 23 Jun 2025 15:25:37 +0530
Subject: [PATCH 07/11] chore: add missing attribute to image extension

---
 packages/editor/src/core/extensions/image/extension-config.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/editor/src/core/extensions/image/extension-config.tsx b/packages/editor/src/core/extensions/image/extension-config.tsx
index 6dbad2d24d6..7456e3dfb06 100644
--- a/packages/editor/src/core/extensions/image/extension-config.tsx
+++ b/packages/editor/src/core/extensions/image/extension-config.tsx
@@ -19,6 +19,9 @@ export const ImageExtensionConfig = BaseImageExtension.extend<
       aspectRatio: {
         default: null,
       },
+      alignment: {
+        default: "left",
+      },
     };
   },
 });

From 0127b7dc72a194ce5a047e4721160e96916f9913 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 24 Jun 2025 14:16:54 +0530
Subject: [PATCH 08/11] chore: minor bugs and improvements

---
 .../components/toolbar/full-screen.tsx        |  1 +
 .../components/toolbar/full-screen/modal.tsx  | 16 +++++++--
 .../core/hooks/use-outside-click-detector.ts  | 33 ++++++++++---------
 3 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
index 10d9141c6e0..d21194b48a8 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
@@ -44,6 +44,7 @@ export const ImageFullScreenAction: React.FC<Props> = (props) => {
             setIsFullScreenEnabled(true);
           }}
           className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+          aria-label="View image in full screen"
         >
           <Maximize className="size-3" />
         </button>
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index 97fc30fad74..d3e80688804 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -29,7 +29,10 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
   const modalRef = useRef<HTMLDivElement>(null);
   const imgRef = useRef<HTMLImageElement | null>(null);
 
-  const widthInNumber = useMemo(() => Number(width?.replace("px", "")), [width]);
+  const widthInNumber = useMemo(() => {
+    if (!width) return 0;
+    return Number(width.replace("px", ""));
+  }, [width]);
 
   const setImageRef = useCallback(
     (node: HTMLImageElement | null) => {
@@ -146,7 +149,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
       e.preventDefault();
 
       // Handle pinch-to-zoom
-      if (e.ctrlKey) {
+      if (e.ctrlKey || e.metaKey) {
         const delta = e.deltaY;
         setMagnification((prev) => {
           const newZoom = prev * (1 - delta * ZOOM_SPEED);
@@ -190,6 +193,9 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
       className={cn("fixed inset-0 size-full z-30 bg-black/90 cursor-default", {
         "cursor-grabbing": isDragging,
       })}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Fullscreen image viewer"
     >
       <div
         ref={modalRef}
@@ -251,6 +257,10 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
 export const ImageFullScreenModal: React.FC<Props> = (props) => {
   let modal = <ImageFullScreenModalWithoutPortal {...props} />;
   const portal = document.querySelector("#editor-portal");
-  if (portal) modal = ReactDOM.createPortal(modal, portal);
+  if (portal) {
+    modal = ReactDOM.createPortal(modal, portal);
+  } else {
+    console.warn("Portal element #editor-portal not found. Rendering inline.");
+  }
   return modal;
 };
diff --git a/packages/editor/src/core/hooks/use-outside-click-detector.ts b/packages/editor/src/core/hooks/use-outside-click-detector.ts
index 04ebc3c6fdb..04a3a4d6b28 100644
--- a/packages/editor/src/core/hooks/use-outside-click-detector.ts
+++ b/packages/editor/src/core/hooks/use-outside-click-detector.ts
@@ -1,29 +1,32 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 
 export const useOutsideClickDetector = (
   ref: React.RefObject<HTMLElement>,
   callback: () => void,
   useCapture = false
 ) => {
-  const handleClick = (event: MouseEvent) => {
-    if (ref.current && !ref.current.contains(event.target as Node)) {
-      // check for the closest element with attribute name data-prevent-outside-click
-      const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
-        "[data-prevent-outside-click]"
-      );
-      // if the closest element with attribute name data-prevent-outside-click is found, return
-      if (preventOutsideClickElement) {
-        return;
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        // check for the closest element with attribute name data-prevent-outside-click
+        const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
+          "[data-prevent-outside-click]"
+        );
+        // if the closest element with attribute name data-prevent-outside-click is found, return
+        if (preventOutsideClickElement) {
+          return;
+        }
+        // else call the callback
+        callback();
       }
-      // else call the callback
-      callback();
-    }
-  };
+    },
+    [callback, ref]
+  );
 
   useEffect(() => {
     document.addEventListener("mousedown", handleClick, useCapture);
     return () => {
       document.removeEventListener("mousedown", handleClick, useCapture);
     };
-  });
+  }, [handleClick, useCapture]);
 };

From 52c456aead30889e4472517de5e145ddb9fc74ae Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 24 Jun 2025 14:53:12 +0530
Subject: [PATCH 09/11] chore: add aria attributes

---
 .../components/toolbar/download.tsx           | 10 ++--
 .../components/toolbar/full-screen.tsx        | 54 -------------------
 .../components/toolbar/full-screen/modal.tsx  | 23 ++++++--
 .../components/toolbar/full-screen/root.tsx   | 45 ++++++++++------
 .../custom-image/components/toolbar/root.tsx  |  4 +-
 5 files changed, 56 insertions(+), 80 deletions(-)
 delete mode 100644 packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx

diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
index ee8fc7f9279..2f0a665ae5d 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/download.tsx
@@ -11,14 +11,14 @@ export const ImageDownloadAction: React.FC<Props> = (props) => {
 
   return (
     <Tooltip tooltipContent="Download">
-      <a
-        href={src}
+      <button
+        type="button"
+        onClick={() => window.open(src, "_blank")}
         className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
-        target="_blank"
-        rel="noreferrer noopener"
+        aria-label="Download image"
       >
         <Download className="size-3" />
-      </a>
+      </button>
     </Tooltip>
   );
 };
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
deleted file mode 100644
index d21194b48a8..00000000000
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Maximize } from "lucide-react";
-import { useEffect, useState } from "react";
-// plane imports
-import { Tooltip } from "@plane/ui";
-// local imports
-import { ImageFullScreenModal } from "./full-screen/modal";
-
-type Props = {
-  image: {
-    width: string;
-    height: string;
-    aspectRatio: number;
-    src: string;
-  };
-  toggleToolbarViewStatus: (val: boolean) => void;
-};
-
-export const ImageFullScreenAction: React.FC<Props> = (props) => {
-  const { image, toggleToolbarViewStatus } = props;
-  // state
-  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
-  // derived values
-  const { src, width, aspectRatio } = image;
-
-  useEffect(() => {
-    toggleToolbarViewStatus(isFullScreenEnabled);
-  }, [isFullScreenEnabled, toggleToolbarViewStatus]);
-
-  return (
-    <>
-      <ImageFullScreenModal
-        aspectRatio={aspectRatio}
-        isFullScreenEnabled={isFullScreenEnabled}
-        src={src}
-        width={width}
-        toggleFullScreenMode={setIsFullScreenEnabled}
-      />
-      <Tooltip tooltipContent="View in full screen">
-        <button
-          type="button"
-          onClick={(e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            setIsFullScreenEnabled(true);
-          }}
-          className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
-          aria-label="View image in full screen"
-        >
-          <Maximize className="size-3" />
-        </button>
-      </Tooltip>
-    </>
-  );
-};
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index d3e80688804..e49ee5ce9a1 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -1,4 +1,4 @@
-import { ExternalLink, Minus, Plus, X } from "lucide-react";
+import { Download, ExternalLink, Minus, Plus, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 // plane imports
@@ -12,13 +12,14 @@ const ZOOM_STEPS = [0.5, 1, 1.5, 2];
 type Props = {
   aspectRatio: number;
   isFullScreenEnabled: boolean;
+  downloadSrc: string;
   src: string;
   toggleFullScreenMode: (val: boolean) => void;
   width: string;
 };
 
 const ImageFullScreenModalWithoutPortal = (props: Props) => {
-  const { aspectRatio, isFullScreenEnabled, src, toggleFullScreenMode, width } = props;
+  const { aspectRatio, isFullScreenEnabled, downloadSrc, src, toggleFullScreenMode, width } = props;
   // refs
   const dragStart = useRef({ x: 0, y: 0 });
   const dragOffset = useRef({ x: 0, y: 0 });
@@ -202,7 +203,12 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
         onMouseDown={(e) => e.target === modalRef.current && handleClose()}
         className="relative size-full grid place-items-center overflow-hidden"
       >
-        <button type="button" onClick={handleClose} className="absolute top-10 right-10 size-8 grid place-items-center">
+        <button
+          type="button"
+          onClick={handleClose}
+          className="absolute top-10 right-10 size-8 grid place-items-center"
+          aria-label="Close image viewer"
+        >
           <X className="size-8 text-white/60 hover:text-white transition-colors" />
         </button>
         <img
@@ -228,6 +234,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
               onClick={() => handleMagnification("decrease")}
               className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
               disabled={magnification <= MIN_ZOOM}
+              aria-label="Zoom out"
             >
               <Minus className="size-4" />
             </button>
@@ -237,14 +244,24 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
               onClick={() => handleMagnification("increase")}
               className="size-6 grid place-items-center text-white/60 hover:text-white disabled:text-white/30 transition-colors duration-200"
               disabled={magnification >= MAX_ZOOM}
+              aria-label="Zoom in"
             >
               <Plus className="size-4" />
             </button>
           </div>
+          <button
+            type="button"
+            onClick={() => window.open(downloadSrc, "_blank")}
+            className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+            aria-label="Download image"
+          >
+            <Download className="size-4" />
+          </button>
           <button
             type="button"
             onClick={() => window.open(src, "_blank")}
             className="flex-shrink-0 size-8 grid place-items-center text-white/60 hover:text-white transition-colors duration-200"
+            aria-label="Open image in new tab"
           >
             <ExternalLink className="size-4" />
           </button>
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
index 4dffc21707e..2108bfeaaee 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/root.tsx
@@ -1,22 +1,31 @@
 import { Maximize } from "lucide-react";
+import { useEffect, useState } from "react";
+// plane imports
+import { Tooltip } from "@plane/ui";
 // local imports
 import { ImageFullScreenModal } from "./modal";
 
 type Props = {
   image: {
+    downloadSrc: string;
     src: string;
     height: string;
     width: string;
     aspectRatio: number;
   };
-  isOpen: boolean;
-  toggleFullScreenMode: (val: boolean) => void;
+  toggleToolbarViewStatus: (val: boolean) => void;
 };
 
 export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
-  const { image, isOpen: isFullScreenEnabled, toggleFullScreenMode } = props;
+  const { image, toggleToolbarViewStatus } = props;
+  // states
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(false);
   // derived values
-  const { src, width, aspectRatio } = image;
+  const { downloadSrc, src, width, aspectRatio } = image;
+
+  useEffect(() => {
+    toggleToolbarViewStatus(isFullScreenEnabled);
+  }, [isFullScreenEnabled, toggleToolbarViewStatus]);
 
   return (
     <>
@@ -24,20 +33,24 @@ export const ImageFullScreenActionRoot: React.FC<Props> = (props) => {
         aspectRatio={aspectRatio}
         isFullScreenEnabled={isFullScreenEnabled}
         src={src}
+        downloadSrc={downloadSrc}
         width={width}
-        toggleFullScreenMode={toggleFullScreenMode}
+        toggleFullScreenMode={setIsFullScreenEnabled}
       />
-      <button
-        type="button"
-        onClick={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          toggleFullScreenMode(true);
-        }}
-        className="size-5 grid place-items-center hover:bg-black/40 text-white rounded transition-colors"
-      >
-        <Maximize className="size-3" />
-      </button>
+      <Tooltip tooltipContent="View in full screen">
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setIsFullScreenEnabled(true);
+          }}
+          className="flex-shrink-0 h-full grid place-items-center text-white/60 hover:text-white transition-colors"
+          aria-label="View image in full screen"
+        >
+          <Maximize className="size-3" />
+        </button>
+      </Tooltip>
     </>
   );
 };
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
index d6c35664f77..06277fa252b 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx
@@ -5,7 +5,7 @@ import { cn } from "@plane/utils";
 import type { TCustomImageAlignment } from "../../types";
 import { ImageAlignmentAction } from "./alignment";
 import { ImageDownloadAction } from "./download";
-import { ImageFullScreenAction } from "./full-screen";
+import { ImageFullScreenActionRoot } from "./full-screen";
 
 type Props = {
   alignment: TCustomImageAlignment;
@@ -38,7 +38,7 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
           handleChange={handleAlignmentChange}
           toggleToolbarViewStatus={setShouldShowToolbar}
         />
-        <ImageFullScreenAction image={props} toggleToolbarViewStatus={setShouldShowToolbar} />
+        <ImageFullScreenActionRoot image={props} toggleToolbarViewStatus={setShouldShowToolbar} />
       </div>
     </>
   );

From 25c2f825661f5f7d1a42a978c173894cad642bb4 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 1 Jul 2025 17:23:29 +0530
Subject: [PATCH 10/11] chore: remove unnecessary file

---
 packages/editor/package.json                  |  1 +
 .../components/toolbar/alignment.tsx          |  3 +-
 .../core/hooks/use-outside-click-detector.ts  | 32 -------------------
 3 files changed, 2 insertions(+), 34 deletions(-)
 delete mode 100644 packages/editor/src/core/hooks/use-outside-click-detector.ts

diff --git a/packages/editor/package.json b/packages/editor/package.json
index c511d554f40..6071d908d39 100644
--- a/packages/editor/package.json
+++ b/packages/editor/package.json
@@ -36,6 +36,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "@hocuspocus/provider": "^2.15.0",
+    "@plane/hooks": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
     "@plane/utils": "*",
diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
index 782fef4d295..3790fa54712 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/alignment.tsx
@@ -1,9 +1,8 @@
 import { ChevronDown } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 // plane imports
+import { useOutsideClickDetector } from "@plane/hooks";
 import { Tooltip } from "@plane/ui";
-// hooks
-import { useOutsideClickDetector } from "@/hooks/use-outside-click-detector";
 // local imports
 import type { TCustomImageAlignment } from "../../types";
 import { IMAGE_ALIGNMENT_OPTIONS } from "../../utils";
diff --git a/packages/editor/src/core/hooks/use-outside-click-detector.ts b/packages/editor/src/core/hooks/use-outside-click-detector.ts
deleted file mode 100644
index 04a3a4d6b28..00000000000
--- a/packages/editor/src/core/hooks/use-outside-click-detector.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-
-export const useOutsideClickDetector = (
-  ref: React.RefObject<HTMLElement>,
-  callback: () => void,
-  useCapture = false
-) => {
-  const handleClick = useCallback(
-    (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        // check for the closest element with attribute name data-prevent-outside-click
-        const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
-          "[data-prevent-outside-click]"
-        );
-        // if the closest element with attribute name data-prevent-outside-click is found, return
-        if (preventOutsideClickElement) {
-          return;
-        }
-        // else call the callback
-        callback();
-      }
-    },
-    [callback, ref]
-  );
-
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClick, useCapture);
-    return () => {
-      document.removeEventListener("mousedown", handleClick, useCapture);
-    };
-  }, [handleClick, useCapture]);
-};

From bf30383eba730529901c592ecac8c87347514c3d Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Wed, 2 Jul 2025 15:35:46 +0530
Subject: [PATCH 11/11] fix: full screen modal z-index

---
 .../custom-image/components/toolbar/full-screen/modal.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
index 349b933c368..9a30908c2c1 100644
--- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen/modal.tsx
@@ -191,7 +191,7 @@ const ImageFullScreenModalWithoutPortal = (props: Props) => {
 
   return (
     <div
-      className={cn("fixed inset-0 size-full z-20 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
+      className={cn("fixed inset-0 size-full z-30 bg-black/90 opacity-0 pointer-events-none transition-opacity", {
         "opacity-100 pointer-events-auto editor-image-full-screen-modal": isFullScreenEnabled,
         "cursor-default": !isDragging,
         "cursor-grabbing": isDragging,