@ckeditor/ckeditor5-ui 34.2.0 → 35.1.0

package/src/panel/balloon/balloonpanelview.js

@@ -392,60 +392,74 @@ function getDomElement( object ) {
 }
 
 /**
- * A horizontal offset of the arrow tip from the edge of the balloon. Controlled by CSS.
- *
- *		 +-----|---------...
- *		 |     |
- *		 |     |
- *		 |     |
- *		 |     |
- *		 +--+  |  +------...
- *		     \ | /
- *		      \|/
- *	    >|-----|<---------------- horizontal offset
+ * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
+ *
+ *		 ┌───────────────────────┐
+ *		 │                       │
+ *		 │         Balloon       │
+ *		 │         Content       │
+ *		 │                       │
+ *		 └──+    +───────────────┘
+ *		 |   \  /
+ *		 |    \/
+ *		>┼─────┼< ─────────────────────── side offset
+ *
  *
  * @default 25
- * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset
  */
-BalloonPanelView.arrowHorizontalOffset = 25;
+BalloonPanelView.arrowSideOffset = 25;
 
 /**
- * A vertical offset of the arrow from the edge of the balloon. Controlled by CSS.
- *
- *		 +-------------...
- *		 |
- *		 |
- *		 |                      /-- vertical offset
- *		 |                     V
- *		 +--+    +-----...    ---------
- *		     \  /              |
- *		      \/               |
- *		-------------------------------
- *		                       ^
+ * A height offset of the arrow from the edge of the balloon. Controlled by CSS.
+ *
+ *		 ┌───────────────────────┐
+ *		 │                       │
+ *		 │         Balloon       │
+ *		 │         Content       │      ╱-- arrow height offset
+ *		 │                       │      V
+ *		 └──+    +───────────────┘ --- ─┼───────
+ *		     \  /                       │
+ *		      \/                        │
+ *		────────────────────────────────┼───────
+ *		                                ^
+ *
+ *
+ *		>┼────┼<  arrow height offset
+ *		 │    │
+ *		 │    ┌────────────────────────┐
+ *		 │    │                        │
+ *		 │   ╱                         │
+ *		 │ ╱            Balloon        │
+ *		 │ ╲            Content        │
+ *		 │   ╲                         │
+ *		 │    │                        │
+ *		 │    └────────────────────────┘
+ *
  *
  * @default 10
- * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset
+ * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset
  */
