Parcourir la source

Code style: Switched to ESLint.

Kamil Piechaczek il y a 8 ans
Parent
commit
2b05a8b85b

+ 1 - 0
packages/ckeditor5-image/package.json

@@ -20,6 +20,7 @@
     "@ckeditor/ckeditor5-paragraph": "^0.8.0",
     "@ckeditor/ckeditor5-typing": "^0.9.1",
     "@ckeditor/ckeditor5-undo": "^0.8.1",
+    "eslint-config-ckeditor5": "^1.0.0",
     "gulp": "^3.9.1",
     "guppy-pre-commit": "^0.4.0"
   },

+ 1 - 1
packages/ckeditor5-image/src/image/converters.js

@@ -71,7 +71,7 @@ export function viewFigureToModel() {
  * @param {String} attributeName
  */
 export function createImageAttributeConverter( dispatchers, attributeName ) {
-	for ( let dispatcher of dispatchers ) {
+	for ( const dispatcher of dispatchers ) {
 		dispatcher.on( `addAttribute:${ attributeName }:image`, modelToViewAttributeConverter );
 		dispatcher.on( `changeAttribute:${ attributeName }:image`, modelToViewAttributeConverter );
 		dispatcher.on( `removeAttribute:${ attributeName }:image`, modelToViewAttributeConverter );

+ 2 - 2
packages/ckeditor5-image/src/image/imageengine.js

@@ -57,7 +57,7 @@ export default class ImageEngine extends Plugin {
 		// Build converter for view img element to model image element.
 		buildViewConverter().for( data.viewToModel )
 			.from( { name: 'img', attribute: { src: /./ } } )
-			.toElement( ( viewImage ) => new ModelElement( 'image', { src: viewImage.getAttribute( 'src' ) } ) );
+			.toElement( viewImage => new ModelElement( 'image', { src: viewImage.getAttribute( 'src' ) } ) );
 
 		data.viewToModel.on( 'element:img', convertHoistableImage, { priority: 'low' } );
 		data.viewToModel.on( 'element', hoistImageThroughElement, { priority: 'low' } );
@@ -68,7 +68,7 @@ export default class ImageEngine extends Plugin {
 		buildViewConverter().for( data.viewToModel )
 			.from( { name: 'img', attribute: { alt: /./ } } )
 			.consuming( { attribute: [ 'alt' ] } )
-			.toAttribute( ( viewImage ) => ( { key: 'alt', value: viewImage.getAttribute( 'alt' ) } ) );
+			.toAttribute( viewImage => ( { key: 'alt', value: viewImage.getAttribute( 'alt' ) } ) );
 
 		// Converter for figure element from view to model.
 		data.viewToModel.on( 'element:figure', viewFigureToModel() );

+ 2 - 2
packages/ckeditor5-image/src/imagecaption/imagecaptionengine.js

@@ -112,7 +112,7 @@ export default class ImageCaptionEngine extends Plugin {
 		if ( selectedElement && isImageWidget( selectedElement ) ) {
 			const modelImage = mapper.toModelElement( selectedElement );
 			const modelCaption = getCaptionFromImage( modelImage );
-			viewCaption =  mapper.toViewElement( modelCaption );
+			viewCaption = mapper.toViewElement( modelCaption );
 		}
 
 		// If selection is placed inside caption.
@@ -165,7 +165,7 @@ function insertMissingModelCaptionElement( evt, changeType, data, batch ) {
 		ignoreElementEnd: true
 	} );
 
-	for ( let value of walker ) {
+	for ( const value of walker ) {
 		const item = value.item;
 
 		if ( value.type == 'elementStart' && isImage( item ) && !getCaptionFromImage( item ) ) {

+ 1 - 1
packages/ckeditor5-image/src/imagecaption/utils.js

@@ -49,7 +49,7 @@ export function isCaption( viewElement ) {
  * @return {module:engine/model/element~Element|null}
  */
 export function getCaptionFromImage( imageModelElement ) {
-	for ( let node of imageModelElement.getChildren() ) {
+	for ( const node of imageModelElement.getChildren() ) {
 		if ( node instanceof ModelElement && node.name == 'caption' ) {
 			return node;
 		}

+ 2 - 2
packages/ckeditor5-image/src/imagestyle.js

@@ -39,7 +39,7 @@ export default class ImageStyle extends Plugin {
 	init() {
 		const styles = this.editor.config.get( 'image.styles' );
 
-		for ( let style of styles ) {
+		for ( const style of styles ) {
 			this._createButton( style );
 		}
 	}
@@ -54,7 +54,7 @@ export default class ImageStyle extends Plugin {
 		const editor = this.editor;
 		const command = editor.commands.get( style.name );
 
-		editor.ui.componentFactory.add( style.name, ( locale ) => {
+		editor.ui.componentFactory.add( style.name, locale => {
 			const view = new ButtonView( locale );
 
 			view.set( {

+ 2 - 2
packages/ckeditor5-image/src/imagestyle/converters.js

@@ -47,7 +47,7 @@ export function viewToModelStyleAttribute( styles ) {
 	const filteredStyles = styles.filter( style => style.value !== null );
 
 	return ( evt, data, consumable, conversionApi ) => {
-		for ( let style of filteredStyles ) {
+		for ( const style of filteredStyles ) {
 			viewToModelImageStyle( style, data, consumable, conversionApi );
 		}
 	};
@@ -93,7 +93,7 @@ function viewToModelImageStyle( style, data, consumable, conversionApi ) {
 // @param {Array.<module:image/imagestyle/imagestyleengine~ImageStyleFormat> } styles
 // @return {module:image/imagestyle/imagestyleengine~ImageStyleFormat|undefined}
 function getStyleByValue( value, styles ) {
-	for ( let style of styles ) {
+	for ( const style of styles ) {
 		if ( style.value === value ) {
 			return style;
 		}

+ 1 - 1
packages/ckeditor5-image/src/imagestyle/imagestyleengine.js

@@ -68,7 +68,7 @@ export default class ImageStyleEngine extends Plugin {
 		data.viewToModel.on( 'element:figure', viewToModelStyleAttribute( styles ), { priority: 'low' } );
 
 		// Register separate command for each style.
-		for ( let style of styles ) {
+		for ( const style of styles ) {
 			editor.commands.set( style.name, new ImageStyleCommand( editor, style ) );
 		}
 	}

+ 2 - 2
packages/ckeditor5-image/src/imagetextalternative.js

@@ -73,7 +73,7 @@ export default class ImageTextAlternative extends Plugin {
 		const command = editor.commands.get( 'imageTextAlternative' );
 		const t = editor.t;
 
-		editor.ui.componentFactory.add( 'imageTextAlternative', ( locale ) => {
+		editor.ui.componentFactory.add( 'imageTextAlternative', locale => {
 			const view = new ButtonView( locale );
 
 			view.set( {
@@ -142,7 +142,7 @@ export default class ImageTextAlternative extends Plugin {
 		return Promise.all( [
 			panel.content.add( form ),
 			editor.ui.view.body.add( panel )
-		] ).then( () => panel ) ;
+		] ).then( () => panel );
 	}
 
 	/**

+ 1 - 0
packages/ckeditor5-image/src/imagetextalternative/imagetextalternativecommand.js

@@ -21,6 +21,7 @@ export default class ImageTextAlternativeCommand extends Command {
 	 */
 	constructor( editor ) {
 		super( editor );
+
 		/**
 		 * The current command value - `false` if there is no `alt` attribute, otherwise contains string with `alt`
 		 * attribute value.

+ 1 - 1
packages/ckeditor5-image/tests/image/converters.js

@@ -177,7 +177,7 @@ describe( 'Image converters', () => {
 		} );
 
 		it( 'should not change attribute if change is already consumed', () => {
-			editor.editing.modelToView.on( `changeAttribute:alt:image`, ( evt, data, consumable ) => {
+			editor.editing.modelToView.on( 'changeAttribute:alt:image', ( evt, data, consumable ) => {
 				consumable.consume( data.item, 'changeAttribute:alt' );
 			}, { priority: 'high' } );
 

+ 18 - 8
packages/ckeditor5-image/tests/image/imageengine.js

@@ -178,8 +178,15 @@ describe( 'ImageEngine', () => {
 				beforeEach( () => {
 					document.schema.registerItem( 'div', '$block' );
 
-					buildModelConverter().for( editor.data.modelToView, editor.editing.modelToView ).fromElement( 'div' ).toElement( 'div' );
-					buildViewConverter().for( editor.data.viewToModel ).fromElement( 'div' ).toElement( 'div' );
+					buildModelConverter()
+						.for( editor.data.modelToView, editor.editing.modelToView )
+						.fromElement( 'div' )
+						.toElement( 'div' );
+
+					buildViewConverter()
+						.for( editor.data.viewToModel )
+						.fromElement( 'div' )
+						.toElement( 'div' );
 				} );
 
 				it( 'image between non-hoisted elements', () => {
@@ -284,8 +291,9 @@ describe( 'ImageEngine', () => {
 			it( 'should convert', () => {
 				setModelData( document, '<image src="foo.png" alt="alt text"></image>' );
 
-				expect( getViewData( viewDocument, { withoutSelection: true } ) )
-					.to.equal( '<figure class="image ck-widget" contenteditable="false"><img alt="alt text" src="foo.png"></img></figure>' );
+				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
+					'<figure class="image ck-widget" contenteditable="false"><img alt="alt text" src="foo.png"></img></figure>'
+				);
 			} );
 
 			it( 'converted element should be widgetized', () => {
@@ -306,8 +314,9 @@ describe( 'ImageEngine', () => {
 					batch.setAttribute( image, 'alt', 'new text' );
 				} );
 
-				expect( getViewData( viewDocument, { withoutSelection: true } ) )
-					.to.equal( '<figure class="image ck-widget" contenteditable="false"><img alt="new text" src="foo.png"></img></figure>' );
+				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
+					'<figure class="image ck-widget" contenteditable="false"><img alt="new text" src="foo.png"></img></figure>'
+				);
 			} );
 
 			it( 'should convert attribute removal', () => {
@@ -338,8 +347,9 @@ describe( 'ImageEngine', () => {
 					batch.removeAttribute( image, 'alt' );
 				} );
 
-				expect( getViewData( viewDocument, { withoutSelection: true } ) )
-					.to.equal( '<figure class="image ck-widget" contenteditable="false"><img alt="alt text" src="foo.png"></img></figure>' );
+				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
+					'<figure class="image ck-widget" contenteditable="false"><img alt="alt text" src="foo.png"></img></figure>'
+				);
 			} );
 		} );
 	} );

+ 3 - 6
packages/ckeditor5-image/tests/image/ui/imageballoonpanelview.js

@@ -13,20 +13,17 @@ import ImageEngine from '../../../src/image/imageengine';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'ImageBalloonPanel', () => {
-	let editor, panel, document, editingView;
+	let editor, panel, document;
 
 	beforeEach( () => {
 		const editorElement = global.document.createElement( 'div' );
 		global.document.body.appendChild( editorElement );
 
-		return ClassicEditor.create( editorElement, {
-			plugins: [ ImageEngine ]
-		} )
+		return ClassicEditor.create( editorElement, { plugins: [ ImageEngine ] } )
 			.then( newEditor => {
 				editor = newEditor;
 				panel = new ImageBalloonPanel( editor );
 				document = editor.document;
-				editingView = editor.editing.view;
 
 				return editor.ui.view.body.add( panel );
 			} );
@@ -38,7 +35,7 @@ describe( 'ImageBalloonPanel', () => {
 
 	it( 'init method should return a promise', () => {
 		const panel = new ImageBalloonPanel( editor );
-		const promise  = panel.init();
+		const promise = panel.init();
 
 		expect( promise ).to.be.instanceof( Promise );
 

+ 31 - 15
packages/ckeditor5-image/tests/imagecaption/imagecaptionengine.js

@@ -22,9 +22,7 @@ describe( 'ImageCaptionEngine', () => {
 	let editor, document, viewDocument;
 
 	beforeEach( () => {
-		return VirtualTestEditor.create( {
-			plugins: [ ImageCaptionEngine, ImageEngine, UndoEngine ]
-		} )
+		return VirtualTestEditor.create( { plugins: [ ImageCaptionEngine, ImageEngine, UndoEngine ] } )
 			.then( newEditor => {
 				editor = newEditor;
 				document = editor.document;
@@ -34,8 +32,15 @@ describe( 'ImageCaptionEngine', () => {
 				document.schema.allow( { name: 'caption', inside: 'widget' } );
 				document.schema.allow( { name: '$inline', inside: 'widget' } );
 
-				buildViewConverter().for( editor.data.viewToModel ).fromElement( 'widget' ).toElement( 'widget' );
-				buildModelConverter().for( editor.data.modelToView, editor.editing.modelToView ).fromElement( 'widget' ).toElement( 'widget' );
+				buildViewConverter()
+					.for( editor.data.viewToModel )
+					.fromElement( 'widget' )
+					.toElement( 'widget' );
+
+				buildModelConverter()
+					.for( editor.data.modelToView, editor.editing.modelToView )
+					.fromElement( 'widget' )
+					.toElement( 'widget' );
 			} );
 	} );
 
@@ -78,7 +83,9 @@ describe( 'ImageCaptionEngine', () => {
 			it( 'should convert caption element to figcaption', () => {
 				setModelData( document, '<image src="img.png"><caption>Foo bar baz.</caption></image>' );
 
-				expect( editor.getData() ).to.equal( '<figure class="image"><img src="img.png"><figcaption>Foo bar baz.</figcaption></figure>' );
+				expect( editor.getData() ).to.equal(
+					'<figure class="image"><img src="img.png"><figcaption>Foo bar baz.</figcaption></figure>'
+				);
 			} );
 
 			it( 'should not convert caption to figcaption if it\'s empty', () => {
@@ -115,7 +122,8 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument, { withoutSelection: true } ) ).to.equal(
 					'<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+						'<figcaption class="ck-placeholder ck-editable ck-hidden" ' +
+									'contenteditable="true" data-placeholder="Enter image caption">' +
 						'</figcaption>' +
 					'</figure>'
 				);
@@ -182,7 +190,8 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'[]<figure class="image ck-widget" contenteditable="false">' +
 						'<img src="img.png"></img>' +
-						'<figcaption class="ck-editable ck-hidden ck-placeholder" contenteditable="true" data-placeholder="Enter image caption">' +
+						'<figcaption class="ck-editable ck-hidden ck-placeholder" ' +
+									'contenteditable="true" data-placeholder="Enter image caption">' +
 						'</figcaption>' +
 					'</figure>'
 				);
@@ -224,7 +233,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img alt="" src=""></img>' +
-					'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'<figcaption class="ck-placeholder ck-editable ck-hidden" ' +
+								'contenteditable="true" data-placeholder="Enter image caption">' +
 					'</figcaption>' +
 				'</figure>'
 			);
@@ -274,7 +284,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 				'<img alt="" src=""></img>' +
-				'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
+				'<figcaption class="ck-placeholder ck-editable ck-hidden" ' +
+							'contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
 				'</figure>'
 			);
 		} );
@@ -313,7 +324,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'<figcaption class="ck-placeholder ck-editable ck-hidden" ' +
+								'contenteditable="true" data-placeholder="Enter image caption">' +
 					'</figcaption>' +
 				'</figure>'
 			);
@@ -340,7 +352,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[]<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-placeholder ck-editable ck-hidden" contenteditable="true" data-placeholder="Enter image caption">' +
+					'<figcaption class="ck-placeholder ck-editable ck-hidden" ' +
+								'contenteditable="true" data-placeholder="Enter image caption">' +
 					'</figcaption>' +
 				'</figure>'
 			);
@@ -375,7 +388,8 @@ describe( 'ImageCaptionEngine', () => {
 			expect( getViewData( viewDocument ) ).to.equal(
 				'[<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-editable ck-placeholder" contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
+					'<figcaption class="ck-editable ck-placeholder" ' +
+								'contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -395,7 +409,8 @@ describe( 'ImageCaptionEngine', () => {
 				'</figure>' +
 				'[<figure class="image ck-widget" contenteditable="false">' +
 					'<img src=""></img>' +
-					'<figcaption class="ck-placeholder ck-editable" contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
+					'<figcaption class="ck-placeholder ck-editable" ' +
+								'contenteditable="true" data-placeholder="Enter image caption"></figcaption>' +
 				'</figure>]'
 			);
 		} );
@@ -420,7 +435,8 @@ describe( 'ImageCaptionEngine', () => {
 				expect( getViewData( viewDocument ) ).to.equal(
 					'[]<figure class="image ck-widget" contenteditable="false">' +
 						'<img src=""></img>' +
-						'<figcaption class="ck-editable ck-hidden ck-placeholder" contenteditable="true" data-placeholder="Enter image caption">' +
+						'<figcaption class="ck-editable ck-hidden ck-placeholder" ' +
+									'contenteditable="true" data-placeholder="Enter image caption">' +
 						'</figcaption>' +
 					'</figure>'
 				);

+ 4 - 4
packages/ckeditor5-image/tests/imagecaption/utils.js

@@ -41,7 +41,7 @@ describe( 'image captioning utils', () => {
 		} );
 
 		it( 'should return false for other elements', () => {
-			const editable = new ViewEditableElement( 'figcaption', { contenteditable: true } ) ;
+			const editable = new ViewEditableElement( 'figcaption', { contenteditable: true } );
 			editable.document = document;
 
 			expect( isCaption( editable ) ).to.be.false;
@@ -79,21 +79,21 @@ describe( 'image captioning utils', () => {
 
 		it( 'should return null if figcaption\'s parent is not a figure', () => {
 			const element = new ViewElement( 'figcaption' );
-			new ViewElement( 'div', null, element );
+			new ViewElement( 'div', null, element ); // eslint-disable-line no-new
 
 			expect( matchImageCaption( element ) ).to.be.null;
 		} );
 
 		it( 'should return null if parent has no image class', () => {
 			const element = new ViewElement( 'figcaption' );
-			new ViewElement( 'figure', null, element );
+			new ViewElement( 'figure', null, element ); // eslint-disable-line no-new
 
 			expect( matchImageCaption( element ) ).to.be.null;
 		} );
 
 		it( 'should return object if element is a valid caption', () => {
 			const element = new ViewElement( 'figcaption' );
-			new ViewElement( 'figure', { class: 'image' }, element );
+			new ViewElement( 'figure', { class: 'image' }, element ); // eslint-disable-line no-new
 
 			expect( matchImageCaption( element ) ).to.deep.equal( { name: true } );
 		} );

+ 4 - 4
packages/ckeditor5-image/tests/imagestyle.js

@@ -11,7 +11,7 @@ import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 
 describe( 'ImageStyle', () => {
 	let editor;
-	const styles =  [
+	const styles = [
 		{ name: 'style 1', title: 'Style 1 title', icon: 'style1-icon', value: null },
 		{ name: 'style 2', title: 'Style 2 title', icon: 'style2-icon', value: 'style2', cssClass: 'style2-class' },
 		{ name: 'style 3', title: 'Style 3 title', icon: 'style3-icon', value: 'style3', cssClass: 'style3-class' }
@@ -47,9 +47,9 @@ describe( 'ImageStyle', () => {
 	it( 'should register buttons for each style', () => {
 		const spy = sinon.spy( editor, 'execute' );
 
-		for ( let style of styles ) {
+		for ( const style of styles ) {
 			const command = editor.commands.get( style.name );
-			const buttonView =  editor.ui.componentFactory.create( style.name );
+			const buttonView = editor.ui.componentFactory.create( style.name );
 
 			expect( buttonView ).to.be.instanceOf( ButtonView );
 			expect( buttonView.label ).to.equal( style.title );
@@ -79,7 +79,7 @@ describe( 'ImageStyle', () => {
 			}
 		} )
 		.then( newEditor => {
-			expect( newEditor.config.get( 'image.toolbar' ) ).to.eql( [ 'foo',  'bar' ] );
+			expect( newEditor.config.get( 'image.toolbar' ) ).to.eql( [ 'foo', 'bar' ] );
 			newEditor.destroy();
 		} );
 	} );

+ 1 - 1
packages/ckeditor5-image/tests/imagestyle/imagestyleengine.js

@@ -68,7 +68,7 @@ describe( 'ImageStyleEngine', () => {
 	} );
 
 	it( 'should not convert from view to model when not in image figure', () => {
-		editor.setData( '<figure class="side-class"></figure>'  );
+		editor.setData( '<figure class="side-class"></figure>' );
 
 		expect( getModelData( document, { withoutSelection: true } ) ).to.equal( '' );
 	} );

+ 2 - 4
packages/ckeditor5-image/tests/imagetoolbar.js

@@ -13,7 +13,7 @@ import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import { setData } from '@ckeditor/ckeditor5-engine/src/dev-utils/model';
 
 describe( 'ImageToolbar', () => {
-	let editor, button, editingView, doc, panel, plugin;
+	let editor, editingView, doc, panel, plugin;
 
 	beforeEach( () => {
 		const editorElement = global.document.createElement( 'div' );
@@ -105,15 +105,13 @@ describe( 'ImageToolbar', () => {
 	// Plugin that adds fake_button to editor's component factory.
 	class FakeButton extends Plugin {
 		init() {
-			this.editor.ui.componentFactory.add( 'fake_button', ( locale ) => {
+			this.editor.ui.componentFactory.add( 'fake_button', locale => {
 				const view = new ButtonView( locale );
 
 				view.set( {
 					label: 'fake button'
 				} );
 
-				button = view;
-
 				return view;
 			} );
 		}

+ 1 - 1
packages/ckeditor5-image/tests/manual/autohoist.js

@@ -25,7 +25,7 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 	],
 	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ],
 	image: {
-		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|' , 'imageTextAlternative' ]
+		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
 	}
 } )
 .then( editor => {

+ 1 - 1
packages/ckeditor5-image/tests/manual/caption.js

@@ -27,7 +27,7 @@ ClassicEditor.create( document.querySelector( '#editor' ), {
 	],
 	toolbar: [ 'headings', 'undo', 'redo', 'bold', 'italic', 'bulletedList', 'numberedList' ],
 	image: {
-		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|' , 'imageTextAlternative' ]
+		toolbar: [ 'imageStyleFull', 'imageStyleSide', '|', 'imageTextAlternative' ]
 	}
 } )
 .then( editor => {

+ 11 - 1
packages/ckeditor5-image/tests/manual/imagestyle.js

@@ -17,7 +17,17 @@ import ImageStyle from '../../src/imagestyle';
 import ImageToolbar from '../../src/imagetoolbar';
 
 ClassicEditor.create( document.querySelector( '#editor' ), {
-	plugins: [ ImageToolbar, EnterPlugin, TypingPlugin, ParagraphPlugin, HeadingPlugin, ImagePlugin, UndoPlugin, ClipboardPlugin, ImageStyle ],
+	plugins: [
+		ImageToolbar,
+		EnterPlugin,
+		TypingPlugin,
+		ParagraphPlugin,
+		HeadingPlugin,
+		ImagePlugin,
+		UndoPlugin,
+		ClipboardPlugin,
+		ImageStyle
+	],
 	toolbar: [ 'headings', 'undo', 'redo' ],
 	image: {
 		toolbar: [ 'imageStyleFull', 'imageStyleSide' ]