@ckeditor/ckeditor5-image 0.0.0-internal-20241017.0

package/src/index.js

@@ -0,0 +1,41 @@
+/**
+ * @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
+ */
+export { default as AutoImage } from './autoimage.js';
+export { default as Image } from './image.js';
+export { default as ImageEditing } from './image/imageediting.js';
+export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils.js';
+export { default as ImageCaption } from './imagecaption.js';
+export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting.js';
+export { default as ImageInsert } from './imageinsert.js';
+export { default as ImageInsertUI } from './imageinsert/imageinsertui.js';
+export { default as ImageResize } from './imageresize.js';
+export { default as ImageResizeButtons } from './imageresize/imageresizebuttons.js';
+export { default as ImageResizeEditing } from './imageresize/imageresizeediting.js';
+export { default as ImageResizeHandles } from './imageresize/imageresizehandles.js';
+export { default as ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
+export { default as ImageSizeAttributes } from './imagesizeattributes.js';
+export { default as ImageStyle } from './imagestyle.js';
+export { default as ImageStyleEditing } from './imagestyle/imagestyleediting.js';
+export { default as ImageStyleUI } from './imagestyle/imagestyleui.js';
+export { default as ImageTextAlternative } from './imagetextalternative.js';
+export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting.js';
+export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui.js';
+export { default as ImageToolbar } from './imagetoolbar.js';
+export { default as ImageUpload } from './imageupload.js';
+export { default as ImageUploadEditing } from './imageupload/imageuploadediting.js';
+export { default as ImageUploadProgress } from './imageupload/imageuploadprogress.js';
+export { default as ImageUploadUI } from './imageupload/imageuploadui.js';
+export { default as PictureEditing } from './pictureediting.js';
+export { default as ImageBlock } from './imageblock.js';
+export { default as ImageInline } from './imageinline.js';
+export { default as ImageInsertViaUrl } from './imageinsertviaurl.js';
+export { default as ImageUtils } from './imageutils.js';
+export { default as ImageBlockEditing } from './image/imageblockediting.js';
+export { default as ImageCaptionUI } from './imagecaption/imagecaptionui.js';
+export { createImageTypeRegExp } from './imageupload/utils.js';
+import './augmentation.js';

package/src/pictureediting.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @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/pictureediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageEditing from './image/imageediting.js';
+import ImageUtils from './imageutils.js';
+/**
+ * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
+ *
+ * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
+ * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
+ * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
+ *
+ * ```html
+ * <p>Inline image using picture:
+ * 	<picture>
+ * 		<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
+ * 		<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
+ * 		<!-- Other sources as specified in the "sources" model attribute... -->
+ * 		<img src="image.png" alt="An image using picture" />
+ * 	</picture>
+ * </p>
+ *
+ * <p>Block image using picture:</p>
+ * <figure class="image">
+ * 	<picture>
+ * 		<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
+ * 		<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
+ * 		<!-- Other sources as specified in the "sources" model attribute... -->
+ * 		<img src="image.png" alt="An image using picture" />
+ * 	</picture>
+ * 	<figcaption>Caption of the image</figcaption>
+ * </figure>
+ * ```
+ *
+ * **Note:** The value of the `sources` {@glink framework/architecture/editing-engine#changing-the-model model attribute}
+ * in both examples equals:
+ *
+ * ```css
+ * [
+ * 	{
+ * 		media: '(min-width: 800px)',
+ * 		srcset: 'image-large.webp',
+ * 		type: 'image/webp'
+ * 	},
+ * 	{
+ * 		media: '(max-width: 800px)',
+ * 		srcset: 'image-small.webp',
+ * 		type: 'image/webp'
+ * 	}
+ * ]
+ * ```
+ *
+ * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
+ * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
+ * supports image sources and provides neccessary data.
+ *
+ * @private
+ */
+export default class PictureEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires(): readonly [typeof ImageEditing, typeof ImageUtils];
+    /**
+     * @inheritDoc
+     */
+    static get pluginName(): "PictureEditing";
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin(): true;
+    /**
+     * @inheritDoc
+     */
+    afterInit(): void;
+    /**
+     * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
+     * and the model `sources` attribute.
+     */
+    private _setupConversion;
+    /**
+     * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
+     * view structure out-of-the-box if relevant data is provided along the
+     * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
+     */
+    private _setupImageUploadEditingIntegration;
+}