-BalloonPanelView.arrowVerticalOffset = 10;
+BalloonPanelView.arrowHeightOffset = 10;
 
 /**
  * A vertical offset of the balloon panel from the edge of the viewport if sticky.
  * It helps in accessing toolbar buttons underneath the balloon panel.
  *
- *		  +---------------------------------------------------+
- *		  |                      Target                       |
- *		  |                                                   |
- *		  |                            /-- vertical offset    |
- *		+-----------------------------V-------------------------+
- *		| Toolbar            +-------------+                    |
- *		+--------------------|   Balloon   |--------------------+
- *		| |                  +-------------+                  | |
- *		| |                                                   | |
- *		| |                                                   | |
- *		| |                                                   | |
- *		| +---------------------------------------------------+ |
- *		|                        Viewport                       |
- *		+-------------------------------------------------------+
+ *		  ┌───────────────────────────────────────────────────┐
+ *		  │                      Target                       │
+ *		  │                                                   │
+ *		  │                            /── vertical offset    │
+ *		┌─────────────────────────────V─────────────────────────┐
+ *		│ Toolbar            ┌─────────────┐                    │
+ *		├────────────────────│   Balloon   │────────────────────┤
+ *		│ │                  └─────────────┘                  │ │
+ *		│ │                                                   │ │
+ *		│ │                                                   │ │
+ *		│ │                                                   │ │
+ *		│ └───────────────────────────────────────────────────┘ │
+ *		│                        Viewport                       │
+ *		└───────────────────────────────────────────────────────┘
  *
  * @default 20
  * @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset
@@ -697,7 +711,7 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  *		        +-----------------+
  *		        |     Balloon     |
  *		        +-----------------+
-* * `southEastArrowNorthMiddleWest`
+ * * `southEastArrowNorthMiddleWest`
  *
  *		   [ Target ]
  *		            ^
@@ -729,6 +743,28 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  *		|     Balloon     |
  *		+-----------------+
  *
+ *
+ *
+ * **West**
+ *
+ * * `westArrowEast`
+ *
+ *		+-----------------+
+ *		|     Balloon     |>[ Target ]
+ *		+-----------------+
+ *
+ * **East**
+ *
+ * * `eastArrowWest`
+ *
+ *		           +-----------------+
+ *		[ Target ]<|     Balloon     |
+ *		           +-----------------+
+ *
+ *
+ *
+ * **Sticky**
+ *
  * * `viewportStickyNorth`
  *
  *		    +---------------------------+
@@ -756,35 +792,35 @@ BalloonPanelView._getOptimalPosition = getOptimalPosition;
  * The name that the position function returns will be reflected in the balloon panel's class that
  * controls the placement of the "arrow". See {@link #position} to learn more.
  *
- * @member {Object.<String,module:utils/dom/position~positioningFunction>}
+ * @member {Object.<String,module:utils/dom/position~PositioningFunction>}
  * module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions
  */
 BalloonPanelView.defaultPositions = generatePositions();
 
 /**
  * Returns available {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
- * {@link module:utils/dom/position~positioningFunction positioning functions} adjusted by the specific offsets.
+ * {@link module:utils/dom/position~PositioningFunction positioning functions} adjusted by the specific offsets.
  *
  * @protected
  * @param {Object} [options] Options to generate positions. If not specified, this helper will simply return
  * {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions}.
- * @param {Number} [options.horizontalOffset] A custom horizontal offset (in pixels) of each position. If
- * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset the default value}
+ * @param {Number} [options.sideOffset] A custom side offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowSideOffset the default value}
  * will be used.
- * @param {Number} [options.verticalOffset] A custom vertical offset (in pixels) of each position. If
- * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset the default value}
+ * @param {Number} [options.heightOffset] A custom height offset (in pixels) of each position. If
+ * not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHeightOffset the default value}
  * will be used.
  * @param {Number} [options.stickyVerticalOffset] A custom offset (in pixels) of the `viewportStickyNorth` positioning function.
  * If not specified, {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView.stickyVerticalOffset the default value}
  * will be used.
  * @param {Object} [options.config] Additional configuration of the balloon balloon panel view.
  * Currently only {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#withArrow} is supported. Learn more
- * about {@link module:utils/dom/position~positioningFunction positioning functions}.
- * @returns {Object.<String,module:utils/dom/position~positioningFunction>}
+ * about {@link module:utils/dom/position~PositioningFunction positioning functions}.
+ * @returns {Object.<String,module:utils/dom/position~PositioningFunction>}
  */
 export function generatePositions( {
-	horizontalOffset = BalloonPanelView.arrowHorizontalOffset,
-	verticalOffset = BalloonPanelView.arrowVerticalOffset,
+	sideOffset = BalloonPanelView.arrowSideOffset,
+	heightOffset = BalloonPanelView.arrowHeightOffset,
 	stickyVerticalOffset = BalloonPanelView.stickyVerticalOffset,
 	config
 } = {} ) {
@@ -793,14 +829,14 @@ export function generatePositions( {
 
 		northWestArrowSouthWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - horizontalOffset,
+			left: targetRect.left - sideOffset,
 			name: 'arrow_sw',
 			...( config && { config } )
 		} ),
 
 		northWestArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
 			...( config && { config } )
 		} ),
@@ -814,14 +850,14 @@ export function generatePositions( {
 
 		northWestArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
 			...( config && { config } )
 		} ),
 
 		northWestArrowSouthEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - balloonRect.width + horizontalOffset,
+			left: targetRect.left - balloonRect.width + sideOffset,
 			name: 'arrow_se',
 			...( config && { config } )
 		} ),
@@ -830,14 +866,14 @@ export function generatePositions( {
 
 		northArrowSouthWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - sideOffset,
 			name: 'arrow_sw',
 			...( config && { config } )
 		} ),
 
 		northArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
 			...( config && { config } )
 		} ),
@@ -851,14 +887,14 @@ export function generatePositions( {
 
 		northArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
 			...( config && { config } )
 		} ),
 
 		northArrowSouthEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - balloonRect.width + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width + sideOffset,
 			name: 'arrow_se',
 			...( config && { config } )
 		} ),
@@ -867,14 +903,14 @@ export function generatePositions( {
 
 		northEastArrowSouthWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - horizontalOffset,
+			left: targetRect.right - sideOffset,
 			name: 'arrow_sw',
 			...( config && { config } )
 		} ),
 
 		northEastArrowSouthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
 			...( config && { config } )
 		} ),
