@ckeditor/ckeditor5-core 35.0.1 → 35.2.0

package/lang/translations/es-co.po

@@ -0,0 +1,49 @@
+# Copyright (c) 2003-2022, CKSource Holding sp. z o.o. All rights reserved.
+#
+#                                     !!! IMPORTANT !!!
+#
+#         Before you edit this file, please keep in mind that contributing to the project
+#                translations is possible ONLY via the Transifex online service.
+#
+#         To submit your translations, visit https://www.transifex.com/ckeditor/ckeditor5.
+#
+#                   To learn more, check out the official contributor's guide:
+#     https://ckeditor.com/docs/ckeditor5/latest/framework/guides/contributing/contributing.html
+#
+msgid ""
+msgstr ""
+"Language-Team: Spanish (Colombia) (https://www.transifex.com/ckeditor/teams/11143/es_CO/)\n"
+"Language: es_CO\n"
+"Plural-Forms: nplurals=3; plural=n == 1 ? 0 : n != 0 && n % 1000000 == 0 ? 1 : 2;\n"
+
+msgctxt "Label for the Cancel button."
+msgid "Cancel"
+msgstr "Cancelar"
+
+msgctxt "The label used by a button next to the color palette in the color picker that removes the color (resets it to an empty value, example usages in font color or table properties)."
+msgid "Remove color"
+msgstr "Quitar color"
+
+msgctxt "The label used by a button next to the color palette in the color picker that restores the default value if the default table properties are specified."
+msgid "Restore default"
+msgstr "Restaurar valores predeterminados"
+
+msgctxt "Label for the Save button."
+msgid "Save"
+msgstr "Guardar"
+
+msgctxt "Label of a toolbar button which reveals more toolbar items."
+msgid "Show more items"
+msgstr "Mostrar más elementos"
+
+msgctxt "Label for an ‘X of Y’ status of a typical next/previous navigation. For instance, ‘Page 5 of 20’ or 'Search result 5 of 20'."
+msgid "%0 of %1"
+msgstr "%0 de %1"
+
+msgctxt "A generic error message displayed on upload failure. The file name is concatenated to this text."
+msgid "Cannot upload file:"
+msgstr "No se pudo cargar el archivo:"
+
+msgctxt "Accessible label of the specific editing area of the editor acting as a root of the entire application."
+msgid "Rich Text Editor. Editing area: %0"
+msgstr "Editor de texto enriquecido. Área de edición: %0"

package/lang/translations/gl.po

@@ -46,4 +46,4 @@ msgstr "Non é posíbel cargar o ficheiro:"
 
 msgctxt "Accessible label of the specific editing area of the editor acting as a root of the entire application."
 msgid "Rich Text Editor. Editing area: %0"
-msgstr ""
+msgstr "Editor de texto mellorado. Área de edición: %0"

package/lang/translations/tt.po

@@ -18,7 +18,7 @@ msgstr ""
 
 msgctxt "Label for the Cancel button."
 msgid "Cancel"
-msgstr ""
+msgstr "Баш тарт"
 
 msgctxt "The label used by a button next to the color palette in the color picker that removes the color (resets it to an empty value, example usages in font color or table properties)."
 msgid "Remove color"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-core",
