From 92dc2b91a8044b85a0c60030b6d5fbd2983628fe Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Thu, 13 Sep 2018 16:52:11 +0200 Subject: [PATCH 1/3] Moved ImageToolbar logic to the WidgetToolbar. --- src/imagetoolbar.js | 121 +++----------------------------------------- 1 file changed, 6 insertions(+), 115 deletions(-) diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js index 80b38b6d..3d7ad911 100644 --- a/src/imagetoolbar.js +++ b/src/imagetoolbar.js @@ -8,12 +8,8 @@ */ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; -import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview'; -import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon'; import { isImageWidgetSelected } from './image/utils'; -import { repositionContextualBalloon, getBalloonPositionData } from './image/ui/utils'; - -const balloonClassName = 'ck-toolbar-container'; +import WidgetToolbar from '@ckeditor/ckeditor5-widget/src/widgettoolbar'; /** * The image toolbar plugin. It creates and manages the image toolbar (the toolbar displayed when an image is selected). @@ -33,7 +29,7 @@ export default class ImageToolbar extends Plugin { * @inheritDoc */ static get requires() { - return [ ContextualBalloon ]; + return [ WidgetToolbar ]; } /** @@ -43,122 +39,17 @@ export default class ImageToolbar extends Plugin { return 'ImageToolbar'; } - /** - * @inheritDoc - */ - init() { - const editor = this.editor; - const balloonToolbar = editor.plugins.get( 'BalloonToolbar' ); - - // If the `BalloonToolbar` plugin is loaded, it should be disabled for images - // which have their own toolbar to avoid duplication. - // https://github.com/ckeditor/ckeditor5-image/issues/110 - if ( balloonToolbar ) { - this.listenTo( balloonToolbar, 'show', evt => { - if ( isImageWidgetSelected( editor.editing.view.document.selection ) ) { - evt.stop(); - } - }, { priority: 'high' } ); - } - } - /** * @inheritDoc */ afterInit() { const editor = this.editor; - const toolbarConfig = editor.config.get( 'image.toolbar' ); - - // Don't add the toolbar if there is no configuration. - if ( !toolbarConfig || !toolbarConfig.length ) { - return; - } + const widgetToolbar = editor.plugins.get( 'WidgetToolbar' ); - /** - * A contextual balloon plugin instance. - * - * @private - * @member {module:ui/panel/balloon/contextualballoon~ContextualBalloon} - */ - this._balloon = this.editor.plugins.get( 'ContextualBalloon' ); - - /** - * A `ToolbarView` instance used to display the buttons specific for image editing. - * - * @protected - * @type {module:ui/toolbar/toolbarview~ToolbarView} - */ - this._toolbar = new ToolbarView(); - - // Add buttons to the toolbar. - this._toolbar.fillFromConfig( toolbarConfig, editor.ui.componentFactory ); - - // Show balloon panel each time image widget is selected. - this.listenTo( editor.ui, 'update', () => { - this._checkIsVisible(); + widgetToolbar.add( { + toolbarItems: editor.config.get( 'image.toolbar' ) || [], + isSelected: isImageWidgetSelected, } ); - - // UI#update is not fired after focus is back in editor, we need to check if balloon panel should be visible. - this.listenTo( editor.ui.focusTracker, 'change:isFocused', () => { - this._checkIsVisible(); - }, { priority: 'low' } ); - } - - /** - * Checks whether the toolbar should show up or hide depending on the current selection. - * - * @private - */ - _checkIsVisible() { - const editor = this.editor; - - if ( !editor.ui.focusTracker.isFocused || !isImageWidgetSelected( editor.editing.view.document.selection ) ) { - this._hideToolbar(); - } else { - this._showToolbar(); - } - } - - /** - * Shows the {@link #_toolbar} in the {@link #_balloon}. - * - * @private - */ - _showToolbar() { - const editor = this.editor; - - if ( this._isVisible ) { - repositionContextualBalloon( editor ); - } else if ( !this._balloon.hasView( this._toolbar ) ) { - this._balloon.add( { - view: this._toolbar, - position: getBalloonPositionData( editor ), - balloonClassName - } ); - } - } - - /** - * Removes the {@link #_toolbar} from the {@link #_balloon}. - * - * @private - */ - _hideToolbar() { - if ( !this._isVisible ) { - return; - } - - this._balloon.remove( this._toolbar ); - } - - /** - * Returns `true` when the {@link #_toolbar} is the visible view in the {@link #_balloon}. - * - * @private - * @type {Boolean} - */ - get _isVisible() { - return this._balloon.visibleView == this._toolbar; } } From 7ec6e1dc10cd892727541c06ba1721996a7c099d Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Fri, 14 Sep 2018 11:53:20 +0200 Subject: [PATCH 2/3] Aligned code to changes in the WidgetToolbar. --- src/imagetoolbar.js | 4 ++-- tests/imagetoolbar.js | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js index 3d7ad911..115b16cb 100644 --- a/src/imagetoolbar.js +++ b/src/imagetoolbar.js @@ -46,9 +46,9 @@ export default class ImageToolbar extends Plugin { const editor = this.editor; const widgetToolbar = editor.plugins.get( 'WidgetToolbar' ); - widgetToolbar.add( { + widgetToolbar.add( 'image', { toolbarItems: editor.config.get( 'image.toolbar' ) || [], - isSelected: isImageWidgetSelected, + isVisible: isImageWidgetSelected, } ); } } diff --git a/tests/imagetoolbar.js b/tests/imagetoolbar.js index 152e6830..ce515d14 100644 --- a/tests/imagetoolbar.js +++ b/tests/imagetoolbar.js @@ -19,7 +19,7 @@ import env from '@ckeditor/ckeditor5-utils/src/env'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; describe( 'ImageToolbar', () => { - let editor, model, doc, plugin, toolbar, balloon, editorElement; + let editor, model, doc, toolbar, balloon, widgetToolbar, editorElement; testUtils.createSinonSandbox(); @@ -41,8 +41,8 @@ describe( 'ImageToolbar', () => { editor = newEditor; model = newEditor.model; doc = model.document; - plugin = editor.plugins.get( ImageToolbar ); - toolbar = plugin._toolbar; + widgetToolbar = editor.plugins.get( 'WidgetToolbar' ); + toolbar = widgetToolbar._toolbars.get( 'image' ).view; balloon = editor.plugins.get( 'ContextualBalloon' ); } ); } ); From ff160b1dfdf8324533bd945ef7ccddf8ea36c7e2 Mon Sep 17 00:00:00 2001 From: Maciej Bukowski Date: Wed, 19 Sep 2018 15:07:24 +0200 Subject: [PATCH 3/3] Aligned code to changes in the WidgetToolbarRepository. --- src/imagetoolbar.js | 12 ++++++------ tests/imagetoolbar.js | 6 +++--- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/imagetoolbar.js b/src/imagetoolbar.js index 115b16cb..e7b5a0a7 100644 --- a/src/imagetoolbar.js +++ b/src/imagetoolbar.js @@ -9,14 +9,14 @@ import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import { isImageWidgetSelected } from './image/utils'; -import WidgetToolbar from '@ckeditor/ckeditor5-widget/src/widgettoolbar'; +import WidgetToolbarRepository from '@ckeditor/ckeditor5-widget/src/widgettoolbarrepository'; /** * The image toolbar plugin. It creates and manages the image toolbar (the toolbar displayed when an image is selected). * * For a detailed overview, check the {@glink features/image#image-contextual-toolbar image contextual toolbar} documentation. * - * Instanecs of toolbar components (e.g. buttons) are created using the editor's + * Instances of toolbar components (e.g. buttons) are created using the editor's * {@link module:ui/componentfactory~ComponentFactory component factory} * based on the {@link module:image/image~ImageConfig#toolbar `image.toolbar` configuration option}. * @@ -29,7 +29,7 @@ export default class ImageToolbar extends Plugin { * @inheritDoc */ static get requires() { - return [ WidgetToolbar ]; + return [ WidgetToolbarRepository ]; } /** @@ -44,11 +44,11 @@ export default class ImageToolbar extends Plugin { */ afterInit() { const editor = this.editor; - const widgetToolbar = editor.plugins.get( 'WidgetToolbar' ); + const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository ); - widgetToolbar.add( 'image', { + widgetToolbarRepository.register( 'image', { toolbarItems: editor.config.get( 'image.toolbar' ) || [], - isVisible: isImageWidgetSelected, + visibleWhen: isImageWidgetSelected, } ); } } diff --git a/tests/imagetoolbar.js b/tests/imagetoolbar.js index ce515d14..9c4b98e6 100644 --- a/tests/imagetoolbar.js +++ b/tests/imagetoolbar.js @@ -19,7 +19,7 @@ import env from '@ckeditor/ckeditor5-utils/src/env'; import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils'; describe( 'ImageToolbar', () => { - let editor, model, doc, toolbar, balloon, widgetToolbar, editorElement; + let editor, model, doc, toolbar, balloon, widgetToolbarRepository, editorElement; testUtils.createSinonSandbox(); @@ -41,8 +41,8 @@ describe( 'ImageToolbar', () => { editor = newEditor; model = newEditor.model; doc = model.document; - widgetToolbar = editor.plugins.get( 'WidgetToolbar' ); - toolbar = widgetToolbar._toolbars.get( 'image' ).view; + widgetToolbarRepository = editor.plugins.get( 'WidgetToolbarRepository' ); + toolbar = widgetToolbarRepository._toolbars.get( 'image' ).view; balloon = editor.plugins.get( 'ContextualBalloon' ); } ); } );