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

package/dist/index-content.css

@@ -3,15 +3,16 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 :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-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;
@@ -41,13 +42,13 @@
 	}
 
 :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);
 }
 
 .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));
 		}
 
 .ck-content .image.image-style-align-left,
@@ -57,18 +58,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{
@@ -88,12 +89,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);
 	}
 
 .ck-content p + .image.image-style-align-left,
@@ -104,16 +105,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);
 		}
 
 .ck-content .image{

package/dist/index-editor.css

@@ -3,8 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-licensing-options
  */
 :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%);
 }
 @media (forced-colors: none){
@@ -24,20 +24,10 @@
 	}
 
 	100%{
-		background-color:var(--ck-color-image-caption-background);
+		background-color:var(--ck-content-color-image-caption-background);
 	}
 }
 
-.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);
-	}
-
 .ck.ck-editor__editable td .image-inline.image_resized img, .ck.ck-editor__editable th .image-inline.image_resized img{
 			max-width:100%;
 		}
@@ -55,8 +45,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);
 }
 
 .ck.ck-splitbutton.ck-splitbutton_flatten:hover > .ck-splitbutton__action:not(.ck-disabled),
@@ -78,6 +68,96 @@
 				background-color:var(--ck-color-button-on-hover-background);
 			}
 
+.ck.ck-editor__editable .image,
+	.ck.ck-editor__editable .image-inline{
+		position:relative;
+	}
+
+.ck.ck-editor__editable .image .ck-progress-bar,
+	.ck.ck-editor__editable .image-inline .ck-progress-bar{
+		position:absolute;
+		top:0;
+		left:0;
+	}
+
+.ck-image-upload-complete-icon{
+	display:block;
+	position:absolute;
+	top:min(var(--ck-spacing-medium), 6%);
+	right:min(var(--ck-spacing-medium), 6%);
+	border-radius:50%;
+	z-index:1;
+}
+
+.ck-image-upload-complete-icon::after{
+		content:"";
+		position:absolute;
+	}
+
+.ck .ck-upload-placeholder-loader{
+	position:absolute;
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	top:0;
+	left:0;
+}
+
+.ck .ck-upload-placeholder-loader::before{
+		content:'';
+		position:relative;
+	}
+
+.ck.ck-editor__editable .image > figcaption.ck-placeholder::before{
+		padding-left:inherit;
+		padding-right:inherit;
+		white-space:nowrap;
+		overflow:hidden;
+		text-overflow:ellipsis;
+	}
+
+.ck.ck-editor__editable .image{
+		z-index:1;
+	}
+
+.ck.ck-editor__editable .image.ck-widget_selected{
+			z-index:2;
+		}
+
+.ck.ck-editor__editable .image-inline{
+		z-index:1;
+	}
+
+.ck.ck-editor__editable .image-inline.ck-widget_selected{
+			z-index:2;
+		}
+
+.ck.ck-editor__editable .image-inline.ck-widget_selected ::selection{
+				display:none;
+			}
+
+.ck.ck-editor__editable .image-inline img{
+		height:auto;
+	}
+
+.ck.ck-editor__editable td .image-inline img, .ck.ck-editor__editable th .image-inline img{
+			max-width:none;
+		}
+
+.ck.ck-editor__editable img.image_placeholder{
+		background-size:100% 100%;
+	}
+
+.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);
+	}
+
 .ck-vertical-form .ck-button::after{
 		content:"";
 		width:0;
@@ -178,84 +258,4 @@
 
 [dir="rtl"] .ck.ck-form.ck-responsive-form > :not(:last-child){
 				margin-left:0;
-			}
-
-.ck.ck-editor__editable .image,
-	.ck.ck-editor__editable .image-inline{
-		position:relative;
-	}
-
-.ck.ck-editor__editable .image .ck-progress-bar,
-	.ck.ck-editor__editable .image-inline .ck-progress-bar{
-		position:absolute;
-		top:0;
-		left:0;
-	}
-
-.ck-image-upload-complete-icon{
-	display:block;
-	position:absolute;
-	top:min(var(--ck-spacing-medium), 6%);
-	right:min(var(--ck-spacing-medium), 6%);
-	border-radius:50%;
-	z-index:1;
-}
-
-.ck-image-upload-complete-icon::after{
-		content:"";
-		position:absolute;
-	}
-
-.ck .ck-upload-placeholder-loader{
-	position:absolute;
-	display:flex;
-	align-items:center;
-	justify-content:center;
-	top:0;
-	left:0;
-}
-
-.ck .ck-upload-placeholder-loader::before{
-		content:'';
-		position:relative;
-	}
-
-.ck.ck-editor__editable .image > figcaption.ck-placeholder::before{
-		padding-left:inherit;
-		padding-right:inherit;
-		white-space:nowrap;
-		overflow:hidden;
-		text-overflow:ellipsis;
-	}
-
-.ck.ck-editor__editable .image{
-		z-index:1;
-	}
-
-.ck.ck-editor__editable .image.ck-widget_selected{
-			z-index:2;
-		}
-
-.ck.ck-editor__editable .image-inline{
-		z-index:1;
-	}
-
-.ck.ck-editor__editable .image-inline.ck-widget_selected{
-			z-index:2;
-		}
-
-.ck.ck-editor__editable .image-inline.ck-widget_selected ::selection{
-				display:none;
-			}
-
-.ck.ck-editor__editable .image-inline img{
-		height:auto;
-	}
-
-.ck.ck-editor__editable td .image-inline img, .ck.ck-editor__editable th .image-inline img{
-			max-width:none;
-		}
-
-.ck.ck-editor__editable img.image_placeholder{
-		background-size:100% 100%;
-	}
+			}