Task(1036520): Updating the restring editing documentation

Document-Processing/Word/Word-Processor/angular/restrict-editing.md

@@ -256,30 +256,50 @@ this.container.documentEditor.currentUser = 'engineer@mycompany.com';
 {% endhighlight %}
 {% endtabs %}
 
-## Highlighting the text area
+## Protect document with editable region
+User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.
 
-The [userColor](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user.
+### Insert editable region
+Use the [insertEditingRegion](https://ej2.syncfusion.com/angular/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users.
 
+The following example shows how to insert an editable region.
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
+// Allow editing for all users
+this.container.documentEditor.editor.insertEditingRegion();
+
+// pass a username to restrict access
+this.container.documentEditor.editor.insertEditingRegion("User Name");
+
+{% endhighlight %}
+{% endtabs %}
+
+### Highlight color for editable region
+
+The [userColor](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user.
+
 The following code example demonstrates how to set the userColor.
-
-
+
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-
+{% highlight ts tabtitle="TS" %}
+ 
 this.container.documentEditor.userColor = '#fff000';
-
+ 
 {% endhighlight %}
 {% endtabs %}
-
+
+### Enable or disable editable region highlighting
+
 The [highlightEditableRanges](https://ej2.syncfusion.com/angular/documentation/api/document-editor-container/documenteditorsettingsmodel#highlighteditableranges) property can be used to toggle the highlighting of editable regions.
-
+ 
 The following code example demonstrates how to enable or disable editable region highlighting.
-
+ 
 {% tabs %}
-{% highlight ts tabtitle="app.component.ts" %}
-
+{% highlight ts tabtitle="TS" %}
+ 
 this.container.documentEditor.documentEditorSettings.highlightEditableRanges = true;
-
+ 
 {% endhighlight %}
 {% endtabs %}
 

Document-Processing/Word/Word-Processor/asp-net-core/restrict-editing.md

@@ -22,15 +22,52 @@ The following code shows how to set currentUser
 container.documentEditor.currentUser = 'engineer@mycompany.com';
 ```
 
-## Highlighting the text area
-
-You can highlight the editable region of the current user using the `userColor` property.
-
-The following code shows how to set userColor.
-
-```typescript
+## Protect document with editable region
+User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.
+
+### Insert editable region
+Use the `insertEditingRegion` method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users.
+
+The following example shows how to insert an editable region.
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
+// Allow editing for all users
+container.documentEditor.editor.insertEditingRegion();
+
+// pass a username to restrict access
+container.documentEditor.editor.insertEditingRegion("User Name");
+
+{% endhighlight %}
+{% endtabs %}
+
+### Highlight color for editable region
+
+The `userColor` property can be used to highlight the editable region of the current user.
+
+The following code example demonstrates how to set the userColor.
+
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
 container.documentEditor.userColor = '#fff000';
-```
+
+{% endhighlight %}
+{% endtabs %}
+
+### Enable or disable editable region highlighting
+
+The `highlightEditableRanges` property can be used to toggle the highlighting of editable regions.
+
+The following code example demonstrates how to enable or disable editable region highlighting.
+
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
+container.documentEditor.documentEditorSettings.highlightEditableRanges = true;
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Restrict Editing Pane
 

Document-Processing/Word/Word-Processor/asp-net-mvc/restrict-editing.md

@@ -22,15 +22,52 @@ The following code shows how to set currentUser
 container.documentEditor.currentUser = 'engineer@mycompany.com';
 ```
 
-## Highlighting the text area
-
-You can highlight the editable region of the current user using the `userColor` property.
-
-The following code shows how to set userColor.
-
-```typescript
+## Protect document with editable region
+User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.
+
+### Insert editable region
+Use the `insertEditingRegion` method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users.
+
+The following example shows how to insert an editable region.
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
+// Allow editing for all users
+container.documentEditor.editor.insertEditingRegion();
+
+// pass a username to restrict access
+container.documentEditor.editor.insertEditingRegion("User Name");
+
+{% endhighlight %}
+{% endtabs %}
+
+### Highlight color for editable region
+
+The `userColor` property can be used to highlight the editable region of the current user.
+
+The following code example demonstrates how to set the userColor.
+
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
 container.documentEditor.userColor = '#fff000';
-```
+
+{% endhighlight %}
+{% endtabs %}
+
+### Enable or disable editable region highlighting
+
+The `highlightEditableRanges` property can be used to toggle the highlighting of editable regions.
+
+The following code example demonstrates how to enable or disable editable region highlighting.
+
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
+container.documentEditor.documentEditorSettings.highlightEditableRanges = true;
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Restrict Editing Pane
 

Document-Processing/Word/Word-Processor/blazor/restrict-editing.md

@@ -33,13 +33,47 @@ The following code example shows how to restrict or protect editing for the enti
 }
 ```
 
-## Allows changes to certain portion of the document
+## Protect document with editable region
+User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.
 
-Also, at some situations, you might need to allow changes for a certain portion of the document alone. Microsoft Word allows you to [make changes to parts of a Word document](https://support.microsoft.com/en-us/office/allow-changes-to-parts-of-a-protected-document-187ed01c-8795-43e1-9fd0-c9fca419dadf?ui=en-us&rs=en-us&ad=us). Likewise, the document editor control allows the users to make changes to certain parts of a document using similar user interface.
+### Insert editable region
+Use the [InsertEditingRegionAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertEditingRegionAsync) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users
 
-![Disabling Restrict Editing in Blazor DocumentEditor](./images/blazor-document-editor-disable-edit-restriction.png)
+The following example shows how to insert an editable region.
+```cshtml
+
+container.DocumentEditor.Editor.InsertEditingRegionAsync();
+
+```
+
+### Highlight color for editable region
+
+The [UserColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_UserColor) property can be used to highlight the editable region of the current user.
+
+The following code example demonstrates how to set the userColor.
+
+```cshtml
+
+<SfDocumentEditorContainer UserColor="#FFFF00"></SfDocumentEditorContainer>
+
+```
+
+### Enable or disable editable region highlighting
+
+The [HighlightEditableRanges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorSettingsModel_HighlightEditableRanges) property can be used to toggle the highlighting of editable regions.
+
+The following code example demonstrates how to enable or disable editable region highlighting.
+
+```cshtml
+
+<SfDocumentEditorContainer DocumentEditorSettings="@settings"></SfDocumentEditorContainer>
 
-![Enabling Restrict Editing in Blazor DocumentEditor](./images/blazor-document-editor-enable-edit-restriction.png)
+@code {
+
+  public DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel() { HighlightEditableRanges = false };  
+} 
+
+```
 
 ## Online Demo
 

Document-Processing/Word/Word-Processor/javascript-es5/restrict-editing.md

@@ -436,29 +436,50 @@ container.documentEditor.currentUser = 'engineer@mycompany.com';
 {% endhighlight %}
 {% endtabs %}
 
-## Highlighting the text area
+## Protect document with editable region
+User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.
 
-The [`userColor`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor#usercolor) property can be used to highlight the editable region of the current user.
+### Insert editable region
+Use the [insertEditingRegion](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users.
 
+The following example shows how to insert an editable region.
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
+// Allow editing for all users
+container.documentEditor.editor.insertEditingRegion();
+
+// pass a username to restrict access
+container.documentEditor.editor.insertEditingRegion("User Name");
+
+{% endhighlight %}
+{% endtabs %}
+
+### Highlight color for editable region
+
+The [userColor](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user.
+
 The following code example demonstrates how to set the userColor.
-
+ 
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
-
+{% highlight ts tabtitle="TS" %}
+ 
 container.documentEditor.userColor = '#fff000';
-
+ 
 {% endhighlight %}
 {% endtabs %}
-
-The [`highlightEditableRanges`](https://ej2.syncfusion.com/javascript/documentation/api/document-editor/documentEditorSettings#highlighteditableranges) property can be used to toggle the highlighting of editable regions.
-
+
+### Enable or disable editable region highlighting
+
+The [highlightEditableRanges](https://ej2.syncfusion.com/javascript/documentation/api/document-editor-container/documenteditorsettingsmodel#highlighteditableranges) property can be used to toggle the highlighting of editable regions.
+
 The following code example demonstrates how to enable or disable editable region highlighting.
-
+ 
 {% tabs %}
-{% highlight js tabtitle="index.js" %}
-
+{% highlight ts tabtitle="TS" %}
+ 
 container.documentEditor.documentEditorSettings.highlightEditableRanges = true;
-
+ 
 {% endhighlight %}
 {% endtabs %}
 

Document-Processing/Word/Word-Processor/javascript-es6/restrict-editing.md

@@ -421,29 +421,50 @@ container.documentEditor.currentUser = 'engineer@mycompany.com';
 {% endhighlight %}
 {% endtabs %}
 
-## Highlighting the text area
+## Protect document with editable region
+User can select a specific section and mark it as an editable region, allowing modification only in that part. The rest of the document remains protected from any changes.
 
-The [`userColor`](https://ej2.syncfusion.com/documentation/api/document-editor#usercolor) property can be used to highlight the editable region of the current user.
+### Insert editable region
+Use the [insertEditingRegion](https://ej2.syncfusion.com/documentation/api/document-editor/editor#inserteditingregion) method to mark specific paragraphs as editable.This allows you to control editing by giving access to all users or only selected users.
 
+The following example shows how to insert an editable region.
+{% tabs %}
+{% highlight ts tabtitle="TS" %}
+
+// Allow editing for all users
+container.documentEditor.editor.insertEditingRegion();
+
+// pass a username to restrict access
+container.documentEditor.editor.insertEditingRegion("User Name");
+
+{% endhighlight %}
+{% endtabs %}
+
+### Highlight color for editable region
+
+The [userColor](https://ej2.syncfusion.com/documentation/api/document-editor-container/index-default#usercolor) property can be used to highlight the editable region of the current user.
+
 The following code example demonstrates how to set the userColor.
-
+ 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-
+{% highlight ts tabtitle="TS" %}
+ 
 container.documentEditor.userColor = '#fff000';
-
+ 
 {% endhighlight %}
 {% endtabs %}
-
-The [`highlightEditableRanges`](https://ej2.syncfusion.com/documentation/api/document-editor/documentEditorSettings#highlighteditableranges) property can be used to toggle the highlighting of editable regions.
-
+
+### Enable or disable editable region highlighting
+
+The [highlightEditableRanges](https://ej2.syncfusion.com/documentation/api/document-editor-container/documenteditorsettingsmodel#highlighteditableranges) property can be used to toggle the highlighting of editable regions.
+
 The following code example demonstrates how to enable or disable editable region highlighting.
-
+ 
 {% tabs %}
-{% highlight ts tabtitle="index.ts" %}
-
+{% highlight ts tabtitle="TS" %}
+ 
 container.documentEditor.documentEditorSettings.highlightEditableRanges = true;
-
+ 
 {% endhighlight %}
 {% endtabs %}