| 1 | /**
|
| 2 | * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
|
| 3 | * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
| 4 | */
|
| 5 | /**
|
| 6 | * @module image/image/insertimagecommand
|
| 7 | */
|
| 8 | import { Command } from 'ckeditor5/src/core.js';
|
| 9 | import { logWarning, toArray } from 'ckeditor5/src/utils.js';
|
| 10 | /**
|
| 11 | * Insert image command.
|
| 12 | *
|
| 13 | * The command is registered by the {@link module:image/image/imageediting~ImageEditing} plugin as `insertImage`
|
| 14 | * and it is also available via aliased `imageInsert` name.
|
| 15 | *
|
| 16 | * In order to insert an image at the current selection position
|
| 17 | * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
|
| 18 | * execute the command and specify the image source:
|
| 19 | *
|
| 20 | * ```ts
|
| 21 | * editor.execute( 'insertImage', { source: 'http://url.to.the/image' } );
|
| 22 | * ```
|
| 23 | *
|
| 24 | * It is also possible to insert multiple images at once:
|
| 25 | *
|
| 26 | * ```ts
|
| 27 | * editor.execute( 'insertImage', {
|
| 28 | * source: [
|
| 29 | * 'path/to/image.jpg',
|
| 30 | * 'path/to/other-image.jpg'
|
| 31 | * ]
|
| 32 | * } );
|
| 33 | * ```
|
| 34 | *
|
| 35 | * If you want to take the full control over the process, you can specify individual model attributes:
|
| 36 | *
|
| 37 | * ```ts
|
| 38 | * editor.execute( 'insertImage', {
|
| 39 | * source: [
|
| 40 | * { src: 'path/to/image.jpg', alt: 'First alt text' },
|
| 41 | * { src: 'path/to/other-image.jpg', alt: 'Second alt text', customAttribute: 'My attribute value' }
|
| 42 | * ]
|
| 43 | * } );
|
| 44 | * ```
|
| 45 | */
|
| 46 | export default class InsertImageCommand extends Command {
|
| 47 | /**
|
| 48 | * @inheritDoc
|
| 49 | */
|
| 50 | constructor(editor) {
|
| 51 | super(editor);
|
| 52 | const configImageInsertType = editor.config.get('image.insert.type');
|
| 53 | if (!editor.plugins.has('ImageBlockEditing')) {
|
| 54 | if (configImageInsertType === 'block') {
|
| 55 | /**
|
| 56 | * The {@link module:image/imageblock~ImageBlock} plugin must be enabled to allow inserting block images. See
|
| 57 | * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
|
| 58 | *
|
| 59 | * @error image-block-plugin-required
|
| 60 | */
|
| 61 | logWarning('image-block-plugin-required');
|
| 62 | }
|
| 63 | }
|
| 64 | if (!editor.plugins.has('ImageInlineEditing')) {
|
| 65 | if (configImageInsertType === 'inline') {
|
| 66 | /**
|
| 67 | * The {@link module:image/imageinline~ImageInline} plugin must be enabled to allow inserting inline images. See
|
| 68 | * {@link module:image/imageconfig~ImageInsertConfig#type} to learn more.
|
| 69 | *
|
| 70 | * @error image-inline-plugin-required
|
| 71 | */
|
| 72 | logWarning('image-inline-plugin-required');
|
| 73 | }
|
| 74 | }
|
| 75 | }
|
| 76 | /**
|
| 77 | * @inheritDoc
|
| 78 | */
|
| 79 | refresh() {
|
| 80 | const imageUtils = this.editor.plugins.get('ImageUtils');
|
| 81 | this.isEnabled = imageUtils.isImageAllowed();
|
| 82 | }
|
| 83 | /**
|
| 84 | * Executes the command.
|
| 85 | *
|
| 86 | * @fires execute
|
| 87 | * @param options Options for the executed command.
|
| 88 | * @param options.source The image source or an array of image sources to insert.
|
| 89 | * See the documentation of the command to learn more about accepted formats.
|
| 90 | */
|
| 91 | execute(options) {
|
| 92 | const sourceDefinitions = toArray(options.source);
|
| 93 | const selection = this.editor.model.document.selection;
|
| 94 | const imageUtils = this.editor.plugins.get('ImageUtils');
|
| 95 | // In case of multiple images, each image (starting from the 2nd) will be inserted at a position that
|
| 96 | // follows the previous one. That will move the selection and, to stay on the safe side and make sure
|
| 97 | // all images inherit the same selection attributes, they are collected beforehand.
|
| 98 | //
|
| 99 | // Applying these attributes ensures, for instance, that inserting an (inline) image into a link does
|
| 100 | // not split that link but preserves its continuity.
|
| 101 | //
|
| 102 | // Note: Selection attributes that do not make sense for images will be filtered out by insertImage() anyway.
|
| 103 | const selectionAttributes = Object.fromEntries(selection.getAttributes());
|
| 104 | sourceDefinitions.forEach((sourceDefinition, index) => {
|
| 105 | const selectedElement = selection.getSelectedElement();
|
| 106 | if (typeof sourceDefinition === 'string') {
|
| 107 | sourceDefinition = { src: sourceDefinition };
|
| 108 | }
|
| 109 | // Inserting of an inline image replace the selected element and make a selection on the inserted image.
|
| 110 | // Therefore inserting multiple inline images requires creating position after each element.
|
| 111 | if (index && selectedElement && imageUtils.isImage(selectedElement)) {
|
| 112 | const position = this.editor.model.createPositionAfter(selectedElement);
|
| 113 | imageUtils.insertImage({ ...sourceDefinition, ...selectionAttributes }, position);
|
| 114 | }
|
| 115 | else {
|
| 116 | imageUtils.insertImage({ ...sourceDefinition, ...selectionAttributes });
|
| 117 | }
|
| 118 | });
|
| 119 | }
|
| 120 | }
|