fix: prevent file system D&D, C&P, upload if no uploadImageHandler (#549

)

* Removed uploadImageHandler from ImageWithNoBackend example

* Drag and paste, block file system but allow web

* Allow ImageDialog to accept links

* fix: drag and drop of images from the web

---------

Co-authored-by: Petyo Ivanov <[email protected]>

src/examples/images.tsx

@@ -35,9 +35,7 @@ export const ImageWithNoBackend: Story<{ readOnly: boolean }> = () => {
       <MDXEditor
         markdown=""
         plugins={[
-          imagePlugin({
-            imageUploadHandler: expressImageUploadHandler
-          }),
+          imagePlugin(),
           diffSourcePlugin(),
           toolbarPlugin({
             toolbarContents: () => (

src/plugins/image/ImageDialog.tsx

@@ -58,7 +58,9 @@ export const ImageDialog: React.FC = () => {
             }}
             className={styles.multiFieldForm}
           >
-            {imageUploadHandler !== null && (
+            {imageUploadHandler === null ? (
+              <input type="hidden" accept="image/*" {...register('file')} />
+            ) : (
               <div className={styles.formField}>
                 <label htmlFor="file">{t('uploadImage.uploadInstructions', 'Upload an image from your device:')}</label>
                 <input type="file" accept="image/*" {...register('file')} />

src/plugins/image/ImageNode.tsx

@@ -122,8 +122,8 @@ export class ImageNode extends DecoratorNode<JSX.Element> {
     this.__src = src
     this.__title = title
     this.__altText = altText
-    this.__width = width ?? 'inherit'
-    this.__height = height ?? 'inherit'
+    this.__width = width ? width : 'inherit'
+    this.__height = height ? height : 'inherit'
   }
 
   /** @internal */

src/plugins/image/index.ts

@@ -221,17 +221,14 @@ export const imageDialogState$ = Cell<InactiveImageDialogState | NewImageDialogS
         editor.registerCommand<DragEvent>(
           DRAGSTART_COMMAND,
           (event) => {
-            if (!theUploadHandler) {
-              return false
-            }
             return onDragStart(event)
           },
           COMMAND_PRIORITY_HIGH
         ),
         editor.registerCommand<DragEvent>(
           DRAGOVER_COMMAND,
           (event) => {
-            return onDragover(event)
+            return onDragover(event, !!theUploadHandler)
           },
           COMMAND_PRIORITY_LOW
         ),
@@ -243,38 +240,44 @@ export const imageDialogState$ = Cell<InactiveImageDialogState | NewImageDialogS
           },
           COMMAND_PRIORITY_HIGH
         ),
-        ...(theUploadHandler !== null
-          ? [
-              editor.registerCommand(
-                PASTE_COMMAND,
-                (event: ClipboardEvent) => {
-                  let cbPayload = Array.from(event.clipboardData?.items ?? [])
-                  cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits
-
-                  if (!cbPayload.length || cbPayload.length === 0) {
-                    return false
-                  } // If no image was present in the collection, bail.
-
-                  const imageUploadHandlerValue = r.getValue(imageUploadHandler$)!
-
-                  Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()!)))
-                    .then((urls) => {
-                      urls.forEach((url) => {
-                        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-                          src: url,
-                          altText: ''
-                        })
-                      })
-                    })
-                    .catch((e: unknown) => {
-                      throw e
-                    })
-                  return true
-                },
-                COMMAND_PRIORITY_CRITICAL
-              )
-            ]
-          : [])
+        editor.registerCommand(
+          PASTE_COMMAND,
+          (event: ClipboardEvent) => {
+            if (!theUploadHandler) {
+              let fromWeb = Array.from(event.clipboardData?.items ?? [])
+              fromWeb = fromWeb.filter((i) => i.type.includes('text')) // Strip out the non-image bits
+
+              if (!fromWeb.length || fromWeb.length === 0) {
+                return true
+              } // If from file system, eject without calling imageUploadHandler.
+              return false // If from web, bail.
+            }
+
+            let cbPayload = Array.from(event.clipboardData?.items ?? [])
+            cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits
+
+            if (!cbPayload.length || cbPayload.length === 0) {
+              return false
+            } // If no image was present in the collection, bail.
+
+            const imageUploadHandlerValue = r.getValue(imageUploadHandler$)!
+
+            Promise.all(cbPayload.map((file) => imageUploadHandlerValue(file.getAsFile()!)))
+              .then((urls) => {
+                urls.forEach((url) => {
+                  editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+                    src: url,
+                    altText: ''
+                  })
+                })
+              })
+              .catch((e: unknown) => {
+                throw e
+              })
+            return true
+          },
+          COMMAND_PRIORITY_CRITICAL
+        )
       )
     })
   }
@@ -395,14 +398,16 @@ function onDragStart(event: DragEvent): boolean {
   return true
 }
 
-function onDragover(event: DragEvent): boolean {
-  // test if the user is dragging a file from the explorer
-  let cbPayload = Array.from(event.dataTransfer?.items ?? [])
-  cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits
+function onDragover(event: DragEvent, hasUploadHandler: boolean): boolean {
+  if (hasUploadHandler) {
+    // test if the user is dragging a file from the explorer
+    let cbPayload = Array.from(event.dataTransfer?.items ?? [])
+    cbPayload = cbPayload.filter((i) => i.type.includes('image')) // Strip out the non-image bits
 
-  if (cbPayload.length > 0) {
-    event.preventDefault()
-    return true
+    if (cbPayload.length > 0) {
+      event.preventDefault()
+      return true
+    }
   }
 
   // handle moving images