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

package/src/imageutils.js

@@ -10,7 +10,7 @@ const IMAGE_WIDGETS_CLASSES_MATCH_REGEXP = /^(image|image-inline)$/;
 /**
  * A set of helpers related to images.
  */
-export default class ImageUtils extends Plugin {
+export class ImageUtils extends Plugin {
     /**
      * DOM Emitter.
      */
@@ -60,7 +60,7 @@ export default class ImageUtils extends Plugin {
      * ```
      *
      * @param attributes Attributes of the inserted image.
-     * This method filters out the attributes which are disallowed by the {@link module:engine/model/schema~Schema}.
+     * This method filters out the attributes which are disallowed by the {@link module:engine/model/schema~ModelSchema}.
      * @param selectable Place to insert the image. If not specified,
      * the {@link module:widget/utils~findOptimalInsertionRange} logic will be applied for the block images
      * and `model.document.selection` for the inline images.
@@ -185,8 +185,8 @@ export default class ImageUtils extends Plugin {
         return isImageAllowedInParent(this.editor, selection) && isNotInsideImage(selection);
     }
     /**
-     * Converts a given {@link module:engine/view/element~Element} to an image widget:
-     * * Adds a {@link module:engine/view/element~Element#_setCustomProperty custom property} allowing to recognize the image widget
+     * Converts a given {@link module:engine/view/element~ViewElement} to an image widget:
+     * * Adds a {@link module:engine/view/element~ViewElement#_setCustomProperty custom property} allowing to recognize the image widget
      * element.
      * * Calls the {@link module:widget/utils~toWidget} function with the proper element's label creator.
      *

package/src/index.d.ts

@@ -5,47 +5,68 @@
 /**
  * @module image
  */
-export { default as AutoImage } from './autoimage.js';
-export { default as Image } from './image.js';
-export { default as ImageEditing } from './image/imageediting.js';
-export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils.js';
-export { default as ImageCaption } from './imagecaption.js';
-export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting.js';
-export { default as ImageInsert } from './imageinsert.js';
-export { default as ImageInsertUI } from './imageinsert/imageinsertui.js';
-export { default as ImageResize } from './imageresize.js';
-export { default as ImageResizeButtons } from './imageresize/imageresizebuttons.js';
-export { default as ImageResizeEditing } from './imageresize/imageresizeediting.js';
-export { default as ImageResizeHandles } from './imageresize/imageresizehandles.js';
-export { default as ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
-export { default as ImageSizeAttributes } from './imagesizeattributes.js';
-export { default as ImageStyle } from './imagestyle.js';
-export { default as ImageStyleEditing } from './imagestyle/imagestyleediting.js';
-export { default as ImageStyleUI } from './imagestyle/imagestyleui.js';
-export { default as ImageTextAlternative } from './imagetextalternative.js';
-export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting.js';
-export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui.js';
-export { default as ImageToolbar } from './imagetoolbar.js';
-export { default as ImageUpload } from './imageupload.js';
-export { default as ImageUploadEditing, type ImageUploadCompleteEvent } from './imageupload/imageuploadediting.js';
-export { default as ImageUploadProgress } from './imageupload/imageuploadprogress.js';
-export { default as ImageUploadUI } from './imageupload/imageuploadui.js';
-export { default as PictureEditing } from './pictureediting.js';
-export { default as ImageBlock } from './imageblock.js';
-export { default as ImageInline } from './imageinline.js';
-export { default as ImageInsertViaUrl } from './imageinsertviaurl.js';
-export { default as ImageUtils } from './imageutils.js';
-export { default as ImageBlockEditing } from './image/imageblockediting.js';
-export { default as ImageCaptionUI } from './imagecaption/imagecaptionui.js';
+export { AutoImage } from './autoimage.js';
+export { Image } from './image.js';
+export { ImageEditing } from './image/imageediting.js';
+export { ImageCaptionUtils } from './imagecaption/imagecaptionutils.js';
+export { ImageCaption } from './imagecaption.js';
+export { ImageCaptionEditing } from './imagecaption/imagecaptionediting.js';
+export { ImageInsert } from './imageinsert.js';
+export { ImageInsertUI } from './imageinsert/imageinsertui.js';
+export { ImageInsertViaUrlUI } from './imageinsert/imageinsertviaurlui.js';
+export { ImageResize } from './imageresize.js';
+export { ImageResizeButtons } from './imageresize/imageresizebuttons.js';
+export { ImageResizeEditing } from './imageresize/imageresizeediting.js';
+export { ImageResizeHandles } from './imageresize/imageresizehandles.js';
+export { ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
+export { ImageSizeAttributes } from './imagesizeattributes.js';
+export { ImageStyle } from './imagestyle.js';
+export { ImageStyleEditing } from './imagestyle/imagestyleediting.js';
+export { ImageStyleUI } from './imagestyle/imagestyleui.js';
+export { ImageTextAlternative } from './imagetextalternative.js';
+export { ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting.js';
+export { ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui.js';
+export { ImageToolbar } from './imagetoolbar.js';
+export { ImageUpload } from './imageupload.js';
+export { ImageUploadEditing, isHtmlInDataTransfer, type ImageUploadCompleteEvent, type ImageUploadCompleteData } from './imageupload/imageuploadediting.js';
+export { ImageUploadProgress } from './imageupload/imageuploadprogress.js';
+export { ImageUploadUI } from './imageupload/imageuploadui.js';
+export { PictureEditing } from './pictureediting.js';
+export { ImageBlock } from './imageblock.js';
+export { ImageInline } from './imageinline.js';
+export { ImageInsertViaUrl } from './imageinsertviaurl.js';
+export { ImageUtils } from './imageutils.js';
+export { ImageBlockEditing } from './image/imageblockediting.js';
+export { ImageCaptionUI } from './imagecaption/imagecaptionui.js';
+export { ImageInlineEditing } from './image/imageinlineediting.js';
+export { ImagePlaceholder } from './image/imageplaceholder.js';
 export { createImageTypeRegExp } from './imageupload/utils.js';
-export type { ImageConfig } from './imageconfig.js';
-export type { ImageLoadedEvent } from './image/imageloadobserver.js';
-export type { default as ImageTypeCommand } from './image/imagetypecommand.js';
-export type { default as InsertImageCommand } from './image/insertimagecommand.js';
-export type { default as ReplaceImageSourceCommand } from './image/replaceimagesourcecommand.js';
-export type { default as ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand.js';
-export type { default as ResizeImageCommand } from './imageresize/resizeimagecommand.js';
-export type { default as ImageStyleCommand } from './imagestyle/imagestylecommand.js';
-export type { default as ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand.js';
-export type { default as UploadImageCommand } from './imageupload/uploadimagecommand.js';
+export type { ImageConfig, ImageInsertConfig, ImageResizeOption, ImageStyleDropdownDefinition, ImageStyleConfig, ImageStyleOptionDefinition, ImageUploadConfig } from './imageconfig.js';
+export { ImageLoadObserver, type ImageLoadedEvent } from './image/imageloadobserver.js';
+export { ImageTypeCommand } from './image/imagetypecommand.js';
+export { InsertImageCommand } from './image/insertimagecommand.js';
+export { ReplaceImageSourceCommand } from './image/replaceimagesourcecommand.js';
+export { ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand.js';
+export { ResizeImageCommand } from './imageresize/resizeimagecommand.js';
+export { ImageStyleCommand } from './imagestyle/imagestylecommand.js';
+export { ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand.js';
+export { UploadImageCommand } from './imageupload/uploadimagecommand.js';
+export { upcastImageFigure as _upcastImageFigure, upcastPicture as _upcastImagePicture, downcastSrcsetAttribute as _downcastImageSrcsetAttribute, downcastSourcesAttribute as _downcastImageSourcesAttribute, downcastImageAttribute as _downcastImageAttribute } from './image/converters.js';
+export { repositionContextualBalloon as _repositionImageContextualBalloon, getBalloonPositionData as _getImageBalloonPositionData } from './image/ui/utils.js';
+export { createInlineImageViewElement as _createInlineImageViewElement, createBlockImageViewElement as _createBlockImageViewElement, getImgViewElementMatcher as _getImageViewElementMatcher, determineImageTypeForInsertionAtSelection as _determineImageTypeForInsertionAtSelection, getSizeValueIfInPx as _getImageSizeValueIfInPx, widthAndHeightStylesAreBothSet as _checkIfImageWidthAndHeightStylesAreBothSet } from './image/utils.js';
+export { ImageInsertFormView as _ImageInsertFormView } from './imageinsert/ui/imageinsertformview.js';
+export { ImageInsertUrlView as _ImageInsertUrlView } from './imageinsert/ui/imageinserturlview.js';
+export { ImageCustomResizeFormView as _ImageCustomResizeFormView } from './imageresize/ui/imagecustomresizeformview.js';
+export type { ImageCustomResizeFormViewSubmitEvent, ImageCustomResizeFormViewCancelEvent, ImageCustomResizeFormValidatorCallback as _ImageCustomResizeFormValidatorCallback } from './imageresize/ui/imagecustomresizeformview.js';
+export type { PossibleResizeImageRange as _PossibleResizeImageRange } from './imageresize/utils/getselectedimagepossibleresizerange.js';
+export { getSelectedImageEditorNodes as _getSelectedImageEditorNodes } from './imageresize/utils/getselectedimageeditornodes.js';
+export { getSelectedImagePossibleResizeRange as _getSelectedImagePossibleResizeRange } from './imageresize/utils/getselectedimagepossibleresizerange.js';
+export { getSelectedImageWidthInUnits as _getSelectedImageWidthInUnits } from './imageresize/utils/getselectedimagewidthinunits.js';
+export { tryParseDimensionWithUnit as _tryParseImageDimensionWithUnit, tryCastDimensionsToUnit as _tryCastImageDimensionsToUnit } from './imageresize/utils/tryparsedimensionwithunit.js';
+export type { DimensionWithUnit as _ImageDimensionWithUnit } from './imageresize/utils/tryparsedimensionwithunit.js';
+export { modelToViewStyleAttribute as _modelToViewImageStyleAttribute, viewToModelStyleAttribute as _viewToModelImageStyleAttribute } from './imagestyle/converters.js';
+export { utils as _ImageStyleUtils, DEFAULT_OPTIONS as _IMAGE_DEFAULT_OPTIONS, DEFAULT_ICONS as _IMAGE_DEFAULT_ICONS, DEFAULT_DROPDOWN_DEFINITIONS as _IMAGE_DEFAULT_DROPDOWN_DEFINITIONS } from './imagestyle/utils.js';
+export { TextAlternativeFormView as _ImageTextAlternativeFormView } from './imagetextalternative/ui/textalternativeformview.js';
+export type { TextAlternativeFormViewSubmitEvent as _ImageTextAlternativeFormViewSubmitEvent, TextAlternativeFormViewCancelEvent as _ImageTextAlternativeFormViewCancelEvent } from './imagetextalternative/ui/textalternativeformview.js';
+export { fetchLocalImage as _fetchLocalImage, isLocalImage as _isLocalImage } from './imageupload/utils.js';
 import './augmentation.js';

package/src/index.js

@@ -5,37 +5,63 @@
 /**
  * @module image
  */
-export { default as AutoImage } from './autoimage.js';
-export { default as Image } from './image.js';
-export { default as ImageEditing } from './image/imageediting.js';
-export { default as ImageCaptionUtils } from './imagecaption/imagecaptionutils.js';
-export { default as ImageCaption } from './imagecaption.js';
-export { default as ImageCaptionEditing } from './imagecaption/imagecaptionediting.js';
-export { default as ImageInsert } from './imageinsert.js';
-export { default as ImageInsertUI } from './imageinsert/imageinsertui.js';
-export { default as ImageResize } from './imageresize.js';
-export { default as ImageResizeButtons } from './imageresize/imageresizebuttons.js';
-export { default as ImageResizeEditing } from './imageresize/imageresizeediting.js';
-export { default as ImageResizeHandles } from './imageresize/imageresizehandles.js';
-export { default as ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
-export { default as ImageSizeAttributes } from './imagesizeattributes.js';
-export { default as ImageStyle } from './imagestyle.js';
-export { default as ImageStyleEditing } from './imagestyle/imagestyleediting.js';
-export { default as ImageStyleUI } from './imagestyle/imagestyleui.js';
-export { default as ImageTextAlternative } from './imagetextalternative.js';
-export { default as ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting.js';
-export { default as ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui.js';
-export { default as ImageToolbar } from './imagetoolbar.js';
-export { default as ImageUpload } from './imageupload.js';
-export { default as ImageUploadEditing } from './imageupload/imageuploadediting.js';
-export { default as ImageUploadProgress } from './imageupload/imageuploadprogress.js';
-export { default as ImageUploadUI } from './imageupload/imageuploadui.js';
-export { default as PictureEditing } from './pictureediting.js';
-export { default as ImageBlock } from './imageblock.js';
-export { default as ImageInline } from './imageinline.js';
-export { default as ImageInsertViaUrl } from './imageinsertviaurl.js';
-export { default as ImageUtils } from './imageutils.js';
-export { default as ImageBlockEditing } from './image/imageblockediting.js';
-export { default as ImageCaptionUI } from './imagecaption/imagecaptionui.js';
+export { AutoImage } from './autoimage.js';
+export { Image } from './image.js';
+export { ImageEditing } from './image/imageediting.js';
+export { ImageCaptionUtils } from './imagecaption/imagecaptionutils.js';
+export { ImageCaption } from './imagecaption.js';
+export { ImageCaptionEditing } from './imagecaption/imagecaptionediting.js';
+export { ImageInsert } from './imageinsert.js';
+export { ImageInsertUI } from './imageinsert/imageinsertui.js';
+export { ImageInsertViaUrlUI } from './imageinsert/imageinsertviaurlui.js';
+export { ImageResize } from './imageresize.js';
+export { ImageResizeButtons } from './imageresize/imageresizebuttons.js';
+export { ImageResizeEditing } from './imageresize/imageresizeediting.js';
+export { ImageResizeHandles } from './imageresize/imageresizehandles.js';
+export { ImageCustomResizeUI } from './imageresize/imagecustomresizeui.js';
+export { ImageSizeAttributes } from './imagesizeattributes.js';
+export { ImageStyle } from './imagestyle.js';
+export { ImageStyleEditing } from './imagestyle/imagestyleediting.js';
+export { ImageStyleUI } from './imagestyle/imagestyleui.js';
+export { ImageTextAlternative } from './imagetextalternative.js';
+export { ImageTextAlternativeEditing } from './imagetextalternative/imagetextalternativeediting.js';
+export { ImageTextAlternativeUI } from './imagetextalternative/imagetextalternativeui.js';
+export { ImageToolbar } from './imagetoolbar.js';
+export { ImageUpload } from './imageupload.js';
+export { ImageUploadEditing, isHtmlInDataTransfer } from './imageupload/imageuploadediting.js';
+export { ImageUploadProgress } from './imageupload/imageuploadprogress.js';
+export { ImageUploadUI } from './imageupload/imageuploadui.js';
+export { PictureEditing } from './pictureediting.js';
+export { ImageBlock } from './imageblock.js';
+export { ImageInline } from './imageinline.js';
+export { ImageInsertViaUrl } from './imageinsertviaurl.js';
+export { ImageUtils } from './imageutils.js';
+export { ImageBlockEditing } from './image/imageblockediting.js';
+export { ImageCaptionUI } from './imagecaption/imagecaptionui.js';
+export { ImageInlineEditing } from './image/imageinlineediting.js';
+export { ImagePlaceholder } from './image/imageplaceholder.js';
 export { createImageTypeRegExp } from './imageupload/utils.js';
+export { ImageLoadObserver } from './image/imageloadobserver.js';
+export { ImageTypeCommand } from './image/imagetypecommand.js';
+export { InsertImageCommand } from './image/insertimagecommand.js';
+export { ReplaceImageSourceCommand } from './image/replaceimagesourcecommand.js';
+export { ToggleImageCaptionCommand } from './imagecaption/toggleimagecaptioncommand.js';
+export { ResizeImageCommand } from './imageresize/resizeimagecommand.js';
+export { ImageStyleCommand } from './imagestyle/imagestylecommand.js';
+export { ImageTextAlternativeCommand } from './imagetextalternative/imagetextalternativecommand.js';
+export { UploadImageCommand } from './imageupload/uploadimagecommand.js';
+export { upcastImageFigure as _upcastImageFigure, upcastPicture as _upcastImagePicture, downcastSrcsetAttribute as _downcastImageSrcsetAttribute, downcastSourcesAttribute as _downcastImageSourcesAttribute, downcastImageAttribute as _downcastImageAttribute } from './image/converters.js';
+export { repositionContextualBalloon as _repositionImageContextualBalloon, getBalloonPositionData as _getImageBalloonPositionData } from './image/ui/utils.js';
+export { createInlineImageViewElement as _createInlineImageViewElement, createBlockImageViewElement as _createBlockImageViewElement, getImgViewElementMatcher as _getImageViewElementMatcher, determineImageTypeForInsertionAtSelection as _determineImageTypeForInsertionAtSelection, getSizeValueIfInPx as _getImageSizeValueIfInPx, widthAndHeightStylesAreBothSet as _checkIfImageWidthAndHeightStylesAreBothSet } from './image/utils.js';
+export { ImageInsertFormView as _ImageInsertFormView } from './imageinsert/ui/imageinsertformview.js';
+export { ImageInsertUrlView as _ImageInsertUrlView } from './imageinsert/ui/imageinserturlview.js';
+export { ImageCustomResizeFormView as _ImageCustomResizeFormView } from './imageresize/ui/imagecustomresizeformview.js';
+export { getSelectedImageEditorNodes as _getSelectedImageEditorNodes } from './imageresize/utils/getselectedimageeditornodes.js';
+export { getSelectedImagePossibleResizeRange as _getSelectedImagePossibleResizeRange } from './imageresize/utils/getselectedimagepossibleresizerange.js';
+export { getSelectedImageWidthInUnits as _getSelectedImageWidthInUnits } from './imageresize/utils/getselectedimagewidthinunits.js';
+export { tryParseDimensionWithUnit as _tryParseImageDimensionWithUnit, tryCastDimensionsToUnit as _tryCastImageDimensionsToUnit } from './imageresize/utils/tryparsedimensionwithunit.js';
+export { modelToViewStyleAttribute as _modelToViewImageStyleAttribute, viewToModelStyleAttribute as _viewToModelImageStyleAttribute } from './imagestyle/converters.js';
+export { utils as _ImageStyleUtils, DEFAULT_OPTIONS as _IMAGE_DEFAULT_OPTIONS, DEFAULT_ICONS as _IMAGE_DEFAULT_ICONS, DEFAULT_DROPDOWN_DEFINITIONS as _IMAGE_DEFAULT_DROPDOWN_DEFINITIONS } from './imagestyle/utils.js';
+export { TextAlternativeFormView as _ImageTextAlternativeFormView } from './imagetextalternative/ui/textalternativeformview.js';
+export { fetchLocalImage as _fetchLocalImage, isLocalImage as _isLocalImage } from './imageupload/utils.js';
 import './augmentation.js';

package/src/pictureediting.d.ts

@@ -6,8 +6,8 @@
  * @module image/pictureediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import ImageEditing from './image/imageediting.js';
-import ImageUtils from './imageutils.js';
+import { ImageEditing } from './image/imageediting.js';
+import { ImageUtils } from './imageutils.js';
 /**
  * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
  *
@@ -61,7 +61,7 @@ import ImageUtils from './imageutils.js';
  *
  * @private
  */
-export default class PictureEditing extends Plugin {
+export declare class PictureEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/src/pictureediting.js

@@ -6,8 +6,8 @@
  * @module image/pictureediting
  */
 import { Plugin } from 'ckeditor5/src/core.js';
-import ImageEditing from './image/imageediting.js';
-import ImageUtils from './imageutils.js';
+import { ImageEditing } from './image/imageediting.js';
+import { ImageUtils } from './imageutils.js';
 import { downcastSourcesAttribute, upcastPicture } from './image/converters.js';
 /**
  * This plugin enables the [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) element support in the editor.
@@ -62,7 +62,7 @@ import { downcastSourcesAttribute, upcastPicture } from './image/converters.js';
  *
  * @private
  */
-export default class PictureEditing extends Plugin {
+export class PictureEditing extends Plugin {
     /**
      * @inheritDoc
      */

package/theme/imagecaption.css

@@ -6,8 +6,8 @@
 @import "@ckeditor/ckeditor5-ui/theme/mixins/_mediacolors.css";
 
 :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%);
 }
 
@@ -15,9 +15,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;
@@ -46,6 +47,6 @@
 	}
 
 	100% {
-		background-color: var(--ck-color-image-caption-background);
+		background-color: var(--ck-content-color-image-caption-background);
 	}
 }

package/theme/imagestyle.css

@@ -4,8 +4,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-content {
@@ -16,7 +16,7 @@
 		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));
+			max-width: calc(100% - var(--ck-content-image-style-spacing));
 		}
 
 		/* Allows displaying multiple floating images in the same line.
@@ -28,18 +28,18 @@
 
 		&.image-style-side {
 			float: right;
-			margin-left: var(--ck-image-style-spacing);
+			margin-left: var(--ck-content-image-style-spacing);
 			max-width: 50%;
 		}
 
 		&.image-style-align-left {
 			float: left;
-			margin-right: var(--ck-image-style-spacing);
+			margin-right: var(--ck-content-image-style-spacing);
 		}
 
 		&.image-style-align-right {
 			float: right;
-			margin-left: var(--ck-image-style-spacing);
+			margin-left: var(--ck-content-image-style-spacing);
 		}
 
 		&.image-style-block-align-right {
@@ -60,12 +60,12 @@
 
 	& .image-style-align-left {
 		float: left;
-		margin-right: var(--ck-image-style-spacing);
+		margin-right: var(--ck-content-image-style-spacing);
 	}
 
 	& .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. */
@@ -78,16 +78,16 @@
 	& .image-inline {
 		&.image-style-align-left,
 		&.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);
 		}
 
 		&.image-style-align-left {
-			margin-right: var(--ck-inline-image-style-spacing);
+			margin-right: var(--ck-content-inline-image-style-spacing);
 		}
 
 		&.image-style-align-right {
-			margin-left: var(--ck-inline-image-style-spacing);
+			margin-left: var(--ck-content-inline-image-style-spacing);
 		}
 	}
 }