fix: disable d & d and upload UI if no image upload handler

mdx-editor · Jul 20, 2024 · 4bdb69a · 4bdb69a
1 parent 08b4434
commit 4bdb69a
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/src/examples/images.tsx b/src/examples/images.tsx
@@ -29,6 +29,30 @@ some more
 some
 `
 
+export const ImageWithNoBackend: Story<{ readOnly: boolean }> = () => {
+  return (
+    <>
+      <MDXEditor
+        markdown=""
+        plugins={[
+          imagePlugin({
+            imageUploadHandler: expressImageUploadHandler
+          }),
+          diffSourcePlugin(),
+          toolbarPlugin({
+            toolbarContents: () => (
+              <DiffSourceToggleWrapper>
+                <InsertImage />
+              </DiffSourceToggleWrapper>
+            )
+          })
+        ]}
+        onChange={console.log}
+      />
+    </>
+  )
+}
+
 export const ImageWithBackend: Story<{ readOnly: boolean }> = () => {
   return (
     <>

diff --git a/src/plugins/image/ImageDialog.tsx b/src/plugins/image/ImageDialog.tsx
@@ -4,7 +4,7 @@ import React from 'react'
 import { useForm } from 'react-hook-form'
 import styles from '../../styles/ui.module.css'
 import { editorRootElementRef$, useTranslation } from '../core/index'
-import { closeImageDialog$, imageAutocompleteSuggestions$, imageDialogState$, saveImage$ } from './index'
+import { closeImageDialog$, imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, saveImage$ } from './index'
 import { DownshiftAutoComplete } from '../core/ui/DownshiftAutoComplete'
 import { useCellValues, usePublisher } from '@mdxeditor/gurx'
 
@@ -16,10 +16,11 @@ interface ImageFormFields {
 }
 
 export const ImageDialog: React.FC = () => {
-  const [imageAutocompleteSuggestions, state, editorRootElementRef] = useCellValues(
+  const [imageAutocompleteSuggestions, state, editorRootElementRef, imageUploadHandler] = useCellValues(
     imageAutocompleteSuggestions$,
     imageDialogState$,
-    editorRootElementRef$
+    editorRootElementRef$,
+    imageUploadHandler$
   )
   const saveImage = usePublisher(saveImage$)
   const closeImageDialog = usePublisher(closeImageDialog$)
@@ -57,13 +58,19 @@ export const ImageDialog: React.FC = () => {
             }}
             className={styles.multiFieldForm}
           >
-            <div className={styles.formField}>
-              <label htmlFor="file">{t('uploadImage.uploadInstructions', 'Upload an image from your device:')}</label>
-              <input type="file" accept="image/*" {...register('file')} />
-            </div>
+            {imageUploadHandler !== null && (
+              <div className={styles.formField}>
+                <label htmlFor="file">{t('uploadImage.uploadInstructions', 'Upload an image from your device:')}</label>
+                <input type="file" accept="image/*" {...register('file')} />
+              </div>
+            )}
 
             <div className={styles.formField}>
-              <label htmlFor="src">{t('uploadImage.addViaUrlInstructions', 'Or add an image from an URL:')}</label>
+              <label htmlFor="src">
+                {imageUploadHandler !== null
+                  ? t('uploadImage.addViaUrlInstructions', 'Or add an image from an URL:')
+                  : t('uploadImage.addViaUrlInstructionsNoUpload', 'Add an image from an URL:')}
+              </label>
               <DownshiftAutoComplete
                 register={register}
                 initialInputValue={state.type === 'editing' ? state.initialValues.src ?? '' : ''}

diff --git a/src/plugins/image/index.ts b/src/plugins/image/index.ts
@@ -221,6 +221,9 @@ export const imageDialogState$ = Cell<InactiveImageDialogState | NewImageDialogS
         editor.registerCommand<DragEvent>(
           DRAGSTART_COMMAND,
           (event) => {
+            if (!theUploadHandler) {
+              return false
+            }
             return onDragStart(event)
           },
           COMMAND_PRIORITY_HIGH