diff --git a/src/examples/images.tsx b/src/examples/images.tsx index 624bfd1a..1f4a09da 100644 --- a/src/examples/images.tsx +++ b/src/examples/images.tsx @@ -1,5 +1,6 @@ import React from 'react' import { DiffSourceToggleWrapper, InsertImage, MDXEditor, diffSourcePlugin, imagePlugin, jsxPlugin, toolbarPlugin } from '../' +import { Story } from '@ladle/react' const markdownWithHtmlImages = ` Hello world @@ -17,11 +18,12 @@ some more some ` -export function HtmlImage() { +export const HtmlImage: Story<{ readOnly: boolean }> = ({ readOnly }) => { return ( <> Promise.resolve('https://picsum.photos/200/300') }), diffSourcePlugin(), @@ -33,6 +35,18 @@ export function HtmlImage() { ) } +HtmlImage.args = { + readOnly: false +} + +HtmlImage.argTypes = { + readOnly: { + control: { + type: 'boolean' + } + } +} + export function JsxImage() { return ( <> diff --git a/src/plugins/image/ImageEditor.tsx b/src/plugins/image/ImageEditor.tsx index 936140c1..125baec5 100644 --- a/src/plugins/image/ImageEditor.tsx +++ b/src/plugins/image/ImageEditor.tsx @@ -22,7 +22,7 @@ import { } from 'lexical' import { disableImageResize$, imagePreviewHandler$, openEditImageDialog$ } from '.' import styles from '../../styles/ui.module.css' -import { iconComponentFor$ } from '../core' +import { iconComponentFor$, readOnly$ } from '../core' import { $isImageNode } from './ImageNode' import ImageResizer from './ImageResizer' import { useCellValues, usePublisher } from '@mdxeditor/gurx' @@ -84,10 +84,11 @@ function LazyImage({ } export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEditorProps): JSX.Element | null { - const [disableImageResize, imagePreviewHandler, iconComponentFor] = useCellValues( + const [disableImageResize, imagePreviewHandler, iconComponentFor, readOnly] = useCellValues( disableImageResize$, imagePreviewHandler$, - iconComponentFor$ + iconComponentFor$, + readOnly$ ) const openEditImageDialog = usePublisher(openEditImageDialog$) @@ -269,6 +270,7 @@ export function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEd type="button" className={classNames(styles.iconButton, styles.editImageButton)} title="Edit image" + disabled={readOnly} onClick={() => { openEditImageDialog({ nodeKey: nodeKey,