package/src/pictureediting.js

@@ -0,0 +1,136 @@
+/**
+ * @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/pictureediting
+ */
+import { Plugin } from 'ckeditor5/src/core.js';
+import ImageEditing from './image/imageediting.js';
+import ImageUtils from './imageutils.js';
+import { downcastSourcesAttribute, upcastPicture } from './image/converters.js';
+/**
+ * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
+ *
+ * * It enables the `sources` model attribute on `imageBlock` and `imageInline` model elements
+ * (brought by {@link module:image/imageblock~ImageBlock} and {@link module:image/imageinline~ImageInline}, respectively).
+ * * It translates the `sources` model element to the view (also: data) structure that may look as follows:
+ *
+ * ```html
+ * <p>Inline image using picture:
+ * 	<picture>
+ * 		<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
+ * 		<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
+ * 		<!-- Other sources as specified in the "sources" model attribute... -->
+ * 		<img src="image.png" alt="An image using picture" />
+ * 	</picture>
+ * </p>
+ *
+ * <p>Block image using picture:</p>
+ * <figure class="image">
+ * 	<picture>
+ * 		<source media="(min-width: 800px)" srcset="image-large.webp" type="image/webp">
+ * 		<source media="(max-width: 800px)" srcset="image-small.webp" type="image/webp">
+ * 		<!-- Other sources as specified in the "sources" model attribute... -->
+ * 		<img src="image.png" alt="An image using picture" />
+ * 	</picture>
+ * 	<figcaption>Caption of the image</figcaption>
+ * </figure>
+ * ```
+ *
+ * **Note:** The value of the `sources` {@glink framework/architecture/editing-engine#changing-the-model model attribute}
+ * in both examples equals:
+ *
+ * ```css
+ * [
+ * 	{
+ * 		media: '(min-width: 800px)',
+ * 		srcset: 'image-large.webp',
+ * 		type: 'image/webp'
+ * 	},
+ * 	{
+ * 		media: '(max-width: 800px)',
+ * 		srcset: 'image-small.webp',
+ * 		type: 'image/webp'
+ * 	}
+ * ]
+ * ```
+ *
+ * * It integrates with the {@link module:image/imageupload~ImageUpload} plugin so images uploaded in the editor
+ * automatically render using `<picture>` if the {@glink features/images/image-upload/image-upload upload adapter}
+ * supports image sources and provides neccessary data.
+ *
+ * @private
+ */
+export default class PictureEditing extends Plugin {
+    /**
+     * @inheritDoc
+     */
+    static get requires() {
+        return [ImageEditing, ImageUtils];
+    }
+    /**
+     * @inheritDoc
+     */
+    static get pluginName() {
+        return 'PictureEditing';
+    }
+    /**
+     * @inheritDoc
+     */
+    static get isOfficialPlugin() {
+        return true;
+    }
+    /**
+     * @inheritDoc
+     */
+    afterInit() {
+        const editor = this.editor;
+        if (editor.plugins.has('ImageBlockEditing')) {
+            editor.model.schema.extend('imageBlock', {
+                allowAttributes: ['sources']
+            });
+        }
+        if (editor.plugins.has('ImageInlineEditing')) {
+            editor.model.schema.extend('imageInline', {
+                allowAttributes: ['sources']
+            });
+        }
+        this._setupConversion();
+        this._setupImageUploadEditingIntegration();
+    }
+    /**
+     * Configures conversion pipelines to support upcasting and downcasting images using the `<picture>` view element
+     * and the model `sources` attribute.
+     */
+    _setupConversion() {
+        const editor = this.editor;
+        const conversion = editor.conversion;
+        const imageUtils = editor.plugins.get('ImageUtils');
+        conversion.for('upcast').add(upcastPicture(imageUtils));
+        conversion.for('downcast').add(downcastSourcesAttribute(imageUtils));
+    }
+    /**
+     * Makes it possible for uploaded images to get the `sources` model attribute and the `<picture>...</picture>`
+     * view structure out-of-the-box if relevant data is provided along the
+     * {@link module:image/imageupload/imageuploadediting~ImageUploadEditing#event:uploadComplete} event.
+     */
+    _setupImageUploadEditingIntegration() {
+        const editor = this.editor;
+        if (!editor.plugins.has('ImageUploadEditing')) {
+            return;
+        }
+        const imageUploadEditing = editor.plugins.get('ImageUploadEditing');
+        this.listenTo(imageUploadEditing, 'uploadComplete', (evt, { imageElement, data }) => {
+            const sources = data.sources;
+            if (!sources) {
+                return;
+            }
+            editor.model.change(writer => {
+                writer.setAttributes({
+                    sources
+                }, imageElement);
+            });
+        });
+    }
+}

