fix: disable image editing dialog in readonly

Fixes #267
mdx-editor · Jan 5, 2024 · 658beb8 · 658beb8
1 parent b5b329c
commit 658beb8
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git 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 (
     <>
       <MDXEditor
         markdown={markdownWithHtmlImages}
+        readOnly={readOnly}
         plugins={[
           imagePlugin({ imageUploadHandler: async () => 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
@@ -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,