-  "version": "35.0.1",
+  "version": "35.2.0",
   "description": "The core architecture of CKEditor 5 – the best browser-based rich text editor.",
   "keywords": [
     "wysiwyg",
@@ -23,25 +23,25 @@
   ],
   "main": "src/index.js",
   "dependencies": {
-    "@ckeditor/ckeditor5-engine": "^35.0.1",
-    "@ckeditor/ckeditor5-ui": "^35.0.1",
-    "@ckeditor/ckeditor5-utils": "^35.0.1",
+    "@ckeditor/ckeditor5-engine": "^35.2.0",
+    "@ckeditor/ckeditor5-ui": "^35.2.0",
+    "@ckeditor/ckeditor5-utils": "^35.2.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-autoformat": "^35.0.1",
-    "@ckeditor/ckeditor5-basic-styles": "^35.0.1",
-    "@ckeditor/ckeditor5-block-quote": "^35.0.1",
-    "@ckeditor/ckeditor5-editor-classic": "^35.0.1",
-    "@ckeditor/ckeditor5-essentials": "^35.0.1",
-    "@ckeditor/ckeditor5-heading": "^35.0.1",
-    "@ckeditor/ckeditor5-image": "^35.0.1",
-    "@ckeditor/ckeditor5-indent": "^35.0.1",
-    "@ckeditor/ckeditor5-link": "^35.0.1",
-    "@ckeditor/ckeditor5-list": "^35.0.1",
-    "@ckeditor/ckeditor5-media-embed": "^35.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^35.0.1",
-    "@ckeditor/ckeditor5-table": "^35.0.1"
+    "@ckeditor/ckeditor5-autoformat": "^35.2.0",
+    "@ckeditor/ckeditor5-basic-styles": "^35.2.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.2.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.2.0",
+    "@ckeditor/ckeditor5-essentials": "^35.2.0",
+    "@ckeditor/ckeditor5-heading": "^35.2.0",
+    "@ckeditor/ckeditor5-image": "^35.2.0",
+    "@ckeditor/ckeditor5-indent": "^35.2.0",
+    "@ckeditor/ckeditor5-link": "^35.2.0",
+    "@ckeditor/ckeditor5-list": "^35.2.0",
+    "@ckeditor/ckeditor5-media-embed": "^35.2.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.2.0",
+    "@ckeditor/ckeditor5-table": "^35.2.0"
   },
   "engines": {
     "node": ">=14.0.0",

package/src/editor/editorconfig.jsdoc

@@ -110,7 +110,8 @@
  *
  * **Note:** This configuration works only for simple plugins which utilize the
  * {@link module:core/plugin~PluginInterface plugin interface} and have no dependencies. To extend a
- * build with complex features, create a {@glink installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder custom build}.
+ * build with complex features, create a {@glink installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder
+ * custom build}.
  *
  * **Note:** Make sure you include the new features in you toolbar configuration. Learn more
  * about the {@glink features/toolbar/toolbar toolbar setup}.
@@ -119,7 +120,8 @@
  */
 
 /**
- * The list of plugins which should not be loaded despite being available in an {@glink installation/getting-started/predefined-builds editor build}.
+ * The list of plugins which should not be loaded despite being available in an {@glink installation/getting-started/predefined-builds
+ * editor build}.
  *
  *		const config = {
  *			removePlugins: [ 'Bold', 'Italic' ]
@@ -169,11 +171,90 @@
  *
  *	Line break will work only in the extended format when `shouldNotGroupWhenFull` option is set to `true`.
  *
- * * **`toolbar.viewportTopOffset` (deprecated)** – The offset (in pixels) from the top of the viewport used when positioning a sticky toolbar.
+ *	**Note**: To save space in your toolbar you can group several items into a dropdown:
+ *
+ *		toolbar: [
+ *			{
+ *				label: 'Basic styles',
+ *				icon: 'text',
+ *				items: [ 'bold', 'italic', ... ]
+ *			},
+ *			'|',
+ *			'undo', 'redo'
+ *		]
+ *
+ *	The code above will create a "Basic styles" dropdown with a "text" icon containing "bold" and "italic" buttons.
+ *	You can customize the look of the dropdown by setting the `withText`, `icon`, and `tooltip` properties:
+ *
+ *	* **Displaying a label**
+ *
+ *		For instance, to hide the icon and to display the label only, you can use the following configuration:
+ *
+ *				{
+ *					label: 'Basic styles',
+ *					// Show the textual label of the drop-down. Note that the "icon" property is not configured.
+ *					withText: true,
+ *					items: [ 'bold', 'italic', ... ]
+ *				}
+ *
+ *	* **Selecting an icon**
+ *
+ *		You can use one of the common icons provided by the editor (`'bold'`, `'plus'`, `'text'`, `'importExport'`, `'alignLeft'`,
+ *		`'paragraph'`, `'threeVerticalDots'`):
+ *
+ *				{
+ *					label: '...',
+ *					// A "plus" sign icon works best for content insertion tools.
+ *					icon: 'plus',
+ *					items: [ ... ]
+ *				}
+ *
+ *		If no icon is specified, `'threeVerticalDots'` will be used as a default:
+ *
+ *				// No icon specified, using a default one.
+ *				{
+ *					label: 'Default icon',
+ *					items: [ ... ]
+ *				}
+ *
+ *		If `icon: false` is configured, no icon will be displayed at all and the text label will show up instead:
+ *
+ *				// This drop-down has no icon. The text label will be displayed instead.
+ *				{
+ *					label: 'No icon',
+ *					icon: false,
+ *					items: [ ... ]
+ *				}
+ *
+ *		You can also set a custom icon for the drop-down by passing an SVG string:
+ *
+ *				{
+ *					label: '...',
+ *					// If you want your icon to change the color dynamically (e.g. when the dropdown opens), avoid fill="..."
+ *					// and stroke="..." styling attributes. Use solid shapes and avoid paths with strokes.
+ *					icon: '<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">...</svg>',
+ *					items: [ ... ]
+ *				}
+ *
+ *	* **Customizing the tooltip**
+ *
+ *		By default, the tooltip of the button shares its text with the label. You can customize it to better describe your dropdown
+ *		using the `tooltip` property ({@link module:ui/button/buttonview~ButtonView#tooltip learn more}):
+ *
+ *				{
+ *					label: 'Drop-down label',
+ *					tooltip: 'Custom tooltip of the drop-down',
+ *					icon: '...',
+ *					items: [ ... ]
+ *				}
+ *
+ * * **`toolbar.viewportTopOffset` (deprecated)** &ndash; The offset (in pixels) from the top of the viewport used when positioning a
+ * sticky toolbar.
  * Useful when a page with which the editor is being integrated has some other sticky or fixed elements
  * (e.g. the top menu). Thanks to setting the toolbar offset the toolbar will not be positioned underneath or above the page's UI.
  *
- * 	**This property has been deprecated and will be removed in the future versions of CKEditor. Please use `{@link module:core/editor/editorconfig~EditorConfig#ui EditorConfig#ui.viewportOffset}` instead.**
+ * 	**This property has been deprecated and will be removed in the future versions of CKEditor. Please use
+ * `{@link module:core/editor/editorconfig~EditorConfig#ui EditorConfig#ui.viewportOffset}` instead.**
  *
  * * **`toolbar.shouldNotGroupWhenFull`** &ndash; When set to `true`, the toolbar will stop grouping items
  * and let them wrap to the next line if there is not enough space to display them in a single row.
@@ -315,27 +396,30 @@
  *
  * Options which can be set using the UI config:
  *
- * * **`ui.viewportOffset`** &ndash; The offset (in pixels) of the viewport from every direction used when positioning a sticky toolbar or other absolutely positioned UI elements.
+ * * **`ui.viewportOffset`** &ndash; The offset (in pixels) of the viewport from every direction used when positioning a sticky toolbar
+ * or other absolutely positioned UI elements.
  * Useful when a page with which the editor is being integrated has some other sticky or fixed elements
- * (e.g. the top menu). Thanks to setting the UI viewport offset the toolbar and other contextual balloons will not be positioned underneath or above the page's UI.
+ * (e.g. the top menu). Thanks to setting the UI viewport offset the toolbar and other contextual balloons will not be positioned
+ * underneath or above the page's UI.
  *
  *		ui: {
  *			viewportOffset: { top: 10, right: 10, bottom: 10, left: 10 }
  *		}
  *
- * 	**Note:** If you want to modify the viewport offset in runtime (after editor was created), you can do that by overriding {@link module:core/editor/editorui~EditorUI#viewportOffset `editor.ui.viewportOffset`}.
+ * 	**Note:** If you want to modify the viewport offset in runtime (after editor was created), you can do that by overriding
+ * {@link module:core/editor/editorui~EditorUI#viewportOffset `editor.ui.viewportOffset`}.
  *
  * @member {Object} module:core/editor/editorconfig~EditorConfig#ui
  */
 
- /**
+/**
  * Enables updating the source element after the editor destroy.
  *
  * Enabling this option might have some security implications, as the editor doesn't have control over all data
  * in the output.
  *
- * Be careful, especially while using 
- * {@glink features/markdown Markdown}, {@glink features/general-html-support General HTML Support} or 
+ * Be careful, especially while using
+ * {@glink features/markdown Markdown}, {@glink features/general-html-support General HTML Support} or
  * {@glink features/html-embed HTML embed} features.
  *
  * @member {Boolean} module:core/editor/editorconfig~EditorConfig#updateSourceElementOnDestroy

package/src/editor/editorui.js

@@ -11,9 +11,11 @@
 
 import ComponentFactory from '@ckeditor/ckeditor5-ui/src/componentfactory';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
+import TooltipManager from '@ckeditor/ckeditor5-ui/src/tooltipmanager';
 
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
+import isVisible from '@ckeditor/ckeditor5-utils/src/dom/isvisible';
 
 /**
  * A class providing the minimal interface that is required to successfully bootstrap any editor UI.
@@ -53,6 +55,14 @@ export default class EditorUI {
 		 */
 		this.focusTracker = new FocusTracker();
 
+		/**
+		 * Manages the tooltips displayed on mouseover and focus across the UI.
+		 *
+		 * @readonly
+		 * @member {module:ui/tooltipmanager~TooltipManager}
+		 */
+		this.tooltipManager = new TooltipManager( editor );
+
 		/**
 		 * Stores viewport offsets from every direction.
 		 *
@@ -86,6 +96,18 @@ export default class EditorUI {
 		 */
 		this.set( 'viewportOffset', this._readViewportOffsetFromConfig() );
 
+		/**
+		 * Indicates the UI is ready. Set `true` after {@link #event:ready} event is fired.
+		 *
+		 * @readonly
+		 * @default false
+		 * @member {Boolean} #isReady
+		 */
+		this.isReady = false;
+		this.once( 'ready', () => {
+			this.isReady = true;
+		} );
+
 		/**
 		 * Stores all editable elements used by the editor instance.
 		 *
@@ -94,8 +116,18 @@ export default class EditorUI {
 		 */
 		this._editableElementsMap = new Map();
 
+		/**
+		 * All available & focusable toolbars.
+		 *
+		 * @private
+		 * @type {Array.<module:core/editor/editorui~FocusableToolbarDefinition>}
+		 */
+		this._focusableToolbarDefinitions = [];
+
 		// Informs UI components that should be refreshed after layout change.
 		this.listenTo( editor.editing.view.document, 'layoutChanged', () => this.update() );
+
+		this._initFocusTracking();
 	}
 
 	/**
@@ -134,6 +166,7 @@ export default class EditorUI {
 		this.stopListening();
 
 		this.focusTracker.destroy();
+		this.tooltipManager.destroy( this.editor );
 
 		// Clean–up the references to the CKEditor instance stored in the native editable DOM elements.
 		for ( const domElement of this._editableElementsMap.values() ) {
@@ -141,11 +174,14 @@ export default class EditorUI {
 		}
 
 		this._editableElementsMap = new Map();
+		this._focusableToolbarDefinitions = [];
 	}
 
 	/**
-	 * Store the native DOM editable element used by the editor under
-	 * a unique name.
+	 * Stores the native DOM editable element used by the editor under a unique name.
+	 *
+	 * Also, registers the element in the editor to maintain the accessibility of the UI. When the user is editing text in a focusable
+	 * editable area, they can use the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke to navigate over editor toolbars. See {@link #addToolbar}.
 	 *
 	 * @param {String} rootName The unique name of the editable element.
 	 * @param {HTMLElement} domElement The native DOM editable element.
@@ -160,6 +196,28 @@ export default class EditorUI {
 		if ( !domElement.ckeditorInstance ) {
 			domElement.ckeditorInstance = this.editor;
 		}
+
+		// Register the element so it becomes available for Alt+F10 and Esc navigation.
+		this.focusTracker.add( domElement );
+
+		const setUpKeystrokeHandler = () => {
+			// The editing view of the editor is already listening to keystrokes from DOM roots (see: KeyObserver).
+			// Do not duplicate listeners.
+			if ( this.editor.editing.view.getDomRoot( rootName ) ) {
+				return;
+			}
+
+			this.editor.keystrokes.listenTo( domElement );
+		};
+
+		// For editable elements set by features after EditorUI is ready (e.g. source editing).
+		if ( this.isReady ) {
+			setUpKeystrokeHandler();
+		}
+		// For editable elements set while the editor is being created (e.g. DOM roots).
+		else {
+			this.once( 'ready', setUpKeystrokeHandler );
+		}
 	}
 
 	/**
@@ -181,6 +239,35 @@ export default class EditorUI {
 		return this._editableElementsMap.keys();
 	}
 
+	/**
+	 * Adds a toolbar to the editor UI. Used primarily to maintain the accessibility of the UI.
+	 *
+	 * Focusable toolbars can be accessed (focused) by users by pressing the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke.
+	 * Successive keystroke presses navigate over available toolbars.
+	 *
+	 * @param {module:ui/toolbar/toolbarview~ToolbarView} toolbarView A instance of the toolbar to be registered.
+	 * @param {Object} [options]
+	 * @param {Boolean} [options.isContextual] Set `true` if the toolbar is attached to the content of the editor. Such toolbar takes
+	 * a precedence over other toolbars when a user pressed <kbd>Alt</kbd> + <kbd>F10</kbd>.
+	 * @param {Function} [options.beforeFocus] Specify a callback executed before the toolbar instance DOM element gains focus
+	 * upon the <kbd>Alt</kbd> + <kbd>F10</kbd> keystroke.
+	 * @param {Function} [options.afterBlur] Specify a callback executed after the toolbar instance DOM element loses focus upon
+	 * <kbd>Esc</kbd> keystroke but before the focus goes back to the {@link #setEditableElement editable element}.
+	 */
+	addToolbar( toolbarView, options = {} ) {
+		if ( toolbarView.isRendered ) {
+			this.focusTracker.add( toolbarView.element );
+			this.editor.keystrokes.listenTo( toolbarView.element );
+		} else {
+			toolbarView.once( 'render', () => {
+				this.focusTracker.add( toolbarView.element );
+				this.editor.keystrokes.listenTo( toolbarView.element );
+			} );
+		}
+
+		this._focusableToolbarDefinitions.push( { toolbarView, options } );
+	}
+
 	/**
 	 * Stores all editable elements used by the editor instance.
 	 *
@@ -254,6 +341,177 @@ export default class EditorUI {
 		return { top: 0 };
 	}
 
+	/**
+	 * Starts listening for <kbd>Alt</kbd> + <kbd>F10</kbd> and <kbd>Esc</kbd> keystrokes in the context of focusable
+	 * {@link #setEditableElement editable elements} and {@link #addToolbar toolbars}
+	 * to allow users navigate across the UI.
+	 *
+	 * @private
+	 */
+	_initFocusTracking() {
+		const editor = this.editor;
+		const editingView = editor.editing.view;
+
+		let lastFocusedForeignElement;
+		let candidateDefinitions;
+
+		// Focus the next focusable toolbar on <kbd>Alt</kbd> + <kbd>F10</kbd>.
+		editor.keystrokes.set( 'Alt+F10', ( data, cancel ) => {
+			const focusedElement = this.focusTracker.focusedElement;
+
+			// Focus moved out of a DOM element that
+			// * is not a toolbar,
+			// * does not belong to the editing view (e.g. source editing).
+			if (
+				Array.from( this._editableElementsMap.values() ).includes( focusedElement ) &&
+				!Array.from( editingView.domRoots.values() ).includes( focusedElement )
+			) {
+				lastFocusedForeignElement = focusedElement;
+			}
+
+			const currentFocusedToolbarDefinition = this._getCurrentFocusedToolbarDefinition();
+
+			// * When focusing a toolbar for the first time, set the array of definitions for successive presses of Alt+F10.
+			// This ensures, the navigation works always the same and no pair of toolbars takes over
+			// (e.g. image and table toolbars when a selected image is inside a cell).
+			// * It could be that the focus went to the toolbar by clicking a toolbar item (e.g. a dropdown). In this case,
+			// there were no candidates so they must be obtained (#12339).
+			if ( !currentFocusedToolbarDefinition || !candidateDefinitions ) {
+				candidateDefinitions = this._getFocusableCandidateToolbarDefinitions( currentFocusedToolbarDefinition );
+			}
+
+			// In a single Alt+F10 press, check all candidates but if none were focused, don't go any further.
+			// This prevents an infinite loop.
+			for ( let i = 0; i < candidateDefinitions.length; i++ ) {
+				const candidateDefinition = candidateDefinitions.shift();
+
+				// Put the first definition to the back of the array. This allows circular navigation over all toolbars
+				// on successive presses of Alt+F10.
+				candidateDefinitions.push( candidateDefinition );
+
+				// Don't focus the same toolbar again. If you did, this would move focus from the nth focused toolbar item back to the
+				// first item as per ToolbarView#focus() if the user navigated inside the toolbar.
+				if (
+					candidateDefinition !== currentFocusedToolbarDefinition &&
+					this._focusFocusableCandidateToolbar( candidateDefinition )
+				) {
+					// Clean up after a current visible toolbar when switching to the next one.
+					if ( currentFocusedToolbarDefinition && currentFocusedToolbarDefinition.options.afterBlur ) {
+						currentFocusedToolbarDefinition.options.afterBlur();
+					}
+
+					break;
+				}
+			}
+
+			cancel();
+		} );
+
+		// Blur the focused toolbar on <kbd>Esc</kbd> and bring the focus back to its origin.
+		editor.keystrokes.set( 'Esc', ( data, cancel ) => {
+			const focusedToolbarDef = this._getCurrentFocusedToolbarDefinition();
+
+			if ( !focusedToolbarDef ) {
+				return;
+			}
+
+			// Bring focus back to where it came from before focusing the toolbar:
+			// 1. If it came from outside the engine view (e.g. source editing), move it there.
+			if ( lastFocusedForeignElement ) {
+				lastFocusedForeignElement.focus();
+				lastFocusedForeignElement = null;
+			}
+			// 2. There are two possibilities left:
+			//   2.1. It could be that the focus went from an editable element in the view (root or nested).
+			//   2.2. It could be the focus went straight to the toolbar before even focusing the editing area.
+			// In either case, just focus the view editing. The focus will land where it belongs.
+			else {
+				editor.editing.view.focus();
+			}
+
+			// Clean up after the toolbar if there is anything to do there.
+			if ( focusedToolbarDef.options.afterBlur ) {
+				focusedToolbarDef.options.afterBlur();
+			}
+
+			cancel();
+		} );
+	}
+
+	/**
+	 * Returns definitions of toolbars that could potentially be focused, sorted by their importance for the user.
+	 *
+	 * Focusable toolbars candidates are either:
+	 * * already visible,
+	 * * have `beforeFocus()` set in their {@link module:core/editor/editorui~FocusableToolbarDefinition definition} that suggests that
+	 * they might show up when called. Keep in mind that determining whether a toolbar will show up (and become focusable) is impossible
+	 * at this stage because it depends on its implementation, that in turn depends on the editing context (selection).
+	 *
+	 * **Note**: Contextual toolbars take precedence over regular toolbars.
+	 *
+	 * @private
+	 * @returns {Array.<module:core/editor/editorui~FocusableToolbarDefinition>}
+	 */
+	_getFocusableCandidateToolbarDefinitions() {
+		const definitions = [];
+
+		for ( const toolbarDef of this._focusableToolbarDefinitions ) {
+			const { toolbarView, options } = toolbarDef;
+
+			if ( isVisible( toolbarView.element ) || options.beforeFocus ) {
+				definitions.push( toolbarDef );
+			}
+		}
+
+		// Contextual and already visible toolbars have higher priority. If both are true, the toolbar will always focus first.
+		// For instance, a selected widget toolbar vs inline editor toolbar: both are visible but the widget toolbar is contextual.
+		definitions.sort( ( defA, defB ) => getToolbarDefinitionWeight( defA ) - getToolbarDefinitionWeight( defB ) );
+
+		return definitions;
+	}
+
+	/**
+	 * Returns a definition of the toolbar that is currently visible and focused (one of its children has focus).
+	 *
+	 * `null` is returned when no toolbar is currently focused.
+	 *
+	 * @private
+	 * @returns {module:core/editor/editorui~FocusableToolbarDefinition|null}
+	 */
+	_getCurrentFocusedToolbarDefinition() {
+		for ( const definition of this._focusableToolbarDefinitions ) {
+			if ( definition.toolbarView.element && definition.toolbarView.element.contains( this.focusTracker.focusedElement ) ) {
+				return definition;
+			}
+		}
+
+		return null;
+	}
+
+	/**
+	 * Focuses a focusable toolbar candidate using its definition.
+	 *
+	 * @private
+	 * @param {module:core/editor/editorui~FocusableToolbarDefinition} candidateToolbarDefinition A definition of the toolbar to focus.
+	 * @returns {Boolean} `true` when the toolbar candidate was focused. `false` otherwise.
+	 */
+	_focusFocusableCandidateToolbar( candidateToolbarDefinition ) {
+		const { toolbarView, options: { beforeFocus } } = candidateToolbarDefinition;
+
+		if ( beforeFocus ) {
+			beforeFocus();
+		}
+
+		// If it didn't show up after beforeFocus(), it's not focusable at all.
+		if ( !isVisible( toolbarView.element ) ) {
+			return false;
+		}
+
+		toolbarView.focus();
+
+		return true;
+	}
+
 	/**
 	 * Fired when the editor UI is ready.
 	 *
@@ -273,3 +531,52 @@ export default class EditorUI {
 }
 
 mix( EditorUI, ObservableMixin );
+
+/**
+ * A definition of a focusable toolbar. Used by {@link module:core/editor/editorui~EditorUI#addToolbar}.
+ *
+ * @private
+ * @interface module:core/editor/editorui~FocusableToolbarDefinition
+ */
+
+/**
+ * An instance of a focusable toolbar view.
+ *
+ * @member {module:ui/toolbar/toolbarview~ToolbarView} #toolbarView
+ */
+
+/**
+ * Options of a focusable toolbar view:
+ *
+ * * `isContextual`: Marks the higher priority toolbar. For example when there are 2 visible toolbars,
+ * it allows to distinguish which toolbar should be focused first after the `alt+f10` keystroke
+ * * `beforeFocus`: A callback executed before the `ToolbarView` gains focus upon the `Alt+F10` keystroke.
+ * * `afterBlur`: A callback executed after `ToolbarView` loses focus upon `Esc` keystroke but before the focus goes back to the `origin`.
+ *
+ * @member {Object} #options
+ */
+
+// Returns a number (weight) for a toolbar definition. Visible toolbars have a higher priority and so do
+// contextual toolbars (displayed in the context of a content, for instance, an image toolbar).
+//
+// A standard invisible toolbar is the heaviest. A visible contextual toolbar is the lightest.
+//
+// @private
+// @param {module:core/editor/editorui~FocusableToolbarDefinition} toolbarDef A toolbar definition to be weighted.
+// @returns {Number}
+function getToolbarDefinitionWeight( toolbarDef ) {
+	const { toolbarView, options } = toolbarDef;
+	let weight = 10;
+
+	// Prioritize already visible toolbars. They should get focused first.
+	if ( isVisible( toolbarView.element ) ) {
+		weight--;
+	}
+
+	// Prioritize contextual toolbars. They are displayed at the selection.
+	if ( options.isContextual ) {
+		weight--;
+	}
+
+	return weight;
+}

