8
0
Просмотр исходного кода

Merge branch 'stable' into i/8174

Piotrek Koszuliński 5 лет назад
Родитель
Сommit
a58e69f004

+ 2 - 1
CHANGELOG.md

@@ -7,7 +7,7 @@ Changelog
 
 We are happy to announce the release of CKEditor 5 v23.1.0.
 
-This release introduces a new HTML embed feature.
+This release introduces a new HTML embed feature and adds the list style feature to the document editor build.
 
 It also comes with new API features:
 
@@ -38,6 +38,7 @@ The CKEditor 5 Collaboration features changelog can be found here: https://ckedi
 
 ### Features
 
+* **[build-decoupled-document](https://www.npmjs.com/package/@ckeditor/ckeditor5-build-decoupled-document)**: Added the list style feature to the document editor build. Closes [#7941](https://github.com/ckeditor/ckeditor5/issues/7941). ([commit](https://github.com/ckeditor/ckeditor5/commit/606a44b1575a5ba6c7be7b0e2c89907d151c2742))
 * **[engine](https://www.npmjs.com/package/@ckeditor/ckeditor5-engine)**: Elements with the `data-cke-ignore-events` attribute will not propagate their events to the CKEditor 5 API. Closes [#4600](https://github.com/ckeditor/ckeditor5/issues/4600). ([commit](https://github.com/ckeditor/ckeditor5/commit/04207f93f00a668bbe031d70ae7230f892428115))
 * **[engine](https://www.npmjs.com/package/@ckeditor/ckeditor5-engine)**: Introduced an automatic model-to-view reconversion by defining the `triggerBy` option for the `elementToElement()` conversion helper. Closes [#7956](https://github.com/ckeditor/ckeditor5/issues/7956). ([commit](https://github.com/ckeditor/ckeditor5/commit/a7c99732fd63008ada4f13c187df552a989291e1))
 * **[html-embed](https://www.npmjs.com/package/@ckeditor/ckeditor5-html-embed)**: Introduced the HTML embed feature. Closes [#8204](https://github.com/ckeditor/ckeditor5/issues/8204). ([commit](https://github.com/ckeditor/ckeditor5/commit/b529537086966ac908a163bf9373d67d43383586))

+ 0 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/build-paste-source.html


+ 19 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/build-paste-source.js

@@ -0,0 +1,19 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window */
+
+import ClassicEditor from '@ckeditor/ckeditor5-build-classic/src/ckeditor';
+import Strikethrough from '@ckeditor/ckeditor5-basic-styles/src/strikethrough';
+import Underline from '@ckeditor/ckeditor5-basic-styles/src/underline';
+import Font from '@ckeditor/ckeditor5-font/src/font';
+
+ClassicEditor.builtinPlugins.push(
+	Strikethrough,
+	Underline,
+	Font
+);
+
+window.ClassicEditor = ClassicEditor;

+ 14 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/paste-plain-text.html

@@ -0,0 +1,14 @@
+<div id="snippet-paste-plain-text">
+	<h2>On emphasis</h2>
+	<p>In typography, emphasis is the strengthening of words in a text with a font in a different style from the rest of the text, to highlight them. This may include text in <em>italics</em>, <strong>bold</strong>, <u>underlined</u> or <s>strikethrough</s> words or whole paragraphs.</p>
+	<h3>Italic type</h3>
+	<p><em>Italic type is a cursive font based on a stylized form of calligraphic handwriting. Owing to the influence from calligraphy, italics normally slant slightly to the right. One manual of English usage described italics as &quot;the print equivalent of underlining&quot;; in other words, underscore in a manuscript directs a typesetter to use italic.</em></p>
+	<p><em>Italics are a way to emphasize key points in a printed text, to identify many types of creative works, to cite foreign words or phrases, or, when quoting a speaker, a way to show which words they stressed.</em></p>
+	<h3>Bold type</h3>
+	<p><strong>A bold font weight makes the letters thicker than the surrounding text. It adds certain blackness to the type. Bold strongly stands out from the regular text, and is often used to highlight keywords important to the text content.</strong></p>
+	<p><strong>For example, printed dictionaries often use boldface for their keywords, and the names of entries can conventionally be marked in bold.</strong></p>
+	<h3>Underlined type</h3>
+	<p><u>Professional Western typesetting usually does not employ lines under letters for emphasis within running text because it is considered too distracting.</u></p>
+
+	<p><u>Underlining is, however, often used with typewriters, in handwriting, and with some non-alphabetic scripts. It is also used for secondary emphasis, i.e. marks added by the reader and not the author.</u></p>
+</div>

+ 48 - 0
packages/ckeditor5-clipboard/docs/_snippets/features/paste-plain-text.js

@@ -0,0 +1,48 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals ClassicEditor, console, window, document */
+
+import { CS_CONFIG } from '@ckeditor/ckeditor5-cloud-services/tests/_utils/cloud-services-config';
+
+ClassicEditor
+	.create( document.querySelector( '#snippet-paste-plain-text' ), {
+		toolbar: {
+			items: [
+				'heading',
+				'|',
+				'fontSize',
+				'fontFamily',
+				'fontColor',
+				'fontBackgroundColor',
+				'|',
+				'bold',
+				'italic',
+				'underline',
+				'strikethrough',
+				'|',
+				'undo',
+				'redo'
+			],
+			viewportTopOffset: window.getViewportTopOffsetConfig()
+		},
+		fontFamily: {
+			supportAllValues: true
+		},
+		fontSize: {
+			options: [ 10, 12, 14, 'default', 18, 20, 22 ],
+			supportAllValues: true
+		},
+		placeholder: 'Paste the content here to test the feature.',
+		cloudServices: CS_CONFIG
+	} )
+	.then( editor => {
+		window.editor = editor;
+		// Prevent showing a warning notification when user is pasting a content from MS Word or Google Docs.
+		window.preventPasteFromOfficeNotification = false;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );

+ 66 - 0
packages/ckeditor5-clipboard/docs/features/paste-plain-text.md

@@ -0,0 +1,66 @@
+---
+menu-title: Paste plain text
+category: features-pasting
+order: 30
+---
+
+{@snippet features/build-paste-source}
+
+# Pasting plain text
+
+The plain text pasting feature is implemented by the {@link module:clipboard/clipboard~PastePlainText} plugin which is a part of the {@link module:clipboard/clipboard~Clipboard} plugin.
+
+It detects the <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> keystroke during the paste and causes the pasted text to inherit the styles of the content it was pasted into. In this sense, the feature can also be described as "pasting without formatting" &mdash; the source formatting of the pasted text gets replaced with the target formatting of the text it was pasted into.
+
+Pasting plain text with a double line break will turn the break into a paragraph. A single line break will instead be turned into a soft break upon pasting.
+
+## Demo
+
+Paste plain text between the styled paragraphs below using the <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> to test the style inheritance. Paste without the <kbd>Shift</kbd> modifier to retain unstyled text. You can copy this very paragraph or one from the demo for convenience.
+
+{@snippet features/paste-plain-text}
+
+## Related features
+
+CKEditor 5 supports a wider range of paste features, including:
+* {@link features/paste-from-word Paste from Word} &ndash; Paste content from Microsoft Word and maintain the original structure and formatting.
+* {@link features/paste-from-google-docs Paste from Google Docs} &ndash; Paste content from Google Docs, maintaining the original formatting and structure.
+
+## Installation
+
+<info-box info>
+	This feature is required by the clipboard plugin and is enabled by default in all official builds. The installation instructions are for developers interested in building their own custom rich-text editor.
+</info-box>
+
+To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-clipboard`](https://www.npmjs.com/package/@ckeditor/ckeditor5-clipboard) package:
+
+```
+npm install --save @ckeditor/ckeditor5-clipboard
+```
+
+Then add the {@link module:clipboard/clipboard~Clipboard `Clipboard`} plugin to your plugin list:
+
+```js
+import Clipboard from '@ckeditor/ckeditor5-clipboard/src/clipboard';
+
+ClassicEditor
+	.create( document.querySelector( '#editor' ), {
+		plugins: [ Clipboard, Bold, ... ]
+	} )
+	.then( ... )
+	.catch( ... );
+```
+
+The {@link module:clipboard/clipboard~PastePlainText `PastePlainText`} plugin will activate along with the clipboard plugin.
+
+## Support for other applications
+
+You can find more information regarding compatibility with other applications in [this ticket](https://github.com/ckeditor/ckeditor5/issues/1184#issuecomment-409828069).
+
+If you think that support for any of the applications needs improvements, please add 👍  and comments in the following issues:
+
+* [Support pasting from Excel](https://github.com/ckeditor/ckeditor5/issues/2513).
+* [Support pasting from Libre Office](https://github.com/ckeditor/ckeditor5/issues/2520).
+* [Support pasting from Pages](https://github.com/ckeditor/ckeditor5/issues/2527).
+
+Feel free to open a [new feature request](https://github.com/ckeditor/ckeditor5/issues/new/choose) for other similar applications, too!

+ 35 - 35
packages/ckeditor5-clipboard/src/clipboardobserver.js

@@ -24,7 +24,7 @@ import DataTransfer from './datatransfer';
  * * {@link module:engine/view/document~Document#event:cut}
  *
  * Note that this observer is not available by default (it is not added by the engine).
- * To make it available it needs to be added to {@link module:engine/view/document~Document} by
+ * To make it available, it needs to be added to {@link module:engine/view/document~Document} by
  * the {@link module:engine/view/view~View#addObserver `View#addObserver()`} method. You can also load the
  * {@link module:clipboard/clipboard~Clipboard} plugin which adds this observer automatically (because it uses it).
  *
@@ -100,111 +100,111 @@ function getDropViewRange( view, domEvent ) {
 }
 
 /**
- * Fired as a continuation of {@link #event:paste} and {@link #event:drop} events.
+ * Fired as a continuation of the {@link #event:paste} and {@link #event:drop} events.
  *
  * It is a part of the {@glink framework/guides/deep-dive/clipboard#input-pipeline "clipboard input pipeline"}.
  *
- * Fired with a `dataTransfer` which comes from the clipboard and which content should be processed
+ * Fired with a `dataTransfer` which comes from the clipboard and whose content should be processed
  * and inserted into the editor.
  *
- * Note that this event is not available by default. To make it available {@link module:clipboard/clipboardobserver~ClipboardObserver}
- * needs to be added to {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
- * It's done by the {@link module:clipboard/clipboard~Clipboard} feature. If it's not loaded, it must be done manually.
+ * Note that this event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
+ * This is done by the {@link module:clipboard/clipboard~Clipboard} feature. If it is not loaded, it must be done manually.
  *
  * @see module:clipboard/clipboardobserver~ClipboardObserver
  * @see module:clipboard/clipboard~Clipboard
  * @event module:engine/view/document~Document#event:clipboardInput
  * @param {Object} data Event data.
- * @param {module:clipboard/datatransfer~DataTransfer} data.dataTransfer Data transfer instance.
+ * @param {module:clipboard/datatransfer~DataTransfer} data.dataTransfer The data transfer instance.
  * @param {Array.<module:engine/view/range~Range>} data.targetRanges Ranges which are the target of the operation
  * (usually – into which the content should be inserted).
  * If clipboard input was triggered by a paste operation, then these are the selection ranges. If by a drop operation,
- * then it's the drop position (which can be different than the selection at the moment of drop).
+ * then it is the drop position (which can be different than the selection at the moment of drop).
  */
 
 /**
- * Fired when user drags content over one of the editables.
+ * Fired when the user drags the content over one of the editables.
  *
  * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
  *
- * Note that this event is not available by default. To make it available {@link module:clipboard/clipboardobserver~ClipboardObserver}
- * needs to be added to {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
- * It's done by the {@link module:clipboard/clipboard~Clipboard} feature. If it's not loaded, it must be done manually.
+ * Note that this event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
+ * This is done by the {@link module:clipboard/clipboard~Clipboard} feature. If it is not loaded, it must be done manually.
  *
  * @see module:engine/view/document~Document#event:clipboardInput
  * @event module:engine/view/document~Document#event:dragover
- * @param {module:clipboard/clipboardobserver~ClipboardEventData} data Event data.
+ * @param {module:clipboard/clipboardobserver~ClipboardEventData} data The event data.
  */
 
 /**
- * Fired when user dropped content into one of the editables.
+ * Fired when the user dropped the content into one of the editables.
  *
  * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
  *
- * Note that this event is not available by default. To make it available {@link module:clipboard/clipboardobserver~ClipboardObserver}
- * needs to be added to {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
- * It's done by the {@link module:clipboard/clipboard~Clipboard} feature. If it's not loaded, it must be done manually.
+ * Note that this event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
+ * This is done by the {@link module:clipboard/clipboard~Clipboard} feature. If it is not loaded, it must be done manually.
  *
  * @see module:engine/view/document~Document#event:clipboardInput
  * @event module:engine/view/document~Document#event:drop
- * @param {module:clipboard/clipboardobserver~ClipboardEventData} data Event data.
+ * @param {module:clipboard/clipboardobserver~ClipboardEventData} data The event data.
  * @param {module:engine/view/range~Range} dropRange The position into which the content is dropped.
  */
 
 /**
- * Fired when user pasted content into one of the editables.
+ * Fired when the user pasted the content into one of the editables.
  *
  * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
  *
- * Note that this event is not available by default. To make it available {@link module:clipboard/clipboardobserver~ClipboardObserver}
- * needs to be added to {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
- * It's done by the {@link module:clipboard/clipboard~Clipboard} feature. If it's not loaded, it must be done manually.
+ * Note that this event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
+ * This is done by the {@link module:clipboard/clipboard~Clipboard} feature. If it is not loaded, it must be done manually.
  *
  * @see module:engine/view/document~Document#event:clipboardInput
  * @event module:engine/view/document~Document#event:paste
- * @param {module:clipboard/clipboardobserver~ClipboardEventData} data Event data.
+ * @param {module:clipboard/clipboardobserver~ClipboardEventData} data The event data.
  */
 
 /**
- * Fired when user copied content from one of the editables.
+ * Fired when the user copied the content from one of the editables.
  *
  * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
  *
- * Note that this event is not available by default. To make it available {@link module:clipboard/clipboardobserver~ClipboardObserver}
- * needs to be added to {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
- * It's done by the {@link module:clipboard/clipboard~Clipboard} feature. If it's not loaded, it must be done manually.
+ * Note that this event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
+ * This is done by the {@link module:clipboard/clipboard~Clipboard} feature. If it is not loaded, it must be done manually.
  *
  * @see module:clipboard/clipboardobserver~ClipboardObserver
  * @event module:engine/view/document~Document#event:copy
- * @param {module:clipboard/clipboardobserver~ClipboardEventData} data Event data.
+ * @param {module:clipboard/clipboardobserver~ClipboardEventData} data The event data.
  */
 
 /**
- * Fired when user cut content from one of the editables.
+ * Fired when the user cut the content from one of the editables.
  *
  * Introduced by {@link module:clipboard/clipboardobserver~ClipboardObserver}.
  *
- * Note that this event is not available by default. To make it available {@link module:clipboard/clipboardobserver~ClipboardObserver}
- * needs to be added to {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
- * It's done by the {@link module:clipboard/clipboard~Clipboard} feature. If it's not loaded, it must be done manually.
+ * Note that this event is not available by default. To make it available, {@link module:clipboard/clipboardobserver~ClipboardObserver}
+ * needs to be added to the {@link module:engine/view/document~Document} by the {@link module:engine/view/view~View#addObserver} method.
+ * This is done by the {@link module:clipboard/clipboard~Clipboard} feature. If it is not loaded, it must be done manually.
  *
  * @see module:clipboard/clipboardobserver~ClipboardObserver
  * @event module:engine/view/document~Document#event:cut
- * @param {module:clipboard/clipboardobserver~ClipboardEventData} data Event data.
+ * @param {module:clipboard/clipboardobserver~ClipboardEventData} data The event data.
  */
 
 /**
  * The value of the {@link module:engine/view/document~Document#event:paste},
  * {@link module:engine/view/document~Document#event:copy} and {@link module:engine/view/document~Document#event:cut} events.
  *
- * In order to access clipboard data use `dataTransfer` property.
+ * In order to access the clipboard data, use the `dataTransfer` property.
  *
  * @class module:clipboard/clipboardobserver~ClipboardEventData
  * @extends module:engine/view/observer/domeventdata~DomEventData
  */
 
 /**
- * Data transfer instance.
+ * The data transfer instance.
  *
  * @readonly
  * @member {module:clipboard/datatransfer~DataTransfer} module:clipboard/clipboardobserver~ClipboardEventData#dataTransfer

+ 1 - 1
packages/ckeditor5-clipboard/src/pasteplaintext.js

@@ -14,7 +14,7 @@ import ClipboardObserver from './clipboardobserver';
 /**
  * The plugin detects user intentions for pasting plain text.
  *
- * For example, it detects <kbd>ctrl/cmd</kbd> + <kbd>shift</kbd> + <kbd>ctrl/v</kbd> keystroke.
+ * For example, it detects <kbd>Ctrl/Cmd</kbd> + <kbd>Shift</kbd> + <kbd>V</kbd> keystroke.
  *
  * @extends module:core/plugin~Plugin
  */

+ 30 - 23
packages/ckeditor5-html-embed/docs/features/html-embed.md

@@ -7,16 +7,16 @@ menu-title: HTML embed
 
 The {@link module:html-embed/htmlembed~HtmlEmbed} plugin allows embedding an arbitrary HTML snippet in the editor. The feature is targeted at more advanced users who want to directly interact with HTML fragments.
 
-This feature can be used to embed any HTML code and bypass CKEditor 5's filtering mechanisms. Thanks to that it is possible to enrich content produced by CKEditor 5 with fragments of HTML that are not supported by any other CKEditor 5 feature.
+This feature can be used to embed any HTML code and bypass the CKEditor 5's filtering mechanisms. Thanks to that it is possible to enrich content produced by CKEditor 5 with fragments of HTML that are not supported by any other CKEditor 5 feature.
 
-Example of content that can be embedded thanks to the HTML embed feature:
+Some examples of content that can be embedded thanks to the HTML embed feature:
 
-* analytics code (that usually require embedding `<script>` elements),
-* social page widgets (that also require embedding `<script>` elements),
-* content embeddable by `<iframe>`s,
-* HTML media elements such as audio and video,
-* HTML snippets produced by external tools (e.g reports),
-* interactive content that requires a combination of rich HTML and scripts.
+* Analytics code (that usually require embedding `<script>` elements).
+* Social page widgets (that also require embedding `<script>` elements).
+* Content embeddable by `<iframe>` elements.
+* HTML media elements such as `<audio>` and `<video>`.
+* HTML snippets produced by external tools (for example, reports or charts).
+* Interactive content that requires a combination of rich HTML and scripts.
 
 It is recommended to use the {@link features/media-embed media embed} feature for embeddable media that are supported by this feature. The HTML embed feature can be used to handle remaining content.
 
@@ -28,10 +28,17 @@ It is recommended to use the {@link features/media-embed media embed} feature fo
 
 ## Demo
 
-Use the editor below to see the plugin in action. Click the **"Preview editor data"** button below the editor to see a preview of the editor content, including embedded HTML.
+Use the editor below to see the plugin in action. Click the **"Preview editor data"** button below the editor to see a preview of the editor content, including the embedded HTML.
 
 {@snippet features/html-embed}
 
+## Related features
+
+CKEditor 5 supports a wider range of embed and code features, including:
+
+* {@link features/media-embed Media embed} &ndash; Insert embeddable media such as YouTube or Vimeo videos and tweets into your rich text content.
+* {@link features/code-blocks Code blocks} &ndash; Insert longer, multiline listings of pre-formatted code with a programming language assigned.
+
 ## Installation
 
 To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-html-embed`](https://www.npmjs.com/package/@ckeditor/ckeditor5-html-embed) package:
@@ -64,7 +71,7 @@ ClassicEditor
 
 The feature is by default configured to not show previews of the HTML snippets. The previews can be enabled by setting the {@link module:html-embed/htmlembed~HtmlEmbedConfig#showPreviews `config.htmlEmbed.showPreviews`} option to `true`.
 
-However, by showing previews of embedded HTML snippets you expose the users of your system to the risk of executing malicious JavaScript code inside the editor. Therefore, it is highly recommended to plug an HTML sanitizier that will strip the malicious code from create snippets before rendering their previous. The sanitizer can be plugged by defining the {@link module:html-embed/htmlembed~HtmlEmbedConfig#sanitizeHtml `config.htmlEmbed.sanitizeHtml`} option.
+However, by showing previews of the embedded HTML snippets, you expose the users of your system to the **risk of executing malicious JavaScript code inside the editor**. Therefore, it is highly recommended to plug some HTML sanitizer that will strip the malicious code from the created snippets before rendering their previews. The sanitizer can be plugged by defining the {@link module:html-embed/htmlembed~HtmlEmbedConfig#sanitizeHtml `config.htmlEmbed.sanitizeHtml`} option.
 
 ```js
 ClassicEditor
@@ -90,44 +97,44 @@ ClassicEditor
 	.catch( ... );
 ```
 
-Currently, the [feature does not execute `<script>` tags](https://github.com/ckeditor/ckeditor5/issues/8326) so content that requires executing JavaScript in order to generate a preview will not show in the editor. However, other JavaScript code – e.g. used in `on*` observers and `scr="javascript:..."` attributes will be executed and therefore a sanitizer still needs to be enabled.
+Currently, the [feature does not execute `<script>` tags](https://github.com/ckeditor/ckeditor5/issues/8326) so the content that requires executing JavaScript in order to generate a preview will not show in the editor. However, other JavaScript code, for example, used in `on*` observers and `src="javascript:..."` attributes will be executed and therefore a sanitizer still needs to be enabled.
 
 Read more about the security aspect in the next section.
 
 ### Security
 
-If the HTML embed feature is configured to [show content previews](#content-previews), the HTML that the user inserts into the HTML embed widget is then rendered back to the user. If the HTML was rendered as-is, any JavaScript code included in these HTML snippets would be executed by the browser in context of your website.
+If the HTML embed feature is configured to [show content previews](#content-previews), the HTML that the user inserts into the HTML embed widget is then rendered back to the user. If the HTML was rendered as-is, any JavaScript code included in these HTML snippets would be executed by the browser in the context of your website.
 
-This, in turn, is a plain security risk. The HTML provided by the user might be mistakenly copied from a malicious website or end up in the users clipboard (as it would usually be copied and pasted) by any other mean.
+This, in turn, is a plain security risk. The HTML provided by the user might be mistakenly copied from a malicious website or end up in the user's clipboard (as it would usually be copied and pasted) by any other means.
 
-In some cases, advanced users can be instructed to never paste HTML code from untrusted sources. However, in most cases, it is highly recommended to properly secure the system by configuring the HTML embed feature to use an HTML sanitizer and, optionally, setting strict CSP rules.
+In some cases, advanced users can be instructed to never paste HTML code from untrusted sources. However, in most cases, it is highly recommended to properly secure the system by configuring the HTML embed feature to use an HTML sanitizer and, optionally, by setting strict CSP rules.
 
 <info-box>
-	The HTML embed feature [does not currently execute code in `<script>` tags](https://github.com/ckeditor/ckeditor5/issues/8326). However, it will execute code in `on*` and `scr="javascript:..."` attributes.
+	The HTML embed feature [does not currently execute code in `<script>` tags](https://github.com/ckeditor/ckeditor5/issues/8326). However, it will execute code in the `on*` and `src="javascript:..."` attributes.
 
-	The tricky part is that some HTML snippets require JavaScript to be executed to render any meaningful previews (e.g. Facebook embeds). Some, in turn, does not make sense to be executed (analytics code).
+	The tricky part is that some HTML snippets require JavaScript to be executed to render any meaningful previews (for example, Facebook embeds). Some, in turn, do not make sense to be executed (analytics code).
 
-	Therefore, when configuring the sanitizer and CSP rules, you can take those situations into consideration and for instance allow `<script>` tags pointing only to certain domains (e.g. a trusted external page that requires JavaScript).
+	Therefore, when configuring the sanitizer and CSP rules, you can take these situations into consideration and for instance, allow `<script>` tags pointing only to certain domains (e.g. a trusted external page that requires JavaScript).
 </info-box>
 
 #### Sanitizer
 
-The {@link module:html-embed/htmlembed~HtmlEmbedConfig#sanitizeHtml `config.htmlEmbed.sanitizeHtml`} option allow plugging an external sanitizer.
+The {@link module:html-embed/htmlembed~HtmlEmbedConfig#sanitizeHtml `config.htmlEmbed.sanitizeHtml`} option allows plugging an external sanitizer.
 
-Some popular JavaScript libraries that can be used include [sanitize-html](https://www.npmjs.com/package/sanitize-html) and [DOMPurify](https://www.npmjs.com/package/dompurify).
+Some popular JavaScript libraries that can be used include [`sanitize-html`](https://www.npmjs.com/package/sanitize-html) and [`DOMPurify`](https://www.npmjs.com/package/dompurify).
 
 The default settings of these libraries usually strip all potentially malicious content including `<iframe>`, `<video>`, etc. elements and JavaScript code coming from trusted sources so you may need to adjust their settings to match your needs.
 
 #### CSP
 
-In addition to using a sanitizer you can use the built browser mechanism called [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). By using CSP you can let the browser know what sources and means to execute JavaScript code and include other resources such as stylesheets, images and fonts are allowed.
+In addition to using a sanitizer, you can use the built-in browser mechanism called [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP). By using CSP you can let the browser know the allowed sources and means to execute JavaScript code and include other resources such as stylesheets, images and fonts.
 
 ## Common API
 
 The {@link module:html-embed/htmlembed~HtmlEmbed} plugin registers:
-* the UI button component (`'htmlEmbed'`),
-* the `'updateHtmlEmbed'` command implemented by {@link module:html-embed/updatehtmlembedcommand~UpdateHtmlEmbedCommand}.
-* the `'insertHtmlEmbed'` command implemented by {@link module:html-embed/inserthtmlembedcommand~InsertHtmlEmbedCommand}.
+* The UI button component (`'htmlEmbed'`).
+* The `'updateHtmlEmbed'` command implemented by {@link module:html-embed/updatehtmlembedcommand~UpdateHtmlEmbedCommand}.
+* The `'insertHtmlEmbed'` command implemented by {@link module:html-embed/inserthtmlembedcommand~InsertHtmlEmbedCommand}.
 
 Both commands can be executed using the {@link module:core/editor/editor~Editor#execute `editor.execute()`} method:
 

+ 4 - 4
packages/ckeditor5-html-embed/src/htmlembed.js

@@ -14,7 +14,7 @@ import HtmlEmbedUI from './htmlembedui';
 /**
  * The HTML embed feature.
  *
- * It allows inserting HTML snippets directly to the editor.
+ * It allows inserting HTML snippets directly into the editor.
  *
  * For a detailed overview, check the {@glink features/html-embed HTML embed feature} documentation.
  *
@@ -52,7 +52,7 @@ export default class HtmlEmbed extends Plugin {
  */
 
 /**
- * Whether the feature should render previews of the the embedded HTML.
+ * Whether the feature should render previews of the embedded HTML.
  *
  * When set to `true`, the feature will produce a preview of the inserted HTML based on a sanitized
  * version of the HTML provided by the user.
@@ -67,9 +67,9 @@ export default class HtmlEmbed extends Plugin {
  */
 
 /**
- * Callback used to sanitize HTML provided by the user when generating previews of it in the editor.
+ * Callback used to sanitize the HTML provided by the user when generating previews of it in the editor.
  *
- * We strongly recommend to overwrite the default function to avoid XSS vulnerabilities.
+ * We strongly recommend overwriting the default function to avoid XSS vulnerabilities.
  *
  * Read more about the security aspect of this feature in the {@glink features/html-embed#security "Security"} section of
  * the {@glink features/html-embed HTML embed} feature guide.

+ 2 - 2
packages/ckeditor5-html-embed/src/htmlembedediting.js

@@ -47,8 +47,8 @@ export default class HtmlEmbedEditing extends Plugin {
 			showPreviews: false,
 			sanitizeHtml: rawHtml => {
 				/**
-				 * When using the HTML embed feature with `htmlEmbed.showPreviews=true` option, it is strongly recommended to
-				 * define a sanitize function that will clean up an input HTML in order to avoid XSS vulnerability.
+				 * When using the HTML embed feature with the `htmlEmbed.showPreviews=true` option, it is strongly recommended to
+				 * define a sanitize function that will clean up the input HTML in order to avoid XSS vulnerability.
 				 *
 				 * For a detailed overview, check the {@glink features/html-embed HTML embed feature} documentation.
 				 *

+ 4 - 4
packages/ckeditor5-html-embed/src/inserthtmlembedcommand.js

@@ -11,11 +11,11 @@ import Command from '@ckeditor/ckeditor5-core/src/command';
 import { findOptimalInsertionPosition } from '@ckeditor/ckeditor5-widget/src/utils';
 
 /**
- * The insert raw HTML element command.
+ * The insert HTML embed element command.
  *
  * The command is registered by {@link module:html-embed/htmlembedediting~HtmlEmbedEditing} as `'insertHtmlEmbed'`.
  *
- * To insert the raw HTML element at the current selection, execute the command:
+ * To insert the HTML embed element at the current selection, execute the command:
  *
  *		editor.execute( 'insertHtmlEmbed' );
  *
@@ -30,7 +30,7 @@ export default class InsertHtmlEmbedCommand extends Command {
 	}
 
 	/**
-	 * Executes the command, which creates and inserts a new html element.
+	 * Executes the command, which creates and inserts a new HTML embed element.
 	 *
 	 * @fires execute
 	 */
@@ -58,7 +58,7 @@ function isHtmlEmbedAllowed( model ) {
 		!checkSelectionOnObject( selection, schema );
 }
 
-// Checks if a html embed is allowed by the schema in the optimal insertion parent.
+// Checks if an HTML embed is allowed by the schema in the optimal insertion parent.
 //
 // @param {module:engine/model/selection~Selection|module:engine/model/documentselection~DocumentSelection} selection
 // @param {module:engine/model/schema~Schema} schema

+ 3 - 3
packages/ckeditor5-html-embed/src/updatehtmlembedcommand.js

@@ -10,11 +10,11 @@
 import Command from '@ckeditor/ckeditor5-core/src/command';
 
 /**
- * The update raw HTML value command.
+ * The update HTML embed value command.
  *
  * The command is registered by {@link module:html-embed/htmlembedediting~HtmlEmbedEditing} as `'updateHtmlEmbed'`.
  *
- * To update the value of the raw HTML element at the current selection, execute the command:
+ * To update the value of the HTML embed element at the current selection, execute the command:
  *
  *		editor.execute( 'updateHtmlEmbed', '<b>HTML.</b>' );
  *
@@ -49,7 +49,7 @@ export default class UpdateHtmlEmbedCommand extends Command {
 	}
 }
 
-// Returns a selected raw html element in the model, if any.
+// Returns the selected HTML embed element in the model, if any.
 //
 // @param {module:engine/model/selection~Selection} selection
 // @returns {module:engine/model/element~Element|null}

+ 7 - 1
packages/ckeditor5-paste-from-office/docs/features/paste-from-google-docs.md

@@ -30,6 +30,12 @@ To test how Paste from Office works, open the [sample Google Docs document](http
 
 {@snippet features/paste-from-office}
 
+## Related features
+ 
+CKEditor 5 supports a wider range of paste features, including:
+* {@link features/paste-plain-text Paste plain text} &ndash; Paste text without formatting that will inherit the style of the content it was pasted into.
+* {@link features/paste-from-word Paste from Word} &ndash; Paste content from Microsoft Word and maintain the original structure and formatting.
+
 ## Automatic content filtering
 
 With CKEditor 5 you do not need to worry about pasting messy content from Google Docs (or any other possible sources). Thanks to the CKEditor 5 {@link framework/guides/overview custom data model}, only content which is specifically handled by the loaded rich-text editor features will be preserved.
@@ -44,7 +50,7 @@ This means that if you did not enable, for instance, {@link features/font font f
 
 To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-paste-from-office`](https://www.npmjs.com/package/@ckeditor/ckeditor5-paste-from-office) package:
 
-```bash
+```
 npm install --save @ckeditor/ckeditor5-paste-from-office
 ```
 

+ 7 - 1
packages/ckeditor5-paste-from-office/docs/features/paste-from-word.md

@@ -30,6 +30,12 @@ To test how Paste from Office works, download the [sample Word document](../../a
 
 {@snippet features/paste-from-office}
 
+## Related features
+ 
+CKEditor 5 supports a wider range of paste features, including:
+* {@link features/paste-from-google-docs Paste from Google Docs} &ndash; Paste content from Google Docs, maintaining the original formatting and structure.
+* {@link features/paste-plain-text Paste plain text} &ndash; Paste text without formatting that will inherit the style of the content it was pasted into.
+
 ## Automatic content filtering
 
 With CKEditor 5 you do not need to worry about pasting messy content from Microsoft Word (or any other possible sources). Thanks to the CKEditor 5 {@link framework/guides/overview custom data model}, only content which is specifically handled by the loaded rich-text editor features will be preserved.
@@ -44,7 +50,7 @@ This means that if you did not enable, for instance, {@link features/font font f
 
 To add this feature to your rich-text editor, install the [`@ckeditor/ckeditor5-paste-from-office`](https://www.npmjs.com/package/@ckeditor/ckeditor5-paste-from-office) package:
 
-```bash
+```
 npm install --save @ckeditor/ckeditor5-paste-from-office
 ```
 

+ 1 - 1
packages/ckeditor5-ui/src/dropdown/utils.js

@@ -110,7 +110,7 @@ export function createDropdown( locale, ButtonClass = DropdownButtonView ) {
  *
  *		// Either create a new ButtonView instance or create existing.
  *		buttons.push( new ButtonView() );
- *		buttons.push( editor.ui.componentFactory.get( 'someButton' ) );
+ *		buttons.push( editor.ui.componentFactory.create( 'someButton' ) );
  *
  *		const dropdown = createDropdown( locale );
  *