Ckeditor5: How to improve the media embed UI?

[oleq]

ATM the insertion/editing is via the "dropform" attached to the toolbar button

It's been simple to implent and works for MVP but:

• it makes no sense with the balloon toolbar (editor), which requires a non-collapsed selection to show up and the media embedding should definitely be available for collapsed selections,
• sometimes it's visually far from the media in the content and it makes editing inconvenient,
  
  
  
  • should we allow media editing anyway?
  
  

Some options:

• if we decided to attach a form with the URL editing field to straight to the media in the content, we'd have to insert a blank (empty, URL–less) media first and then edit its URL, which is an implementation hassle,
  
  
  
  • also what if the user decides they dont want it any more after they pressed the toolbar button? How to treat it in the model/collaboration? Should it be gone as soon as they blur the media? Or maybe removed manually?
  
  
• the insertion similar to the Link feature makes no sense because the media is not inserted at the selection (just like the link) where the balloon's arrow is pointing; it's inserted as a next block, so this would be visually inaccurate

Down the road:

• still... we may need a balloon attached to the media in the future because of media styles (similar to image styles)
  
• the auto embedding could help us out because it's a faster path for the user to do things and with that implemented, we could keep the UI very simple

cc @dkonopka

[pjasiun]

it makes no sense with the balloon toolbar (editor), which requires a non-collapsed selection to show up and the media embedding should definitely be available for collapsed selections,

I believe the issue with inserting content in the balloon editor is not limited to the media embedding. There is the same issue if you want to insert table there. I believe we need a generic solution for it. One solution is the block toolbar, but since not everybody wants to have it, or have not enough space for it, we need to have an alternative solution.

[Reinmar]

Agree with @pjasiun. This is not something to be discussed for media embed only.

still... we may need a balloon attached to the media in the future because of media styles (similar to image styles)

Yup, that's one thing that I find a bit missing now – that something shows up when I click the media widget. That could contain "edit the URL" option if we'll see that it's needed. But I wouldn't base the insertion UI on this.

[scofalik]

After playing with the demo, I'd expect to have a toolbar attached to the media embed placeholder after it is selected. This is the only suggestion I have. I think that it works fine right now, I am just missing that one thing.

I believe the issue with inserting content in the balloon editor is not limited to the media embedding.

Also agree. We all know the limitations of balloon toolbar.

[Reinmar]

I can add one thing – when playing with the demos I felt that something should appear when I focus the widget. But since wasn't happening on a single click, I was often doubleclicking it. So, I too have a strong feeling that something should appear.

[pjasiun]

I also expect that block widget has some action when I click on it. I think that is also could be some generic solution. I can imagine media embed feature where you can edit the URL when you click on the widget and code block feature where can edit the code when you click on the widget. Both working without any dialog. On the other hand, you use a balloon panel to editor image properties (like "alt"). If some widgets will be edited "inline" and some using balloon panels we may end up with two inconsistent UX for widgets which could support both. I think, that we need to establish some rules how block widgets should be edited in the whole editor.

BTW: even though I think that we need a generic UX for block widgets editing, I do not think we should provide a generic code to support it. We could start from media-embed-specific code and when we find out that more widgets share the same code to support a similar UX, we can make it more generic.

[oleq]

I recently got a F2F feedback that the current UI could be confusing, i.e. the user does not know what to do.

• We could display "Paste the media URL here" instead of "http://example.com" to make it clearer.
• We could immediately display some additional hint that helps users understand what they should do. We already have one but in a different context:

cc @dkonopka

[dkonopka]

IMHO displaying hint immediately (even without changing current content) will improve discoverability of this feature sufficiently. 👍

[oleq]

@dkonopka Can you provide a PoC?

[Pipehill]

A balloon above embedded media, similar to images, would be very appreciated. The option of setting a title/text alternative to embedded media is important from a universal design point of view.