Merge branch 'master' into ci/1178

docs/assets/snippet-styles.css

@@ -280,7 +280,6 @@ https://github.com/ckeditor/ckeditor5/issues/1545 */
 
 #snippet-inline-editor header.ck-content h3 {
 	color: hsla(212, 79%, 9%, 0.59);
-	font-weight: 600;
 	font-size: 1.6rem;
 }
 

docs/builds/guides/frameworks/react.md

@@ -163,31 +163,29 @@ The `CKEditorContext` component supports the following properties:
 
 ## Customizing the builds
 
-{@link builds/guides/overview CKEditor 5 builds} come ready to use, with a set of built-in plugins and a predefined configuration. While you can change the configuration easily by using the `config` property of the `<CKEditor>` component which allows you to change the {@link features/toolbar toolbar} or {@link builds/guides/integration/configuration#removing-features remove some plugins}, in order to add plugins you need to rebuild the editor.
+The {@link builds/guides/overview CKEditor 5 builds} come ready to use, with a set of built-in plugins and a predefined configuration. While you can change the configuration easily by using the `config` property of the `<CKEditor>` component which allows you to change the {@link features/toolbar toolbar} or {@link builds/guides/integration/configuration#removing-features remove some plugins}, in order to add more plugins you need to rebuild the editor.
 
 There are three main ways to do that.
 
-* {@link builds/guides/development/custom-builds Customize one of the existing builds}.
+### Using the CKEditor 5 online builder
 
-	This option does not require any changes in your project's configuration. You will create a new build somewhere next to your project and include it like you included one of the existing builds. Therefore, it is the easiest way to add missing features.
+Create your own CKEditor 5 build with customized plugins, toolbar and language in five simple steps using our dedicated [online builder](https://ckeditor.com/ckeditor-5/online-builder/). It is a fast, intuitive tool that allows for customizing your editing experience with a set of plugins of your own choice. Read more about this option in the [Integrating a build from the online builder](#integrating-a-build-from-the-online-builder) section.
 
-	Read more about this method in the {@link builds/guides/integration/installing-plugins Installing plugins} guide.
-
-* [Use the CKEditor 5 online builder](https://ckeditor.com/ckeditor-5/online-builder/).
+<info-box>
+	If you want to use the [CKEditor 5 online builder](https://ckeditor.com/ckeditor-5/online-builder/), make sure that the [watchdog feature](https://ckeditor.com/docs/ckeditor5/latest/features/watchdog.html) is not selected. The React integration comes with the watchdog feature already integrated into the core.
+</info-box>
 
-    Create your own CKEditor 5 build with customized plugins, toolbar and language in 5 simple steps.
+### Customizing one of the predefined builds
 
-	<info-box>
-		If you want to use the [CKEditor 5 online builder](https://ckeditor.com/ckeditor-5/online-builder/), make sure that the [watchdog feature](https://ckeditor.com/docs/ckeditor5/latest/features/watchdog.html) is not selected. The React integration comes with the watchdog feature already integrated into the core.
-	</info-box>
+This option requires making changes to a {@link builds/guides/development/custom-builds predefined build} of your choice. Much like in [the case of online builder](#integrating-a-build-from-the-online-builder), you then need to place the custom editor's folder next to `src/` directory and add it as a dependency using `yarn add file` command.
 
-	Read more about this option in the [Integrating a build from the online builder](#integrating-a-build-from-the-online-builder) section.
+Read more about customising a predefined build in the {@link builds/guides/integration/installing-plugins Installing plugins} guide.
 
-* {@link builds/guides/integration/advanced-setup Integrate the editor from source}.
+### Integrating the editor from source
 
-	In this approach you will include a CKEditor 5 built from source &mdash; so you will choose the editor creator you want and the list of plugins, etc. It is more powerful and creates a tighter integration between your application and the WYSIWYG editor, however, it requires adjusting your `webpack.config.js` to CKEditor 5 needs.
+In this approach, you will include a CKEditor 5 {@link builds/guides/integration/advanced-setup#scenario-2-building-from-source built from source}, so you will choose the editor creator you want and the list of plugins, etc. It is more powerful and creates a tighter integration between your application and the WYSIWYG editor, however, it requires adjusting your `webpack.config.js` to CKEditor 5 needs.
 
-	Read more about this option in the [Integrating CKEditor 5 from source](#integrating-ckeditor-5-built-from-source) section.
+Read more about this option in the [Integrating CKEditor 5 from source](#integrating-ckeditor-5-built-from-source) section.
 
 ### Using the document editor build
 
@@ -394,7 +392,7 @@ Before you start modifying the webpack configuration, first install some CKEdito
 
 ```
 yarn add \
-	raw-loader@3 \
+	raw-loader@4 \
 	@ckeditor/ckeditor5-dev-utils \
 	@ckeditor/ckeditor5-theme-lark \
 	@ckeditor/ckeditor5-react \
@@ -435,14 +433,17 @@ Then, add two new elements to the exported object under the `module.rules` array
 				}
 			}
 		},
+		'css-loader',
 		{
 			loader: 'postcss-loader',
-			options: styles.getPostCssConfig( {
-				themeImporter: {
-					themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
-				},
-				minify: true
-			} )
+			options: {
+				postcssOptions: styles.getPostCssConfig( {
+					themeImporter: {
+						themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+					},
+					minify: true
+				} )
+			}
 		}
 	]
 },

docs/builds/guides/frameworks/vuejs-v2.md

@@ -201,8 +201,8 @@ npm install --save \
     @ckeditor/ckeditor5-vue2 \
     @ckeditor/ckeditor5-dev-webpack-plugin \
     @ckeditor/ckeditor5-dev-utils \
-    postcss-loader@3 \
-    raw-loader@0.5.1
+    postcss-loader@4 \
+    raw-loader@4
 ```
 
 Edit the `vue.config.js` file and use the following configuration. If the file is not present, create it in the root of the application (i.e. next to `package.json`):
@@ -270,12 +270,14 @@ module.exports = {
 			.use( 'postcss-loader' )
 			.loader( 'postcss-loader' )
 			.tap( () => {
-				return styles.getPostCssConfig( {
-					themeImporter: {
-						themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
-					},
-					minify: true
-				} );
+				return {
+					postcssOptions: styles.getPostCssConfig( {
+						themeImporter: {
+							themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
+						},
+						minify: true
+					} )
+				};
 			} );
 	}
 };

docs/builds/guides/frameworks/vuejs-v3.md

@@ -200,8 +200,8 @@ npm install --save \
     @ckeditor/ckeditor5-vue \
     @ckeditor/ckeditor5-dev-webpack-plugin \
     @ckeditor/ckeditor5-dev-utils \
-    postcss-loader@3 \
-    raw-loader@0.5.1
+    postcss-loader@4 \
+    raw-loader@4
 ```
 
 Edit the `vue.config.js` file and use the following configuration. If the file is not present, create it in the root of the application (i.e. next to `package.json`):
@@ -269,12 +269,14 @@ module.exports = {
 			.use( 'postcss-loader' )
 			.loader( 'postcss-loader' )
 			.tap( () => {
-				return styles.getPostCssConfig( {
-					themeImporter: {
-						themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
-					},
-					minify: true
-				} );
+				return {
+					postcssOptions: styles.getPostCssConfig( {
+						themeImporter: {
+							themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' ),
+						},
+						minify: true
+					} )
+				};
 			} );
 	}
 };

docs/builds/guides/integration/advanced-setup.md

@@ -19,7 +19,7 @@ In order to start developing CKEditor 5 you will require:
 
 ## Bundler
 
-CKEditor 5 is currently built using [webpack@4](https://webpack.js.org). All builds, examples and demos are generated using this bundler. It should also be possible to build CKEditor using other bundlers (if they are configured properly), such as [Rollup](https://github.com/rollup/rollup) or [Browserify](http://browserify.org/), but these setups are not officially supported yet. Also, the [`@ckeditor/ckeditor5-dev-webpack-plugin`](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin) that allows to localize the editor is only available for webpack. More work on this subject will be done in the future.
+CKEditor 5 is currently built using [webpack@5](https://webpack.js.org). All builds, examples and demos are generated using this bundler. It should also be possible to build CKEditor using other bundlers (if they are configured properly), such as [Rollup](https://github.com/rollup/rollup) or [Browserify](http://browserify.org/), but these setups are not officially supported yet. Also, the [`@ckeditor/ckeditor5-dev-webpack-plugin`](https://www.npmjs.com/package/@ckeditor/ckeditor5-dev-webpack-plugin) that allows to localize the editor is only available for webpack. More work on this subject will be done in the future.
 
 Therefore, **a prerequisite to this guide is that you are using webpack as your build tool**.
 
@@ -99,11 +99,12 @@ The second step is to install dependencies needed to build the editor. The list
 npm install --save \
 	@ckeditor/ckeditor5-dev-webpack-plugin \
 	@ckeditor/ckeditor5-dev-utils \
-	postcss-loader@3 \
-	raw-loader@3 \
-	style-loader@1 \
-	webpack@4 \
-	webpack-cli@3 \
+	css-loader@5 \
+	postcss-loader@4 \
+	raw-loader@4 \
+	style-loader@2 \
+	webpack@5 \
+	webpack-cli@4
 ```
 
 ### Webpack configuration
@@ -148,22 +149,29 @@ module.exports = {
 							}
 						}
 					},
+					'css-loader',
 					{
 						loader: 'postcss-loader',
-						options: styles.getPostCssConfig( {
-							themeImporter: {
-								themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
-							},
-							minify: true
-						} )
-					},
+						options: {
+							postcssOptions: styles.getPostCssConfig( {
+								themeImporter: {
+									themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+								},
+								minify: true
+							} )
+						}
+					}
 				]
 			}
 		]
 	}
 };
 ```
 
+<info-box>
+    If you cannot use the latest webpack (at the moment of writing this guide, it is 5), the provided configuration will also work with webpack 4.
+</info-box>
+
 #### Webpack Encore
 
 If you use [Webpack Encore](https://github.com/symfony/webpack-encore), you can use the following configuration:
@@ -195,11 +203,14 @@ Encore.
 	.addLoader({
 		test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
 		loader: 'postcss-loader',
-		options: styles.getPostCssConfig( {
-			themeImporter: {
-				themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
-			}
-		} )
+		options: {
+			postcssOptions: styles.getPostCssConfig( {
+				themeImporter: {
+					themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+				},
+				minify: true
+			} )
+		}
 	} )
 ```
 
@@ -391,7 +402,7 @@ One of the most common requirements is to extract CKEditor 5 CSS to a separate f
 ```bash
 npm install --save \
 	mini-css-extract-plugin \
-	css-loader
+	css-loader@5
 ```
 
 And add it to your webpack configuration:
@@ -423,12 +434,14 @@ module.exports = {
 					'css-loader',
 					{
 						loader: 'postcss-loader',
-						options: styles.getPostCssConfig( {
-							themeImporter: {
-								themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
-							},
-							minify: true
-						} )
+						options: {
+							postcssOptions: styles.getPostCssConfig( {
+								themeImporter: {
+									themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
+								},
+								minify: true
+							} )
+						}
 					}
 				]
 			}
@@ -445,12 +458,6 @@ CKEditor 5 is written in ECMAScript 2015 (also called ES6). All browsers in whic
 
 However, it may happen that your environment requires ES5. For instance, if you use tools like the original [UglifyJS](https://github.com/mishoo/UglifyJS) which do not support ES6+ yet, you may need to transpile CKEditor 5 source to ES5. This will create ~80% bigger builds but will ensure that your environment can process CKEditor 5 code.
 
-<info-box>
-	In the [production mode](https://webpack.js.org/concepts/mode/) webpack uses [`uglifyjs-webpack-plugin`](https://www.npmjs.com/package/uglifyjs-webpack-plugin) which supports ES6+ code. This is because it does not use the original [UglifyJS](https://github.com/mishoo/UglifyJS) plugin (which does not support ES6+), but instead it uses the [`uglify-es`](https://github.com/mishoo/UglifyJS2/tree/harmony) package.
-
-	We recommend upgrading your setup to webpack@4 and its built-in modes which allows you to avoid transpiling the source to ES5.
-</info-box>
-
 In order to create an ES5 build of CKEditor 5 you can use [Babel](https://babeljs.io/):
 
 ```bash

docs/builds/guides/integration/features-html-output-overview.md

@@ -2,7 +2,7 @@
 menu-title: Features' HTML output
 category: builds-integration
 order: 90
-modified_at: 2021-06-07
+modified_at: 2021-12-03
 ---
 
 # Features' HTML output overview

docs/builds/guides/migration/migration-to-31.md

@@ -3,17 +3,74 @@
 category: builds-migration
 menu-title: Migration to v31.x
 order: 93
-modified_at: 2021-10-25
+modified_at: 2021-12-03
 ---
 
-# Migration to CKEditor 5 v31.0.0
+# Migration to CKEditor 5 v31.x.0
 
 <info-box>
 	When updating your CKEditor 5 installation, make sure **all the packages are the same version** to avoid errors.
 
 	For custom builds, you may try removing the `package-lock.json` or `yarn.lock` files (if applicable) and reinstalling all packages before rebuilding the editor. For best results, make sure you use the most recent package versions.
 </info-box>
 
+## Migration to CKEditor 5 v31.1.0
+
+For the entire list of changes introduced in version 31.1.0, see the [changelog for CKEditor 5 v31.1.0](https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md#3110-2021-12-03).
+
+Listed below are the most important changes that require your attention when upgrading to CKEditor 5 v31.1.0.
+
+### Interactive content filtering in the {@link framework/guides/architecture/editing-engine#editing-pipeline editing pipeline}
+
+#### Interactive attributes
+
+Starting from v31.1.0, the editor engine will detect attributes that may interrupt the editing experience and rename them to `data-ck-unsafe-attribute-[original attribute name]`, for instance:
+
+```html
+<!-- Before v31.1.0 -->
+<p onclick="alert( 'Paragraph clicked!' )">Interactive paragraph</p>
+
+<!-- After v31.1.0 -->
+<p data-ck-unsafe-attribute-onclick="alert( 'Paragraph clicked!' )">Interactive paragraph</p>
+```
+
+<info-box>
+	Please keep in mind, that this new mechanism does not affect the {@link builds/guides/integration/saving-data data saved by the editor} (e.g. the output of `editor.getData()`). The filtering only applies during the editing when the user interacts with the editor.
+</info-box>
+
+If you are the author of a plugin that generates this kind of content in the {@link framework/guides/architecture/editing-engine#editing-pipeline editing pipeline} and you want it to be preserved, you can configure this when creating the element using {@link module:engine/view/downcastwriter~DowncastWriter} during the {@link framework/guides/architecture/editing-engine#conversion model–view conversion}. Methods such as {@link module:engine/view/downcastwriter~DowncastWriter#createContainerElement}, {@link module:engine/view/downcastwriter~DowncastWriter#createAttributeElement}, or {@link module:engine/view/downcastwriter~DowncastWriter#createEmptyElement} accept an option that will disable filtering of specific attributes:
+
+```js
+/* Before v31.1.0. */
+const paragraph = writer.createContainerElement( 'p',
+	{
+		class: 'clickable-paragraph',
+		onclick: 'alert( "Paragraph clicked!" )'
+	}
+);
+
+/* After v31.1.0. */
+const paragraph = writer.createContainerElement( 'p',
+	{
+		class: 'clickable-paragraph',
+		onclick: 'alert( "Paragraph clicked!" )'
+	},
+	{
+		// Make sure the "onclick" attribute will pass through.
+		renderUnsafeAttributes: [ 'onclick' ]
+	}
+);
+```
+
+#### Blocking script elements
+
+Also starting from v31.1.0, any `<script>` element that would find its way to the editing layer of the editor (and the user interacting with it) will be filtered out (renamed to `<span data-ck-unsafe-element="script"></span>`).
+
+Please keep in mind that this mechanism will not change the output of the editor (e.g. the result of `editor.getData()` will include full `<script>...</script>` tags) and there is no way to opt out of it.
+
+
+## Migration to CKEditor 5 v31.0.0
+
 For the entire list of changes introduced in version 31.0.0, see the [changelog for CKEditor 5 v31.0.0](https://github.com/ckeditor/ckeditor5/blob/master/CHANGELOG.md#3100-2021-10-25).
 
 Listed below are the most important changes that require your attention when upgrading to CKEditor 5 v31.0.0.

docs/features/math-equations.md

@@ -207,3 +207,10 @@ To install the Ruby on Rails service, follow the steps below:
             }
     }
     ```
+
+## Displaying equations on your website
+
+By default, MathType returns equations in MathML which is [not supported by all browsers](https://developer.mozilla.org/en-US/docs/Web/MathML#browser_compatibility). In order to display equations on a page, you will need to use some engine that will handle the rendering process.
+
+Fortunately, MathType introduces the full MathML mode that handles the unsupported markup and converts it into a form that could be properly recognized by browsers. You can read more about the full MathML mode [in the documentation](https://docs.wiris.com/en/mathtype/mathtype_web/integrations/mathml-mode).
+

docs/features/read-only.md

@@ -14,7 +14,7 @@ The read-only mode may have several applications. It may be used to impose user-
 The feature may also be used to view content that should not be edited, like financial reports, software logs or reprinted stories. While not editable, this content will still be accessible for copying or for screen readers.
 
 <info-box>
-	See also the {@link features/restricted-editing restricted editing feature} that lets you define which parts of a document can be editable for a group of users with limited editing rights, leaving the rest of the content non-editable to them.
+	See also the {@link features/restricted-editing restricted editing feature} that lets you define which parts of a document can be editable for a group of users with limited editing rights, leaving the rest of the content non-editable to them. You can also read the [dedicated blog post](https://ckeditor.com/blog/feature-of-the-month-restricted-editing-modes/) about write-restricted editor modes.
 </info-box>
 
 ## Demo

docs/framework/guides/creating-simple-plugin.md

@@ -1,5 +1,5 @@
 ---
-category: framework-guides
+category: framework-plugins
 order: 30
 ---