From e988c5f5bb186eb8dc2c8a91c61f74103cda7cf3 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 28 Feb 2017 11:42:27 +0100 Subject: [PATCH 1/4] Used getItemsFromConfig util in ImageToolbar class. --- src/imagetoolbar.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js index 761a0c66..97dc773e 100644 --- a/src/imagetoolbar.js +++ b/src/imagetoolbar.js @@ -12,6 +12,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; import { isImageWidget } from './image/utils'; import ImageBalloonPanel from './image/ui/imageballoonpanelview'; +import { getItemsFromConfig } from '@ckeditor/ckeditor5-ui/src/toolbar/utils'; /** * Image toolbar class. Creates image toolbar placed inside balloon panel that is showed when image widget is selected. @@ -69,9 +70,7 @@ export default class ImageToolbar extends Plugin { promises.push( panel.content.add( toolbar ) ); // Add buttons to the toolbar. - for ( let name of toolbarConfig ) { - promises.push( toolbar.items.add( editor.ui.componentFactory.create( name ) ) ); - } + promises.push( getItemsFromConfig( toolbarConfig, toolbar.items, editor.ui.componentFactory ) ); // Add balloon panel to editor's UI. promises.push( editor.ui.view.body.add( panel ) ); From 053408a9fba6ebf7ffc0c7670f8fff216c45144b Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 28 Feb 2017 11:43:34 +0100 Subject: [PATCH 2/4] Added separators between ImageTextAlternative and ImageStyle plugin buttons in ImageToolbar. --- src/imagestyle.js | 4 ++++ src/imagetextalternative.js | 4 ++++ tests/imagestyle.js | 23 +++++++++++++++++++++++ tests/imagetextalternative.js | 23 +++++++++++++++++++++++ 4 files changed, 54 insertions(+) diff --git a/src/imagestyle.js b/src/imagestyle.js index 2d62874c..70e0537a 100644 --- a/src/imagestyle.js +++ b/src/imagestyle.js @@ -40,6 +40,10 @@ export default class ImageStyle extends Plugin { const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' ); if ( defaultImageToolbarConfig ) { + if ( defaultImageToolbarConfig.length ) { + defaultImageToolbarConfig.push( '|' ); + } + styles.forEach( style => defaultImageToolbarConfig.push( style.name ) ); } } diff --git a/src/imagetextalternative.js b/src/imagetextalternative.js index 5c5438b2..f2415552 100644 --- a/src/imagetextalternative.js +++ b/src/imagetextalternative.js @@ -42,6 +42,10 @@ export default class ImageTextAlternative extends Plugin { const defaultImageToolbarConfig = this.editor.config.get( 'image.defaultToolbar' ); if ( defaultImageToolbarConfig ) { + if ( defaultImageToolbarConfig.length ) { + defaultImageToolbarConfig.push( '|' ); + } + defaultImageToolbarConfig.push( 'imageTextAlternative' ); } diff --git a/tests/imagestyle.js b/tests/imagestyle.js index 2a1978b6..d0772ca1 100644 --- a/tests/imagestyle.js +++ b/tests/imagestyle.js @@ -3,6 +3,7 @@ * For licensing, see LICENSE.md. */ +import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; import ImageToolbar from '../src/imagetoolbar'; import ImageStyle from '../src/imagestyle'; @@ -86,6 +87,28 @@ describe( 'ImageStyle', () => { } ); } ); + it( 'should add separator before the button if toolbar is present and already has items', () => { + const editorElement = global.document.createElement( 'div' ); + global.document.body.appendChild( editorElement ); + + const FooPlugin = class extends Plugin { + init() { + this.editor.ui.componentFactory.add( 'foo', () => new ButtonView() ); + + this.editor.config.get( 'image.defaultToolbar' ).push( 'foo' ); + } + }; + + return ClassicTestEditor.create( editorElement, { + plugins: [ FooPlugin, ImageStyle, ImageToolbar ] + } ) + .then( newEditor => { + expect( newEditor.config.get( 'image.defaultToolbar' ) ).to.eql( [ 'foo', '|', 'imageStyleFull', 'imageStyleSide' ] ); + + newEditor.destroy(); + } ); + } ); + it( 'should not add buttons to image toolbar if configuration is present', () => { const editorElement = global.document.createElement( 'div' ); global.document.body.appendChild( editorElement ); diff --git a/tests/imagetextalternative.js b/tests/imagetextalternative.js index 4f259fad..79462d6e 100644 --- a/tests/imagetextalternative.js +++ b/tests/imagetextalternative.js @@ -3,6 +3,7 @@ * For licensing, see LICENSE.md. */ +import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import ClassicTestEditor from '@ckeditor/ckeditor5-core/tests/_utils/classictesteditor'; import Image from '../src/image'; import ImageToolbar from '../src/imagetoolbar'; @@ -109,6 +110,28 @@ describe( 'ImageTextAlternative', () => { newEditor.destroy(); } ); } ); + + it( 'should add separator before the button if toolbar is present and already has items', () => { + const editorElement = global.document.createElement( 'div' ); + global.document.body.appendChild( editorElement ); + + const FooPlugin = class extends Plugin { + init() { + this.editor.ui.componentFactory.add( 'foo', () => new ButtonView() ); + + this.editor.config.get( 'image.defaultToolbar' ).push( 'foo' ); + } + }; + + return ClassicTestEditor.create( editorElement, { + plugins: [ FooPlugin, ImageTextAlternative, ImageToolbar ] + } ) + .then( newEditor => { + expect( newEditor.config.get( 'image.defaultToolbar' ) ).to.eql( [ 'foo', '|', 'imageTextAlternative' ] ); + + newEditor.destroy(); + } ); + } ); } ); describe( 'balloon panel form', () => { From f578e85f6426e79615cefde3f581a18b54bcf813 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 28 Feb 2017 12:05:40 +0100 Subject: [PATCH 3/4] Updated paths after rename ckeditor5-ui/src/toolbar/utils -> ckeditor5-ui/src/toolbar/getitemsfromconfig. --- src/imagetoolbar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js index 97dc773e..c5d1e4d1 100644 --- a/src/imagetoolbar.js +++ b/src/imagetoolbar.js @@ -12,7 +12,7 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; import { isImageWidget } from './image/utils'; import ImageBalloonPanel from './image/ui/imageballoonpanelview'; -import { getItemsFromConfig } from '@ckeditor/ckeditor5-ui/src/toolbar/utils'; +import getItemsFromConfig from '@ckeditor/ckeditor5-ui/src/toolbar/getitemsfromconfig'; /** * Image toolbar class. Creates image toolbar placed inside balloon panel that is showed when image widget is selected. From b4b5993e9880697ef9c318c4afdb04326fa87fc2 Mon Sep 17 00:00:00 2001 From: Aleksander Nowodzinski Date: Tue, 28 Feb 2017 16:20:27 +0100 Subject: [PATCH 4/4] Moved getItemsFromConfig util to ToolbarView#fillFromConfig. --- src/imagetoolbar.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js index c5d1e4d1..fb362404 100644 --- a/src/imagetoolbar.js +++ b/src/imagetoolbar.js @@ -12,7 +12,6 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; import { isImageWidget } from './image/utils'; import ImageBalloonPanel from './image/ui/imageballoonpanelview'; -import getItemsFromConfig from '@ckeditor/ckeditor5-ui/src/toolbar/getitemsfromconfig'; /** * Image toolbar class. Creates image toolbar placed inside balloon panel that is showed when image widget is selected. @@ -70,7 +69,7 @@ export default class ImageToolbar extends Plugin { promises.push( panel.content.add( toolbar ) ); // Add buttons to the toolbar. - promises.push( getItemsFromConfig( toolbarConfig, toolbar.items, editor.ui.componentFactory ) ); + promises.push( toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory ) ); // Add balloon panel to editor's UI. promises.push( editor.ui.view.body.add( panel ) );