package/theme/image.css

@@ -0,0 +1,143 @@
+/*
+ * 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
+ */
+
+.ck-content {
+	& .image {
+		display: table;
+		clear: both;
+		text-align: center;
+
+		/* Make sure there is some space between the content and the image. Center image by default. */
+		/* The first value should be equal to --ck-spacing-large variable if used in the editor context
+	 	to avoid the content jumping (See https://github.com/ckeditor/ckeditor5/issues/9825). */
+		margin: 0.9em auto;
+
+		/* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
+		min-width: 50px;
+
+		& img {
+			/* Prevent unnecessary margins caused by line-height (see #44). */
+			display: block;
+
+			/* Center the image if its width is smaller than the content's width. */
+			margin: 0 auto;
+
+			/* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
+			max-width: 100%;
+
+			/* Make sure the image is never smaller than the parent container (See: https://github.com/ckeditor/ckeditor5/issues/9300). */
+			min-width: 100%;
+
+			/* Keep proportions of the block image if the height is set and the image is wider than the editor width.
+			See https://github.com/ckeditor/ckeditor5/issues/14542. */
+			height: auto;
+		}
+	}
+
+	& .image-inline {
+		/*
+		 * Normally, the .image-inline would have "display: inline-block" and "img { width: 100% }" (to follow the wrapper while resizing).
+		 * Unfortunately, together with "srcset", it gets automatically stretched up to the width of the editing root.
+		 * This strange behavior does not happen with inline-flex.
+		 */
+		display: inline-flex;
+
+		/* While being resized, don't allow the image to exceed the width of the editing root. */
+		max-width: 100%;
+
+		/* This is required by Safari to resize images in a sensible way. Without this, the browser breaks the ratio. */
+		align-items: flex-start;
+
+		/* When the picture is present it must act as a flex container to let the img resize properly */
+		& picture {
+			display: flex;
+		}
+
+		/* When the picture is present, it must act like a resizable img. */
+		& picture,
+		& img {
+			/* This is necessary for the img to span the entire .image-inline wrapper and to resize properly. */
+			flex-grow: 1;
+			flex-shrink: 1;
+
+			/* Prevents overflowing the editing root boundaries when an inline image is very wide. */
+			max-width: 100%;
+		}
+	}
+}
+
+.ck.ck-editor__editable {
+	/*
+	 * Inhertit the content styles padding of the <figcaption> in case the integration overrides `text-align: center`
+	 * of `.image` (e.g. to the left/right). This ensures the placeholder stays at the padding just like the native
+	 * caret does, and not at the edge of <figcaption>.
+	 */
+	& .image > figcaption.ck-placeholder::before {
+		padding-left: inherit;
+		padding-right: inherit;
+
+		/*
+		 * Make sure the image caption placeholder doesn't overflow the placeholder area.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9162.
+		 */
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	/*
+	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
+	 */
+	& .image {
+		z-index: 1;
+
+		/*
+		 * Make sure the selected image always stays on top of its siblings.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9108.
+		 */
+		&.ck-widget_selected {
+			z-index: 2;
+		}
+	}
+
+	/*
+	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
+	 */
+	& .image-inline {
+		z-index: 1;
+
+		/*
+		 * Make sure the selected inline image always stays on top of its siblings.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9108.
+		 */
+		&.ck-widget_selected {
+			z-index: 2;
+
+			/*
+			 * Make sure the native browser selection style is not displayed.
+			 * Inline image widgets have their own styles for the selected state and
+			 * leaving this up to the browser is asking for a visual collision.
+			 */
+			& ::selection {
+				display: none;
+			}
+		}
+	}
+
+	/* Keep proportions of the inline image if the height is set and the image is wider than the editor width.
+	See https://github.com/ckeditor/ckeditor5/issues/14542. */
+	& .image-inline img {
+		height: auto;
+	}
+
+	/* The inline image nested in the table should have its original size if not resized.
+	See https://github.com/ckeditor/ckeditor5/issues/9117. */
+	& td,
+	& th {
+		& .image-inline img {
+			max-width: none;
+		}
+	}
+}

package/theme/imagecaption.css

@@ -0,0 +1,51 @@
+/*
+ * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
+
+:root {
+	--ck-color-image-caption-background: hsl(0, 0%, 97%);
+	--ck-color-image-caption-text: hsl(0, 0%, 20%);
+	--ck-color-image-caption-highlighted-background: hsl(52deg 100% 50%);
+}
+
+/* Content styles */
+.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;
+
+	/* Improve placeholder rendering in high-constrast mode (https://github.com/ckeditor/ckeditor5/issues/14907). */
+	@media (forced-colors: active) {
+		background-color: unset;
+		color: unset;
+	}
+}
+
+/* Editing styles */
+.ck.ck-editor__editable .image > figcaption.image__caption_highlighted {
+	@mixin ck-media-default-colors {
+		animation: ck-image-caption-highlight .6s ease-out;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
+}
+
+@keyframes ck-image-caption-highlight {
+	0% {
+		background-color: var(--ck-color-image-caption-highlighted-background);
+	}
+
+	100% {
+		background-color: var(--ck-color-image-caption-background);
+	}
+}

package/theme/imagecustomresizeform.css

@@ -0,0 +1,33 @@
+/*
+ * 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 "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
+
+.ck.ck-image-custom-resize-form {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	align-items: flex-start;
+
+	& .ck-labeled-field-view {
+		display: inline-block;
+	}
+
+	& .ck-label {
+		display: none;
+	}
+
+	@mixin ck-media-phone {
+		flex-wrap: wrap;
+
+		& .ck-labeled-field-view {
+			flex-basis: 100%;
+		}
+
+		& .ck-button {
+			flex-basis: 50%;
+		}
+	}
+}

package/theme/imageinsert.css

@@ -0,0 +1,14 @@
+/*
+ * 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
+ */
+
+.ck.ck-image-insert-url {
+	width: 400px;
+	padding: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+
+	& .ck-image-insert-url__action-row {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+	}
+}

package/theme/imageplaceholder.css

@@ -0,0 +1,10 @@
+/*
+ * 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
+ */
+
+.ck.ck-editor__editable {
+	& img.image_placeholder {
+		background-size: 100% 100%;
+	}
+}

package/theme/imageresize.css

@@ -0,0 +1,53 @@
+/*
+ * 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
+ */
+
+/* Preserve aspect ratio of the resized image after introducing image height attribute. */
+.ck-content img.image_resized {
+	height: auto;
+}
+
+.ck-content .image.image_resized {
+	max-width: 100%;
+	/*
+	The `<figure>` element for resized images must not use `display:table` as browsers do not support `max-width` for it well.
+	See https://stackoverflow.com/questions/4019604/chrome-safari-ignoring-max-width-in-table/14420691#14420691 for more.
+	Fortunately, since we control the width, there is no risk that the image will look bad.
+	*/
+	display: block;
+	box-sizing: border-box;
+
+	& img {
+		/* For resized images it is the `<figure>` element that determines the image width. */
+		width: 100%;
+	}
+
+	& > figcaption {
+		/* The `<figure>` element uses `display:block`, so `<figcaption>` also has to. */
+		display: block;
+	}
+}
+
+.ck.ck-editor__editable {
+	/* The resized inline image nested in the table should respect its parent size.
+	See https://github.com/ckeditor/ckeditor5/issues/9117. */
+	& td,
+	& th {
+		& .image-inline.image_resized img {
+			max-width: 100%;
+		}
+	}
+}
+
+[dir="ltr"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
+	margin-right: var(--ck-spacing-standard);
+}
+
+[dir="rtl"] .ck.ck-button.ck-button_with-text.ck-resize-image-button .ck-button__icon {
+	margin-left: var(--ck-spacing-standard);
+}
+
+.ck.ck-dropdown .ck-button.ck-resize-image-button .ck-button__label {
+	width: 4em;
+}