From de1bf15f79e5e94f552629e97a54c86b92f6b2e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 10 May 2024 15:52:57 +0200 Subject: [PATCH 1/3] Increased specificity of image-style-align CSS classes. --- packages/ckeditor5-image/theme/imagestyle.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ckeditor5-image/theme/imagestyle.css b/packages/ckeditor5-image/theme/imagestyle.css index 0228589b61d..4a8ad985819 100644 --- a/packages/ckeditor5-image/theme/imagestyle.css +++ b/packages/ckeditor5-image/theme/imagestyle.css @@ -45,12 +45,12 @@ margin-left: var(--ck-image-style-spacing); } - & .image-style-block-align-right { + & .image.image-style-block-align-right { margin-right: 0; margin-left: auto; } - & .image-style-block-align-left { + & .image.image-style-block-align-left { margin-left: 0; margin-right: auto; } From d1ce40e547951d2a46fd605ca5314cff57261ae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Mon, 13 May 2024 12:08:54 +0200 Subject: [PATCH 2/3] Increased specificity of almost all image-style-align CSS classes. --- packages/ckeditor5-image/theme/imagestyle.css | 79 ++++++++++--------- 1 file changed, 41 insertions(+), 38 deletions(-) diff --git a/packages/ckeditor5-image/theme/imagestyle.css b/packages/ckeditor5-image/theme/imagestyle.css index 4a8ad985819..88bf6ad8dbc 100644 --- a/packages/ckeditor5-image/theme/imagestyle.css +++ b/packages/ckeditor5-image/theme/imagestyle.css @@ -9,56 +9,59 @@ } .ck-content { - /* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback - confirming successful application of the style if image width exceeds the editor's size. - See https://github.com/ckeditor/ckeditor5/issues/9342 */ - & .image-style-block-align-left, - & .image-style-block-align-right { - max-width: calc(100% - var(--ck-image-style-spacing)); - } + /* See: https://github.com/ckeditor/ckeditor5/issues/16317 */ + & .image { + /* Provides a minimal side margin for the left and right aligned images, so that the user has a visual feedback + confirming successful application of the style if image width exceeds the editor's size. + See https://github.com/ckeditor/ckeditor5/issues/9342 */ + &.image-style-block-align-left, + &.image-style-block-align-right { + max-width: calc(100% - var(--ck-image-style-spacing)); + } - /* Allows displaying multiple floating images in the same line. - See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */ - & .image-style-align-left, - & .image-style-align-right { - clear: none; - } + /* Allows displaying multiple floating images in the same line. + See https://github.com/ckeditor/ckeditor5/issues/9183#issuecomment-804988132 */ + &.image-style-align-left, + &.image-style-align-right { + clear: none; + } - & .image-style-side { - float: right; - margin-left: var(--ck-image-style-spacing); - max-width: 50%; - } + &.image-style-side { + float: right; + margin-left: var(--ck-image-style-spacing); + max-width: 50%; + } - & .image-style-align-left { - float: left; - margin-right: var(--ck-image-style-spacing); - } + &.image-style-align-left { + float: left; + margin-right: var(--ck-image-style-spacing); + } - & .image-style-align-center { - margin-left: auto; - margin-right: auto; - } + &.image-style-align-right { + float: right; + margin-left: var(--ck-image-style-spacing); + } - & .image-style-align-right { - float: right; - margin-left: var(--ck-image-style-spacing); - } + &.image-style-block-align-right { + margin-right: 0; + margin-left: auto; + } - & .image.image-style-block-align-right { - margin-right: 0; - margin-left: auto; + &.image-style-block-align-left { + margin-left: 0; + margin-right: auto; + } } - & .image.image-style-block-align-left { - margin-left: 0; + & .image-style-align-center { + margin-left: auto; margin-right: auto; } /* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */ - & p + .image-style-align-left, - & p + .image-style-align-right, - & p + .image-style-side { + & p + .image.image-style-align-left, + & p + .image.image-style-align-right, + & p + .image.image-style-side { margin-top: 0; } From 6f13aba9c5adecdd9796228fbb83116650fc027e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Thu, 16 May 2024 16:16:26 +0200 Subject: [PATCH 3/3] Added image style align left/right between image and image-inline. --- packages/ckeditor5-image/theme/imagestyle.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/ckeditor5-image/theme/imagestyle.css b/packages/ckeditor5-image/theme/imagestyle.css index 88bf6ad8dbc..aada108ef8f 100644 --- a/packages/ckeditor5-image/theme/imagestyle.css +++ b/packages/ckeditor5-image/theme/imagestyle.css @@ -58,6 +58,16 @@ margin-right: auto; } + & .image-style-align-left { + float: left; + margin-right: var(--ck-image-style-spacing); + } + + & .image-style-align-right { + float: right; + margin-left: var(--ck-image-style-spacing); + } + /* Simulates margin collapsing with the preceding paragraph, which does not work for the floating elements. */ & p + .image.image-style-align-left, & p + .image.image-style-align-right,