diff --git a/src/toolbar/contextual/contextualtoolbar.js b/src/toolbar/contextual/contextualtoolbar.js index d3b635e3..cae1dafc 100644 --- a/src/toolbar/contextual/contextualtoolbar.js +++ b/src/toolbar/contextual/contextualtoolbar.js @@ -7,6 +7,7 @@ * @module ui/toolbar/contextual/contextualtoolbar */ +import Template from '../../template'; import Plugin from '@ckeditor/ckeditor5-core/src/plugin'; import ContextualBalloon from '../../panel/balloon/contextualballoon'; import ToolbarView from '../toolbarview'; @@ -48,6 +49,12 @@ export default class ContextualToolbar extends Plugin { */ this.toolbarView = new ToolbarView( this.editor.locale ); + Template.extend( this.toolbarView.template, { + attributes: { + class: 'ck-editor-toolbar' + } + } ); + /** * The contextual balloon plugin instance. * @@ -170,7 +177,7 @@ export default class ContextualToolbar extends Plugin { this._balloon.add( { view: this.toolbarView, position: this._getBalloonPositionData(), - balloonClassName: 'ck-toolbar-container' + balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container' } ) ); } ); diff --git a/tests/toolbar/contextual/contextualtoolbar.js b/tests/toolbar/contextual/contextualtoolbar.js index 5beed853..691ce61a 100644 --- a/tests/toolbar/contextual/contextualtoolbar.js +++ b/tests/toolbar/contextual/contextualtoolbar.js @@ -58,6 +58,7 @@ describe( 'ContextualToolbar', () => { expect( contextualToolbar ).to.instanceOf( Plugin ); expect( contextualToolbar ).to.instanceOf( ContextualToolbar ); expect( contextualToolbar.toolbarView ).to.instanceof( ToolbarView ); + expect( contextualToolbar.toolbarView.element.classList.contains( 'ck-editor-toolbar' ) ).to.be.true; } ); it( 'should load ContextualBalloon', () => { @@ -157,7 +158,7 @@ describe( 'ContextualToolbar', () => { return contextualToolbar._showPanel().then( () => { sinon.assert.calledWithExactly( balloonAddSpy, { view: contextualToolbar.toolbarView, - balloonClassName: 'ck-toolbar-container', + balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container', position: { target: forwardSelectionRect, positions: [ defaultPositions.southEastArrowNorth, defaultPositions.northEastArrowSouth ] @@ -175,7 +176,7 @@ describe( 'ContextualToolbar', () => { .then( () => { sinon.assert.calledWithExactly( balloonAddSpy, { view: contextualToolbar.toolbarView, - balloonClassName: 'ck-toolbar-container', + balloonClassName: 'ck-toolbar-container ck-editor-toolbar-container', position: { target: backwardSelectionRect, positions: [ defaultPositions.northWestArrowSouth, defaultPositions.southWestArrowNorth ]