Image Mode "Nested entries" does not work unless the "Insert image" button is added to the toolbar

[MoritzLost]

Description

The new option to insert drag-and-drop images as nested entries (#509) does not work at all for me. I'm not getting any errors, but also nothing happens. When I drag an image over the CKEditor field, it's showing the insertion markers, but when I drop it, it simply disappears and nothing happens. I don't get any errors in the console, and I'm also not seeing any network requests (which would be required to create a nested entry). So it looks like something is just not triggering.

The only indication that something is wrong are some warnings in the console, though those appear on page load, not during the drag-and-drop interaction:

Steps to reproduce

1. Create a CKEditor field, select at least one allowed entry type (that has one Assets field that allows images), and add the + button.
2. Under Assets -> Image Mode, select Nested Entries. Select the only available option under Image Field.
3. Add the field to an entry type.
4. Create an entry, enter some text, then drag an image into the editor.

Additional info

So far I've only tested this in Firefox 149.

• Craft version: 5.9.15
• PHP version: 8.3
• Database driver & version: MySQL

[linear]

PT-3060

[i-just]

Hi, thanks for getting in touch! Are you allowing images in the toolbar for this field?

[MoritzLost]

@i-just No, do I need to do that?

That wasn't apparent to me. We never include that button, because we never wanted images included in the unstructured HTML output of a CKEditor field. The only way we allow editors to insert images (if at all) is through nested entries. I did assume that I need to add the + button that enables nested entries to be inserted, since that is the button that is already used to insert images (as nested entries).

If adding the Insert image button is required for drag-and-drop to work, that's a bit awkward in terms of AX:

• We already have the + button for nested entries, and we can't remove that, because there are other entry types available, not just one for a nested image.
• If the Insert image button is added with the Insert Mode set to Nested Entries, the Insert image button will be functionally identical to selecting the image block in the + button dropdown. That might be confusing for authors, since now there are two buttons for the same thing. And also, they may wonder why the image entry type has its own dedicated button, but the other entry types do not.

So to summarize, it would be great if we could allow drag-and-drop with nested entries, without requiring the Insert image button to be present.

[i-just]

Thanks for confirming, Moritz! That’s one mystery solved! Yes, you need the insert image button, and you don’t need the add entries (+) button.

Regardless of whether you insert the image via drag-and-drop or by pressing the insert image button and going via the modal route, the selected image mode will be respected.

That said, I do see your point. We’ll discuss it further internally. (But for now, if you’d like to use this feature, you’ll need to add the insert image to the toolbar.)

[MoritzLost]

@i-just Thanks for the explanation! I've updated the issue title accordingly. Yes, if that requirement can be loosened, that would be helpful.

[brandonkelly]

@i-just and I just discussed this and decided we agree, image drag-uploading should work if either insertImage or createEntry buttons are present.

Just tagged v5.2.0 with that change!