@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/dist/imageupload/imageuploadui.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageupload/imageuploadui
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+/**
+ * The image upload button plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload Image upload feature} documentation.
+ *
+ * Adds the `'uploadImage'` button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}
+ * and also the `imageUpload` button as an alias for backward compatibility.
+ *
+ * Adds the `'menuBar:uploadImage'` menu button to the {@link module:ui/componentfactory~ComponentFactory UI component factory}.
+ *
+ * It also integrates with the `insertImage` toolbar component and `menuBar:insertImage` menu component, which are the default components
+ * through which image upload is available.
+ */
+export default class ImageUploadUI extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageUploadUI";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    init(): void;
+    /**
+     * Creates the base for various kinds of the button component provided by this feature.
+     */
+    private _createButton;
+    /**
+     * Creates a simple toolbar button, with an icon and a tooltip.
+     */
+    private _createToolbarButton;
+    /**
+     * Creates a button for the dropdown view, with an icon, text and no tooltip.
+     */
+    private _createDropdownButton;
+    /**
+     * Creates a button for the menu bar.
+     */
+    private _createMenuBarButton;
+}

package/dist/imageupload/uploadimagecommand.d.ts

@@ -0,0 +1,78 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+import { Command, type Editor } from 'ckeditor5/src/core.js';
+import { type ArrayOrItem } from 'ckeditor5/src/utils.js';
+/**
+ * @module image/imageupload/uploadimagecommand
+ */
+/**
+ * The upload image command.
+ *
+ * The command is registered by the {@link module:image/imageupload/imageuploadediting~ImageUploadEditing} plugin as `uploadImage`
+ * and it is also available via aliased `imageUpload` name.
+ *
+ * In order to upload an image at the current selection position
+ * (according to the {@link module:widget/utils~findOptimalInsertionRange} algorithm),
+ * execute the command and pass the native image file instance:
+ *
+ * ```ts
+ * this.listenTo( editor.editing.view.document, 'clipboardInput', ( evt, data ) => {
+ * 	// Assuming that only images were pasted:
+ * 	const images = Array.from( data.dataTransfer.files );
+ *
+ * 	// Upload the first image:
+ * 	editor.execute( 'uploadImage', { file: images[ 0 ] } );
+ * } );
+ * ```
+ *
+ * It is also possible to insert multiple images at once:
+ *
+ * ```ts
+ * editor.execute( 'uploadImage', {
+ * 	file: [
+ * 		file1,
+ * 		file2
+ * 	]
+ * } );
+ * ```
+ */
+export default class UploadImageCommand extends Command {
+    /**
+     * The command property: `false` if there is no permission on image upload, otherwise `true`.
+     *
+     * @observable
+     * @internal
+     */
+    isAccessAllowed: boolean;
+    /**
+     * Creates an instance of the `imageUlpoad` command. When executed, the command upload one of
+     * the currently selected image from computer.
+     *
+     * @param editor The editor instance.
+     */
+    constructor(editor: Editor);
+    /**
+     * @inheritDoc
+     */
+    refresh(): void;
+    /**
+     * Executes the command.
+     *
+     * @fires execute
+     * @param options Options for the executed command.
+     * @param options.file The image file or an array of image files to upload.
+     */
+    execute(options: {
+        file: ArrayOrItem<File>;
+    }): void;
+    /**
+     * Handles uploading single file.
+     */
+    private _uploadImage;
+}

package/dist/imageupload/utils.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageupload/utils
+ */
+import type { ViewElement } from 'ckeditor5/src/engine.js';
+import type ImageUtils from '../imageutils.js';
+/**
+ * Creates a regular expression used to test for image files.
+ *
+ * ```ts
+ * const imageType = createImageTypeRegExp( [ 'png', 'jpeg', 'svg+xml', 'vnd.microsoft.icon' ] );
+ *
+ * console.log( 'is supported image', imageType.test( file.type ) );
+ * ```
+ */
+export declare function createImageTypeRegExp(types: Array<string>): RegExp;
+/**
+ * Creates a promise that fetches the image local source (Base64 or blob) and resolves with a `File` object.
+ *
+ * @param image Image whose source to fetch.
+ * @returns A promise which resolves when an image source is fetched and converted to a `File` instance.
+ * It resolves with a `File` object. If there were any errors during file processing, the promise will be rejected.
+ */
+export declare function fetchLocalImage(image: ViewElement): Promise<File>;
+/**
+ * Checks whether a given node is an image element with a local source (Base64 or blob).
+ *
+ * @param node The node to check.
+ */
+export declare function isLocalImage(imageUtils: ImageUtils, node: ViewElement): boolean;

