Create an image node on image drop

[dimaip]

We should support pasting/dropping images (and other media types) into Neos.
The problem is what type of node to create on paste?
I propose to introduce a config that would tell the UI what node to create based on media type.

E.g.:

Neos:
  Neos:
    Ui:
      dropTypes:
        image:
          dragType: 'image/jpeg'
          nodeType: 'Neos.Neos.NodeTypes:Image'
          nodeProperty: 'image'

Alternative options: maybe show a node creation dialog on paste? IMO too much hassle.

[bwaidelich]

We should support pasting/dropping images [...] into Neos.

What exactly does that mean? E.g. dragging/dropping a file to the stage? or to the node/structure tree or inspector? or all of these?

maybe show a node creation dialog on paste?

If it's "just" a global handler for any file dropped onto the backend, I think a dialog would make a lot of sense actually. It could for example offer options for cropping, caption and/or the node type this is mapped to.

IMO too much hassle

Too much hassle to implement or for the user?

[dimaip]

@bwaidelich not exactly global, but maybe when CC or one of its nodes is focused. In that moment if you ctrl+v an image from clipboard it would create a new image node. Same for dragging an image via dnd, allowed drop targets should be shown inside content canvas, and maybe also in content tree.

Too much hassle for the user. If he's shown with the node creation dialog with all of the nodes in there, it's really cumbersome to find the right node there. Besides it's hard to explain to a simple user, that at this moment he should be an image node. What if he picks the wrong nodetype?

Regarding showing the cropping/captioning thing, it's already possible to do it via the node creation dialog elements, but I would not encourage duplicating the controls from the inspector (or structured editing in the future), not not confuse the user even more.
I think it's perfectly fine to Ctrl+v => new image node is created and focused => you can crop it in the inspector in one click.

[bwaidelich]

not exactly global, but maybe when CC or one of its nodes is focused

CC?

allowed drop targets should be shown inside content canvas, and maybe also in content tree.

Yes, that would be nice!

Personally I dislike the lowlevel components (aka Atoms) to be exposed to the editor. So in my case there's usually not a common Image node but for example an Employee node with an image property.
For those cases it would be nice if the image could be draged/pasted to the image property editor and possibly to the stage where the image is to be rendered..

[mstruebing]

CC = ContentCollection I think.

[dimaip]

CC = ContentCollection.

For those cases it would be nice if the image could be draged/pasted to the image property editor and possibly to the stage where the image is to be rendered..

It already is possible to drag into image property editor. But pasted? Don't think that's something editors will expect.

[bwaidelich]

FYI: Not sure if it's relevant to us because we currently don't allow images in RTE texts but CKEditor has support for inline images and the latest version even with dnd it seems (https://youtu.be/SJVbAxvLJJY)

[dimaip]

Yeah, but I guess it's something completely anti-Neosy to put a big blob of unstrctured html markup into one field, right?
I'd imagine we would go into into the direction of structured editing and build such rich editing experiences based on structured data from our CR.