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 0cf1f3b. * feat: hide image toolbar when `readOnly` is set
mdx-editor · Aug 23, 2024 · 590da50 · 590da50
1 parent 6b4132c
commit 590da50
Showing 1 changed file with 31 additions and 29 deletions.
diff --git 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