package/dist/imageupload.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageupload
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageUploadUI from './imageupload/imageuploadui.js';
+import ImageUploadProgress from './imageupload/imageuploadprogress.js';
+import ImageUploadEditing from './imageupload/imageuploadediting.js';
+/**
+ * The image upload plugin.
+ *
+ * For a detailed overview, check the {@glink features/images/image-upload/image-upload image upload feature} documentation.
+ *
+ * This plugin does not do anything directly, but it loads a set of specific plugins to enable image uploading:
+ *
+ * * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing},
+ * * {@link module:image/imageupload/imageuploadui~ImageUploadUI},
+ * * {@link module:image/imageupload/imageuploadprogress~ImageUploadProgress}.
+ */
+export default class ImageUpload extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageUpload";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageUploadEditing, typeof ImageUploadUI, typeof ImageUploadProgress];
+}

package/dist/imageutils.d.ts

@@ -0,0 +1,133 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+/**
+ * @module image/imageutils
+ */
+import type { Element, ViewElement, DocumentSelection, ViewDocumentSelection, Selection, ViewSelection, DowncastWriter, Position, ViewContainerElement } from 'ckeditor5/src/engine.js';
+import { Plugin } from 'ckeditor5/src/core.js';
+/**
+ * A set of helpers related to images.
+ */
+export default class ImageUtils extends Plugin {
+    /**
+     * DOM Emitter.
+     */
+    private _domEmitter;
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "ImageUtils";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * Checks if the provided model element is an `image` or `imageInline`.
+     */
+    isImage(modelElement?: Element | null): modelElement is Element & {
+        name: 'imageInline' | 'imageBlock';
+    };
+    /**
+     * Checks if the provided view element represents an inline image.
+     *
+     * Also, see {@link module:image/imageutils~ImageUtils#isImageWidget}.
+     */
+    isInlineImageView(element?: ViewElement | null): boolean;
+    /**
+     * Checks if the provided view element represents a block image.
+     *
+     * Also, see {@link module:image/imageutils~ImageUtils#isImageWidget}.
+     */
+    isBlockImageView(element?: ViewElement | null): boolean;
+    /**
+     * Handles inserting single file. This method unifies image insertion using {@link module:widget/utils~findOptimalInsertionRange}
+     * method.
+     *
+     * ```ts
+     * const imageUtils = editor.plugins.get( 'ImageUtils' );
+     *
+     * imageUtils.insertImage( { src: 'path/to/image.jpg' } );
+     * ```
+     *
+     * @param attributes Attributes of the inserted image.
+     * This method filters out the attributes which are disallowed by the {@link module:engine/model/schema~Schema}.
+     * @param selectable Place to insert the image. If not specified,
+     * the {@link module:widget/utils~findOptimalInsertionRange} logic will be applied for the block images
+     * and `model.document.selection` for the inline images.
+     *
+     * **Note**: If `selectable` is passed, this helper will not be able to set selection attributes (such as `linkHref`)
+     * and apply them to the new image. In this case, make sure all selection attributes are passed in `attributes`.
+     *
+     * @param imageType Image type of inserted image. If not specified,
+     * it will be determined automatically depending of editor config or place of the insertion.
+     * @param options.setImageSizes Specifies whether the image `width` and `height` attributes should be set automatically.
+     * The default is `true`.
+     * @return The inserted model image element.
+     */
+    insertImage(attributes?: Record<string, unknown>, selectable?: Selection | Position | null, imageType?: ('imageBlock' | 'imageInline' | null), options?: {
+        setImageSizes?: boolean;
+    }): Element | null;
+    /**
+     * Reads original image sizes and sets them as `width` and `height`.
+     *
+     * The `src` attribute may not be available if the user is using an upload adapter. In such a case,
+     * this method is called again after the upload process is complete and the `src` attribute is available.
+     */
+    setImageNaturalSizeAttributes(imageElement: Element): void;
+    /**
+     * Returns an image widget editing view element if one is selected or is among the selection's ancestors.
+     */
+    getClosestSelectedImageWidget(selection: ViewSelection | ViewDocumentSelection): ViewElement | null;
+    /**
+     * Returns a image model element if one is selected or is among the selection's ancestors.
+     */
+    getClosestSelectedImageElement(selection: Selection | DocumentSelection): Element | null;
+    /**
+     * Returns an image widget editing view based on the passed image view.
+     */
+    getImageWidgetFromImageView(imageView: ViewElement): ViewContainerElement | null;
+    /**
+     * Checks if image can be inserted at current model selection.
+     *
+     * @internal
+     */
+    isImageAllowed(): boolean;
+    /**
+     * Converts a given {@link module:engine/view/element~Element} to an image widget:
+     * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the image widget
+     * element.
+     * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
+     *
+     * @param writer An instance of the view writer.
+     * @param label The element's label. It will be concatenated with the image `alt` attribute if one is present.
+     */
+    toImageWidget(viewElement: ViewElement, writer: DowncastWriter, label: string): ViewElement;
+    /**
+     * Checks if a given view element is an image widget.
+     */
+    protected isImageWidget(viewElement: ViewElement): boolean;
+    /**
+     * Checks if the provided model element is an `image`.
+     */
+    isBlockImage(modelElement?: Element | null): boolean;
+    /**
+     * Checks if the provided model element is an `imageInline`.
+     */
+    isInlineImage(modelElement?: Element | null): boolean;
+    /**
+     * Get the view `<img>` from another view element, e.g. a widget (`<figure class="image">`), a link (`<a>`).
+     *
+     * The `<img>` can be located deep in other elements, so this helper performs a deep tree search.
+     */
+    findViewImgElement(figureView: ViewElement): ViewElement | undefined;
+    /**
+     * @inheritDoc
+     */
+    destroy(): void;
+}

