Merge pull request #297 from ckeditor/t/ckeditor5/1870

Fix: Image widgets should not span the entire width of the editor. Closes ckeditor/ckeditor5#1870.

BREAKING CHANGE: From now on, all images in the editor use CSS `display: table` by default (`.ck-content .image { display: table }`). It can affect integrations and we recommend checking if images render correctly in your project after this update. There is a possibility you might need to adjust the CSS to adapt to this change.

theme/image.css

@@ -4,11 +4,12 @@
  */
 
 .ck-content .image {
+	display: table;
 	clear: both;
 	text-align: center;
 
-	/* Make sure there is some space between the content and the image. */
-	margin: 1em 0;
+	/* Make sure there is some space between the content and the image. Center image by default. */
+	margin: 1em auto;
 
 	& > img {
 		/* Prevent unnecessary margins caused by line-height (see #44). */
@@ -19,5 +20,8 @@
 
 		/* Make sure the image never exceeds the size of the parent container (ckeditor/ckeditor5-ui#67). */
 		max-width: 100%;
+
+		/* Make sure the caption will be displayed properly (See: https://github.com/ckeditor/ckeditor5/issues/1870). */
+		min-width: 50px;
 	}
 }

theme/imagecaption.css

@@ -4,6 +4,9 @@
  */
 
 .ck-content .image > figcaption {
+	display: table-caption;
+	caption-side: bottom;
+	word-break: break-word;
 	color: hsl(0, 0%, 20%);
 	background-color: hsl(0, 0%, 97%);
 	padding: .6em;