Skip to content

Commit

Permalink
fix: hide image tools in read-only mode (#571)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
jgeppert authored Aug 23, 2024
1 parent 6b4132c commit 590da50
Showing 1 changed file with 31 additions and 29 deletions.
60 changes: 31 additions & 29 deletions src/plugins/image/ImageEditor.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 590da50

Please sign in to comment.