Fix issue with dropping images within uneditable nodes not attaching them #822

app/internal_packages/composer/lib/composer-view.jsx

@@ -430,12 +430,14 @@ export default class ComposerView extends React.Component {
     // Accept drops of real files from other applications
     for (const file of Array.from(event.dataTransfer.files)) {
       this._onFileReceived(file.path);
+      event.preventDefault();
     }
 
     // Accept drops from attachment components / images within the app
     const uri = this._nonNativeFilePathForDrop(event);
     if (uri) {
       this._onFileReceived(uri);
+      event.preventDefault();
     }
   };
 
@@ -452,7 +454,6 @@ export default class ComposerView extends React.Component {
           if (!match) {
             return;
           }
-
           match.contentId = Utils.generateContentId();
           session.changes.add({
             files: [].concat(draft.files),

app/src/components/composer-editor/base-block-plugins.jsx

@@ -264,7 +264,7 @@ export function allNodesInBFSOrder(value) {
   return all;
 }
 
-function isQuoteNode(n) {
+export function isQuoteNode(n) {
   return (
     n.type === 'blockquote' ||
     (n.data && n.data.get('className') && n.data.get('className').includes('gmail_quote'))

app/src/components/composer-editor/inline-attachment-plugins.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ImageAttachmentItem } from 'mailspring-component-kit';
 import { AttachmentStore } from 'mailspring-exports';
+import { isQuoteNode } from './base-block-plugins';
 
 const IMAGE_TYPE = 'image';
 
@@ -67,6 +68,14 @@ const rules = [
 
 export const changes = {
   insert: (change, file) => {
+    const canHoldInline = node => !node.isVoid && !isQuoteNode(node) && !!node.getFirstText();
+
+    while (!canHoldInline(change.value.anchorBlock)) {
+      change.collapseToEndOfPreviousText();
+      if (!change.value.anchorBlock) {
+        break;
+      }
+    }
     return change.insertInline({
       object: 'inline',
       isVoid: true,