diff --git a/src/examples/images.tsx b/src/examples/images.tsx index 1f4a09da..10923225 100644 --- a/src/examples/images.tsx +++ b/src/examples/images.tsx @@ -25,7 +25,10 @@ export const HtmlImage: Story<{ readOnly: boolean }> = ({ readOnly }) => { markdown={markdownWithHtmlImages} readOnly={readOnly} plugins={[ - imagePlugin({ imageUploadHandler: async () => Promise.resolve('https://picsum.photos/200/300') }), + imagePlugin({ + imageUploadHandler: async () => Promise.resolve('https://picsum.photos/200/300'), + disableImageSettingsButton: true + }), diffSourcePlugin(), toolbarPlugin({ toolbarContents: () => :) }) ]} diff --git a/src/plugins/image/ImageEditor.tsx b/src/plugins/image/ImageEditor.tsx index 5031d9e0..6b409f30 100644 --- a/src/plugins/image/ImageEditor.tsx +++ b/src/plugins/image/ImageEditor.tsx @@ -20,7 +20,7 @@ import { KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND } from 'lexical' -import { disableImageResize$, imagePreviewHandler$, openEditImageDialog$ } from '.' +import { disableImageResize$, disableImageSettingsButton$, imagePreviewHandler$, openEditImageDialog$ } from '.' import styles from '../../styles/ui.module.css' import { iconComponentFor$, readOnly$, useTranslation } from '../core' import { $isImageNode } from './ImageNode' @@ -84,8 +84,9 @@ function LazyImage({ } export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEditorProps): JSX.Element | null { - const [disableImageResize, imagePreviewHandler, iconComponentFor, readOnly] = useCellValues( + const [disableImageResize, disableImageSettingsButton, imagePreviewHandler, iconComponentFor, readOnly] = useCellValues( disableImageResize$, + disableImageSettingsButton$, imagePreviewHandler$, iconComponentFor$, readOnly$ @@ -267,24 +268,26 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEd {draggable && isFocused && !disableImageResize && ( )} - + {!disableImageSettingsButton && ( + + )} ) : null diff --git a/src/plugins/image/index.ts b/src/plugins/image/index.ts index 4efd3a53..5367b204 100644 --- a/src/plugins/image/index.ts +++ b/src/plugins/image/index.ts @@ -264,6 +264,8 @@ export const closeImageDialog$ = Action((r) => { r.link(r.pipe(closeImageDialog$, mapTo({ type: 'inactive' })), imageDialogState$) }) +export const disableImageSettingsButton$ = Cell(false) + /** * Saves the data from the image dialog * @group Image @@ -278,6 +280,7 @@ export const imagePlugin = realmPlugin<{ imageUploadHandler?: ImageUploadHandler imageAutocompleteSuggestions?: string[] disableImageResize?: boolean + disableImageSettingsButton?: boolean imagePreviewHandler?: ImagePreviewHandler ImageDialog?: (() => JSX.Element) | React.FC }>({ @@ -290,6 +293,7 @@ export const imagePlugin = realmPlugin<{ [imageUploadHandler$]: params?.imageUploadHandler || null, [imageAutocompleteSuggestions$]: params?.imageAutocompleteSuggestions || [], [disableImageResize$]: Boolean(params?.disableImageResize), + [disableImageSettingsButton$]: Boolean(params?.disableImageSettingsButton), [imagePreviewHandler$]: params?.imagePreviewHandler || null }) },