feat: support disabling of the image settings button

mdx-editor · Mar 15, 2024 · 8b49131 · 8b49131
1 parent df8ac32
commit 8b49131
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git 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: () => <DiffSourceToggleWrapper>:)</DiffSourceToggleWrapper> })
         ]}

diff --git 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 && (
           <ImageResizer editor={editor} imageRef={imageRef} onResizeStart={onResizeStart} onResizeEnd={onResizeEnd} />
         )}
-        <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>
+        {!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>
     </React.Suspense>
   ) : null

diff --git 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<boolean>(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
     })
   },