Merge pull request #18829 from ckeditor/stable_to_master

Merge stable (v46.0.0) to master

Author: pomek

CHANGELOG.md

@@ -270,7 +270,7 @@ Core editing capability provides tools to create, edit, and style content. Here
 			</td>
 			<td>
 				The image feature allows adding images of various kinds to the rich
-				content inside the editor. A large set of subfeature background-grays lets the users
+				content inside the editor. A large set of subfeatures lets the users
 				fully control this process. Upload or paste images, insert
 				via URL, use responsive images, resize images, add captions, set
 				different image styles, and link images.
@@ -378,6 +378,20 @@ Core editing capability provides tools to create, edit, and style content. Here
 				the image load much faster and saves bandwidth.
 			</td>
 		</tr>
+		<tr id="line-height" class="feature">
+			<td>
+				<span>
+					{@link features/line-height Line height
+						<span class="tree__item__badge tree__item__badge_premium" data-badge-tooltip="Premium feature">
+						<span class="tree__item__badge__text">Premium feature</span></span>
+					}
+				</span>
+			</td>
+			<td>
+				The line height feature lets you adjust the vertical spacing between lines of text,
+				controlling how tightly or loosely text is packed within paragraphs.
+			</td>
+		</tr>
 		<tr id="links" class="feature">
 			<td>
 				{@link features/link Links}
@@ -402,7 +416,9 @@ Core editing capability provides tools to create, edit, and style content. Here
 		</tr>
 		<tr id="list-indentation" class="subfeature background-gray">
 			<td>