package/src/index.js

@@ -58,14 +58,25 @@ import pilcrow from './../theme/icons/pilcrow.svg';
 import quote from './../theme/icons/quote.svg';
 import threeVerticalDots from './../theme/icons/three-vertical-dots.svg';
 
+import bold from './../theme/icons/bold.svg';
+import paragraph from './../theme/icons/paragraph.svg';
+import plus from './../theme/icons/plus.svg';
+import text from './../theme/icons/text.svg';
+import importExport from './../theme/icons/importexport.svg';
+
 export const icons = {
+	bold,
 	cancel,
 	caption,
 	check,
 	cog,
 	eraser,
-	lowVision,
 	image,
+	lowVision,
+	importExport,
+	paragraph,
+	plus,
+	text,
 
 	alignBottom,
 	alignMiddle,

package/theme/icons/bold.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.187 17H5.773c-.637 0-1.092-.138-1.364-.415-.273-.277-.409-.718-.409-1.323V4.738c0-.617.14-1.062.419-1.332.279-.27.73-.406 1.354-.406h4.68c.69 0 1.288.041 1.793.124.506.083.96.242 1.36.478.341.197.644.447.906.75a3.262 3.262 0 0 1 .808 2.162c0 1.401-.722 2.426-2.167 3.075C15.05 10.175 16 11.315 16 13.01a3.756 3.756 0 0 1-2.296 3.504 6.1 6.1 0 0 1-1.517.377c-.571.073-1.238.11-2 .11zm-.217-6.217H7v4.087h3.069c1.977 0 2.965-.69 2.965-2.072 0-.707-.256-1.22-.768-1.537-.512-.319-1.277-.478-2.296-.478zM7 5.13v3.619h2.606c.729 0 1.292-.067 1.69-.2a1.6 1.6 0 0 0 .91-.765c.165-.267.247-.566.247-.897 0-.707-.26-1.176-.778-1.409-.519-.232-1.31-.348-2.375-.348H7z"/></svg>

package/theme/icons/importexport.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path clip-rule="evenodd" d="M19 4.5 14 0H3v12.673l.868-1.041c.185-.222.4-.402.632-.54V1.5h8v5h5v7.626a2.24 2.24 0 0 1 1.5.822V4.5ZM14 5V2l3.3 3H14Zm-3.692 12.5c.062.105.133.206.213.303L11.52 19H8v-.876a2.243 2.243 0 0 0 1.82-.624h.488Zm7.518-.657a.75.75 0 0 0-1.152-.96L15.5 17.29V12H14v5.29l-1.174-1.408a.75.75 0 0 0-1.152.96l2.346 2.816a.95.95 0 0 0 1.46 0l2.346-2.815Zm-15.056-.38a.75.75 0 0 1-.096-1.056l2.346-2.815a.95.95 0 0 1 1.46 0l2.346 2.815a.75.75 0 1 1-1.152.96L6.5 14.96V20H5v-5.04l-1.174 1.408a.75.75 0 0 1-1.056.096Z"/></g><defs><clipPath id="a"><path d="M0 0h20v20H0z"/></clipPath></defs></svg>

package/theme/icons/paragraph.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.5 5.5H7v5h3.5a2.5 2.5 0 1 0 0-5zM5 3h6.5v.025a5 5 0 0 1 0 9.95V13H7v4a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/></svg>

package/theme/icons/plus.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 0 0-1 1v6H3a1 1 0 1 0 0 2h6v6a1 1 0 1 0 2 0v-6h6a1 1 0 1 0 0-2h-6V3a1 1 0 0 0-1-1Z"/></svg>

package/theme/icons/text.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><path d="M9.816 11.5 7.038 4.785 4.261 11.5h5.555Zm.62 1.5H3.641l-1.666 4.028H.312l5.789-14h1.875l5.789 14h-1.663L10.436 13Z"/><path clip-rule="evenodd" d="m12.09 17-.534-1.292.848-1.971.545 1.319L12.113 17h-.023Zm1.142-5.187.545 1.319L15.5 9.13l1.858 4.316h-3.45l.398.965h3.467L18.887 17H20l-3.873-9h-1.254l-1.641 3.813Z"/></g><defs><clipPath id="a"><path d="M0 0h20v20H0z"/></clipPath></defs></svg>