@ckeditor/ckeditor5-image 45.2.1 → 46.0.0-alpha.1

package/dist/index.css

@@ -13,8 +13,8 @@
  */
 
 :root {
-	--ck-color-image-caption-background: hsl(0, 0%, 97%);
-	--ck-color-image-caption-text: hsl(0, 0%, 20%);
+	--ck-content-color-image-caption-background: hsl(0, 0%, 97%);
+	--ck-content-color-image-caption-text: hsl(0, 0%, 20%);
 	--ck-color-image-caption-highlighted-background: hsl(52deg 100% 50%);
 }
 
@@ -22,9 +22,10 @@
 .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);
+	word-break: normal;
+	overflow-wrap: anywhere;
+	color: var(--ck-content-color-image-caption-text);
+	background-color: var(--ck-content-color-image-caption-background);
 	padding: .6em;
 	font-size: .75em;
 	outline-offset: -1px;
@@ -56,25 +57,10 @@
 	}
 
 	100% {
-		background-color: var(--ck-color-image-caption-background);
+		background-color: var(--ck-content-color-image-caption-background);
 	}
 }
 
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck.ck-image-insert-url {
-	width: 400px;
-	padding: var(--ck-spacing-large) var(--ck-spacing-large) 0;
-}
-
-.ck.ck-image-insert-url .ck-image-insert-url__action-row {
-		display: grid;
-		grid-template-columns: repeat(2, 1fr);
-	}
-
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -131,8 +117,8 @@
  */
 
 :root {
-	--ck-image-style-spacing: 1.5em;
-	--ck-inline-image-style-spacing: calc(var(--ck-image-style-spacing) / 2);
+	--ck-content-image-style-spacing: 1.5em;
+	--ck-content-inline-image-style-spacing: calc(var(--ck-content-image-style-spacing) / 2);
 }
 
 /* See: https://github.com/ckeditor/ckeditor5/issues/16317 */
@@ -143,7 +129,7 @@
 
 .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));
+			max-width: calc(100% - var(--ck-content-image-style-spacing));
 		}
 
 /* Allows displaying multiple floating images in the same line.
@@ -156,18 +142,18 @@
 
 .ck-content .image.image-style-side {
 			float: right;
-			margin-left: var(--ck-image-style-spacing);
+			margin-left: var(--ck-content-image-style-spacing);
 			max-width: 50%;
 		}
 
 .ck-content .image.image-style-align-left {
 			float: left;
-			margin-right: var(--ck-image-style-spacing);
+			margin-right: var(--ck-content-image-style-spacing);
 		}
 
 .ck-content .image.image-style-align-right {
 			float: right;
-			margin-left: var(--ck-image-style-spacing);
+			margin-left: var(--ck-content-image-style-spacing);
 		}
 
 .ck-content .image.image-style-block-align-right {
@@ -187,12 +173,12 @@
 
 .ck-content .image-style-align-left {
 		float: left;
-		margin-right: var(--ck-image-style-spacing);
+		margin-right: var(--ck-content-image-style-spacing);
 	}
 
 .ck-content .image-style-align-right {
 		float: right;
-		margin-left: var(--ck-image-style-spacing);
+		margin-left: var(--ck-content-image-style-spacing);
 	}
 
 /* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */
@@ -205,16 +191,16 @@
 
 .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);
