@ckeditor/ckeditor5-core 34.2.0 → 35.1.0

package/lang/translations/uk.po

@@ -26,7 +26,7 @@ msgstr "Видалити колір"
 
 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 ""
+msgstr "Відновити за замовчуванням"
 
 msgctxt "Label for the Save button."
 msgid "Save"
@@ -43,3 +43,7 @@ msgstr "%0 із %1"
 msgctxt "A generic error message displayed on upload failure. The file name is concatenated to this text."
 msgid "Cannot upload file:"
 msgstr "Неможливо завантажити файл:"
+
+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 "Редактор Rich Text. Область редагування: %0"

package/lang/translations/ur.po

@@ -43,3 +43,7 @@ msgstr "0% میں سے 1%"
 msgctxt "A generic error message displayed on upload failure. The file name is concatenated to this text."
 msgid "Cannot upload file:"
 msgstr "فائل اپلوڈ نہیں ہو سکی:"
+
+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 "خانۂ ترمیم۔ علاقۂ ترمیم 0%"

package/lang/translations/uz.po

@@ -43,3 +43,7 @@ msgstr ""
 msgctxt "A generic error message displayed on upload failure. The file name is concatenated to this text."
 msgid "Cannot upload file:"
 msgstr ""
+
+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 ""

package/lang/translations/vi.po

@@ -26,7 +26,7 @@ msgstr "Xóa màu"
 
 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 ""
+msgstr "Khôi phục giá trị mặc định"
 
 msgctxt "Label for the Save button."
 msgid "Save"
@@ -43,3 +43,7 @@ msgstr "%0 đến %1"
 msgctxt "A generic error message displayed on upload failure. The file name is concatenated to this text."
 msgid "Cannot upload file:"
 msgstr "Không thể tải file:"
+
+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 "Trình chỉnh sửa Văn bản dạng RTF. Vùng chỉnh sửa:  %0"

package/lang/translations/zh-cn.po

@@ -43,3 +43,7 @@ msgstr "第 %0 步，共 %1 步"
 msgctxt "A generic error message displayed on upload failure. The file name is concatenated to this text."
 msgid "Cannot upload file:"
 msgstr "无法上传的文件："
+
+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 "富文本编辑器。编辑区域：%0"

package/lang/translations/zh.po

@@ -43,3 +43,7 @@ msgstr "%0/%1"
 msgctxt "A generic error message displayed on upload failure. The file name is concatenated to this text."
 msgid "Cannot upload file:"
 msgstr "無法上傳檔案："
+
+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 "RTF 編輯器。編輯區：%0"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-core",
-  "version": "34.2.0",
+  "version": "35.1.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": "^34.2.0",
-    "@ckeditor/ckeditor5-ui": "^34.2.0",
-    "@ckeditor/ckeditor5-utils": "^34.2.0",
+    "@ckeditor/ckeditor5-engine": "^35.1.0",
+    "@ckeditor/ckeditor5-ui": "^35.1.0",
+    "@ckeditor/ckeditor5-utils": "^35.1.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-autoformat": "^34.2.0",
-    "@ckeditor/ckeditor5-basic-styles": "^34.2.0",
-    "@ckeditor/ckeditor5-block-quote": "^34.2.0",
-    "@ckeditor/ckeditor5-editor-classic": "^34.2.0",
-    "@ckeditor/ckeditor5-essentials": "^34.2.0",
-    "@ckeditor/ckeditor5-heading": "^34.2.0",
-    "@ckeditor/ckeditor5-image": "^34.2.0",
-    "@ckeditor/ckeditor5-indent": "^34.2.0",
-    "@ckeditor/ckeditor5-link": "^34.2.0",
-    "@ckeditor/ckeditor5-list": "^34.2.0",
-    "@ckeditor/ckeditor5-media-embed": "^34.2.0",
-    "@ckeditor/ckeditor5-paragraph": "^34.2.0",
-    "@ckeditor/ckeditor5-table": "^34.2.0"
+    "@ckeditor/ckeditor5-autoformat": "^35.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^35.1.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.1.0",
+    "@ckeditor/ckeditor5-essentials": "^35.1.0",
+    "@ckeditor/ckeditor5-heading": "^35.1.0",
+    "@ckeditor/ckeditor5-image": "^35.1.0",
+    "@ckeditor/ckeditor5-indent": "^35.1.0",
+    "@ckeditor/ckeditor5-link": "^35.1.0",
+    "@ckeditor/ckeditor5-list": "^35.1.0",
+    "@ckeditor/ckeditor5-media-embed": "^35.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.1.0",
+    "@ckeditor/ckeditor5-table": "^35.1.0"
   },
   "engines": {
     "node": ">=14.0.0",
@@ -60,6 +60,7 @@
     "lang",
     "src",
     "theme",
-    "ckeditor5-metadata.json"
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
   ]
 }

