From 72c2b4d2ad9493b9eaa748ea918cce57be888097 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 19 Jun 2018 14:42:24 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Koenig=20-=20Fixed=20placement?=
 =?UTF-8?q?=20of=20dropped=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

refs https://github.com/TryGhost/Ghost/issues/9623
- ensure images are placed where the cursor is when dropping or pasting images
- fixed errors when dropping/pasting images into a list
---
 .../addon/components/koenig-editor.js         | 39 ++++++++++++++++---
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/lib/koenig-editor/addon/components/koenig-editor.js b/lib/koenig-editor/addon/components/koenig-editor.js
index c6e5437ab..b187d2ae1 100644
--- a/lib/koenig-editor/addon/components/koenig-editor.js
+++ b/lib/koenig-editor/addon/components/koenig-editor.js
@@ -113,20 +113,47 @@ function toggleSpecialFormatEditState(editor) {
 // used when pasting or dropping image files
 function insertImageCards(files, postEditor) {
     let {builder, editor} = postEditor;
+    let collection = editor.post.sections;
+    let section = editor.activeSection;
 
-    // remove the current section if it's blank - avoids unexpected blank line
-    // after the insert is complete
-    if (editor.activeSection && editor.activeSection.isBlank) {
-        postEditor.removeSection(editor.activeSection);
+    // place the card after the active section
+    if (!section.isBlank && !section.isListItem && section.next) {
+        section = section.next;
     }
 
+    // list items cannot contain card sections so insert a blank paragraph after
+    // the whole list ready to be replaced by the image cards
+    if (section.isListItem) {
+        let list = section.parent;
+        let blank = builder.createMarkupSection();
+        if (list.next) {
+            postEditor.insertSectionBefore(collection, blank, list.next);
+        } else {
+            postEditor.insertSectionAtEnd(blank);
+        }
+        postEditor.setRange(blank.toRange());
+        section = postEditor._range.head.section;
+    }
+
+    // insert an image card for each image, keep track of the last card to be
+    // inserted so that the cursor can be placed on it at the end
+    let lastImageSection;
     files.forEach((file) => {
         let payload = {
             files: [file]
         };
-        let imageCard = builder.createCardSection('image', payload);
-        postEditor.insertSection(imageCard);
+        lastImageSection = builder.createCardSection('image', payload);
+        postEditor.insertSectionBefore(collection, lastImageSection, section);
     });
+
+    // remove the current section if it's blank - avoids unexpected blank
+    // paragraph after the insert is complete
+    if (section.isBlank) {
+        postEditor.removeSection(section);
+    }
+
+    // place cursor on the last inserted image
+    postEditor.setRange(lastImageSection.tailPosition());
 }
 
 export default Component.extend({