9756000: Added documentation for before paste

Document-Processing/Word/Word-Processor/angular/clipboard.md

@@ -134,6 +134,43 @@ This paste option appears as follows.
 
 ![Image](images/paste.png)
 
+## Events
+DocumentEditor provides the [beforePaste](https://ej2.syncfusion.com/angular/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [cancel](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modifying the incoming content using [pasteContent](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [pasteType](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [BeforePasteEventArgs](https://ej2.syncfusion.com/angular/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation.
+
+The following code snippet illustrates how to achieve this:
+
+```ts
+import { Component, OnInit, ViewChild} from '@angular/core';
+import { ToolbarService , DocumentEditorContainerModule, , DocumentEditorContainerComponent, BeforePasteEventArgs
+} from '@syncfusion/ej2-angular-documenteditor';
+@Component({
+  imports: [
+    DocumentEditorContainerModule
+  ],
+  standalone: true,
+  selector: 'app-root',
+  // specifies the template string for the DocumentEditorContainer component
+  template: `<ejs-documenteditorcontainer serviceUrl="hostUrl" height="600px" style="display:block" (beforePaste)=" handleBeforePaste($event)" [enableToolbar]=true> </ejs-documenteditorcontainer>`,
+  providers: [ToolbarService]
+})
+export class AppComponent implements OnInit {
+  @ViewChild('documenteditor_default', { static: true }) 
+  public container!: DocumentEditorContainerComponent;
+  ngOnInit(): void {  }
+  // Event get triggerd on comment actions like Post, edit, reply, resolve and reopen
+  public handleBeforePaste(args: BeforePasteEventArgs) {
+    // Block HTML pasteType  and Modify the content
+    if (args.pasteType === "Html") {
+      args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`;
+    }
+   // Cancel paste if content matches 'Software'
+   if(args.pasteContent == 'Software'){
+      args.cancel = true;
+    }
+  }
+}
+```
+
 ## See Also
 
 * [Feature modules](./feature-module)

Document-Processing/Word/Word-Processor/asp-net-core/clipboard.md

@@ -80,6 +80,20 @@ This paste option appears as follows.
 
 ![Image](images/paste.png)
 
+## Events
+DocumentEditor provides the `beforePaste` event, which is triggered before content is pasted into the document. This event gives an opportunity to `cancel` the paste operation, modifying the incoming content using `pasteContent`, and determining its format with `pasteType`. The event handler receives a `BeforePasteEventArgs` object that contains all the necessary details about the paste operation.
+
+The following code snippet illustrates how to achieve this:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-core/clipboard-event/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor/asp-net-core/clipboard-event/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## See Also
 
 * [Keyboard shortcuts](../asp-net-core/keyboard-shortcut)

Document-Processing/Word/Word-Processor/asp-net-mvc/clipboard.md

@@ -1,14 +1,14 @@
 ---
 layout: post
-title: Clipboard in ASP.NET MVC Document Editor Component
+title: Clipboard in ASP.NET MVC Document Editor Component | Syncfusion
 description: Learn here all about clipboard in Syncfusion ASP.NET MVC Document Editor component of Syncfusion Essential JS 2 and more.
 platform: document-processing
 control: Clipboard
 documentation: ug
 ---
 
 
-# Clipboard
+# Clipboard in Document Editor Component | Syncfusion
 
 Document editor takes advantage of system clipboard and allows to copy or move a portion of the document into it in HTML format, so that it can be pasted in any application that supports clipboard.
 
@@ -42,11 +42,13 @@ Document editor exposes API to enable local paste within the control. On enablin
 
 
 {% tabs %}
-{% highlight razor tabtitle="CSHTML" %}
+{% highlight cshtml tabtitle="CSHTML" %}
 {% include code-snippet/document-editor/asp-net-mvc/clipboard/razor %}
 {% endhighlight %}
-{% highlight c# tabtitle="Clipboard.cs" %}
-{% endhighlight %}{% endtabs %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor/asp-net-mvc/clipboard/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
 
 
 
@@ -81,6 +83,20 @@ This paste option appears as follows.
 
 ![Image](images/paste.png)
 
+## Events
+DocumentEditor provides the `beforePaste` event, which is triggered before content is pasted into the document. This event gives an opportunity to `cancel` the paste operation, modifying the incoming content using `pasteContent`, and determining its format with `pasteType`. The event handler receives a `BeforePasteEventArgs` object that contains all the necessary details about the paste operation.
+
+The following code snippet illustrates how to achieve this:
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/document-editor/asp-net-mvc/clipboard-event/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="Document-editor.cs" %}
+{% include code-snippet/document-editor/asp-net-mvc/clipboard-event/document-editor.cs %}
+{% endhighlight %}
+{% endtabs %}
+
 ## See Also
 
 * [Keyboard shortcuts](./keyboard-shortcut)

Document-Processing/Word/Word-Processor/javascript-es5/clipboard.md

@@ -94,6 +94,31 @@ This paste option appear as follows.
 
 ![Image](images/paste.PNG)
 
+## Events
+DocumentEditor provides the [beforePaste](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [cancel](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modifying the incoming content using [pasteContent](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [pasteType](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [BeforePasteEventArgs](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation.
+
+The following code snippet illustrates how to achieve this:
+
+```ts
+var container = new ej.documenteditor.DocumentEditorContainer({ 
+  beforePaste:{ handleBeforePaste },   
+  enableToolbar: true,
+  height: '590px',
+});
+ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);
+container.appendTo('#container');
+function handleBeforePaste (args) {
+    // Block HTML pasteType  and Modify the content
+    if (args.pasteType === "Html") {
+        args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`;
+    }
+    // Cancel paste if content matches 'Software'
+    if(args.pasteContent == 'Software'){
+      args.cancel = true;
+    }
+}
+```
+
 ## See Also
 
 * [Feature modules](./feature-module)

Document-Processing/Word/Word-Processor/javascript-es6/clipboard.md

@@ -94,6 +94,31 @@ This paste option appear as follows.
 
 ![Image](images/paste.PNG)
 
+## Events
+DocumentEditor provides the [beforePaste](https://ej2.syncfusion.com/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [cancel](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modifying the incoming content using [pasteContent](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [pasteType](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [BeforePasteEventArgs](https://ej2.syncfusion.com/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation.
+
+The following code snippet illustrates how to achieve this:
+
+```ts
+import { DocumentEditorContainer, Toolbar, BeforePasteEventArgs } from '@syncfusion/ej2-documenteditor';
+DocumentEditorContainer.Inject(Toolbar);
+let container: DocumentEditorContainer = new DocumentEditorContainer({ enableToolbar: true,height: '590px', beforePaste:handleBeforePaste
+});
+DocumentEditorContainer.Inject(Toolbar);
+container.serviceUrl = 'hostUrl';
+container.appendTo('#container');
+function handleBeforePaste (args : BeforePasteEventArgs){
+    // Block HTML pasteType  and Modify the content
+    if (args.pasteType === "Html") {
+        args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`;
+    }
+    // Cancel paste if content matches 'Software'
+    if(args.pasteContent == 'Software'){
+      args.cancel = true;
+    }
+}
+```
+
 ## See Also
 
 * [Feature modules](./feature-module)

Document-Processing/Word/Word-Processor/react/clipboard.md

@@ -124,6 +124,51 @@ This paste option appears as follows.
 
 ![Image](images/paste.png)
 
+## Events
+DocumentEditor provides the [beforePaste](https://ej2.syncfusion.com/react/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [cancel](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modifying the incoming content using [pasteContent](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [pasteType](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [BeforePasteEventArgs](https://ej2.syncfusion.com/react/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation.
+
+The following code snippet illustrates how to achieve this:
+
+```typescript
+import { createRoot } from 'react-dom/client';
+import * as React from 'react';
+import {
+  DocumentEditorContainerComponent,
+  Toolbar,
+} from '@syncfusion/ej2-react-documenteditor';
+DocumentEditorContainerComponent.Inject(Toolbar);
+function App() {
+  let container = DocumentEditorContainerComponent;
+  const handleBeforePaste = (args) => {
+    // Block HTML pasteType  and Modify the content
+    if (args.pasteType === "Html") {
+       args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`;
+    }     
+    // Cancel paste if content matches 'Software'
+    if(args.pasteContent == 'Software'){
+      args.cancel = true;
+    }
+  };
+  return (
+    <div>
+      <DocumentEditorContainerComponent
+        id="container"
+        ref={(scope) => {
+          container = scope;
+        }}
+        height={'590px'}
+        serviceUrl="hostUrl"
+        enableToolbar={true}
+        enableTrackChanges={true}
+        beforePaste={handleBeforePaste }
+      />
+    </div>
+  );
+}
+export default App;
+createRoot(document.getElementById('sample')).render(<App />);
+```
+
 ## See Also
 
 * [Feature modules](./feature-module)

Document-Processing/Word/Word-Processor/vue/clipboard.md

@@ -74,6 +74,81 @@ This paste option appears as follows.
 
 ![Image](images/paste.png)
 
+## Events
+
+DocumentEditor provides the [beforePaste](https://ej2.syncfusion.com/vue/documentation/api/document-editor/index-default#beforepaste) event, which is triggered before content is pasted into the document. This event gives an opportunity to [cancel](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs#cancel) the paste operation, modifying the incoming content using [pasteContent](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs#pastecontent), and determining its format with [pasteType](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs#pastetype). The event handler receives a [BeforePasteEventArgs](https://ej2.syncfusion.com/vue/documentation/api/document-editor/beforepasteeventargs) object that contains all the necessary details about the paste operation.
+
+The following code snippet illustrates how to achieve this:
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+
+<template>
+  <div>
+    <div>
+      <div>
+        <ejs-documenteditorcontainer ref="container" style="display: block;" :height="'590px'"
+          @beforePaste="handleBeforePaste" :enableToolbar="true" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { DocumentEditorContainerComponent as EjsDocumenteditorcontainer } from '@syncfusion/ej2-vue-documenteditor';
+
+
+const handleBeforePaste = function (args) {
+  // Block HTML pasteType  and Modify the content
+    if (args.pasteType === "Html") {
+        args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`;
+    }
+  // Cancel paste if content matches 'Software'
+   if(args.pasteContent == 'Software'){
+      args.cancel = true;
+    }}
+</script>
+
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+
+<template>
+  <div>
+    <div>
+      <div>
+        <ejs-documenteditorcontainer ref="container" style="display: block;" :height="'590px'"
+          @beforePaste="handleBeforePaste":enableToolbar="true" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-vue-documenteditor';
+
+export default {
+  components: {
+    'ejs-documenteditorcontainer': DocumentEditorContainerComponent
+  },
+  methods: {
+    handleBeforePaste (args) {
+        // Block HTML pasteType  and Modify the content
+        if (args.pasteType === "Html") {
+            args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},"text":"HTML Content"}]}],"headersFooters":{}}]}`;
+        }
+        // Cancel paste if content matches 'Software'
+        if(args.pasteContent == 'Software'){
+        args.cancel = true;
+        }
+    }
+  }
+};
+</script>
+
+{% endhighlight %}
+{% endtabs %}
+
+
 ## See Also
 
 * [Feature modules](./feature-module)

Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/razor

@@ -0,0 +1,21 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Height("590px").beforePaste("handleBeforePaste").Render()
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    function handleBeforePaste (args) {
+         // Block HTML pasteType  and Modify the content
+        if (args.pasteType === "Html") {
+            args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},
+            "text":"HTML Content"}]}],"headersFooters":{}}]}`;
+        }
+        // Cancel paste if content matches 'Software'
+        if(args.pasteContent == 'Software'){
+        args.cancel = true;
+        }
+    }
+</script>

Document-Processing/code-snippet/document-editor/asp-net-core/clipboard-event/tagHelper

@@ -0,0 +1,23 @@
+<ejs-documenteditorcontainer id="container" serviceUrl="/api/DocumentEditor/" enableToolbar=true created="onCreated" beforePaste="handleBeforePaste " height="590px"></ejs-documenteditorcontainer>
+
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    function handleBeforePaste (args){
+        // Block HTML pasteType  and Modify the content
+        if (args.pasteType === "Html") {
+            args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},
+            "text":"HTML Content"}]}],"headersFooters":{}}]}`;
+        }
+        // Cancel paste if content matches 'Software'
+        if(args.pasteContent == 'Software'){
+        args.cancel = true;
+        }
+     }
+</script>
+

Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/document-editor.cs

@@ -0,0 +1,5 @@
+public ActionResult Default()
+{
+    return View();
+}
+

Document-Processing/code-snippet/document-editor/asp-net-mvc/clipboard-event/razor

@@ -0,0 +1,21 @@
+@Html.EJS().DocumentEditorContainer("container").EnableToolbar(true).Height("590px").beforePaste("handleBeforePaste").Render()
+<script>
+    var documenteditor;
+    var container;
+    function onCreated() {
+        var documenteditorElement = document.getElementById('container');
+        container = documenteditorElement.ej2_instances[0];
+        documenteditor = container.documentEditor;
+    }
+    function handleBeforePaste (args) {
+         // Block HTML pasteType  and Modify the content
+        if (args.pasteType === "Html") {
+            args.pasteContent = `{"sections":[{"blocks":[{"inlines":[{"characterFormat":{"bold":true,"italic":true},
+            "text":"HTML Content"}]}],"headersFooters":{}}]}`;
+        }
+        // Cancel paste if content matches 'Software'
+        if(args.pasteContent == 'Software'){
+        args.cancel = true;
+        }
+    }
+</script>