From 590da50275cfce3292144019ae263e5de4284fd4 Mon Sep 17 00:00:00 2001
From: Julian Geppert <75723794+jgeppert@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:03:08 +0200
Subject: [PATCH] fix: hide image tools in read-only mode (#571)

* feat: add `hideImageToolbar` option to imagePlugin

* Revert "feat: add `hideImageToolbar` option to imagePlugin"

This reverts commit 0cf1f3b090187cf265148f256a835dd680f2b54f.

* feat: hide image toolbar when `readOnly` is set
---
 src/plugins/image/ImageEditor.tsx | 60 ++++++++++++++++---------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/plugins/image/ImageEditor.tsx b/src/plugins/image/ImageEditor.tsx
index 6a567a86..b68fe16b 100644
--- a/src/plugins/image/ImageEditor.tsx
+++ b/src/plugins/image/ImageEditor.tsx
@@ -271,42 +271,44 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEd
         {draggable && isFocused && !disableImageResize && (
           <ImageResizer editor={editor} imageRef={imageRef} onResizeStart={onResizeStart} onResizeEnd={onResizeEnd} />
         )}
-        <div className={styles.editImageToolbar}>
-          <button
-            className={styles.iconButton}
-            type="button"
-            title={t('image.delete', 'Delete image')}
-            disabled={readOnly}
-            onClick={(e) => {
-              e.preventDefault()
-              editor.update(() => {
-                $getNodeByKey(nodeKey)?.remove()
-              })
-            }}
-          >
-            {iconComponentFor('delete_small')}
-          </button>
-          {!disableImageSettingsButton && (
+        {readOnly || (
+          <div className={styles.editImageToolbar}>
             <button
+              className={styles.iconButton}
               type="button"
-              className={classNames(styles.iconButton, styles.editImageButton)}
-              title={t('imageEditor.editImage', 'Edit image')}
+              title={t('image.delete', 'Delete image')}
               disabled={readOnly}
-              onClick={() => {
-                openEditImageDialog({
-                  nodeKey: nodeKey,
-                  initialValues: {
-                    src: !initialImagePath ? imageSource : initialImagePath,
-                    title: title ?? '',
-                    altText: alt ?? ''
-                  }
+              onClick={(e) => {
+                e.preventDefault()
+                editor.update(() => {
+                  $getNodeByKey(nodeKey)?.remove()
                 })
               }}
             >
-              {iconComponentFor('settings')}
+              {iconComponentFor('delete_small')}
             </button>
-          )}
-        </div>
+            {!disableImageSettingsButton && (
+              <button
+                type="button"
+                className={classNames(styles.iconButton, styles.editImageButton)}
+                title={t('imageEditor.editImage', 'Edit image')}
+                disabled={readOnly}
+                onClick={() => {
+                  openEditImageDialog({
+                    nodeKey: nodeKey,
+                    initialValues: {
+                      src: !initialImagePath ? imageSource : initialImagePath,
+                      title: title ?? '',
+                      altText: alt ?? ''
+                    }
+                  })
+                }}
+              >
+                {iconComponentFor('settings')}
+              </button>
+            )}
+          </div>
+        )}
       </div>
     </React.Suspense>
   ) : null