@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 35.0.1 to 35.1.0

lang/contexts.json

@@ -23,3 +23,5 @@ {
 	"Blue": "Label of a button that applies a blue color in color pickers.",
-	"Purple": "Label of a button that applies a purple color in color pickers."
+	"Purple": "Label of a button that applies a purple color in color pickers.",
+	"Editor block content toolbar": "Accessible label of a toolbar that shows up next to the blocks of content (e.g. headings, paragraphs).",
+	"Editor contextual toolbar": "Accessible label of a balloon toolbar that shows up right next to the user selection (the caret)."
 }

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "35.0.1",
+  "version": "35.1.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -14,23 +14,25 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^35.0.1",
-    "@ckeditor/ckeditor5-core": "^35.0.1",
+    "@ckeditor/ckeditor5-utils": "^35.1.0",
+    "@ckeditor/ckeditor5-core": "^35.1.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^35.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-balloon": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^35.0.1",
-    "@ckeditor/ckeditor5-engine": "^35.0.1",
-    "@ckeditor/ckeditor5-enter": "^35.0.1",
-    "@ckeditor/ckeditor5-essentials": "^35.0.1",
-    "@ckeditor/ckeditor5-heading": "^35.0.1",
-    "@ckeditor/ckeditor5-image": "^35.0.1",
-    "@ckeditor/ckeditor5-link": "^35.0.1",
-    "@ckeditor/ckeditor5-list": "^35.0.1",
-    "@ckeditor/ckeditor5-mention": "^35.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^35.0.1",
-    "@ckeditor/ckeditor5-horizontal-line": "^35.0.1",
-    "@ckeditor/ckeditor5-table": "^35.0.1",
-    "@ckeditor/ckeditor5-typing": "^35.0.1"
+    "@ckeditor/ckeditor5-basic-styles": "^35.1.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.1.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^35.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.1.0",
+    "@ckeditor/ckeditor5-engine": "^35.1.0",
+    "@ckeditor/ckeditor5-enter": "^35.1.0",
+    "@ckeditor/ckeditor5-essentials": "^35.1.0",
+    "@ckeditor/ckeditor5-font": "^35.1.0",
+    "@ckeditor/ckeditor5-find-and-replace": "^35.1.0",
+    "@ckeditor/ckeditor5-heading": "^35.1.0",
+    "@ckeditor/ckeditor5-image": "^35.1.0",
+    "@ckeditor/ckeditor5-link": "^35.1.0",
+    "@ckeditor/ckeditor5-list": "^35.1.0",
+    "@ckeditor/ckeditor5-mention": "^35.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.1.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^35.1.0",
+    "@ckeditor/ckeditor5-table": "^35.1.0",
+    "@ckeditor/ckeditor5-typing": "^35.1.0"
   },
@@ -37,0 +39,0 @@ "engines": {

src/button/buttonview.js

@@ -12,3 +12,2 @@ /**
 import IconView from '../icon/iconview';
-import TooltipView from '../tooltip/tooltipview';
 
@@ -76,10 +75,2 @@ import uid from '@ckeditor/ckeditor5-utils/src/uid';
 		/**
-		 * Tooltip of the button view. It is configurable using the {@link #tooltip tooltip attribute}.
-		 *
-		 * @readonly
-		 * @member {module:ui/tooltip/tooltipview~TooltipView} #tooltipView
-		 */
-		this.tooltipView = this._createTooltipView();
-
-		/**
 		 * Label of the button view. It is configurable using the {@link #label label attribute}.
@@ -124,3 +115,3 @@ *
 		 * @observable
-		 * @member {Boolean} #_tooltipString
+		 * @member {String|undefined} #_tooltipString
 		 */
@@ -152,3 +143,5 @@ this.bind( '_tooltipString' ).to(
 				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
-				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false )
+				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false ),
+				'data-cke-tooltip-text': bind.to( '_tooltipString' ),
+				'data-cke-tooltip-position': bind.to( 'tooltipPosition' )
 			},
@@ -196,3 +189,2 @@
 