package/src/editor/editor.js

@@ -481,7 +481,7 @@ mix( Editor, ObservableMixin );
  * This error is thrown when trying to pass a `<textarea>` element to a `create()` function of an editor class.
  *
  * The only editor type which can be initialized on `<textarea>` elements is
- * the {@glink installation/advanced/alternative-setups/predefined-builds#classic-editor classic editor}.
+ * the {@glink installation/getting-started/predefined-builds#classic-editor classic editor}.
  * This editor hides the passed element and inserts its own UI next to it. Other types of editors reuse the passed element as their root
  * editable element and therefore `<textarea>` is not appropriate for them. Use a `<div>` or another text container instead:
  *

package/src/editor/editorconfig.jsdoc

@@ -24,7 +24,7 @@
  *			.then( ... )
  *			.catch( ... );
  *
- * Check the {@glink installation/advanced/alternative-setups/predefined-builds Configuration guide} for more information
+ * Check the {@glink installation/getting-started/predefined-builds Configuration guide} for more information
  * about setting configuration options.
  *
  * @interface EditorConfig
@@ -66,7 +66,7 @@
 /**
  * The list of plugins to load.
  *
- * If you use an {@glink installation/advanced/alternative-setups/predefined-builds editor build} you can define the list of plugins to load
+ * If you use an {@glink installation/getting-started/predefined-builds editor build} you can define the list of plugins to load
  * using the names of plugins that are available:
  *
  *		const config = {
@@ -98,7 +98,7 @@
 
 /**
  * The list of additional plugins to load along those already available in the
- * {@glink installation/advanced/alternative-setups/predefined-builds editor build}. It extends the {@link #plugins `plugins`} configuration.
+ * {@glink installation/getting-started/predefined-builds editor build}. It extends the {@link #plugins `plugins`} configuration.
  *
  *		function MyPlugin( editor ) {
  *			// ...
@@ -110,7 +110,7 @@
  *
  * **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#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 +119,7 @@
  */
 
 /**
- * The list of plugins which should not be loaded despite being available in an {@glink installation/advanced/alternative-setups/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' ]
@@ -327,3 +327,16 @@
  *
  * @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 
+ * {@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/editor/utils/elementapimixin.js

@@ -3,6 +3,8 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
 
+/* globals HTMLTextAreaElement */
+
 import CKEditorError from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import setDataInElement from '@ckeditor/ckeditor5-utils/src/dom/setdatainelement';
 
@@ -20,7 +22,7 @@ const ElementApiMixin = {
 	/**
 	 * @inheritDoc
 	 */
-	updateSourceElement() {
+	updateSourceElement( data = this.data.get() ) {
 		if ( !this.sourceElement ) {
 			/**
 			 * Cannot update the source element of a detached editor.
@@ -36,7 +38,20 @@ const ElementApiMixin = {
 			);
 		}
 
-		setDataInElement( this.sourceElement, this.data.get() );
+		const shouldUpdateSourceElement = this.config.get( 'updateSourceElementOnDestroy' );
+		const isSourceElementTextArea = this.sourceElement instanceof HTMLTextAreaElement;
+
+		// The data returned by the editor might be unsafe, so we want to prevent rendering
+		// unsafe content inside the source element different than <textarea>, which is considered
+		// secure. This behaviour could be changed by setting the `updateSourceElementOnDestroy`
+		// configuration option to `true`.
+		if ( !shouldUpdateSourceElement && !isSourceElementTextArea ) {
+			setDataInElement( this.sourceElement, '' );
+
+			return;
+		}
+
+		setDataInElement( this.sourceElement, data );
 	}
 };
 
@@ -62,4 +77,6 @@ export default ElementApiMixin;
  * Updates the {@link #sourceElement editor source element}'s content with the data.
  *
  * @method #updateSourceElement
+ * @param {String} data The data that should be used to update the source element.
+ * By default, it is taken directly from the existing editor instance.
  */

package/src/plugincollection.js

@@ -344,7 +344,7 @@ export default class PluginCollection {
 			 * This is usually done in CKEditor 5 builds by setting the {@link module:core/editor/editor~Editor.builtinPlugins}
 			 * property.
 			 *
-			 * **If you see this warning when using one of the {@glink installation/advanced/alternative-setups/predefined-builds
+			 * **If you see this warning when using one of the {@glink installation/getting-started/predefined-builds
 			 * CKEditor 5 Builds}**,
 			 * it means that you try to enable a plugin which was not included in that build. This may be due to a typo
 			 * in the plugin name or simply because that plugin is not a part of this build. In the latter scenario,