Conclude the research about inserting images via URL

[Reinmar]

Provide a description of the task

Related: #5161 and #5039.

[jodator]

@Reinmar , @oleq & @panr - It looks like we had a clash with #7476. So after a suggestion I've merged those into one as both are about the same and there's no reason to duplicate work.

[panr]

Plugin icon

We extend the current icon with the dropdown, so from now the feature will be available as a split button.

• The primary option opens the native picker (as it is right now).

• Dropdown shows the basic view.

• Pros:

  • One click less, this could matter on mobiles or in balloon toolbars (which easily disappear if you click somewhere else).
  • We don’t change the UX we’ve been using for years.
  • It’s simpler for most of the users who, for instance, don’t replace images (see Concerns).

• Cons:

  • On mobiles clicking the split (small, right) part is very hard unless you zoom in.

Basic plugin view (editor's toolbar)

We both agree that the view should be as simple as possible. This will help us keep it relatively small (for example in terms of height). Also, the basic view shouldn't contain any integrations.

What the basic view would have:

• a button that triggers the native file picker (as it is right now)
  • selecting and confirming the image closes the picker and ends the whole process (as it is right now, no additional confirmation).
• a small form (label + input) for inserting the image src URL.
  • this form will be submitted (or canceled) by the buttons in the popup footer.

Custom view (editor's toolbar)

We know we need it, but we don't know how it should be designed yet. So the questions are:

• Do we want tabs or rotator for showing the custom view (with integrations)?
  • The thing is that we (I) want to separate "our" options from the user ones.
• Should we have any constrains (guide) for how the users should implement custom UI?
  • This may be helpful because we need to emphasize that each feature needs to have two states (when an image is selected and when it's not).
  • Each feature should have its own additional module for editing the image attributes through the balloon toolbar.

Enabling replace image feature from the editor's toolbar

ATM we can't replace an existing image. The plugin is disabled upon image selection. We want to change this because it's not UX friendly (you have to delete the image first — losing all attributes and styles — then add another one in the same place).

The idea is to have the same view as the basic one, but with small changes:

• the button that triggers native picker will have Replace image label instead of Insert an image (or whatever).
• label for the input will be Update the image source URL (or maybe something shorter?) instead of Insert an image from the URL.
• the confirm button changes the label from Insert to Update.

Balloon toolbar for an image

We want to keep the modularity of the balloon toolbar. This means that unlike we did in the case of table properties, we want to have all options separate from each other.

We will add another button for editing the src of an image that will trigger the secondary balloon panel with small form (⚠️the form needs a label to distinguish it from the link form, which takes us to the point where we definitely have to improve the UI/UX of our forms — see #1098).

NOTE: All custom integrations should implement "contextual editing modules" in the same manner (see Custom view).

Deleting the image

No changes here. Backspace and Delete are your friends.

Concerns

What happens when an image is selected and users click on the plugin icon in the main toolbar?

• When the plugin is enabled, this will open the native picker (primary option).
  • This may be confusing, because users may think that this will replace the selected image, but instead... they will add another image. Not a big deal, though.
  • The problem here is that we can replace the image only through the split button dropdown...

How do I replace an image in a balloon editor?

• In the Balloon Editor, the main toolbar does not show up when an image is selected.
  • There’s no way to access the in-toolbar panel.
  • There’s no way to access custom integrations either.
  • Same problem with media, anyway.
  • Maybe this could be a trade-off, people using balloon editor would need to remove the image and re-insert it again.

[Reinmar]

Some concerns to be addressed on the sync:

• If the system uses an upload adapter like EasyImage or CKFinder, showing the URL of that image when the user presses the image button does not make much sense to me. That URL is an internal thing. However, we don't have the means to detect which image is which... Which one was inserted via URL and which one was uploaded. So, I'd consider not having the "replace image" functionality at all for now and see if inability to change a URL of an image is a big deal.
• The integrations must not be limited to the balloon. E.g. CKFinder must open in a new modal anyway. So, things like rotators or tabs don't seem to be useful. In fact, having 2 options (file browser, URL) in the first tab and some "open CKFinder" button in the other tab would we odd. Therefore, I'd rather try to figure out how we can enable extending the primary view.

[panr]

However, we don't have the means to detect which image is which... Which one was inserted via URL and which one was uploaded. So, I'd consider not having the "replace image" functionality at all for now and see if inability to change a URL of an image is a big deal.

Get it, but the problem is that the users need to delete images first — losing all additional attributes/styling — then insert the new images and add those attributes once again...

However, we can simplify it by:

• removing Insert image and Replace image from the Basic view for good.
• clicking on the plugin icon (primary option) always triggers the native picker:
  • if there's no selected image -> the plugin will insert it to the content

• if there's already selected image -> the plugin will replace it (we just replace the src attribute)

• the dropdown contains only the Insert image via URL form (and maaaaaaybe "integration view" — without any tabs/rotator).

[Reinmar]

• If the system uses an upload adapter like EasyImage or CKFinder, showing the URL of that image when the user presses the image button does not make much sense to me. That URL is an internal thing. However, we don't have the means to detect which image is which... Which one was inserted via URL and which one was uploaded. So, I'd consider not having the "replace image" functionality at all for now and see if inability to change a URL of an image is a big deal.

We discussed this problem and decided that it's not cool, but it's ok to show the URL of an uploaded image. 

However, we need to consider:

• base64 upload adapter – displaying the entire URL in an <input> does not make sense
• srcset, sizes – those attrs need to be removed when an image is being replaced with a new one via URL

However, we can simplify it by:

removing Insert image and Replace image from the Basic view for good.

clicking on the plugin icon (primary option) always triggers the native picker:

• if there's no selected image -> the plugin will insert it to the content

This UX represents the modularity of this feature very well. The face of the button is the base feature that we have right now – it always opens the native file picker. The "arrow" is an opt-in feature, something that we'll be implementing now.

Balloon toolbar for an image

We discussed that it's a bit superfluous right now. That the balloon editor case is not critical – it's a limited editor anyway. We can always add this button in the future if we'll see a need.

[Reinmar]

Features:

• base image (file browser)
• panel view
  • insert via URL
  • custom integrations

[Reinmar]

As for custom integrations, we agreed that the panel view will be configurable just like a toolbar – you will specify names of components registered in the component factory.

E.g., like this:

image: {
    panel: {
    	items: [
    		'insertImageViaUrl', 
    		'openCKFinder'
    	]
    }
}