-		this.children.add( this.tooltipView );
 		this.children.add( this.labelView );
@@ -213,18 +205,2 @@
 	/**
-	 * Creates a {@link module:ui/tooltip/tooltipview~TooltipView} instance and binds it with button
-	 * attributes.
-	 *
-	 * @private
-	 * @returns {module:ui/tooltip/tooltipview~TooltipView}
-	 */
-	_createTooltipView() {
-		const tooltipView = new TooltipView();
-
-		tooltipView.bind( 'text' ).to( this, '_tooltipString' );
-		tooltipView.bind( 'position' ).to( this, 'tooltipPosition' );
-
-		return tooltipView;
-	}
-
-	/**
 	 * Creates a label view instance and binds it with button attributes.
@@ -293,3 +269,3 @@ *
 	/**
-	 * Gets the text for the {@link #tooltipView} from the combination of
+	 * Gets the text for the tooltip from the combination of
 	 * {@link #tooltip}, {@link #label} and {@link #keystroke} attributes.
@@ -296,0 +272,0 @@ *

src/colorgrid/colorgridview.js

@@ -13,4 +13,5 @@ /**
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
-import FocusCycler from '../focuscycler';
 import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
+import addKeyboardHandlingForGrid from '../bindings/addkeyboardhandlingforgrid';
+
 import '../../theme/components/colorgrid/colorgrid.css';
@@ -31,3 +32,3 @@
 	 * required to create the {@link module:ui/colorgrid/colortile~ColorTileView tiles}.
-	 * @param {Number} options.columns A number of columns to display the tiles.
+	 * @param {Number} [options.columns=5] A number of columns to display the tiles.
 	 */
