From 6e1734c86e44ec0d996263e8a87b7b36c41ccbe9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Wed, 30 Jul 2025 14:12:33 +0530
Subject: [PATCH] [WIKI-570] fix: image alignment for read only editor #7509

---
 .../custom-image/components/block.tsx          |  1 +
 .../custom-image/components/toolbar/root.tsx   | 18 ++++++++++++------
 2 files changed, 13 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 45c66f428..83a2a1226 100644
--- a/packages/editor/src/core/extensions/custom-image/components/block.tsx
+++ b/packages/editor/src/core/extensions/custom-image/components/block.tsx
@@ -280,6 +280,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
         {showImageToolbar && (
           <ImageToolbarRoot
             alignment={nodeAlignment ?? "left"}
+            editor={editor}
             width={size.width}
             height={size.height}
             aspectRatio={size.aspectRatio === null ? 1 : size.aspectRatio}
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 06277fa25..268da5f16 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,3 +1,4 @@
+import type { Editor } from "@tiptap/core";
 import { useState } from "react";
 // plane imports
 import { cn } from "@plane/utils";
@@ -9,6 +10,7 @@ import { ImageFullScreenActionRoot } from "./full-screen";
 
 type Props = {
   alignment: TCustomImageAlignment;
+  editor: Editor;
   width: string;
   height: string;
   aspectRatio: number;
@@ -18,9 +20,11 @@ type Props = {
 };
 
 export const ImageToolbarRoot: React.FC<Props> = (props) => {
-  const { alignment, downloadSrc, handleAlignmentChange } = props;
+  const { alignment, editor, downloadSrc, handleAlignmentChange } = props;
   // states
   const [shouldShowToolbar, setShouldShowToolbar] = useState(false);
+  // derived values
+  const isEditable = editor.isEditable;
 
   return (
     <>
@@ -33,11 +37,13 @@ export const ImageToolbarRoot: React.FC<Props> = (props) => {
         )}
       >
         <ImageDownloadAction src={downloadSrc} />
-        <ImageAlignmentAction
-          activeAlignment={alignment}
-          handleChange={handleAlignmentChange}
-          toggleToolbarViewStatus={setShouldShowToolbar}
-        />
+        {isEditable && (
+          <ImageAlignmentAction
+            activeAlignment={alignment}
+            handleChange={handleAlignmentChange}
+            toggleToolbarViewStatus={setShouldShowToolbar}
+          />
+        )}
         <ImageFullScreenActionRoot image={props} toggleToolbarViewStatus={setShouldShowToolbar} />
       </div>
     </>