Merge remote-tracking branch 'origin/master' into ck/11936-type-aroun…

…d-feature-is-missing-aria-tags

.eslintrc.js

@@ -9,6 +9,11 @@
 
 module.exports = {
 	extends: 'ckeditor5',
+	ignorePatterns: [
+		// The CKEditor 5 core DLL build is created from JavaScript files.
+		// ESLint should not process a compiled TypeScript.
+		'src/*.js'
+	],
 	rules: {
 		'ckeditor5-rules/ckeditor-imports': 'error',
 		'ckeditor5-rules/license-header': [ 'error', {
@@ -18,7 +23,9 @@ module.exports = {
 				' * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license',
 				' */'
 			]
-		} ]
+		} ],
+		// TODO: Remove after `eslint-config-ckeditor5` update.
+		'new-cap': 'off'
 	},
 	overrides: [
 		{

.gitignore

@@ -38,6 +38,8 @@ packages/ckeditor5-undo/src/**/*.js
 packages/ckeditor5-upload/src/**/*.js
 packages/ckeditor5-utils/src/**/*.js
 packages/ckeditor5-widget/src/**/*.js
+packages/ckeditor5-editor-classic/src/**/*.js
+packages/ckeditor5-essentials/src/**/*.js
 packages/*/src/**/*.d.ts
 src/**/*.js
 src/**/*.d.ts

docs/features/index.md

@@ -91,7 +91,7 @@ Do not get stopped by technology differences - CKEditor 5 offers cross-platform
 
 ## Backwards feature compatibility
 
-If you want to migrate from CKEditor 4 to CKEditor 5, please check the {@link installation/getting-started/migration-from-ckeditor-4 migration guide} for all the features that are already covered by the modern version.
+If you want to migrate from CKEditor 4 to CKEditor 5, please check the {@link installation/migration-from-ckeditor-4 migration guide} for all the features that are already covered by the modern version.
 
 ## Feature availability
 

docs/features/keyboard-support.md

@@ -82,7 +82,7 @@ Below is a list of the most important keystrokes supported by CKEditor 5 and its
 			<td colspan="2"><kbd>Tab</kbd></td>
 		</tr>
 		<tr>
-			<td>Move out of link or inline style</td>
+			<td>Move out of link or inline code style</td>
 			<td colspan="2"><kbd>←</kbd> <kbd>←</kbd> / <kbd>→</kbd> <kbd>→</kbd></td>
 		</tr>
 		<tr>

docs/features/spelling-and-grammar-checking.md

@@ -33,7 +33,7 @@ Use the toolbar button {@icon @webspellchecker/wproofreader-ckeditor5/theme/icon
 	This demo only presents a limited set of features. Visit the {@link examples/builds/full-featured-editor full-featured editor example} to see more in action.
 </info-box>
 
-When you hover over the WProofreader badge in the bottom-right corner, it shows you the total number of mistakes detected. Hover an underlined word to display the WProofreader suggestions for any of the spelling and grammar mistakes found. The suggestion card allows the user to employ the feature on the go. If you want to see an overview of all mistakes found, click the "Proofread in dialog" option in the toolbar dropdown. It will invoke a detached floating dialog, which is easy to navigate and perfect for dedicated proofreading sessions.
+The WProofreader badge in the bottom-right corner shows you the total number of mistakes detected. Hover an underlined word to display the WProofreader suggestions for any of the spelling and grammar mistakes found. The suggestion card allows the user to employ the feature on the go. If you want to see an overview of all mistakes found, click the "Proofread in dialog" option in the toolbar dropdown. It will invoke a detached floating dialog, which is easy to navigate and perfect for dedicated proofreading sessions.
 
 You can access the WProofreader settings from the toolbar, too. Set the primary language, create a spelling dictionary and tweak some additional proofreading settings.
 

docs/features/toolbar.md

@@ -131,7 +131,9 @@ You can use one of the icons listed below for your dropdown:
 | `'importExport'`  | {@icon @ckeditor/ckeditor5-core/theme/icons/importexport.svg Import export} |
 | `'paragraph'`     | {@icon @ckeditor/ckeditor5-core/theme/icons/paragraph.svg Paragraph}        |
 | `'text'`          | {@icon @ckeditor/ckeditor5-core/theme/icons/text.svg Text}                  |
+| `'plus'`          | {@icon @ckeditor/ckeditor5-core/theme/icons/plus.svg Plus}                  |
 
+* The default icons are loaded from the `ckeditor5-core` package.
 * If no icon is specified, `'threeVerticalDots'` will be used as a default.
 * If `icon: false` is configured, no icon will be displayed and the text label will show up instead.
 * You can set a custom icon for the drop-down by passing an SVG string.

docs/framework/guides/architecture/core-editor-architecture.md

@@ -65,7 +65,7 @@ class MyPlugin extends Plugin {
 }
 ```
 
-You can see how to implement a simple plugin in the {@link framework/guides/quick-start Quick start} guide.
+You can see how to implement a simple plugin in the {@link framework/guides/creating-simple-plugin-timestamp creating a basic plugin} guide.
 
 ## Commands
 

docs/framework/guides/contributing/code-style.md

@@ -1,7 +1,7 @@
 ---
 category: framework-contributing
 order: 30
-modified_at: 2021-10-25
+modified_at: 2022-11-03
 ---
 
 # Code style
@@ -944,3 +944,47 @@ import toArray from '@ckeditor/ckeditor5-utils/src/toarray';
 ```
 
 [History of the change.](https://github.com/ckeditor/ckeditor5/issues/9318)
+
+### Importing modules in debug comments: `ckeditor5-rules/use-require-for-debug-mode-imports`
+
+The debug mode allows importing additional modules for testing purposes. Unfortunately, the debug comment is not removed, so webpack reports the following error.
+
+```
+Module parse failed: 'import' and 'export' may only appear at the top level (15204:20)
+File was processed with these loaders:
+ * ./node_modules/@ckeditor/ckeditor5-dev-tests/lib/utils/ck-debug-loader.js
+You may need an additional loader to handle the result of these loaders.
+|  */
+|
+> /* @if CK_DEBUG */  import { CKEditorError } from 'ckeditor5/src/utils';
+|
+| /**
+```
+
+Modules need to be imported with a `require()` function.
+
+To create a code executed only in the debug mode, follow the description of the `--debug` flag in the {@link framework/guides/contributing/testing-environment#running-manual-tests testing environment} guide.
+
+👎  Examples of incorrect code for this rule:
+
+```js
+// @if CK_DEBUG // import defaultExport from 'module-name';
+// @if CK_DEBUG // import * as name from 'module-name';
+// @if CK_DEBUG // import { testFunction } from 'module-name';
+// @if CK_DEBUG // import { default as alias } from 'module-name';
+// @if CK_DEBUG // import { exported as alias } from 'module-name';
+// @if CK_DEBUG // import 'module-name';
+```
+
+👍  Examples of correct code for this rule:
+
+```js
+// @if CK_DEBUG // const defaultExport = require( 'module-name' ).default;
+// @if CK_DEBUG // const name = require( 'module-name' );
+// @if CK_DEBUG // const { testFunction } = require( 'module-name' );
+// @if CK_DEBUG // const alias = require( 'module-name' ).default;
+// @if CK_DEBUG // const { exported: alias } = require( 'module-name' );
+// @if CK_DEBUG // require( 'module-name' );
+```
+
+[History of the change.](https://github.com/ckeditor/ckeditor5/issues/12479)

docs/framework/guides/contributing/development-environment.md

@@ -84,7 +84,7 @@ You can read more about the {@link framework/guides/contributing/testing-environ
 
 ## Building DLLs
 
-Some manual tests require DLL builds. To learn more about DLL builds, read {@link installation/advanced/dll-builds the guide}. They do not have to be updated every time, unless you want to check changes in DLL builds specifically. Running `yarn run manual` will prompt you to optionally run the build. To build them manually, you need to run the `dll:build` task:
+Some manual tests require DLL builds. To learn more about DLL builds, read the {@link installation/advanced/dll-builds DLL builds guide}. They do not have to be updated every time, unless you want to check changes in the DLL builds specifically. Running `yarn run manual` will prompt you to optionally run the build. To build them manually, you need to run the `dll:build` task:
 
 ```
 yarn run dll:build

docs/index.md

@@ -8,7 +8,7 @@ meta-description: Learn how to install, integrate, update, configure and develop
 
 # CKEditor 5 documentation
 
-<dl><dt>{@link installation/index CKEditor 5 installation}</dt><dd>Learn how to install, integrate and configure CKEditor 5 from scratch or using predefined builds. More complex aspects, like creating custom builds or migrating from CKEditor 4 are explained here, too.</dd>
+<dl><dt>{@link installation/index Getting started with CKEditor 5}</dt><dd>Learn how to install, integrate and configure CKEditor 5 from scratch or using predefined builds. More complex aspects, like creating custom builds or migrating from CKEditor 4 are explained here, too.</dd>
 <dt>{@link features/index CKEditor 5 Features}</dt><dd>Learn about the features available for CKEditor 5 &ndash; both the ones included in Builds and a plethora of others.</dd>
 <dt>{@link examples/index CKEditor 5 Examples}</dt><dd>Try out all CKEditor 5 predefined builds. See some of the possible customizations of CKEditor.</dd>
 <dt>{@link updating/index Updating CKEditor 5}</dt><dd>Find out all about updating to the newest version, dealing with breaking changes and other important information when upgrading your CKEditor 5.</dd>

docs/installation/frameworks/react.md

@@ -141,6 +141,8 @@ class App extends Component {
 		);
 	}
 }
+
+export default App;
 ```
 
 ### Context feature properties

docs/installation/getting-started/quick-start.md

@@ -305,7 +305,7 @@ After you sign up, you will find in the customer dashboard the full code snippet
 
 ## Adjusting plugins included in the CKEditor 5 superbuild
 
-You may disable any features available in the superbuild using the `removePlugins` configuration option. For a full list of feature currently available in the superbuild, please consult the {@link installation/getting-started/predefined-builds#list-of-plugins-included-in-the-ckeditor-5-predefined-builds predefined editor builds} guide. Please note, that removing certain features may make the editor unusable.
+You may disable any features available in the superbuild using the {@link installation/getting-started/configuration#removing-features `removePlugins` configuration option}. For a full list of features currently available in the superbuild, please consult the {@link installation/getting-started/predefined-builds#list-of-plugins-included-in-the-ckeditor-5-predefined-builds predefined editor builds} guide. Please note, that removing certain features may make the editor unusable.
 
 <info-box hint>
 **What's next?**

docs/installation/index.md

@@ -6,7 +6,7 @@ meta-title: CKEditor 5 installation documentation
 meta-description: Learn how to install, integrate, configure and develop CKEditor 5. Browse through API documentation and online samples.
 ---
 
-# CKEditor 5 installation overview
+# Getting started with CKEditor 5
 
 CKEditor 5 provides every type of WYSIWYG editing solution imaginable. From editors similar to Google Docs and Medium, to Slack or Twitter like applications, all is possible within a single editing framework. It is an ultra-modern JavaScript rich text editor with MVC architecture, custom data model and virtual DOM, written from scratch in ES6 with excellent webpack support. Find out the most convenient way to start using it!
 
@@ -22,21 +22,21 @@ CKEditor 5 provides every type of WYSIWYG editing solution imaginable. From edit
 
 Start using CKEditor 5 instantly thanks to the power of our CDN. Check out the {@link installation/getting-started/quick-start Quick start guide}.
 
-## Predefined CKEditor 5 builds
+## Installing predefined CKEditor 5 builds
 
-Predefined CKEditor 5 builds are ready-to-use installations aimed at specific needs that you can simply download and use out of the box. Learn more about the {@link installation/getting-started/predefined-builds available predefined builds} and choosing the right one for you. This is the fastest way to kick-off you CKEditor 5 installation.
+Predefined CKEditor 5 builds are ready-to-use distributions aimed at specific needs that you can simply download and use out of the box. Learn more about the {@link installation/getting-started/predefined-builds available predefined builds} and choose the right one for you. This is the fastest way to kick-off your CKEditor 5 installation.
 
 ## Customizing the CKEditor 5 installation
 
 Learn how to install a custom CKEditor 5 easily with the use of {@link installation/getting-started/quick-start-other#creating-custom-builds-with-online-builder online builder} or {@link installation/getting-started/quick-start-other#building-the-editor-from-source build the editor from scratch}, and learn to {@link installation/getting-started/configuration configure it}.
 
 ## Integration with frameworks
 
-Get to know the supported {@link installation/frameworks/overview integrations with popular JavaScript frameworks} such as React, Angular or Vue, and learn to utilize them and to integrate CKEditor 5 with you software.
+Get to know the supported {@link installation/frameworks/overview integrations with popular JavaScript frameworks} such as React, Angular or Vue, and learn to utilize them and to integrate CKEditor 5 with your software.
 
 ## Migrating from CKEditor 4
 
-Refer to the {@link installation/getting-started/migration-from-ckeditor-4 CKEditor 4 migration guide} if you are updating your CKEditor 5 installation.
+Refer to the {@link installation/migration-from-ckeditor-4 CKEditor 4 migration guide} if you are updating your CKEditor 5 installation.
 
 ## Advanced installation concepts
 
@@ -83,7 +83,7 @@ Find out more about the {@link installation/advanced/plugins plugin development}
 
 		'quiz-question-usingBuilds': {
 			content: 'Do you need a working, out-of-the box solution?',
-			hint: 'CKEditor 5 comes with ready-to-use <a href="#predefined-ckeditor-5-builds">predefined builds</a> that offer working solutions for different use cases. This is a quick way to start.',
+			hint: 'CKEditor 5 comes with ready-to-use <a href="#installing-predefined-ckeditor-5-builds">predefined builds</a> that offer working solutions for different use cases. This is a quick way to start.',
 			buttons: [
 				getDecisionButtonDefinition( true, 'quiz-resolution-usingBuilds' ),
 				getDecisionButtonDefinition( false, 'quiz-question-onlineBuilder' ),
@@ -167,7 +167,7 @@ Find out more about the {@link installation/advanced/plugins plugin development}
 		},
 
 		'quiz-resolution-migrateFromV4': {
-			content: 'Based on your answers, you should check out the {@link installation/getting-started/migration-from-ckeditor-4 CKEditor 4 migration guide}.',
+			content: 'Based on your answers, you should check out the {@link installation/migration-from-ckeditor-4 CKEditor 4 migration guide}.',
 			buttons: QUIZ_RESOLUTION_BUTTON_DEFINITIONS
 		},
 

docs/installation/getting-started/migration-from-ckeditor-4.md → docs/installation/migration-from-ckeditor-4.md

@@ -4,8 +4,8 @@
 # * Underline that migrating is a complex and important task.
 # * List and clarify the things that need attention when migrating.
 
-category: getting-started
-order: 80
+category: installation
+order: 40
 modified_at: 2022-04-15
 ---
 
@@ -52,7 +52,7 @@ The same may apply for third-party plugins which may not have been ported to CKE
 
 Check the {@link installation/advanced/plugins#creating-plugins Creating plugins} section for more information on the development of plugins.
 
-When it comes to official plugins compatibility between CKEditor 4 and CKEditor 5, please see the {@link installation/getting-started/migration-from-ckeditor-4#plugins-compatibility-table compatibility table} to learn more.
+When it comes to official plugins compatibility between CKEditor 4 and CKEditor 5, please see the {@link installation/migration-from-ckeditor-4#plugins-compatibility-table compatibility table} to learn more.
 
 ## Themes (skins)
 
@@ -80,7 +80,7 @@ Unlike [CKEditor 4](https://ckeditor.com/ckeditor-4/), CKEditor 5 implements a c
 
 Each kind of content must be handled by some feature. For instance the [`ckeditor5-basic-styles`](https://www.npmjs.com/package/@ckeditor/ckeditor5-basic-styles) package handles HTML elements such as `<b>`, `<i>`, `<u>`, etc. along with their representation in the model. The feature defines the two–way conversion between the HTML (view) and the editor model.
 
-If you load some content that is unrecognizable to any editor feature, it will be dropped. If you want all the HTML5 elements to be supported, you need to write plugins to support them. Once you do that and load these plugins into you editor instance, CKEditor 5 will no longer filter anything out. You may also use the {@link features/general-html-support General HTML support} feature in certain cases.
+If you load some content that is not recognizable to any of the editor features, it will be dropped. If you want all the HTML5 elements to be supported, you need to write plugins to support them. Once you do that and load these plugins into you editor instance, CKEditor 5 will no longer filter anything out. You may also use the {@link features/general-html-support General HTML support} feature in certain cases.
 
 ### What happened to the `contents.css` file? How do I style the content of the editor?
 

docs/umberto.json

@@ -69,6 +69,7 @@
 		"builds/guides/development/installing-plugins.html": "installation/getting-started/installing-plugins.html",
 		"builds/guides/integration/frameworks/vuejs.html": "installation/frameworks/vuejs-v3.html",
 		"builds/guides/integration/advanced-setup.html": "installation/advanced/alternative-setups/integrating-from-source.html",
+		"https://ckeditor.com/docs/ckeditor5/latest/installation/advanced/advanced-setup.html": "installation/advanced/alternative-setups/integrating-from-source.html",
 		"builds/guides/license-and-legal.html": "support/license-and-legal.html",
 		"builds/guides/reporting-issues.html": "support/reporting-issues.html",
 		"builds/guides/whats-new.html": "features/overview.html",
@@ -150,6 +151,12 @@
 		"builds/guides/integration/frameworks/vuejs-v2.html": "installation/getting-started/frameworks/vuejs-v2.html",
 		"builds/guides/integration/frameworks/vuejs-v3.html": "installation/getting-started/frameworks/vuejs-v3.html",
 		"builds/guides/integration/frameworks/css.html": "installation/getting-started/frameworks/css.html",
+		"installation/getting-started/frameworks/overview.html": "installation/frameworks/overview.html",
+		"installation/getting-started/frameworks/angular.html": "installation/frameworks/angular.html",
+		"installation/getting-started/frameworks/react.html": "installation/frameworks/react.html",
+		"installation/getting-started/frameworks/vuejs-v2.html": "installation/frameworks/vuejs-v2.html",
+		"installation/getting-started/frameworks/vuejs-v3.html": "installation/frameworks/vuejs-v3.html",
+		"installation/getting-started/frameworks/css.html": "installation/frameworks/css.html",
 		"builds/guides/integration/content-styles.html": "installation/advanced/content-styles.html",
 		"builds/guides/development/custom-builds.html": "installation/getting-started/quick-start.html#creating-custom-builds",
 		"builds/guides/development/plugins.html": "installation/advanced/plugins.html",
@@ -180,6 +187,7 @@
 		"updating/updating.html": "updating/index.html",
 		"features/overview.html": "features/index.html",
 		"installation/overview.html": "installation/index.html",
+		"installation/frameworks/vuejs-v3.html": "installation/getting-started/frameworks/vuejs-v3.html",
 		"features/revision-history/revision-history.html": "features/collaboration/revision-history/revision-history.html",
 		"features/revision-history/revision-history-integration.htm": "features/collaboration/revision-history/revision-history-integration.html",
 		"framework/guides/plugins/package-generator.html": "framework/guides/plugins/package-generator/using-package-generator.html"
@@ -230,30 +238,28 @@
 	},
 	"groups": [
 		{
-			"name": "Installation",
+			"name": "Getting started",
 			"id": "installation",
 			"slug": "installation",
 			"navigationIncludeIndex": true,
 			"categories": [
 				{
-					"name": "Getting started",
+					"name": "Basics",
 					"id": "getting-started",
 					"slug": "getting-started",
-					"order": 20,
-					"categories": [
-						{
-							"name": "Frameworks",
-							"id": "frameworks",
-							"slug": "frameworks",
-							"order": 70
-						}
-					]
+					"order": 20
+				},
+				{
+					"name": "Frameworks",
+					"id": "frameworks",
+					"slug": "frameworks",
+					"order": 30
 				},
 				{
-					"name": "Advanced",
+					"name": "Advanced concepts",
 					"id": "advanced",
 					"slug": "advanced",
-					"order": 30,
+					"order": 50,
 					"categories": [
 						{
 							"name": "Alternative setups",