, document.getElementById('sample'));
-
+const root = createRoot(document.getElementById('sample')!);
+root.render(
);
```
By default, **enableLocalPaste** is false.
@@ -90,11 +91,11 @@ documentEditor.editor.paste();
### Paste options in context menu
-In Document editor, paste options in context menu will be in disabled state if you were try to copy/paste content from outside of Document editor. It gets enabled when **enableLocalPaste** is true and trying to copy/paste content inside Document editor.
+In the Document Editor, paste options in the context menu will be in a disabled state if you try to copy/paste content from outside of the Document Editor. It gets enabled when `enableLocalPaste` is `true` and you copy/paste content within the Document Editor.
->Note: Due to browser limitation of getting content from system clipboard, paste using API and context menu option doesn't work. Hence, the paste option is disabled in context menu.
+N> Due to browser limitations of getting content from the system clipboard, paste using the API and context menu options doesn't work. Hence, the paste option is disabled in the context menu.
-Alternatively, you can use the keyboard shortcuts,
+Alternatively, you can use the keyboard shortcuts:
* Cut: Ctrl + X
* Copy: Ctrl + C
@@ -107,18 +108,19 @@ Alternatively, you can use the keyboard shortcuts,
|True |Allows to paste content that is copied from the same Document Editor component alone and prevents pasting content from system clipboard. Hence the content copied from outside Document Editor component can’t be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will be resolved. So, you can copy and paste content within the Document Editor component using API and context menu options too.|
|False|Allows to paste content from system clipboard. Hence the content copied from both the Document Editor component and outside can be pasted.
Browser limitation of pasting from system clipboard using API and context menu options, will remain as a limitation.|
-Note:
+N>
* Keyboard shortcut for pasting will work properly in both cases.
-* Copying content from Document Editor component and pasting outside will work properly in both cases.
+* Copying content from the Document Editor component and pasting outside will work properly in both cases.
## Paste with formatting
-Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in Document Editor to false and use this .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`](
) for Core by the web API service implementation. This library helps you to paste the system clipboard data with formatting.
+Document Editor provides support to paste the system clipboard data with formatting. To enable clipboard paste with formatting options, set the `enableLocalPaste` property in the Document Editor to `false` and use the `Syncfusion.EJ2.WordEditor.AspNet.Core` .NET Standard library for the ASP.NET Core web API service implementation. This library helps you to paste the system clipboard data with formatting. For details on setting up the web API service, refer to the [web services overview](./web-services-overview).
You can paste your system clipboard data in the following ways:
-* **Keep Source Formatting** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style.
-* **Match Destination Formatting** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted.
-* **Text Only** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded and tables are converted to a series of paragraphs.
+
+* **Keep Source Formatting:** This option retains the character styles and direct formatting applied to the copied text. Direct formatting includes characteristics such as font size, italics, or other formatting that is not included in the paragraph style.
+* **Match Destination Formatting:** This option discards most of the formatting applied directly to the copied text, but it retains the formatting applied for emphasis, such as bold and italic when it is applied to only a portion of the selection. The text takes on the style characteristics of the paragraph where it is pasted. The text also takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted.
+* **Text Only:** This option discards all formatting and non-text elements such as pictures or tables. The text takes on the style characteristics of the paragraph where it is pasted and takes on any direct formatting or character style properties of text that immediately precedes the cursor when the text is pasted. Graphical elements are discarded, and tables are converted to a series of paragraphs.
This paste option appears as follows.
diff --git a/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md b/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md
index 8fd5f8ce6d..1dc99b9ab1 100644
--- a/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md
+++ b/Document-Processing/Word/Word-Processor/react/collaborative-editing/overview.md
@@ -1,42 +1,42 @@
---
layout: post
-title: Collaborative Editing in React Document editor control | Syncfusion
-description: Learn about collaborative editing in Syncfusion React Document editor control of Syncfusion Essential JS 2 and more.
+title: Collaborative Editing in React DOCX Editor control | Syncfusion
+description: Learn about collaborative editing in the Syncfusion React Document Editor control and how to implement real-time document collaboration.
platform: document-processing
-control: Collaborative Editing
+control: Collaborative Editing
documentation: ug
domainurl: ##DomainURL##
---
-# Collaborative Editing in React
+# Collaborative Editing in React Document Editor
-Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+Allows multiple users to work on the same document simultaneously. This can be in real time so that collaborators can see them as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
## Prerequisites
-- *Real-time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing.
+- *Real-Time Transport Protocol*: This protocol facilitates instant communication between clients and the server, ensuring immediate updates during collaborative editing.
- *Distributed Cache or Database*: Used to temporarily store the queue of editing operations.
-### Real time transport protocol
+### Real-Time Transport Protocol
- *Managing Connections*: Keeps active connections open for real-time collaboration, allowing seamless communication between users and the server.
- *Broadcasting Changes*: Ensures that any edits made by one user are instantly sent to all collaborators, keeping everyone on the same page with the latest document version.
-### Distributed cache or database
+### Distributed Cache or Database
To support collaborative editing, it's crucial to have a backing system that temporarily stores the editing operations of all active users. There are two primary options:
-- ***Distributed Cache***: Handles more HTTP requests per second than a database approach. For example, a server with 2 vCPUs and 8GB RAM can process up to 125 requests per second using a distributed cache. We highly recommend using a distributed cache as a backing system over a database.
+- ***Distributed Cache***: Handles more HTTP requests per second than a database approach. For example, a server with 2 vCPUs and 8GB of RAM can process up to 125 requests per second using a distributed cache. We highly recommend using a distributed cache as a backing system over a database.
- ***Database***: With the same server configuration, it can handle up to 50 requests per second.
-Using the distributed cache or database all the editing operations are queued in order and conflict resolution is performed using `Operational Transformation` algorithm.
+With the distributed cache or database, all the editing operations are queued in order, and conflict resolution is performed using the `Operational Transformation` algorithm.
->**Tips**: To calculate the average requests per second of your application Assume the editor in your live application is actively used by 1000 users and each user’s edit can trigger 2 to 5 requests per second. The total requests per second of your applications will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
+N> 1. To calculate the average requests per second of your application, assume the Document Editor in your live application is actively used by 1000 users, and each user's edit can trigger 2 to 5 requests per second. The total requests per second of your application will be around 2000 to 5000. In this case, you can finalize a configuration to support around 5000 average requests per second.
->**Note**: The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app’s traffic and choose a configuration that best suits your needs.
+N> 2. The above metrics are based solely on the collaborative editing module. Actual throughput may decrease depending on other server-side interactions, such as document importing, pasting formatted content, editing restrictions, and spell checking. Therefore, it is advisable to monitor your app's traffic and choose a configuration that best suits your needs.
-#### See Also
+## See Also
- [Collaborative editing using Redis cache in ASP.NET Core](../collaborative-editing/using-redis-cache-asp-net-core)
- [Collaborative editing using Java](../collaborative-editing/using-redis-cache-java)
\ No newline at end of file
diff --git a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md
index a0254e818e..5935b7451d 100644
--- a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md
+++ b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md
@@ -1,7 +1,7 @@
---
layout: post
title: Collaborative Editing in React DOCX Editor | Syncfusion
-description: Learn how to enable collaborative editing in React DOCX Editor to allow multiple users to work on a document simultaneously.
+description: Learn how to enable collaborative editing in React Document Editor to allow multiple users to work on a document simultaneously.
platform: document-processing
control: Collaborative Editing
documentation: ug
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Collaborative Editing in React with Redis in ASP.NET Core
-[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports collaborative editing which Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made
+[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports collaborative editing which allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made
## Prerequisites
@@ -25,7 +25,7 @@ SignalR enables real-time communication by instantly sending and receiving docum
### Scale-out SignalR using Azure SignalR service
-Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application(across multiple servers).
+Azure SignalR Service is a scalable, managed service for real-time communication in web applications. It enables real-time messaging between web clients (browsers) and your server-side application (across multiple servers).
The following code snippet demonstrates how to configure Azure SignalR in an ASP.NET Core application using the `AddAzureSignalR` method in the "Program.cs" file of the web service project.
@@ -249,7 +249,7 @@ public connectToRoom(data: any) {
}
};
-//other code snippets
+// Other code snippets
{% endhighlight %}
{% endtabs %}
@@ -419,14 +419,14 @@ public async Task JoinGroup(ActionInfo info)
// Add the connection ID to the group
await Groups.AddToGroupAsync(Context.ConnectionId, info.RoomName);
- //To ensure whether the room exixts in the Redis cache
+ // To ensure whether the room exists in the Redis cache
bool roomExists = await _db.KeyExistsAsync(info.RoomName + CollaborativeEditingHelper.UserInfoSuffix);
if (roomExists) {
// Fetch all connected users from Redis
var allUsers = await _db.HashGetAllAsync(info.RoomName + CollaborativeEditingHelper.UserInfoSuffix);
var userList = allUsers.Select(u => JsonConvert.DeserializeObject
(u.Value)).ToList();
- //Send the exisiting user details to the newly joined user.
+ // Send the existing user details to the newly joined user.
await Clients.Caller.SendAsync("dataReceived", "addUser", userList);
}
@@ -436,7 +436,7 @@ public async Task JoinGroup(ActionInfo info)
// Store the room name with the connection ID
await _db.HashSetAsync(CollaborativeEditingHelper.ConnectionIdRoomMappingKey, Context.ConnectionId, info.RoomName);
- // Notify all the exsisiting users in the group about the new user
+ // Notify all the existing users in the group about the new user
await Clients.GroupExcept(info.RoomName, Context.ConnectionId).SendAsync("dataReceived", "addUser", info);
}
@@ -452,12 +452,12 @@ The following code snippet demonstrates how to disconnect a connection using Sig
public override async Task OnDisconnectedAsync(Exception ? e)
{
- //Get the room name associated with the connection ID
+ // Get the room name associated with the connection ID
string roomName = await _db.HashGetAsync(CollaborativeEditingHelper.ConnectionIdRoomMappingKey, Context.ConnectionId);
- // Remove user from Redis
+ // Remove user from Redis
await _db.HashDeleteAsync(roomName + CollaborativeEditingHelper.UserInfoSuffix, Context.ConnectionId);
- //// Fetch all connected users from Redis
+ // Fetch all connected users from Redis
var allUsers = await _db.HashGetAllAsync(roomName + CollaborativeEditingHelper.UserInfoSuffix);
var userList = allUsers.Select(u => JsonConvert.DeserializeObject(u.Value)).ToList();
@@ -469,7 +469,7 @@ public override async Task OnDisconnectedAsync(Exception ? e)
RedisValue[] pendingOps = await _db.ListRangeAsync(roomName, 0, -1);
if (pendingOps.Length > 0) {
List < ActionInfo > actions = new List();
- // Prepare the message fir adding it in background service queue.
+ // Prepare the message for adding it in background service queue.
foreach(var element in pendingOps)
{
actions.Add(JsonConvert.DeserializeObject(element.ToString()));
@@ -594,7 +594,7 @@ private async Task < ActionInfo > AddOperationsToCache(ActionInfo action)
action.Version = version;
action.IsTransformed = true;
- //Other code snippets
+ // Other code snippets
// Return the updated action
return action;
diff --git a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md
index d777e47a67..1af79c2350 100644
--- a/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md
+++ b/Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-java.md
@@ -1,7 +1,7 @@
---
layout: post
title: Collaborative Editing in React using Java | Syncfusion
-description: Learn how to enable collaborative editing in Syncfusion React Document editor control of Syncfusion Essential JS 2 and more.
+description: Learn how to enable collaborative editing in Syncfusion React Document Editor control of Syncfusion Essential JS 2 and more.
control: Collaborative Editing Java
platform: document-processing
documentation: ug
@@ -10,11 +10,11 @@ domainurl: ##DomainURL##
# Collaborative Editing in React with Redis in Java
-Allows multiple users to work on the same document simultaneously. This can be done in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
+This feature allows multiple users to work on the same document simultaneously in real-time, so that collaborators can see the changes as they are made. Collaborative editing can be a great way to improve efficiency, as it allows team members to work together on a document without having to wait for others to finish their changes.
## Prerequisites
-The following are needed to enable collaborative editing in [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor).
+The following are needed to enable collaborative editing in [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor).
- `SockJS`
- `Redis`
@@ -51,7 +51,7 @@ render() {
{ this.container = scope; }} style={{ 'display': 'block' }}
height={'100%'} currentUser={this.currentUser} toolbarItems={this.toolbarItems} serviceUrl={this.serviceUrl + 'api/wordeditor'} enableToolbar={true} locale='en-US' >
- ``
+
);
}
@@ -84,7 +84,7 @@ public onConnected() {
this.connectToRoom(this.currentRoomName);
}
}
-//Receive the remote action and apply to currenty document.
+//Receive the remote action and apply to current document.
public onDataRecived(data: any) {
if (this.collaborativeEditingHandler) {
var content = JSON.parse(data.body);
@@ -109,7 +109,7 @@ public openDocument(responseText: string, roomName: string): void {
//Open the document
this.container.documentEditor.open(data.sfdt);
setTimeout(() => {
- // connect to server using ScketJS
+ // connect to server using SockJS
this.connectToRoom({ action: 'connect', roomName: roomName, currentUser: this.container.currentUser });
});
}
@@ -129,7 +129,7 @@ public connectToRoom(data: any) {
### Step 4: Broadcast current editing changes to remote users
-Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the document editor using the `contentChange` event.
+Changes made on the client-side need to be sent to the server-side to broadcast them to other connected users. To send the changes made to the server, use the method shown below from the Document Editor using the `contentChange` event.
```typescript
this.container.contentChange = (args: ContainerContentChangeEventArgs) => {
@@ -311,9 +311,9 @@ public String getActionsFromServer(@RequestBody ActionInfo param) throws ClassNo
## How to perform Scaling in Collaborative Editing.
### Role of Scaling in Collaborative editing
-As the number of users increases, collaborative application face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources.
+As the number of users increases, collaborative applications face challenges in maintaining responsiveness and performance. This is where scaling becomes crucial. Scaling refers to the ability of an application to handle growing demands by effectively distributing the workload across multiple resources.
-During scaling the users may connected to different servers, so collaborative editing application introduces a specific challenge like, updating the edit operations to all the users connected in different serves. To overcome this issue you need to use ``` Redis Cache pub/sub ``` for message relay(syncing the editing operations to the users connected to different server instance)
+During scaling, users may be connected to different servers, so collaborative editing applications introduce specific challenges, such as updating edit operations to all users connected to different server instances. To overcome this issue, you need to use ``` Redis Cache pub/sub ``` for message relay (syncing the editing operations to the users connected to different server instances).
### Use of Redis Pub/Sub in scaling environment
Redis offers Pub/Sub functionality. The publish/subscribe (pub/sub) pattern provides asynchronous communication among multiple AWS services without creating interdependency. When a user edits a document, the application can publish the changes to a Redis channel. Clients (in different server instances) subscribed to that channel receive real-time updates, reflecting the changes in their document views.
@@ -334,7 +334,7 @@ Publish each editing operation to Redis channel with the room name. This will se
```java
try (Jedis jedis = RedisSubscriber.jedisPool.getResource()) {
-jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload));
+jedis.publish("collaborativeediting", new com.fasterxml.jackson.databind.ObjectMapper().writeValueAsString(payload));
break;
} catch (JedisConnectionException e) {
}
@@ -347,7 +347,7 @@ jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.Object
@PostConstruct
public void subscribeToInstanceChannel() {
//Subscriber to `collaborativeediting`
- String channel = "collaborativeedtiting";
+ String channel = "collaborativeediting";
new Thread(() -> {
JedisPoolConfig poolConfig = new JedisPoolConfig();
jedisPool = new JedisPool(poolConfig, REDIS_HOST, REDIS_PORT);
@@ -380,4 +380,3 @@ jedis.publish("collaborativeedtiting", new com.fasterxml.jackson.databind.Object
Full version of the code discussed about can be found in below GitHub location.
GitHub Example: [`Collaborative editing examples`](https://github.com/SyncfusionExamples/EJ2-Document-Editor-Collaborative-Editing)
-
diff --git a/Document-Processing/Word/Word-Processor/react/comments.md b/Document-Processing/Word/Word-Processor/react/comments.md
index 70a68cc2e4..cece49b5d6 100644
--- a/Document-Processing/Word/Word-Processor/react/comments.md
+++ b/Document-Processing/Word/Word-Processor/react/comments.md
@@ -1,16 +1,16 @@
---
layout: post
-title: Comments in React Document editor component | Syncfusion
-description: Learn here all about Comments in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
+title: Comments in React DOCX Editor component | Syncfusion
+description: Learn here all about Comments in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Comments
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---
-# Comments in React Document editor component
+# Comments in React Document Editor component
-[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add comments to documents. You can add, navigate and remove comments in code and from the UI.
+[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) allows you to add comments to documents. You can add, navigate and remove comments in code and from the UI.
To know more about the comments in DocumentEditor component, you can check the video below.
@@ -75,7 +75,7 @@ documentEditor.editor.insertReplyComment(comment.id, 'Hello world', commentPrope
## Get Comments
-Document Editor allows to get the comments along with its reply and comment properties using [`getComments`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getcomments).
+Document Editor allows you to get the comments along with their replies and comment properties using [`getComments`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getcomments).
```ts
//Get Comments in the document along with the properties author, date, status.
@@ -122,11 +122,11 @@ documentEditor.editor.deleteAllComments();
## Protect the document in comments only mode
-Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, user allowed to add or edit comments alone in the document.
+Document Editor provides support for protecting the document with `CommentsOnly` protection. In this protection, users are allowed to add or edit comments alone in the document.
-Document editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) API.
+Document Editor provides an option to protect and unprotect document using [`enforceProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#enforceprotection) and [`stopProtection`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#stopprotection) API.
-The following example code illustrates how to enforce and stop protection in Document editor container.
+The following example code illustrates how to enforce and stop protection in Document Editor container.
```ts
import { createRoot } from 'react-dom/client';
@@ -137,7 +137,7 @@ import {
} from '@syncfusion/ej2-react-documenteditor';
DocumentEditorContainerComponent.Inject(Toolbar);
function App() {
- let container = DocumentEditorContainerComponent;
+ let container: DocumentEditorContainerComponent;
function enforceProtection() {
//enforce protection
container.documentEditor.editor.enforceProtection('123', 'CommentsOnly');
@@ -168,11 +168,11 @@ createRoot(document.getElementById('sample')).render(
- All features of the component meet the requirement.
|
| [Axe-core Accessibility Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | 
- The component does not meet the requirement.