From fc360288a1498cc4145c77d75f998d27d59f0890 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Mon, 15 Mar 2021 19:03:32 +0200
Subject: [PATCH 1/7] docs(editor): paste cleanup initial

---
 _contentTemplates/editor/general.md |  3 ++
 components/editor/overview.md       |  2 +-
 components/editor/paste-cleanup.md  | 78 +++++++++++++++++++++++++++++
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 _contentTemplates/editor/general.md
 create mode 100644 components/editor/paste-cleanup.md

diff --git a/_contentTemplates/editor/general.md b/_contentTemplates/editor/general.md
new file mode 100644
index 0000000000..11bd1952d9
--- /dev/null
+++ b/_contentTemplates/editor/general.md
@@ -0,0 +1,3 @@
+#app-must-sanitize-content
+The application must sanitize the content before passing it to the editor and, optionally, before saving it to its storage after obtaining it from the editor. It is up to the application to ensure there is no malicious content (such as input sanitization, XSS attack prevention and other security concerns).
+#end
\ No newline at end of file
diff --git a/components/editor/overview.md b/components/editor/overview.md
index 394b3daf2b..d034788fcc 100644
--- a/components/editor/overview.md
+++ b/components/editor/overview.md
@@ -96,7 +96,7 @@ You can use the following features to get or set the editor content:
 
 * The `ValueChanged` [event]({%slug editor-events%}) lets you receive the value and act on it. If you use the `ValueChanged` event (no two-way binding), you can effectively cancel the user's input by not updating the view-model, or you can even alter it with something else.
 
->important The application must sanitize the content before passing it to the editor and, optionally, before saving it to its storage after obtaining it from the editor. It is up to the application to ensure there is no malicious content (such as input sanitization, XSS attack prevention and other security concerns).
+>important @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)
 
 
 ## Methods
diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md
new file mode 100644
index 0000000000..7503ff4c64
--- /dev/null
+++ b/components/editor/paste-cleanup.md
@@ -0,0 +1,78 @@
+---
+title: Paste Cleanup
+page_title: Editor - Paste Cleanup
+description: Paste Cleanup of the content of the Editor for Blazor, such as from MS Word.
+slug: editor-paste-cleanup
+tags: telerik,blazor,editor,paste,cleanup
+position: 70
+---
+
+# Editor Paste Cleanup
+
+The Telerik Editor component for Blazor can improve the quality of the content pasted into it by removing tags and attributes, and by fixing issues such as lists pasted from Microsoft Word.
+
+#### In this article
+
+
+* [Basics](#basics)
+* [Paste Settings Features](#paste-settings-features)
+* [Notes](#notes)
+
+
+## Basics
+
+To control the behavior of the editor when content is pasted, you can set the desired parameters to its `EditorPasteSettings` tag that you can find under the `EditorSettings` tag.
+
+>caption Set pasting behaviors in the Telerik Editor
+
+````CSHTML
+@* Some sample paste cleanup settings to showcase their usage *@
+
+<TelerikEditor @bind-Value="@EditorValue">
+    <EditorSettings>
+        <EditorPasteSettings ConvertMsLists="true"
+                             RemoveMsClasses="true"
+                             RemoveMsStyles="true"
+                             RemoveHtmlComments="true"
+                             StripTags="@StripTags"
+                             RemoveAttributes="@RemoveAttributes">
+        </EditorPasteSettings>
+    </EditorSettings>
+</TelerikEditor>
+@code {
+    public string EditorValue { get; set; }
+    public List<string> RemoveAttributes { get; set; } = new List<string>() { "onclick", "onerror" };
+    public List<string> StripTags { get; set; } = new List<string>() { "font" } ;
+}
+````
+
+## Paste Settings Features
+
+The following list describes the behaviors and functionality each parameter of the `EditorPasteSettings` provides:
+
+* `ConvertMsList` - `bool` - If set to `true`, MS Word lists will be converted into HTML lists. By default, Word's list are paragraphs with the respective styling which is not accurate in html.
+
+* `RemoveHtmlComments` - `bool` - If set to `true`, comments will be removed from the HTML.
+For example, `<!-- comment --> <p> content </p>` will result in `<p> content </p>`
+
+* `RemoveAllAttributes` - `bool` - Determines whether all DOM attributes should be stripped. Takes precedence over `RemoveMsClasses`, `removeMsStyles`, `RemoveAttributes`.
+
+* `RemoveMsClasses` - `bool` - If set to `true`, class attributes starting with `Mso` will be removed from the HTML. These are usually classes that come with content pasted from MS Word. For example,  `<p class="MsoNormal">pasted from MS Word</p>` will result in `<p>pasted from MS Word</p>`.
+
+* `RemoveMsStyles` - `bool`- If set to `true`, style attributes starting with `Mso` will be removed from the HTML. These are usually styles that come with content pasted from MS Word. For example, `<p><span style="color:#7C7C7C; mso-themecolor:accent3; mso-themeshade:191;">content</span></p>` will result in `<p><span style="color: #7C7C7C; background: silver;">content</span></p>`.
+
+* `StripTags` - `List<string>` - Specifies a list of tags to be removed from the HTML. Child nodes of removed tags will be kept in place. For example. when `StripTags` is `{ "span" }` , pasting `<p><span lang=EN-US>content</span></p>` will result in `<p>content</p>`.
+
+* `RemoveAttributes` - `List<string>` - Specifies the DOM attributes that should be removed from the HTML. For example, when set to `{ "lang" }` , pasting `<p><span lang=EN-US>content</span></p>` will result in `<p><span>content</span></p>`.
+
+
+
+## Notes
+
+>caution The content cleaning the editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be interecepted and altered maliciously. Therefore, the paste cleanup functionality of the editor cannot and does not replace content sanitization according to the application's standards and logic.
+>
+> @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)
+
+## See Also
+
+  * [Editor Overview]({%slug editor-overview%})

From 8bb26ae0a332ba5103dd0a409741265923874ba2 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Tue, 16 Mar 2021 20:23:27 +0200
Subject: [PATCH 2/7] docs(editor): default values,note on content size

---
 _contentTemplates/editor/general.md | 13 +++++++++++++
 components/editor/overview.md       |  2 ++
 components/editor/paste-cleanup.md  |  8 +++++---
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/_contentTemplates/editor/general.md b/_contentTemplates/editor/general.md
index 11bd1952d9..da4476c87e 100644
--- a/_contentTemplates/editor/general.md
+++ b/_contentTemplates/editor/general.md
@@ -1,3 +1,16 @@
 #app-must-sanitize-content
 The application must sanitize the content before passing it to the editor and, optionally, before saving it to its storage after obtaining it from the editor. It is up to the application to ensure there is no malicious content (such as input sanitization, XSS attack prevention and other security concerns).
+#end
+
+#content-size-signalr
+Content in the editor can become very large. For example, the user may have pasted an entire document, or pasted content has an image that will get converted to its `base64` representation that is rather large. With a server-side Blazor application, large content can cause the SignalR connection to drop because the content might exceed its limit. To cater for such cases, you may need to increase that packet limit. You can do that with a line similar to this:
+
+
+**C#**
+
+    services.AddServerSideBlazor().AddHubOptions(o =>
+    {
+        o.MaximumReceiveMessageSize = 4 * 1024 * 1024; // 4MB
+    });
+
 #end
\ No newline at end of file
diff --git a/components/editor/overview.md b/components/editor/overview.md
index d034788fcc..8e78edbb58 100644
--- a/components/editor/overview.md
+++ b/components/editor/overview.md
@@ -99,6 +99,8 @@ You can use the following features to get or set the editor content:
 >important @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)
 
 
+@[template](/_contentTemplates/editor/general.md#content-size-signalr)
+
 ## Methods
 
 The editor [reference](#component-reference) exposes the `ExecuteAsync` method which lets you call programmatically the tools and commands of the editor (such as the Bold too, or a Back Color tool, or inserting HTML).
diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md
index 7503ff4c64..21b3aae730 100644
--- a/components/editor/paste-cleanup.md
+++ b/components/editor/paste-cleanup.md
@@ -50,16 +50,16 @@ To control the behavior of the editor when content is pasted, you can set the de
 
 The following list describes the behaviors and functionality each parameter of the `EditorPasteSettings` provides:
 
-* `ConvertMsList` - `bool` - If set to `true`, MS Word lists will be converted into HTML lists. By default, Word's list are paragraphs with the respective styling which is not accurate in html.
+* `ConvertMsList` - `bool` - If set to `true` (defaults to `true`), MS Word lists will be converted into HTML lists. By default, Word's list are paragraphs with the respective styling which is not accurate in html.
 
 * `RemoveHtmlComments` - `bool` - If set to `true`, comments will be removed from the HTML.
 For example, `<!-- comment --> <p> content </p>` will result in `<p> content </p>`
 
 * `RemoveAllAttributes` - `bool` - Determines whether all DOM attributes should be stripped. Takes precedence over `RemoveMsClasses`, `removeMsStyles`, `RemoveAttributes`.
 
-* `RemoveMsClasses` - `bool` - If set to `true`, class attributes starting with `Mso` will be removed from the HTML. These are usually classes that come with content pasted from MS Word. For example,  `<p class="MsoNormal">pasted from MS Word</p>` will result in `<p>pasted from MS Word</p>`.
+* `RemoveMsClasses` - `bool` - If set to `true` (defaults to `true`), class attributes starting with `Mso` will be removed from the HTML. These are usually classes that come with content pasted from MS Word. For example,  `<p class="MsoNormal">pasted from MS Word</p>` will result in `<p>pasted from MS Word</p>`.
 
-* `RemoveMsStyles` - `bool`- If set to `true`, style attributes starting with `Mso` will be removed from the HTML. These are usually styles that come with content pasted from MS Word. For example, `<p><span style="color:#7C7C7C; mso-themecolor:accent3; mso-themeshade:191;">content</span></p>` will result in `<p><span style="color: #7C7C7C; background: silver;">content</span></p>`.
+* `RemoveMsStyles` - `bool`- If set to `true` (defaults to `true`), style attributes starting with `Mso` will be removed from the HTML. These are usually styles that come with content pasted from MS Word. For example, `<p><span style="color:#7C7C7C; mso-themecolor:accent3; mso-themeshade:191;">content</span></p>` will result in `<p><span style="color: #7C7C7C; background: silver;">content</span></p>`.
 
 * `StripTags` - `List<string>` - Specifies a list of tags to be removed from the HTML. Child nodes of removed tags will be kept in place. For example. when `StripTags` is `{ "span" }` , pasting `<p><span lang=EN-US>content</span></p>` will result in `<p>content</p>`.
 
@@ -69,6 +69,8 @@ For example, `<!-- comment --> <p> content </p>` will result in `<p> content </p
 
 ## Notes
 
+@[template](/_contentTemplates/editor/general.md#content-size-signalr)
+
 >caution The content cleaning the editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be interecepted and altered maliciously. Therefore, the paste cleanup functionality of the editor cannot and does not replace content sanitization according to the application's standards and logic.
 >
 > @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)

From 9beb85430b7afe91a45b85f52fd39b2169683407 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Wed, 17 Mar 2021 15:44:14 +0200
Subject: [PATCH 3/7] docs(editor): notes on pasting and behaviors

---
 components/editor/paste-cleanup.md | 48 +++++++++++++++++++++++++++---
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md
index 21b3aae730..34236d3e02 100644
--- a/components/editor/paste-cleanup.md
+++ b/components/editor/paste-cleanup.md
@@ -26,7 +26,9 @@ To control the behavior of the editor when content is pasted, you can set the de
 >caption Set pasting behaviors in the Telerik Editor
 
 ````CSHTML
-@* Some sample paste cleanup settings to showcase their usage *@
+<p>Copy this paragraph that has some <font color="red" face="Courier New">inline font </font> and <span style="font-family:Impact, Charcoal, sans-serif;color:#ffffff;background-color:#3366ff;">inline styles</span> and <span data-id="some-metadata">paste it </span> in the Editor<!--I am a comment that will disappear-->.</p>
+
+@* Some sample paste cleanup settings to showcase their usage- the first three ones are commonly used for MS Word and these are their default values *@
 
 <TelerikEditor @bind-Value="@EditorValue">
     <EditorSettings>
@@ -39,10 +41,15 @@ To control the behavior of the editor when content is pasted, you can set the de
         </EditorPasteSettings>
     </EditorSettings>
 </TelerikEditor>
+
+The editor content as a string so you can see the differences with the original content above:
+<br />
+@EditorValue
+
 @code {
     public string EditorValue { get; set; }
-    public List<string> RemoveAttributes { get; set; } = new List<string>() { "onclick", "onerror" };
-    public List<string> StripTags { get; set; } = new List<string>() { "font" } ;
+    public List<string> RemoveAttributes { get; set; } = new List<string>() { "data-id" };
+    public List<string> StripTags { get; set; } = new List<string>() { "font" };
 }
 ````
 
@@ -69,12 +76,45 @@ For example, `<!-- comment --> <p> content </p>` will result in `<p> content </p
 
 ## Notes
 
+This section provides information on a few key concepts and behaviors that you should be aware of:
+
+* [Content Size](#content-size)
+* [Content Sanitization](#content-sanitization)
+* [Paste Text and Image from MS Word](#paste-text-and-image-from-ms-word)
+
+
+### Content Size
 @[template](/_contentTemplates/editor/general.md#content-size-signalr)
 
->caution The content cleaning the editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be interecepted and altered maliciously. Therefore, the paste cleanup functionality of the editor cannot and does not replace content sanitization according to the application's standards and logic.
+### Content Sanitization
+
+>caution The content cleaning the editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be interecepted and altered maliciously if the application is not secured. Therefore, the paste cleanup functionality of the editor cannot and does not replace content sanitization according to the application's standards and logic.
 >
 > @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)
 
+
+The editor clears `<script>` tags and removes DOM event handler attributes (e.g., `<img onerror="code();" onclick="otherCode();" alt="lorem ipsum" />` will become `<img  alt="lorem ipsum" />`). The user can still alter this and data can be modified during transmission as well, as explained above.
+
+>tip To clean up content and ensure it is safe, before you store and reuse it, you can consider ready-made HTML sanitization libraries that are available on free package sourecs like nuget.org. While Telerik is not in a position to recommend particular packages, we recommend you consider such an approach.
+
+### Paste Text and Image from MS Word
+
+If you copy both text and an image from MS Word and paste in the Editor, the image will not get pasted as expected. This behavior is due to the security policy of the browser.
+
+Instead of reading the image data and loading it as a base64 string to the `src` attribute of the `<img> `element, the browser generates an `<img>` tag which points to the clipboard location of the file on the client machine.
+
+A browser is not allowed to access such a resource, and so it throws an error and the image is not rendered which you can verify in the browser dev tools console, you will see an error such as: `"Not allowed to load local resource: <some image path>"`. 
+
+You can read more about this in <a href="https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource" target="_blank">this StackOverflow thread</a>
+
+#### Work Around
+
+To work around this browser behavior, copy only the text or a single image from the MS Word document, and paste the image in the content area of the Editor separately. 
+
+By default, the browser allows you to copy and paste a single image from Word in the Editor by converting its `src` to a `base64` string. 
+
+If you paste more images at the same time, their `src` attributes will not be converted to `base64` strings and the browser will paste them with their `http` protocol and `URL` pointing to the physical folder which will result in the error described above.
+
 ## See Also
 
   * [Editor Overview]({%slug editor-overview%})

From 2953e0a189cbfddfc85e17bf08dbf28fff01671f Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Wed, 17 Mar 2021 15:51:55 +0200
Subject: [PATCH 4/7] chore(editor): demo link

---
 components/editor/paste-cleanup.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md
index 34236d3e02..9a62f5850a 100644
--- a/components/editor/paste-cleanup.md
+++ b/components/editor/paste-cleanup.md
@@ -118,3 +118,4 @@ If you paste more images at the same time, their `src` attributes will not be co
 ## See Also
 
   * [Editor Overview]({%slug editor-overview%})
+  * [Live Demo: Paste Cleanup](https://demos.telerik.com/blazor-ui/editor/paste-cleanup)

From ee9f36687cb7ceb4ad0039329ae9430c4a6b6cf8 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Wed, 17 Mar 2021 17:22:32 +0200
Subject: [PATCH 5/7] chore(editor): typos

---
 components/editor/paste-cleanup.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md
index 9a62f5850a..47dc5d8e28 100644
--- a/components/editor/paste-cleanup.md
+++ b/components/editor/paste-cleanup.md
@@ -88,14 +88,14 @@ This section provides information on a few key concepts and behaviors that you s
 
 ### Content Sanitization
 
->caution The content cleaning the editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be interecepted and altered maliciously if the application is not secured. Therefore, the paste cleanup functionality of the editor cannot and does not replace content sanitization according to the application's standards and logic.
+>caution The content cleaning the editor performs happens on paste only. The user can still alter the HTML and if you are sending or receiving data over the wire, there is a chance such requests can be intercepted and altered maliciously if the application is not secured. Therefore, the paste cleanup functionality of the editor cannot and does not replace content sanitization according to the application's standards and logic.
 >
 > @[template](/_contentTemplates/editor/general.md#app-must-sanitize-content)
 
 
 The editor clears `<script>` tags and removes DOM event handler attributes (e.g., `<img onerror="code();" onclick="otherCode();" alt="lorem ipsum" />` will become `<img  alt="lorem ipsum" />`). The user can still alter this and data can be modified during transmission as well, as explained above.
 
->tip To clean up content and ensure it is safe, before you store and reuse it, you can consider ready-made HTML sanitization libraries that are available on free package sourecs like nuget.org. While Telerik is not in a position to recommend particular packages, we recommend you consider such an approach.
+>tip To clean up content and ensure it is safe, before you store and reuse it, you can consider ready-made HTML sanitization libraries that are available on free package sources like nuget.org. While Telerik is not in a position to recommend particular packages, we recommend you consider such an approach.
 
 ### Paste Text and Image from MS Word
 

From faee4741fc951eac506ac064d04675c83c2c352c Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Wed, 17 Mar 2021 19:38:07 +0200
Subject: [PATCH 6/7] chore(editor): typo

---
 components/editor/paste-cleanup.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md
index 47dc5d8e28..491f2fab09 100644
--- a/components/editor/paste-cleanup.md
+++ b/components/editor/paste-cleanup.md
@@ -105,7 +105,7 @@ Instead of reading the image data and loading it as a base64 string to the `src`
 
 A browser is not allowed to access such a resource, and so it throws an error and the image is not rendered which you can verify in the browser dev tools console, you will see an error such as: `"Not allowed to load local resource: <some image path>"`. 
 
-You can read more about this in <a href="https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource" target="_blank">this StackOverflow thread</a>
+You can read more about this in <a href="https://stackoverflow.com/questions/39007243/cannot-open-local-file-chrome-not-allowed-to-load-local-resource" target="_blank">this StackOverflow thread</a>.
 
 #### Work Around
 

From b3fad350613ba036d80ad3a15615b8b02588f9c2 Mon Sep 17 00:00:00 2001
From: Marin Bratanov <m.bratanov@gmail.com>
Date: Mon, 22 Mar 2021 20:12:29 +0200
Subject: [PATCH 7/7] chore: typo

---
 components/editor/paste-cleanup.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/editor/paste-cleanup.md b/components/editor/paste-cleanup.md
index 491f2fab09..d404624e67 100644
--- a/components/editor/paste-cleanup.md
+++ b/components/editor/paste-cleanup.md
@@ -101,7 +101,7 @@ The editor clears `<script>` tags and removes DOM event handler attributes (e.g.
 
 If you copy both text and an image from MS Word and paste in the Editor, the image will not get pasted as expected. This behavior is due to the security policy of the browser.
 
-Instead of reading the image data and loading it as a base64 string to the `src` attribute of the `<img> `element, the browser generates an `<img>` tag which points to the clipboard location of the file on the client machine.
+Instead of reading the image data and loading it as a `base64` string to the `src` attribute of the `<img> `element, the browser generates an `<img>` tag which points to the clipboard location of the file on the client machine.
 
 A browser is not allowed to access such a resource, and so it throws an error and the image is not rendered which you can verify in the browser dev tools console, you will see an error such as: `"Not allowed to load local resource: <some image path>"`.