New UI for insert image feature #15255
Conversation
niegowski
changed the title
…ion does not require form view, and it is the only enabled integration,
| @@ -32,7 +32,7 @@ | |||
| } | |||
|
|
|||
| & > .ck-collapsible__children { | |||
| padding: 0 var(--ck-spacing-large) var(--ck-spacing-large); | |||
| padding: var(--ck-spacing-medium) var(--ck-spacing-large) var(--ck-spacing-large); | |||
There was a problem hiding this comment.
Why top padding is changed from large into medium? When button is focused it looks odd when label in on the box-shadow outline:
But as i understand decision was made - i just wanted to show my doubts.
There was a problem hiding this comment.
It's increased from 0 to medium 😀
There was a problem hiding this comment.
Missed the 0 , sorry! but still, large looks a bit better IMO ;)
There was a problem hiding this comment.
When it's larger it looks strange when the button outline is not visible.
One side comment from me:I was/am a bit confused when two icons/buttons with same functionality are labeled differently:
Don't know why it is done this way. |
To give context. In the dropdown, the user already has a context that it's a dropdown to insert an image. The main button does not have the context, so an extended label is used to make it clear that it's inserting images, not any file. |
| @@ -57,5 +59,43 @@ export default class CKBoxUI extends Plugin { | |||
|
|
|||
| return button; | |||
| } ); | |||
|
|
|||
| if ( editor.plugins.has( 'ImageInsertUI' ) ) { | |||
| const imageInsertUI: ImageInsertUI = editor.plugins.get( 'ImageInsertUI' ); | |||
There was a problem hiding this comment.
Is this explicit type ImageInsertUI needed in this case?
| const imageInsertUI: ImageInsertUI = editor.plugins.get( 'ImageInsertUI' ); | ||
| const command: CKFinderCommand = editor.commands.get( 'ckfinder' )!; |
There was a problem hiding this comment.
Are these explicit types needed here?
| return this._createDropdownView( locale ); | ||
| }; | ||
| const selection = editor.model.document.selection; | ||
| const imageUtils: ImageUtils = editor.plugins.get( 'ImageUtils' ); |
There was a problem hiding this comment.
Is this explicit type needed here?
Suggested merge commit message (convention)
Feature (image): Introduced the image insert dropdown as a consistent UI to insert images through different available integrations like image upload, insert image with asset manager, and insert image via URL. Closes #15303. Closes #15149.
Other (image): The
ImageUploadUIplugin is loaded by default when theImageBlockorImageInlineplugins are loaded. See #15149.Other (list, ui): The
CollapsibleViewmoved from thelistpackage to theuipackage. See #15149.Other (ui): The
SplitButtonViewconstructor andcreateDropdown()helper accepts an instance of aButtonViewas an action view customization. See #15149.Other (upload): The
FileDialogButtonViewis now an instance of theButtonView, not just a wrapper on it. See #15149.Internal (ckbox, ckfinder, image): The
ImageUploadUI,CKBoxUI,CKFinderUI, andImageInsertViaUrlUIplugins are registering integrations in theImageInsertUI.Internal (core): Added icons for
ImageUploadUIand its integrations. Added translation contexts for common labels for images insert/replace via file manager.MINOR BREAKING CHANGE (list): The
CollapsibleViewmoved from thelistpackage to theuipackage. You can import it like this:import { CollapsibleView } from '@ckeditor/ckeditor5-ui';Additional information