package/dist/index-content.css

@@ -0,0 +1,150 @@
+/**
+ * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+:root{
+	--ck-color-image-caption-background:hsl(0, 0%, 97%);
+	--ck-color-image-caption-text:hsl(0, 0%, 20%);
+}
+.ck-content .image > figcaption{
+	display:table-caption;
+	caption-side:bottom;
+	word-break:break-word;
+	color:var(--ck-color-image-caption-text);
+	background-color:var(--ck-color-image-caption-background);
+	padding:.6em;
+	font-size:.75em;
+	outline-offset:-1px;
+}
+@media (forced-colors: active){
+.ck-content .image > figcaption{
+		background-color:unset;
+		color:unset;
+}
+	}
+.ck-content img.image_resized{
+	height:auto;
+}
+
+.ck-content .image.image_resized{
+	max-width:100%;
+	display:block;
+	box-sizing:border-box;
+}
+
+.ck-content .image.image_resized img{
+		width:100%;
+	}
+
+.ck-content .image.image_resized > figcaption{
+		display:block;
+	}
+
+:root{
+	--ck-image-style-spacing:1.5em;
+	--ck-inline-image-style-spacing:calc(var(--ck-image-style-spacing) / 2);
+}
+
+.ck-content .image.image-style-block-align-left,
+		.ck-content .image.image-style-block-align-right{
+			max-width:calc(100% - var(--ck-image-style-spacing));
+		}
+
+.ck-content .image.image-style-align-left,
+		.ck-content .image.image-style-align-right{
+			clear:none;
+		}
+
+.ck-content .image.image-style-side{
+			float:right;
+			margin-left:var(--ck-image-style-spacing);
+			max-width:50%;
+		}
+
+.ck-content .image.image-style-align-left{
+			float:left;
+			margin-right:var(--ck-image-style-spacing);
+		}
+
+.ck-content .image.image-style-align-right{
+			float:right;
+			margin-left:var(--ck-image-style-spacing);
+		}
+
+.ck-content .image.image-style-block-align-right{
+			margin-right:0;
+			margin-left:auto;
+		}
+
+.ck-content .image.image-style-block-align-left{
+			margin-left:0;
+			margin-right:auto;
+		}
+
+.ck-content .image-style-align-center{
+		margin-left:auto;
+		margin-right:auto;
+	}
+
+.ck-content .image-style-align-left{
+		float:left;
+		margin-right:var(--ck-image-style-spacing);
+	}
+
+.ck-content .image-style-align-right{
+		float:right;
+		margin-left:var(--ck-image-style-spacing);
+	}
+
+.ck-content p + .image.image-style-align-left,
+	.ck-content p + .image.image-style-align-right,
+	.ck-content p + .image.image-style-side{
+		margin-top:0;
+	}
+
+.ck-content .image-inline.image-style-align-left,
+		.ck-content .image-inline.image-style-align-right{
+			margin-top:var(--ck-inline-image-style-spacing);
+			margin-bottom:var(--ck-inline-image-style-spacing);
+		}
+
+.ck-content .image-inline.image-style-align-left{
+			margin-right:var(--ck-inline-image-style-spacing);
+		}
+
+.ck-content .image-inline.image-style-align-right{
+			margin-left:var(--ck-inline-image-style-spacing);
+		}
+
+.ck-content .image{
+		display:table;
+		clear:both;
+		text-align:center;
+		margin:0.9em auto;
+		min-width:50px;
+	}
+
+.ck-content .image img{
+			display:block;
+			margin:0 auto;
+			max-width:100%;
+			min-width:100%;
+			height:auto;
+		}
+
+.ck-content .image-inline{
+		display:inline-flex;
+		max-width:100%;
+		align-items:flex-start;
+	}
+
+.ck-content .image-inline picture{
+			display:flex;
+		}
+
+.ck-content .image-inline picture,
+		.ck-content .image-inline img{
+			flex-grow:1;
+			flex-shrink:1;
+			max-width:100%;
+		}