@@ -888,14 +924,14 @@ export function generatePositions( {
 
 		northEastArrowSouthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
 			...( config && { config } )
 		} ),
 
 		northEastArrowSouthEast: ( targetRect, balloonRect ) => ( {
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - balloonRect.width + horizontalOffset,
+			left: targetRect.right - balloonRect.width + sideOffset,
 			name: 'arrow_se',
 			...( config && { config } )
 		} ),
@@ -904,14 +940,14 @@ export function generatePositions( {
 
 		southWestArrowNorthWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - horizontalOffset,
+			left: targetRect.left - sideOffset,
 			name: 'arrow_nw',
 			...( config && { config } )
 		} ),
 
 		southWestArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_nmw',
 			...( config && { config } )
 		} ),
@@ -925,14 +961,14 @@ export function generatePositions( {
 
 		southWestArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_nme',
 			...( config && { config } )
 		} ),
 
 		southWestArrowNorthEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - balloonRect.width + horizontalOffset,
+			left: targetRect.left - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
 			...( config && { config } )
 		} ),
@@ -941,14 +977,14 @@ export function generatePositions( {
 
 		southArrowNorthWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - sideOffset,
 			name: 'arrow_nw',
 			...( config && { config } )
 		} ),
 
 		southArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.25 ) - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.25 ) - sideOffset,
 			name: 'arrow_nmw',
 			...( config && { config } )
 		} ),
@@ -962,14 +998,14 @@ export function generatePositions( {
 
 		southArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.75 ) + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - ( balloonRect.width * 0.75 ) + sideOffset,
 			name: 'arrow_nme',
 			...( config && { config } )
 		} ),
 
 		southArrowNorthEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - balloonRect.width + horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
 			...( config && { config } )
 		} ),
@@ -978,14 +1014,14 @@ export function generatePositions( {
 
 		southEastArrowNorthWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - horizontalOffset,
+			left: targetRect.right - sideOffset,
 			name: 'arrow_nw',
 			...( config && { config } )
 		} ),
 
 		southEastArrowNorthMiddleWest: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_nmw',
 			...( config && { config } )
 		} ),
@@ -999,18 +1035,36 @@ export function generatePositions( {
 
 		southEastArrowNorthMiddleEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_nme',
 			...( config && { config } )
 		} ),
 
 		southEastArrowNorthEast: ( targetRect, balloonRect ) => ( {
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - balloonRect.width + horizontalOffset,
+			left: targetRect.right - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
 			...( config && { config } )
 		} ),
 
