@concordnow/ckeditor5-image-rendering/src/imagerender.js

Image rendering feature for CK Editor 5

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ImageAlign from './imagealign';
import ImageDisplay from './imagedisplay';
import ImageDimensions from './imagedimensions';
import ImageMargin from './imagemargin';
import ImagePosition from './imageposition';

import '../theme/image.css';

export default class ImageRender extends Plugin {
	static get pluginName() {
		return 'ImageRender';
	}

	static get requires() {
		return [ ImageAlign, ImageDisplay, ImageDimensions, ImageMargin, ImagePosition ];
	}

	init() {
		const editor = this.editor;
		const schema = editor.model.schema;

		if ( schema.isRegistered( 'image' ) ) {
			schema.extend( 'image', { allowAttributes:
				[
					'customImageDisplay',
					'customImageWidth',
					'customImageHeight',
					'customImageMargin',
					'customImageMarginLeft',
					'customImageMarginRight',
					'customImageMarginBottom',
					'customImageMarginTop',
					'customImagePosition'
				]
			} );
		}

		editor.conversion.for( 'upcast' )
			.add( dispatcher => {
				dispatcher.on( 'element:img', ( evt, data, conversionApi ) => {
					const { viewItem, modelRange } = data;
					const { parent } = viewItem;
					const { writer } = conversionApi;

					if ( !parent || !parent.getStyle || !parent.getStyle( 'text-align' ) ) {
						return;
					}

					const imageStyle = {
						left: 'alignLeft',
						right: 'alignRight',
						center: 'alignCenter'
					}[ parent.getStyle( 'text-align' ) ];

					writer.setAttribute( 'imageStyle', imageStyle, modelRange );
				} );
			} );

		editor.conversion.for( 'downcast' )
			.add( dispatcher => {
				dispatcher.on( 'insert:image', ( evt, data, conversionApi ) => {
					const { item } = data;
					const { writer } = conversionApi;

					if ( item.name !== 'image' ) {
						return;
					}

					const viewFigure = conversionApi.mapper.toViewElement( item );
					const image = Array.from( conversionApi.writer.createRangeIn( viewFigure ).getItems() ).find( item => item.is( 'img' ) ); // eslint-disable-line max-len

					const styleMap = new Map( [
						[ 'float', 'imageStyle' ],
						[ 'display', 'customImageDisplay' ],
						[ 'margin', 'customImageMargin' ],
						[ 'margin-left', 'customImageMarginLeft' ],
						[ 'margin-right', 'customImageMarginRight' ],
						[ 'margin-bottom', 'customImageMarginBottom' ],
						[ 'margin-top', 'customImageMarginTop' ],
						[ 'height', 'customImageHeight' ],
						[ 'width', 'customImageWidth' ],
						[ 'position', 'customImagePosition' ]
					] );

					for ( const mapItem of styleMap ) {
						const key = mapItem[ 0 ];
						const itemAttributeValue = item.getAttribute( mapItem[ 1 ] );

						if ( itemAttributeValue ) {
							let style = Number.isInteger( itemAttributeValue ) ? itemAttributeValue + 'px' : itemAttributeValue;
							style = {
								alignLeft: 'left',
								alignRight: 'right',
								alignCenter: 'center'
							}[ itemAttributeValue ] || style;

							writer.setStyle( key, style, image );
							writer.setStyle( key, style, viewFigure );
						}
					}
				} );
			} );
	}
}