@@ -40,6 +41,12 @@ constructor( locale, options ) {
 
-		if ( options && options.columns ) {
-			viewStyleAttribute.gridTemplateColumns = `repeat( ${ options.columns }, 1fr)`;
-		}
+		/**
+		 * A number of columns for the tiles grid.
+		 *
+		 * @readonly
+		 * @member {Number}
+		 */
+		this.columns = options && options.columns ? options.columns : 5;
 
+		viewStyleAttribute.gridTemplateColumns = `repeat( ${ this.columns }, 1fr)`;
+
 		/**
@@ -77,22 +84,2 @@ * The color of the currently selected color tile in {@link #items}.
 
-		/**
-		 * Helps cycling over focusable {@link #items} in the grid.
-		 *
-		 * @readonly
-		 * @protected
-		 * @member {module:ui/focuscycler~FocusCycler}
-		 */
-		this._focusCycler = new FocusCycler( {
-			focusables: this.items,
-			focusTracker: this.focusTracker,
-			keystrokeHandler: this.keystrokes,
-			actions: {
-				// Navigate grid items backwards using the arrowup key.
-				focusPrevious: 'arrowleft',
-
-				// Navigate grid items forwards using the arrowdown key.
-				focusNext: 'arrowright'
-			}
-		} );
-
 		this.items.on( 'add', ( evt, colorTile ) => {
@@ -181,2 +168,9 @@ colorTile.isOn = colorTile.color === this.selectedColor;
 		this.keystrokes.listenTo( this.element );
+
+		addKeyboardHandlingForGrid( {
+			keystrokeHandler: this.keystrokes,
+			focusTracker: this.focusTracker,
+			gridItems: this.items,
+			numberOfColumns: this.columns
+		} );
 	}
@@ -183,0 +177,0 @@

src/dropdown/button/dropdownbuttonview.js

@@ -52,3 +52,4 @@ /**
 			attributes: {
-				'aria-haspopup': true
+				'aria-haspopup': true,
+				'aria-expanded': this.bindTemplate.to( 'isOn', value => String( value ) )
 			}
@@ -55,0 +56,0 @@ } );

src/dropdown/button/splitbuttonview.js

@@ -225,3 +225,6 @@ /**
 			attributes: {
-				class: 'ck-splitbutton__arrow',
+				class: [
+					'ck-splitbutton__arrow'
+				],
+				'data-cke-tooltip-disabled': bind.to( 'isOn' ),
 				'aria-haspopup': true,
@@ -228,0 +231,0 @@ 'aria-expanded': bind.to( 'isOn', value => String( value ) )

src/dropdown/dropdownview.js

@@ -197,3 +197,4 @@ /**
 					'ck-dropdown__button'
-				]
+				],
+				'data-cke-tooltip-disabled': bind.to( 'isOpen' )
 			}
@@ -200,0 +201,0 @@ } );

src/icon/iconview.js

@@ -106,3 +106,5 @@ /**
 
-			this.element.innerHTML = '';
+			while ( this.element.firstChild ) {
+				this.element.removeChild( this.element.firstChild );
+			}
 
@@ -109,0 +111,0 @@ while ( svg.childNodes.length > 0 ) {

src/index.js

@@ -13,2 +13,3 @@ /**
 export { default as submitHandler } from './bindings/submithandler';
+export { default as addKeyboardHandlingForGrid } from './bindings/addkeyboardhandlingforgrid';
 
@@ -56,3 +57,3 @@ export { default as BodyCollection } from './editorui/bodycollection';
 
-export { default as TooltipView } from './tooltip/tooltipview';
+export { default as TooltipManager } from './tooltipmanager';
 export { default as Template } from './template';
@@ -62,3 +63,2 @@
 export { default as ToolbarSeparatorView } from './toolbar/toolbarseparatorview';
-export { default as enableToolbarKeyboardFocus } from './toolbar/enabletoolbarkeyboardfocus';
 export { default as normalizeToolbarConfig } from './toolbar/normalizetoolbarconfig';
@@ -65,0 +65,0 @@ export { default as BalloonToolbar } from './toolbar/balloon/balloontoolbar';

src/list/listitemview.js

@@ -24,3 +24,15 @@ /**
 
+		const bind = this.bindTemplate;
+
 		/**
+		 * Controls whether the item view is visible. Visible by default, list items are hidden
+		 * using a CSS class.
+		 *
+		 * @observable
+		 * @default true
+		 * @member {Boolean} #isVisible
+		 */
+		this.set( 'isVisible', true );
+
+		/**
 		 * Collection of the child views inside of the list item {@link #element}.
@@ -39,3 +51,4 @@ *
 					'ck',
-					'ck-list__item'
+					'ck-list__item',
+					bind.if( 'isVisible', 'ck-hidden', value => !value )
 				]
@@ -42,0 +55,0 @@ },

src/panel/balloon/balloonpanelview.js

@@ -395,37 +395,51 @@ /**
 /**
- * A horizontal offset of the arrow tip from the edge of the balloon. Controlled by CSS.
+ * A side offset of the arrow tip from the edge of the balloon. Controlled by CSS.
  *
- *		 +-----|---------...
- *		 |     |
- *		 |     |
- *		 |     |
- *		 |     |
- *		 +--+  |  +------...
- *		     \ | /
- *		      \|/
- *	    >|-----|<---------------- horizontal offset
+ *		 ┌───────────────────────┐
+ *		 │                       │
+ *		 │         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.
+ * A height offset of the arrow from the edge of the balloon. Controlled by CSS.
  *
- *		 +-------------...
- *		 |
- *		 |
- *		 |                      /-- vertical offset
- *		 |                     V
- *		 +--+    +-----...    ---------
- *		     \  /              |
- *		      \/               |
- *		-------------------------------
- *		                       ^
+ *		 ┌───────────────────────┐
+ *		 │                       │
+ *		 │         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;
 
@@ -436,16 +450,16 @@ /**
  *
- *		  +---------------------------------------------------+
- *		  |                      Target                       |
- *		  |                                                   |
- *		  |                            /-- vertical offset    |
- *		+-----------------------------V-------------------------+
- *		| Toolbar            +-------------+                    |
- *		+--------------------|   Balloon   |--------------------+
- *		| |                  +-------------+                  | |
- *		| |                                                   | |
- *		| |                                                   | |
- *		| |                                                   | |
- *		| +---------------------------------------------------+ |
- *		|                        Viewport                       |
- *		+-------------------------------------------------------+
+ *		  ┌───────────────────────────────────────────────────┐
+ *		  │                      Target                       │
+ *		  │                                                   │
+ *		  │                            /── vertical offset    │
+ *		┌─────────────────────────────V─────────────────────────┐
+ *		│ Toolbar            ┌─────────────┐                    │
+ *		├────────────────────│   Balloon   │────────────────────┤
+ *		│ │                  └─────────────┘                  │ │
+ *		│ │                                                   │ │
+ *		│ │                                                   │ │
+ *		│ │                                                   │ │
+ *		│ └───────────────────────────────────────────────────┘ │
+ *		│                        Viewport                       │
+ *		└───────────────────────────────────────────────────────┘
  *
@@ -702,3 +716,3 @@ * @default 20
  *		        +-----------------+
-* * `southEastArrowNorthMiddleWest`
+ * * `southEastArrowNorthMiddleWest`
  *
@@ -735,2 +749,24 @@ *		   [ Target ]
  *
+ *
+ *
+ * **West**
+ *
+ * * `westArrowEast`
+ *
+ *		+-----------------+
+ *		|     Balloon     |>[ Target ]
+ *		+-----------------+
+ *
+ * **East**
+ *
+ * * `eastArrowWest`
+ *
+ *		           +-----------------+
+ *		[ Target ]<|     Balloon     |
+ *		           +-----------------+
+ *
+ *
+ *
+ * **Sticky**
+ *
  * * `viewportStickyNorth`
@@ -775,7 +811,7 @@ *
  * {@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.
@@ -791,4 +827,4 @@ * @param {Number} [options.stickyVerticalOffset] A custom offset (in pixels) of the `viewportStickyNorth` positioning function.
 export function generatePositions( {
-	horizontalOffset = BalloonPanelView.arrowHorizontalOffset,
-	verticalOffset = BalloonPanelView.arrowVerticalOffset,
+	sideOffset = BalloonPanelView.arrowSideOffset,
+	heightOffset = BalloonPanelView.arrowHeightOffset,
 	stickyVerticalOffset = BalloonPanelView.stickyVerticalOffset,
@@ -802,3 +838,3 @@ config
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - horizontalOffset,
+			left: targetRect.left - sideOffset,
 			name: 'arrow_sw',
@@ -810,3 +846,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
@@ -825,3 +861,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
@@ -833,3 +869,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left - balloonRect.width + horizontalOffset,
+			left: targetRect.left - balloonRect.width + sideOffset,
 			name: 'arrow_se',
@@ -843,3 +879,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - sideOffset,
 			name: 'arrow_sw',
@@ -851,3 +887,3 @@ ...( config && { config } )
 			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',
@@ -866,3 +902,3 @@ ...( config && { config } )
 			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',
@@ -874,3 +910,3 @@ ...( config && { config } )
 			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',
@@ -884,3 +920,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - horizontalOffset,
+			left: targetRect.right - sideOffset,
 			name: 'arrow_sw',
@@ -892,3 +928,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_smw',
@@ -907,3 +943,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_sme',
@@ -915,3 +951,3 @@ ...( config && { config } )
 			top: getNorthTop( targetRect, balloonRect ),
-			left: targetRect.right - balloonRect.width + horizontalOffset,
+			left: targetRect.right - balloonRect.width + sideOffset,
 			name: 'arrow_se',
@@ -925,3 +961,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - horizontalOffset,
+			left: targetRect.left - sideOffset,
 			name: 'arrow_nw',
@@ -933,3 +969,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_nmw',
@@ -948,3 +984,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.left - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_nme',
@@ -956,3 +992,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left - balloonRect.width + horizontalOffset,
+			left: targetRect.left - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
@@ -966,3 +1002,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.left + targetRect.width / 2 - horizontalOffset,
+			left: targetRect.left + targetRect.width / 2 - sideOffset,
 			name: 'arrow_nw',
@@ -974,3 +1010,3 @@ ...( config && { config } )
 			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',
@@ -989,3 +1025,3 @@ ...( config && { config } )
 			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',
@@ -997,3 +1033,3 @@ ...( config && { config } )
 			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',
@@ -1007,3 +1043,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - horizontalOffset,
+			left: targetRect.right - sideOffset,
 			name: 'arrow_nw',
@@ -1015,3 +1051,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .25 ) - horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .25 ) - sideOffset,
 			name: 'arrow_nmw',
@@ -1030,3 +1066,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - ( balloonRect.width * .75 ) + horizontalOffset,
+			left: targetRect.right - ( balloonRect.width * .75 ) + sideOffset,
 			name: 'arrow_nme',
@@ -1038,3 +1074,3 @@ ...( config && { config } )
 			top: getSouthTop( targetRect, balloonRect ),
-			left: targetRect.right - balloonRect.width + horizontalOffset,
+			left: targetRect.right - balloonRect.width + sideOffset,
 			name: 'arrow_ne',
@@ -1044,2 +1080,20 @@ ...( 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
@@ -1071,3 +1125,3 @@
 	function getNorthTop( targetRect, balloonRect ) {
-		return targetRect.top - balloonRect.height - verticalOffset;
+		return targetRect.top - balloonRect.height - heightOffset;
 	}
@@ -1082,4 +1136,4 @@
 	function getSouthTop( targetRect ) {
-		return targetRect.bottom + verticalOffset;
+		return targetRect.bottom + heightOffset;
 	}
 }

src/toolbar/balloon/balloontoolbar.js

@@ -82,2 +82,9 @@ /**
 
+		// 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
+		} );
+
 		/**
@@ -200,2 +207,3 @@ * An instance of the resize observer that allows to respond to changes in editable's geometry
 	_createToolbarView() {
+		const t = this.editor.locale.t;
 		const shouldGroupWhenFull = !this._balloonConfig.shouldNotGroupWhenFull;
@@ -207,2 +215,3 @@ const toolbarView = new ToolbarView( this.editor.locale, {
 
+		toolbarView.ariaLabel = t( 'Editor contextual toolbar' );
 		toolbarView.render();
@@ -217,4 +226,7 @@
 	 * 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;
@@ -230,3 +242,3 @@ const selection = editor.model.document.selection;
 		// Do not show the toolbar when the selection is collapsed.
-		if ( selection.isCollapsed ) {
+		if ( selection.isCollapsed && !showForCollapsedSelection ) {
 			return;
@@ -369,4 +381,4 @@ }
 			// 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 )
@@ -435,3 +447,3 @@ )
  *		const config = {
- *			balloonToolbar: [ 'bold', 'italic', | 'undo', 'redo' ]
+ *			balloonToolbar: [ 'bold', 'italic', '|', 'undo', 'redo' ]
  *		};
@@ -438,0 +450,0 @@ *

src/toolbar/block/blocktoolbar.js

@@ -169,2 +169,8 @@ /**
 		} );
+
+		// Register the toolbar so it becomes available for Alt+F10 and Esc navigation.
+		editor.ui.addToolbar( this.toolbarView, {
+			beforeFocus: () => this._showPanel(),
+			afterBlur: () => this._hidePanel()
+		} );
 	}
@@ -225,2 +231,3 @@
 	_createToolbarView() {
+		const t = this.editor.locale.t;
 		const shouldGroupWhenFull = !this._blockToolbarConfig.shouldNotGroupWhenFull;
@@ -232,2 +239,4 @@ const toolbarView = new ToolbarView( this.editor.locale, {
 
+		toolbarView.ariaLabel = t( 'Editor block content toolbar' );
+
 		// When toolbar lost focus then panel should hide.
@@ -369,2 +378,10 @@ toolbarView.focusTracker.on( 'change:isFocused', ( evt, name, is ) => {
 	_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;
@@ -371,0 +388,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

671974

increased by6.03%

Lines of code

11798

increased by2.34%

Worsened metrics

Dev dependency count

18

increased by12.5%

Dependency changes

• Updated@ckeditor/ckeditor5-core@^35.1.0

• Updated@ckeditor/ckeditor5-utils@^35.1.0