+		// ------- West
+
+		westArrowEast: ( targetRect, balloonRect ) => ( {
+			top: targetRect.top + targetRect.height / 2 - balloonRect.height / 2,
+			left: targetRect.left - balloonRect.width - heightOffset,
+			name: 'arrow_e',
+			...( config && { config } )
+		} ),
+
+		// ------- East
+
+		eastArrowWest: ( targetRect, balloonRect ) => ( {
+			top: targetRect.top + targetRect.height / 2 - balloonRect.height / 2,
+			left: targetRect.right + heightOffset,
+			name: 'arrow_w',
+			...( config && { config } )
+		} ),
+
 		// ------- Sticky
 
 		viewportStickyNorth: ( targetRect, balloonRect, viewportRect ) => {
@@ -1037,7 +1091,7 @@ export function generatePositions( {
 	// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
 	// @returns {Number}
 	function getNorthTop( targetRect, balloonRect ) {
-		return targetRect.top - balloonRect.height - verticalOffset;
+		return targetRect.top - balloonRect.height - heightOffset;
 	}
 
 	// Returns the top coordinate for positions starting with `south*`.
@@ -1047,6 +1101,6 @@ export function generatePositions( {
 	// @param {utils/dom/rect~Rect} elementRect A rect of the balloon.
 	// @returns {Number}
 	function getSouthTop( targetRect ) {
-		return targetRect.bottom + verticalOffset;
+		return targetRect.bottom + heightOffset;
 	}
 }

package/src/toolbar/balloon/balloontoolbar.js

@@ -79,6 +79,13 @@ export default class BalloonToolbar extends Plugin {
 			this.focusTracker.add( this.toolbarView.element );
 		} );
 
+		// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+		editor.ui.addToolbar( this.toolbarView, {
+			beforeFocus: () => this.show( true ),
+			afterBlur: () => this.hide(),
+			isContextual: true
+		} );
+
 		/**
 		 * An instance of the resize observer that allows to respond to changes in editable's geometry
 		 * so the toolbar can stay within its boundaries (and group toolbar items that do not fit).
@@ -196,12 +203,14 @@ export default class BalloonToolbar extends Plugin {
 	 * @returns {module:ui/toolbar/toolbarview~ToolbarView}
 	 */
 	_createToolbarView() {
+		const t = this.editor.locale.t;
 		const shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;
 		const toolbarView = new ToolbarView( this.editor.locale, {
 			shouldGroupWhenFull,
 			isFloating: true
 		} );
 
+		toolbarView.ariaLabel = t( 'Editor contextual toolbar' );
 		toolbarView.render();
 
 		return toolbarView;
@@ -211,8 +220,11 @@ export default class BalloonToolbar extends Plugin {
 	 * Shows the toolbar and attaches it to the selection.
 	 *
 	 * Fires {@link #event:show} event which can be stopped to prevent the toolbar from showing up.
+	 *
+	 * @param {Boolean} [showForCollapsedSelection=false] When set `true`, the toolbar will show despite collapsed selection in the
+	 * editing view.
 	 */
-	show() {
+	show( showForCollapsedSelection = false ) {
 		const editor = this.editor;
 		const selection = editor.model.document.selection;
 		const schema = editor.model.schema;
@@ -223,7 +235,7 @@ export default class BalloonToolbar extends Plugin {
 		}
 
 		// Do not show the toolbar when the selection is collapsed.
-		if ( selection.isCollapsed ) {
+		if ( selection.isCollapsed && !showForCollapsedSelection ) {
 			return;
 		}
 
@@ -361,8 +373,8 @@ export default class BalloonToolbar extends Plugin {
 		const positions = isSafariIniOS ? generatePositions( {
 			// 20px when zoomed out. Less then 20px when zoomed in; the "radius" of the native selection handle gets
 			// smaller as the user zooms in. No less than the default v-offset, though.
-			verticalOffset: Math.max(
-				BalloonPanelView.arrowVerticalOffset,
+			heightOffset: Math.max(
+				BalloonPanelView.arrowHeightOffset,
 				Math.round( 20 / global.window.visualViewport.scale )
 			)
 		} ) : BalloonPanelView.defaultPositions;
@@ -426,7 +438,7 @@ function selectionContainsOnlyMultipleSelectables( selection, schema ) {
  * You can also use `'|'` to create a separator between groups of items:
  *
  *		const config = {
- *			balloonToolbar: [ 'bold', 'italic', | 'undo', 'redo' ]
+ *			balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
  *		};
  *
  * Read also about configuring the main editor toolbar in {@link module:core/editor/editorconfig~EditorConfig#toolbar}.

package/src/toolbar/block/blocktoolbar.js

@@ -166,6 +166,12 @@ export default class BlockToolbar extends Plugin {
 				this._hidePanel();
 			}
 		} );
+
+		// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+		editor.ui.addToolbar( this.toolbarView, {
+			beforeFocus: () => this._showPanel(),
+			afterBlur: () => this._hidePanel()
+		} );
 	}
 
 	/**
@@ -221,12 +227,15 @@ export default class BlockToolbar extends Plugin {
 	 * @returns {module:ui/toolbar/toolbarview~ToolbarView}
 	 */
 	_createToolbarView() {
+		const t = this.editor.locale.t;
 		const shouldGroupWhenFull = !this._blockToolbarConfig.shouldNotGroupWhenFull;
 		const toolbarView = new ToolbarView( this.editor.locale, {
 			shouldGroupWhenFull,
 			isFloating: true
 		} );
 
+		toolbarView.ariaLabel = t( 'Editor block content toolbar' );
+
 		// When toolbar lost focus then panel should hide.
 		toolbarView.focusTracker.on( 'change:isFocused', ( evt, name, is ) => {
 			if ( !is ) {
@@ -363,6 +372,14 @@ export default class BlockToolbar extends Plugin {
 	 * @private
 	 */
 	_showPanel() {
+		// Usually, the only way to show the toolbar is by pressing the block button. It makes it impossible for
+		// the toolbar to show up when the button is invisible (feature does not make sense for the selection then).
+		// The toolbar navigation using Alt+F10 does not access the button but shows the panel directly using this method.
+		// So we need to check whether this is possible first.
+		if ( !this.buttonView.isVisible ) {
+			return;
+		}
+
 		const wasVisible = this.panelView.isVisible;
 
 		// So here's the thing: If there was no initial panelView#show() or these two were in different order, the toolbar