Better entry point for image file managers and insert image changes

[Witoso]

📝 Provide a description of the new feature

As we observe with CKBox, when an editor has an integrated file manager, discoverability of uploading images with it is low. Usually, such plugin has an icon that's not that that recognizable as an image one.

CKEditor 4 had a pretty visible option of Browse server.

We would move to a bit of different direction, opening up a possibility to add to an image split button more options. One of which to file managers. In the future, such extensibility could be used by other features.

Scope

After doing a PoC #15195, we decided to abandon the route of declarative UI in this area.

We also had a few discussions on the icon set. We decided that we will switch the icon of the uploadImage component. The primary objective is to effectively communicate the function of the button. The generic image icon, in other applications, either opens a modal (CKEditor 4, Tiny) or a dropdown (GDocs). In our case, the upload screen opens immediately, therefor a more specific icons was prepared.

Features and changes

• insertImage should be intelligent when it comes to registering default actions:
  • The default action on the split button is the first available on the list below
    • if there's only one action, there's no dropdown arrow, unless it is insert with link.
  • The default list in the split button is:
    • Upload from computer (when uploadImage integration is provided)
    • Insert with file manager (when ckbox or ckfinder integration is provided)
    • Insert via URL (insert image via url integration is provided)
• Remember when selection is on image, the label changes:
  • Replace from computer
  • Replace with file manager.
  • Update image URL.

Integrator

• As an integrator, I can add additional components for the insert image button.
• As an integrator, I can override the default order on the list.

Docs

• Document insert image component. Document new insertImage behavior #15304
• In documentation, replace everywhere uploadImage with insertImage. Add insertImage to docs #15371
• To the demos where insertImage was added, add powered by CKBox config for

Resources

• Figma

---

If you'd like to see this feature implemented, add a 👍 reaction to this post.

[Witoso]

The idea would be to push the configuration to the integrator side, and:

• Create "a split toolbar" component that an integrator could use to define such UI.
• Create a default component for image insert that an integrator could use (to define).
• It would make configuration more aligned with the current standards.

[Witoso]

We need a PoC to uncover some details:

• How to register as split button as a toolbar grouping.
• How to add a main action to the split button via toolbar config.
• How to define the toolbar grouping as vertical.
• Can we add a more complex component to a toolbar (like insertViaUrl).

The idea is that we would like to give integrators possibility to define a complex image upload component.