+			margin-top: var(--ck-content-inline-image-style-spacing);
+			margin-bottom: var(--ck-content-inline-image-style-spacing);
 		}
 
 .ck-content .image-inline.image-style-align-left {
-			margin-right: var(--ck-inline-image-style-spacing);
+			margin-right: var(--ck-content-inline-image-style-spacing);
 		}
 
 .ck-content .image-inline.image-style-align-right {
-			margin-left: var(--ck-inline-image-style-spacing);
+			margin-left: var(--ck-content-inline-image-style-spacing);
 		}
 
 /* The button should display as a regular drop-down if the action button
@@ -239,136 +225,6 @@
 				background-color: var(--ck-color-button-on-hover-background);
 			}
 
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-.ck-vertical-form .ck-button::after {
-		content: "";
-		width: 0;
-		position: absolute;
-		right: -1px;
-		top: -1px;
-		bottom: -1px;
-		z-index: 1;
-	}
-
-.ck-vertical-form .ck-button:focus::after {
-		display: none;
-	}
-
-@media screen and (max-width: 600px) {
-			.ck.ck-responsive-form .ck-button::after {
-				content: "";
-				width: 0;
-				position: absolute;
-				right: -1px;
-				top: -1px;
-				bottom: -1px;
-				z-index: 1;
-			}
-
-			.ck.ck-responsive-form .ck-button:focus::after {
-				display: none;
-			}
-	}
-
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-/*
- * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
- * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
- */
-
-:root {
-	--ck-form-default-width: 340px;
-}
-
-.ck.ck-form {
-	padding: 0 0 var(--ck-spacing-large);
-}
-
-.ck.ck-form.ck-form_default-width {
-		width: var(--ck-form-default-width);
-	}
-
-.ck.ck-form:focus {
-		outline: none;
-	}
-
-.ck.ck-form .ck.ck-input-text,
-	.ck.ck-form .ck.ck-input-number {
-		min-width: 100%;
-		width: 0;
-	}
-
-.ck.ck-form .ck.ck-dropdown {
-		min-width: 100%;
-	}
-
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
-				border: 1px solid var(--ck-color-base-border);
-			}
-
-.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
-				width: 100%;
-			}
-
-/* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
-
-@media screen and (max-width: 600px) {
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit {
-					flex-direction: column;
-					align-items: stretch;
-					padding: 0;
-			}
-	}
-
-@media screen and (max-width: 600px) {
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck {
-						margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
-				}
-	}
-
-@media screen and (max-width: 600px) {
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text {
-						justify-content: center;
-				}
-	}
-
-@media screen and (max-width: 600px) {
-
-.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding {
-					padding-bottom: var(--ck-spacing-large);
-			}
-	}
-
-[dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) {
-				margin-left: 0;
-			}
-
-[dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) {
-				margin-left: 0;
-			}
-
-/* End of `ck-responsive-form` customization */
-
 /*
  * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
@@ -587,4 +443,149 @@
 		background-size: 100% 100%;
 	}
 
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+.ck.ck-image-insert-url {
+	width: 400px;
+	padding: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+}
+
+.ck.ck-image-insert-url .ck-image-insert-url__action-row {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+	}
+
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+.ck-vertical-form .ck-button::after {
+		content: "";
+		width: 0;
+		position: absolute;
+		right: -1px;
+		top: -1px;
+		bottom: -1px;
+		z-index: 1;
+	}
+
+.ck-vertical-form .ck-button:focus::after {
+		display: none;
+	}
+
+@media screen and (max-width: 600px) {
+			.ck.ck-responsive-form .ck-button::after {
+				content: "";
+				width: 0;
+				position: absolute;
+				right: -1px;
+				top: -1px;
+				bottom: -1px;
+				z-index: 1;
+			}
+
+			.ck.ck-responsive-form .ck-button:focus::after {
+				display: none;
+			}
+	}
+
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+/*
+ * Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
+ */
+
+:root {
+	--ck-form-default-width: 340px;
+}
+
+.ck.ck-form {
+	padding: 0 0 var(--ck-spacing-large);
+}
+
+.ck.ck-form.ck-form_default-width {
+		width: var(--ck-form-default-width);
+	}
+
+.ck.ck-form:focus {
+		outline: none;
+	}
+
+.ck.ck-form .ck.ck-input-text,
+	.ck.ck-form .ck.ck-input-number {
+		min-width: 100%;
+		width: 0;
+	}
+
+.ck.ck-form .ck.ck-dropdown {
+		min-width: 100%;
+	}
+
+.ck.ck-form .ck.ck-dropdown .ck-dropdown__button:not(:focus) {
+				border: 1px solid var(--ck-color-base-border);
+			}
+
+.ck.ck-form .ck.ck-dropdown .ck-dropdown__button .ck-button__label {
+				width: 100%;
+			}
+
+/* Default `ck-responsive-form` customization when it lies next to `ck-form` class */
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit {
+					flex-direction: column;
+					align-items: stretch;
+					padding: 0;
+			}
+	}
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit > .ck {
+						margin: var(--ck-spacing-large) var(--ck-spacing-large) 0;
+				}
+	}
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_with-submit .ck-button_with-text {
+						justify-content: center;
+				}
+	}
+
+@media screen and (max-width: 600px) {
+
+.ck.ck-form.ck-responsive-form .ck.ck-form__row.ck-form__row_large-bottom-padding {
+					padding-bottom: var(--ck-spacing-large);
+			}
+	}
+
+[dir="ltr"] .ck.ck-form.ck-responsive-form > :not(:first-child) {
+				margin-left: 0;
+			}
+
+[dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child) {
+				margin-left: 0;
+			}
+
+/* End of `ck-responsive-form` customization */
+
 /*# sourceMappingURL=index.css.map */