-				{@link features/lists-editing#indenting-lists List indentation}
+				<span>
+					<span class="subfeature-icon"></span>&nbsp;{@link features/lists-editing#indenting-lists List indentation}
+				</span>
 			</td>
 			<td>
 				Besides controlling
@@ -1966,7 +1982,9 @@ Customize your editor even further. Use components and helpers from our UI libra
 		</tr>
 		<tr id="custom-components" class="subfeature background-gray">
 			<td>
-				{@link features/custom-components Custom Widgets and Components}
+				<span>
+					<span class="subfeature-icon"></span>&nbsp;{@link features/custom-components Custom Widgets and Components}
+				</span>
 			</td>
 			<td>
 				Build custom interactive components using CKEditor 5's widget system. Create block widgets, inline elements, external data integrations, and framework components (React, Vue, Angular) that seamlessly integrate with the editor's content model and UI.

docs/features/feature-digest.md

@@ -143,7 +143,7 @@ export class MyComponent {
 	public editorData;
 
 	private _setupEditor( cloud ) {
-	 	this.editorData = '<p>Hello, world!</p>';
+		this.editorData = '<p>Hello, world!</p>';
 	}
 	// ...
 }
@@ -175,10 +175,10 @@ export class MyComponent {
 	public isDisabled;
 	// ...
 	private _setupEditor( cloud ) {
-	 	this.isDisabled = false;
+		this.isDisabled = false;
 	}
 	toggleDisabled() {
-		this.isDisabled = !this.isDisabled
+		this.isDisabled = !this.isDisabled;
 	}
 }
 ```
@@ -275,7 +275,7 @@ export class MyComponent {
 
 Allows disabling the two-way data binding mechanism. The default value is `false`.
 
-The reason for the introduction of this option are performance issues in large documents. By default, while using the `ngModel` directive, whenever the editor's data is changed, the component must synchronize the data between the editor instance and the connected property. This results in calling the {@link module:core/editor/editor~Editor#getData `editor.getData()`} function, which causes a massive slowdown while typing in large documents.
+The reason for the introduction of this option is performance issues in large documents. By default, while using the `ngModel` directive, whenever the editor's data is changed, the component must synchronize the data between the editor instance and the connected property. This results in calling the {@link module:core/editor/editor~Editor#getData `editor.getData()`} function, which causes a massive slowdown while typing in large documents.
 
 This option allows the integrator to disable the default behavior and only call the {@link module:core/editor/editor~Editor#getData `editor.getData()`} method on demand, which prevents the slowdowns. You can read more in the [relevant issue](https://github.com/ckeditor/ckeditor5-angular/issues/141).
 
@@ -288,7 +288,7 @@ The following `@Output` properties are supported by the CKEditor&nbsp;5 rich tex
 Fired when the editor is ready. It corresponds with the [`editor#ready`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready) event.
 It is fired with the editor instance.
 
-Note that this method might be called multiple times. Apart from initialization, it is also called whenever the editor is restarted after a crash. Do not keep the reference to the editor instance internally, because it will change in case of restart. Instead, you should use `watchdog.editor` property.
+Note that this method might be called multiple times. Apart from initialization, it is also called whenever the editor is restarted after a crash. Do not keep the reference to the editor instance internally, because it will change in case of a restart. Instead, you should use the `watchdog.editor` property.
 
 ### `change`
 
@@ -338,7 +338,7 @@ It is fired with an object containing the editor and the CKEditor&nbsp;5 `focus`
 
 ### `error`
 
-Fired when the editor crashes. Once the editor is crashed, the internal watchdog mechanism restarts the editor and fires the [ready](#ready) event.
+Fired when the editor crashes. Once the editor has crashed, the internal watchdog mechanism restarts the editor and fires the [ready](#ready) event.
 
 <info-box>
 	Prior to ckeditor5-angular `v7.0.1`, this event was not fired for crashes during the editor initialization.
@@ -388,7 +388,7 @@ First, create a (S)CSS file in the parent component's directory and style the gi
 }
 ```
 
-Then in the parent component add the relative path to the above style sheet:
+Then, in the parent component, add the relative path to the above style sheet:
 
 ```ts
 /* src/app/app.component.ts */
@@ -411,7 +411,7 @@ To style the component using a global style sheet, first, create it:
 }
 ```
 
-Then, add it in the `angular.json` configuration file:
+Then, add it to the `angular.json` configuration file:
 
 ```json
 "architect": {
@@ -448,7 +448,7 @@ export class MyComponent {
 
 ### Accessing the editor instance
 
-The CKEditor&nbsp;5 rich text editor component provides all the functionality needed for most use cases. When access to the full CKEditor&nbsp;5 API is needed you can get the editor instance with an additional step.
+The CKEditor&nbsp;5 rich text editor component provides all the functionality needed for most use cases. When access to the full CKEditor&nbsp;5 API is needed, you can get the editor instance with an additional step.
 
 To do this, create a template reference variable `#editor` pointing to the `<ckeditor>` component:
 
@@ -472,7 +472,7 @@ export class MyComponent {
 ```
 
 <info-box>
-	The editor creation is asynchronous so the `editorInstance` will not be available until the editor is created. If you want to make changes to an editor that has just been created, a better option would be getting the CKEditor&nbsp;5 instance on the [`ready`](#ready) event.
+	The editor creation is asynchronous, so the `editorInstance` will not be available until the editor is created. If you want to make changes to an editor that has just been created, a better option would be getting the CKEditor&nbsp;5 instance on the [`ready`](#ready) event.
 </info-box>
 
 ## How to?
@@ -562,7 +562,7 @@ We provide a few **ready-to-use integrations** featuring collaborative editing i
 * [CKEditor&nbsp;5 with the revision history feature](https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/revision-history-for-angular)
 * [CKEditor&nbsp;5 with the track changes feature](https://github.com/ckeditor/ckeditor5-collaboration-samples/tree/master/track-changes-for-angular)
 
-It is not mandatory to build applications on top of the above samples, however, they should help you get started.
+It is not mandatory to build applications on top of the above samples; however, they should help you get started.
 
 ### Localization
 
@@ -692,7 +692,7 @@ All available Angular versions are [listed on npm](https://www.npmjs.com/package
 
 ## Contributing and reporting issues
 
-The source code of the CKEditor&nbsp;5 rich text editor component for Angular is available on GitHub in [https://github.com/ckeditor/ckeditor5-angular](https://github.com/ckeditor/ckeditor5-angular).
+The source code of the CKEditor&nbsp;5 rich text editor component for Angular is available on GitHub at [https://github.com/ckeditor/ckeditor5-angular](https://github.com/ckeditor/ckeditor5-angular).
 
 ## Next steps
 

docs/getting-started/integrations-cdn/angular.md

@@ -123,7 +123,7 @@ import { AppComponent } from './app.component';
 export class AppModule { }
 ```
 
-Then, import the editor in your Angular component and assign it to a `public` property to make it accessible from the template. The below example shows how to use the component with open-source and premium plugins.
+Then, import the editor into your Angular component and assign it to a `public` property to make it accessible from the template. The example below shows how to use the component with open-source and premium plugins.
 
 <info-box>
 	Starting from version 44.0.0, the `licenseKey` property is required to use the editor. If you use a self-hosted editor from npm:
@@ -159,7 +159,7 @@ export class AppComponent {
 }
 ```
 
-Depending on the plugins you used, you may need to import the first or both CSS files. Angular, by default, scope styles to a particular component. Because of that, the editor may not detect attached styles. You must set the encapsulation option to `ViewEncapsulation.None` to turn this scoping off.
+Depending on the plugins you used, you may need to import the first or both CSS files. Angular, by default, scopes styles to a particular component. That's why the editor may not detect attached styles. You must set the encapsulation option to `ViewEncapsulation.None` to turn this scoping off.
 
 ```css
 /* app.component.css */
@@ -318,7 +318,7 @@ export class MyComponent {
 
 Allows disabling the two-way data binding mechanism. The default value is `false`.
 
-The reason for the introduction of this option are performance issues in large documents. By default, while using the `ngModel` directive, whenever the editor's data is changed, the component must synchronize the data between the editor instance and the connected property. This results in calling the {@link module:core/editor/editor~Editor#getData `editor.getData()`} function, which causes a massive slowdown while typing in large documents.
+We introduced this option to address performance issues in large documents. By default, while using the `ngModel` directive, whenever the editor's data is changed, the component must synchronize the data between the editor instance and the connected property. This results in calling the {@link module:core/editor/editor~Editor#getData `editor.getData()`} function, which causes a massive slowdown while typing in large documents.
 
 This option allows the integrator to disable the default behavior and only call the {@link module:core/editor/editor~Editor#getData `editor.getData()`} method on demand, which prevents the slowdowns. You can read more in the [relevant issue](https://github.com/ckeditor/ckeditor5-angular/issues/141).
 
@@ -331,7 +331,7 @@ The following `@Output` properties are supported by the CKEditor&nbsp;5 rich tex
 Fired when the editor is ready. It corresponds with the [`editor#ready`](https://ckeditor.com/docs/ckeditor5/latest/api/module_core_editor_editor-Editor.html#event-ready) event.
 It is fired with the editor instance.
 
-Note that this method might be called multiple times. Apart from initialization, it is also called whenever the editor is restarted after a crash. Do not keep the reference to the editor instance internally, because it will change in case of restart. Instead, you should use `watchdog.editor` property.
+Note that this method might be called multiple times. Apart from initialization, it is also called whenever the editor is restarted after a crash. Do not keep the reference to the editor instance internally, because it will change in case of a restart. Instead, you should use the `watchdog.editor` property.
 
 ### `change`
 
@@ -373,7 +373,7 @@ It is fired with an object containing the editor and the CKEditor&nbsp;5 `focus`
 
 ### `error`
 
-Fired when the editor crashes. Once the editor is crashed, the internal watchdog mechanism restarts the editor and fires the [ready](#ready) event.
+Fired when the editor crashes. Once the editor has crashed, the internal watchdog mechanism restarts the editor and fires the [ready](#ready) event.
 
 <info-box>
 	Prior to ckeditor5-angular `v7.0.1`, this event was not fired for crashes during the editor initialization.
@@ -419,7 +419,7 @@ First, create a (S)CSS file in the parent component's directory and style the gi
 }
 ```
 
-Then in the parent component add the relative path to the above style sheet:
+Then, in the parent component, add the relative path to the above style sheet:
 
 ```ts
 /* src/app/app.component.ts */
@@ -442,7 +442,7 @@ To style the component using a global style sheet, first, create it:
 }
 ```
 
-Then, add it in the `angular.json` configuration file:
+Then, add it to the `angular.json` configuration file:
 
 ```json
 "architect": {
@@ -458,7 +458,7 @@ Then, add it in the `angular.json` configuration file:
 
 #### Setting the placeholder
 
-To display {@link features/editor-placeholder the placeholder} in the main editable element, set the `placeholder` field in the CKEditor&nbsp;5 rich text editor component configuration:
+To display the {@link features/editor-placeholder placeholder} in the main editable element, set the `placeholder` field in the CKEditor&nbsp;5 rich text editor component configuration:
 
 ```ts
 @Component( {
@@ -681,7 +681,7 @@ beforeAll( () => {
 } );
 ```
 
-These mocks should be placed before the tests that use CKEditor&nbsp;5. They are imperfect and may not cover all the cases, but they should be sufficient for basic initialization and rendering editor. Keep in mind that they are not a replacement for proper browser testing.
+These mocks should be placed before the tests that use CKEditor&nbsp;5. They are imperfect and may not cover all the cases, but they should be sufficient for basic initialization and rendering the editor. Keep in mind that they are not a replacement for proper browser testing.
 
 ## Supported Angular versions
 
@@ -759,7 +759,7 @@ All available Angular versions are [listed on npm](https://www.npmjs.com/package
 
 ## Contributing and reporting issues
 
-The source code of the CKEditor&nbsp;5 rich text editor component for Angular is available on GitHub in [https://github.com/ckeditor/ckeditor5-angular](https://github.com/ckeditor/ckeditor5-angular).
+The source code of the CKEditor&nbsp;5 rich text editor component for Angular is available on GitHub at [https://github.com/ckeditor/ckeditor5-angular](https://github.com/ckeditor/ckeditor5-angular).
 
 ## Next steps
 

docs/getting-started/integrations/angular.md

@@ -49,6 +49,9 @@ Some CSP directives have an impact on certain rich-text editor features. Here is
 * `style-src 'self' 'unsafe-inline'`:
 	* The `self` directive allows to load styles from the site's own domain. Since v42.0.0, the editor {@link getting-started/setup/css distributes its stylesheets}. If you need to load styles from some other domain, add them explicitly: `style-src https://trusted-styles.example.com;`.
 	* The directive `unsafe-inline` is required to make the styles of certain features work properly. For instance, you are going to need it if you want to enable such editor features as {@link features/font font} or {@link features/text-alignment text alignment} or any other feature that uses the inline `style="..."` attributes in the content.
+
+	**Note**: Inline styles are also required when using {@link features/lists#list-item-marker-formatting list item marker formatting}. For example, if you apply font color, size, or family to list markers, the editor uses inline style attributes to render them. Because of this, `unsafe-inline` must be allowed for the styles to display correctly.
+
 * `frame-src *`: Necessary for the {@link features/media-embed media embed} feature to load media with previews (containing `<iframe>`).
 
 	**Note**: Use the more strict `frame-src 'self'` if all the media in the edited content come from the same domain as your application.

docs/getting-started/setup/csp.md

@@ -331,7 +331,7 @@ Once you have the converters, you can try to see the simple box in action. You h
 			</section>
 		</div>
 
-		<script src="dist/bundle.js"></script>
+		<script type="module" src="./main.js"></script>
 	</body>
 </html>
 ```
@@ -536,10 +536,6 @@ export default class SimpleBoxEditing extends Plugin {
 }
 ```
 
-<info-box>
-	As you can see, the code became much more verbose and far longer. This is because you used lower-level converters. We plan to provide more handy widget conversion utilities in the future. Read more (and 👍) in [this ticket](https://github.com/ckeditor/ckeditor5/issues/1228).
-</info-box>
-
 ### Behavior after turning simple box into a widget
 
 Now, you should see how your simple box plugin has changed.
@@ -825,7 +821,7 @@ npm run dev
 
 If you want to use the editor from CDN, you can adapt this tutorial by following these steps.
 
-First, clone the repository the same way as before. But do not install the dependencies. Instead, open the `index.html` file and add the following tags:
+First, clone the repository the same way as before. **But do not install the dependencies.** Instead, open the `index.html` file and add the following tags:
 
 ```html
 <!DOCTYPE html>

docs/tutorials/widgets/implementing-a-block-widget.md

@@ -9,7 +9,7 @@ meta-description: Discover how to create a custom inline widget in CKEditor 5 wi
 
 In this tutorial, you will learn how to implement an inline widget. You will build a "placeholder" feature that allows the users to insert predefined placeholders, like a date or a surname, into the document.
 
-<info-box warning>
+<info-box>
 	**We have an official implementation of this feature!**
 
 	While this tutorial was created for learning purposes, it only offers a basic, simplified solution. We have an official implementation of this mechanism, called the {@link features/merge-fields merge fields} feature. It is much more robust than the solution presented here, and offers many configuration options.
@@ -633,7 +633,7 @@ npm run dev
 
 If you want to use the editor from CDN, you can adapt this tutorial by following these steps.
 
-First, clone the repository the same way as before. But do not install the dependencies. Instead, open the `index.html` file and add the following tags:
+First, clone the repository the same way as before. **But do not install the dependencies.** Instead, open the `index.html` file and add the following tags:
 
 ```html
 <!DOCTYPE html>

docs/tutorials/widgets/implementing-an-inline-widget.md

@@ -48,7 +48,7 @@
 		"api/module_html-embed_updatehtmlembedcommand.html": "api/module_html-embed_htmlembedcommand.html",
 		"api/module_html-embed_updatehtmlembedcommand-UpdateHtmlEmbedCommand.html": "api/module_html-embed_htmlembedcommand-HtmlEmbedCommand.html",
 		"api/module_link_utils-ManualDecorator.html": "api/module_link_utils_manualdecorator-LinkManualDecorator.html",
-		"api/module_link_utils-AutomaticDecorators.html": "api/module_link_utils_automaticdecorators-AutomaticDecorators.html",
+		"api/module_link_utils-AutomaticDecorators.html": "api/module_link_utils_automaticdecorators-AutomaticLinkDecorators.html",
 		"api/module_list_checktodolistcommand.html": "api/module_list_todolist_checktodolistcommand.html",
 		"api/module_list_checktodolistcommand-CheckTodoListCommand.html": "api/module_list_todolist_checktodolistcommand-CheckTodoListCommand.html",
 		"api/module_list_converters.html": "api/module_list_list_converters.html",