@ckeditor/ckeditor5-image 39.0.1 → 40.0.0

package/theme/image.css

@@ -28,7 +28,11 @@
 			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%
+			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;
 		}
 	}
 
@@ -83,28 +87,51 @@
 		text-overflow: ellipsis;
 	}
 
-
 	/*
-	 * Make sure the selected inline image always stays on top of its siblings.
-	 * See https://github.com/ckeditor/ckeditor5/issues/9108.
+	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
 	 */
-	& .image.ck-widget_selected {
+	& .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;
+		}
 	}
 
-	& .image-inline.ck-widget_selected {
+	/*
+	 * See https://github.com/ckeditor/ckeditor5/issues/15115.
+	 */
+	& .image-inline {
 		z-index: 1;
 
 		/*
-		 * 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.
+		 * Make sure the selected inline image always stays on top of its siblings.
+		 * See https://github.com/ckeditor/ckeditor5/issues/9108.
 		 */
-		& ::selection {
-			display: none;
+		&.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,

package/theme/imageresize.css

@@ -3,6 +3,11 @@
  * 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%;
 	/*