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
})
},