-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8019 from ckeditor/i/7890
Other (image): Introduced `ImageInsert` as a standalone plugin that contains `ImageUpload` functionality. Closes #7890. Internal (image): Reverted the changes in `ImageUpload` plugin that introduced the "Insert image via URL" feature. Fix (image): Aligned and fixed the styling for the split button in the `ImageInsert` dropdown. Closes #7986. Closes #7927. Docs (image): Fixed the docs after plugins separation. MAJOR BREAKING CHANGE (image): In order to use the "insert image via URL" feature you now need to load the `ImageInsert` plugin and use the `imageInsert` button instead of the `imageUpload` button that implemented that functionality previously previously.
- Loading branch information
Showing
23 changed files
with
1,001 additions
and
1,005 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /** | ||
| * @module image/imageinsert | ||
| */ | ||
|
|
||
| import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; | ||
| import ImageUpload from './imageupload'; | ||
| import ImageInsertUI from './imageinsert/imageinsertui'; | ||
|
|
||
| /** | ||
| * The image insert plugin. | ||
| * | ||
| * For a detailed overview, check the {@glink features/image-upload/image-upload Image upload feature} | ||
| * and {@glink features/image#inserting-images-via-source-url Insert images via source URL} documentation. | ||
| * | ||
| * This plugin does not do anything directly, but it loads a set of specific plugins | ||
| * to enable image uploading or inserting via implemented integrations: | ||
| * | ||
| * * {@link module:image/imageupload~ImageUpload} | ||
| * * {@link module:image/imageinsert/imageinsertui~ImageInsertUI}, | ||
| * | ||
| * @extends module:core/plugin~Plugin | ||
| */ | ||
| export default class ImageInsert extends Plugin { | ||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| static get pluginName() { | ||
| return 'ImageInsert'; | ||
| } | ||
|
|
||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| static get requires() { | ||
| return [ ImageUpload, ImageInsertUI ]; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Image insert panel view configuration. | ||
| * **NOTE:** Currently the panel settings are configurable through the `image.upload` property. | ||
| * | ||
| * @protected | ||
| * @member {module:image/imageupload~ImageUploadPanelConfig} module:image/imageupload~ImageUploadConfig#panel | ||
| */ | ||
|
|
||
| /** | ||
| * The configuration of the image insert dropdown panel view. Used by the image insert feature in the `@ckeditor/ckeditor5-image` package. | ||
| * | ||
| * ClassicEditor | ||
| * .create( editorElement, { | ||
| * image: { | ||
| * upload: { | ||
| * panel: ... // panel settings for "imageInsert" view goes here | ||
| * } | ||
| * } | ||
| * } ) | ||
| * .then( ... ) | ||
| * .catch( ... ); | ||
| * | ||
| * See {@link module:core/editor/editorconfig~EditorConfig all editor options}. | ||
| * | ||
| * @protected | ||
| * @interface module:image/imageupload~ImageUploadPanelConfig | ||
| */ | ||
|
|
||
| /** | ||
| * The list of {@link module:image/imageinsert~ImageInsert} integrations. | ||
| * | ||
| * The option accepts string tokens. | ||
| * * for predefined integrations, we have two special strings: `insertImageViaUrl` and `openCKFinder`. | ||
| * The former adds the **Insert image via URL** feature, while the latter adds the built-in **CKFinder** integration. | ||
| * * for custom integrations, each string should be a name of the component registered in the | ||
| * {@link module:ui/componentfactory~ComponentFactory component factory}. | ||
| * If you have a plugin `PluginX` that registers `pluginXButton` component, then the integration token | ||
| * in that case should be `pluginXButton`. | ||
| * | ||
| * // Add `insertImageViaUrl`, `openCKFinder` and custom `pluginXButton` integrations. | ||
| * const imageUploadConfig = { | ||
| * upload: { | ||
| * panel: { | ||
| * items: [ | ||
| * 'insertImageViaUrl', | ||
| * 'openCKFinder', | ||
| * 'pluginXButton' | ||
| * ] | ||
| * } | ||
| * } | ||
| * }; | ||
| * | ||
| * @member {Array.<String>} module:image/imageupload~ImageUploadPanelConfig#items | ||
| * @default [ 'insertImageViaUrl' ] | ||
| */ |
151 changes: 151 additions & 0 deletions
151
packages/ckeditor5-image/src/imageinsert/imageinsertui.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,151 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| /** | ||
| * @module image/imageinsert/imageinsertui | ||
| */ | ||
|
|
||
| import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; | ||
| import ImageInsertPanelView from './ui/imageinsertpanelview'; | ||
| import { prepareIntegrations } from './utils'; | ||
|
|
||
| import { isImage } from '../image/utils'; | ||
|
|
||
| /** | ||
| * The image insert dropdown plugin. | ||
| * | ||
| * For a detailed overview, check the {@glink features/image-upload/image-upload Image upload feature} | ||
| * and {@glink features/image#inserting-images-via-source-url Insert images via source URL} documentation. | ||
| * | ||
| * Adds the `'imageInsert'` dropdown to the {@link module:ui/componentfactory~ComponentFactory UI component factory}. | ||
| * | ||
| * @extends module:core/plugin~Plugin | ||
| */ | ||
| export default class ImageInsertUI extends Plugin { | ||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| static get pluginName() { | ||
| return 'ImageInsertUI'; | ||
| } | ||
|
|
||
| /** | ||
| * @inheritDoc | ||
| */ | ||
| init() { | ||
| const editor = this.editor; | ||
|
|
||
| editor.ui.componentFactory.add( 'imageInsert', locale => { | ||
| return this._createDropdownView( locale ); | ||
| } ); | ||
| } | ||
|
|
||
| /** | ||
| * Creates the dropdown view. | ||
| * | ||
| * @param {module:utils/locale~Locale} locale The localization services instance. | ||
| * | ||
| * @private | ||
| * @returns {module:ui/dropdown/dropdownview~DropdownView} | ||
| */ | ||
| _createDropdownView( locale ) { | ||
| const editor = this.editor; | ||
| const imageInsertView = new ImageInsertPanelView( locale, prepareIntegrations( editor ) ); | ||
| const command = editor.commands.get( 'imageUpload' ); | ||
|
|
||
| const dropdownView = imageInsertView.dropdownView; | ||
| const splitButtonView = dropdownView.buttonView; | ||
|
|
||
| splitButtonView.actionView = editor.ui.componentFactory.create( 'imageUpload' ); | ||
| // After we replaced action button with `imageUpload` component, | ||
| // we have lost a proper styling and some minor visual quirks have appeared. | ||
| // Brining back original split button classes helps fix the button styling | ||
| // See https://github.com/ckeditor/ckeditor5/issues/7986. | ||
| splitButtonView.actionView.extendTemplate( { | ||
| attributes: { | ||
| class: 'ck ck-button ck-splitbutton__action' | ||
| } | ||
| } ); | ||
|
|
||
| return this._setUpDropdown( dropdownView, imageInsertView, command ); | ||
| } | ||
|
|
||
| /** | ||
| * Sets up the dropdown view. | ||
| * | ||
| * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdownView. | ||
| * @param {module:image/imageinsert/ui/imageinsertpanelview~ImageInsertPanelView} imageInsertView An imageInsertView. | ||
| * @param {module:core/command~Command} command An imageInsert command | ||
| * | ||
| * @private | ||
| * @returns {module:ui/dropdown/dropdownview~DropdownView} | ||
| */ | ||
| _setUpDropdown( dropdownView, imageInsertView, command ) { | ||
| const editor = this.editor; | ||
| const t = editor.t; | ||
| const insertButtonView = imageInsertView.insertButtonView; | ||
| const insertImageViaUrlForm = imageInsertView.getIntegration( 'insertImageViaUrl' ); | ||
| const panelView = dropdownView.panelView; | ||
|
|
||
| dropdownView.bind( 'isEnabled' ).to( command ); | ||
|
|
||
| // Defer the children injection to improve initial performance. | ||
| // See https://github.com/ckeditor/ckeditor5/pull/8019#discussion_r484069652. | ||
| dropdownView.buttonView.once( 'open', () => { | ||
| panelView.children.add( imageInsertView ); | ||
| } ); | ||
|
|
||
| dropdownView.on( 'change:isOpen', () => { | ||
| const selectedElement = editor.model.document.selection.getSelectedElement(); | ||
|
|
||
| if ( dropdownView.isOpen ) { | ||
| imageInsertView.focus(); | ||
|
|
||
| if ( isImage( selectedElement ) ) { | ||
| imageInsertView.imageURLInputValue = selectedElement.getAttribute( 'src' ); | ||
| insertButtonView.label = t( 'Update' ); | ||
| insertImageViaUrlForm.label = t( 'Update image URL' ); | ||
| } else { | ||
| imageInsertView.imageURLInputValue = ''; | ||
| insertButtonView.label = t( 'Insert' ); | ||
| insertImageViaUrlForm.label = t( 'Insert image via URL' ); | ||
| } | ||
| } | ||
| } ); | ||
|
|
||
| imageInsertView.delegate( 'submit', 'cancel' ).to( dropdownView ); | ||
| this.delegate( 'cancel' ).to( dropdownView ); | ||
|
|
||
| dropdownView.on( 'submit', () => { | ||
| closePanel(); | ||
| onSubmit(); | ||
| } ); | ||
|
|
||
| dropdownView.on( 'cancel', () => { | ||
| closePanel(); | ||
| } ); | ||
|
|
||
| function onSubmit() { | ||
| const selectedElement = editor.model.document.selection.getSelectedElement(); | ||
|
|
||
| if ( isImage( selectedElement ) ) { | ||
| editor.model.change( writer => { | ||
| writer.setAttribute( 'src', imageInsertView.imageURLInputValue, selectedElement ); | ||
| writer.removeAttribute( 'srcset', selectedElement ); | ||
| writer.removeAttribute( 'sizes', selectedElement ); | ||
| } ); | ||
| } else { | ||
| editor.execute( 'imageInsert', { source: imageInsertView.imageURLInputValue } ); | ||
| } | ||
| } | ||
|
|
||
| function closePanel() { | ||
| editor.editing.view.focus(); | ||
| dropdownView.isOpen = false; | ||
| } | ||
|
|
||
| return dropdownView; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.