1034712: Architecture diagram for document editor features

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

@@ -115,6 +115,37 @@ Note:
 
 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`](<https://www.nuget.org/packages/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.
 
+
+### Paste with formatting architecture overview
+
+Paste with formatting allows copying content from external sources and pasting it with formatting options (Keep Source Formatting, Match Destination Formatting, Text Only) applied by the server.
+
+```
+User copies content from external source and triggers paste
+   ↓
+CLIENT: Retrieves clipboard data
+   ↓
+CLIENT: Sends clipboard data to paste formatting service
+   ↓
+HTTP Request (Clipboard data sent to server)
+   ↓
+SERVER: Receives request and parses clipboard content
+   ↓
+SERVER: Analyzes formatting and content structure
+   ↓
+HTTP Response (Processed content returned to client)
+   ↓
+CLIENT: Receives response and displays formatting options dialog to user
+   ↓
+User selects desired formatting option (Keep Source/Match Destination/Text Only)
+   ↓
+CLIENT: Applies selected formatting to content
+   ↓
+CLIENT: Inserts formatted content at cursor position
+   ↓
+USER: Views pasted content with selected formatting applied
+```
+
 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.

Document-Processing/Word/Word-Processor/react/collaborative-editing/using-redis-cache-asp-net-core.md

@@ -119,6 +119,49 @@ Collaborative editing is built using three main components:
 
 - Resolves conflicts between multiple users using the OT algorithm
 
+```
+CLIENT 1 (USER 1)              SERVER (SignalR + Redis)           CLIENT 2 (USER 2)
+════════════════               ═════════════════════════          ════════════════
+
+Step 1: User 1 edits
+document
+   │
+Step 2: contentChange
+event fires
+   │
+Step 3: Create
+operation Object
+   │
+Step 4: Send via
+SignalR ──────────────────→ Step 5: Receive operation
+                           in DocumentEditorHub
+                                │
+                           Step 6: Store in Redis
+                           cache (assign version)
+                                │
+                           Step 7: Check for
+                           concurrent edits
+                           (OT Algorithm)
+                                │
+                           Step 8: Transform
+                           Operation
+                                │
+        Step 9: Broadcast transformed operation via SignalR ──────────────→
+        (Confirmation)              ↓                              (Update)
+                              All Connected Users            Step 9: Receive
+   ↓                                                          transformed
+Step 10: User 1 sees                                          operation
+confirmation of edit                                              │
+                                                              Step 10: Apply
+                                                              remote action
+                                                                   │
+                                                              Step 11: User 2
+                                                              sees update
+                                                              in real-time
+```
+
+---
+
 ## Integrate collaborative editing in client side
 
 ### Step 1: Integrate Document Editor in React sample

Document-Processing/Word/Word-Processor/react/how-to/perform-mail-merge-in-document-editor.md

@@ -18,6 +18,37 @@ You can perform mail merge in the React DOCX Editor (Document Editor) using the
 
 3. Finally, view the merged document in the Document Editor.
 
+
+## Mail merge architecture overview
+
+Mail merge allows users to insert merge fields in a document template, provide data sources, and generate personalized documents by executing the merge operation on the server using DocIO.
+
+```
+User inserts merge fields in template
+   ↓
+CLIENT: Document Editor stores merge field codes
+   ↓
+CLIENT: Sends template document and data source to server
+   ↓
+HTTP Request (Template + data source sent to server)
+   ↓
+SERVER: Receives template and data source
+   ↓
+SERVER: DocIO loads and parses template document
+   ↓
+SERVER: Identifies merge field codes and iterates through data records
+   ↓
+SERVER: Maps data values to merge fields and replaces them
+   ↓
+SERVER: Maintains formatting and generates merged document
+   ↓
+HTTP Response (Merged document returned to client)
+   ↓
+CLIENT: Document Editor loads and displays merged document
+   ↓
+User views, edits, and exports personalized document
+```
+
 ## Insert merge field
 
 A field can be added to the document by using the [insertField](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertfield) method in the [Editor](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor) module.

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

@@ -28,6 +28,34 @@ The following example shows how to open SFDT data in Document Editor.
 
 {% previewsample "/document-processing/code-snippet/document-editor/react/import-cs1" %}
 
+## SFDT Document Import architecture overview
+
+SFDT document import directly reads the native Syncfusion Document Text format file and opens it in the Document Editor without server-side processing.
+
+```
+User Selects SFDT File (.sfdt format)
+   ↓
+CLIENT: File picker dialog opens to select native SFDT format file
+   ↓
+CLIENT: Document Editor validates file extension is .sfdt
+   ↓
+CLIENT: FileReader API reads SFDT file content from local machine
+   ↓
+CLIENT: Parses file content as JSON string
+   ↓
+CLIENT: Validates SFDT JSON structure and content
+   ↓
+CLIENT: Calls documentEditor.open() method directly with SFDT data
+   ↓
+CLIENT: Document Editor deserializes SFDT JSON to internal document object
+   ↓
+CLIENT: Builds and renders document structure in viewport
+   ↓
+CLIENT: Applies styles, formatting, and content layout to document
+   ↓
+USER: Views SFDT document immediately displayed in Document Editor (no server communication required)
+```
+
 ## Import document from local machine
 
 The following example shows how to import document from local machine.
@@ -46,6 +74,52 @@ The following example shows how to import document from local machine.
 
 {% previewsample "/document-processing/code-snippet/document-editor/react/import-cs2" %}
 
+## Word Document Import architecture overview
+
+Word document and other format imports are sent to the server for conversion to SFDT before rendering in the Document Editor.
+
+```
+User Selects Word Document File (DOCX, DOC, DOTX, DOTM, RTF, TXT, XML)
+   ↓
+CLIENT: File picker dialog opens to select non-SFDT format file
+   ↓
+CLIENT: Document Editor validates file extension and type
+   ↓
+CLIENT: Reads selected file into memory using FileReader API or FormData
+   ↓
+CLIENT: Prepares XMLHttpRequest with file content and FormData
+   ↓
+CLIENT: Sends HTTP POST request to Import API endpoint with file
+   ↓
+HTTP Request (File uploaded to server with format type identified)
+   ↓
+SERVER: Receives file upload request at Import API endpoint
+   ↓
+SERVER: Detects document format type from file extension or content
+   ↓
+SERVER: Loads document using appropriate format type handler (DOCX, RTF, TXT, etc.)
+   ↓
+SERVER: Parses document structure, styles, content, and formatting
+   ↓
+SERVER: Converts document content to SFDT (Syncfusion Document Text) format
+   ↓
+SERVER: Serializes converted SFDT document to JSON string
+   ↓
+SERVER: Returns JSON response containing complete SFDT document data
+   ↓
+HTTP Response (SFDT JSON string sent back to client)
+   ↓
+CLIENT: Receives HTTP response with SFDT JSON data
+   ↓
+CLIENT: Parses JSON response to extract SFDT document object
+   ↓
+CLIENT: Calls documentEditor.open() method with converted SFDT data
+   ↓
+CLIENT: Document Editor loads and renders SFDT in viewport
+   ↓
+USER: Views imported document fully formatted in Document Editor
+```
+
 ## Convert word documents into SFDT
 
 You can convert word documents into SFDT format using the .NET Standard library [`Syncfusion.EJ2.WordEditor.AspNet.Core`](<https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Core/>) by the web API service implementation. This library helps you to convert word documents (.dotx,.docx,.docm,.dot,.doc), rich text format documents (.rtf), and text documents (.txt) into SFDT format.

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

@@ -228,6 +228,44 @@ container.documentEditor.editor.enforceProtection('password', true, true);
 {% endhighlight %}
 {% endtabs %}
 
+## Restrict Editing - Server Side architecture overview
+
+The server generates a secure hash from password and salt values, stores protection settings, and enforces restriction modes (ReadOnly, FormFieldsOnly, CommentsOnly, RevisionsOnly) for protected documents.
+
+```text
+User initiates protection with password and mode
+   ↓
+CLIENT: Calls enforceProtection() and sends password, salt, mode to server
+   ↓
+HTTP Request (Protection parameters sent to server)
+   ↓
+SERVER: Receives request and generates cryptographic hash from password and salt
+   ↓
+SERVER: Stores hash, salt, and protection mode with document
+   ↓
+HTTP Response (Protection confirmation sent to client)
+   ↓
+CLIENT: Receives confirmation and applies protection to document
+   ↓
+User attempts to modify protected document
+   ↓
+CLIENT: Captures modification event on protected content
+   ↓
+CLIENT: Sends modification request with user credentials to server
+   ↓
+HTTP Request (Modification attempt sent to server)
+   ↓
+SERVER: Verifies credentials against stored hash and checks restriction mode
+   ↓
+SERVER: Returns authorization decision (permit or deny)
+   ↓
+HTTP Response (Authorization result sent to client)
+   ↓
+CLIENT: Applies result and updates document state
+   ↓
+User sees modification allowed or denied based on protection rules
+```
+
 ## Configure on server side
 
 The above-mentioned hosted Web API URL is for demo and evaluation purposes only. For production, host your own web service as shown below. 

Document-Processing/Word/Word-Processor/react/saving-documents/server-side-export.md

@@ -18,6 +18,32 @@ Document Editor supports server-side export of **Syncfusion Document Text (.sfdt
 * [Syncfusion.EJ2.WordEditor.AspNet.Mvc5](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc5)
 * [Syncfusion.EJ2.WordEditor.AspNet.Mvc4](https://www.nuget.org/packages/Syncfusion.EJ2.WordEditor.AspNet.Mvc4)
 
+### SFDT to DOCX export architecture overview
+
+SFDT to DOCX export serializes the document content from the Document Editor and sends it to the server for format conversion and file generation.
+
+```text
+User clicks Save button
+   ↓
+CLIENT: Document Editor serializes document to SFDT format
+   ↓
+CLIENT: Sends SFDT content and target format to Export API endpoint
+   ↓
+HTTP Request (SFDT JSON payload sent to server)
+   ↓
+SERVER: Receives SFDT content at Export API endpoint
+   ↓
+SERVER: Deserializes SFDT to document object and converts to target format
+   ↓
+SERVER: Generates file stream and saves to storage
+   ↓
+HTTP Response (File path or download link returned to client)
+   ↓
+CLIENT: Receives response and initiates file download
+   ↓
+User downloads exported document file (DOCX/DOC/RTF/TXT/WordML/HTML)
+```
+
 Please refer the following code example.
 
 ```csharp

Document-Processing/Word/Word-Processor/react/spell-check.md

@@ -79,6 +79,50 @@ For more information on configuring the spell check service, refer to the follow
 
 - [Web Service for Spell Check in Java](https://help.syncfusion.com/document-processing/word/word-processor/react/web-services/java#spell-check)
 
+## Spell Check architecture overview
+
+Spell check identifies misspelled words as the user types and provides suggestions through context menu and dialog by validating text against server-side dictionaries.
+
+```
+User Types Text in Document Editor
+   ↓
+CLIENT: enableSpellCheck property validates text is captured
+   ↓
+CLIENT: Document Editor extracts text content for validation
+   ↓
+CLIENT: Spell Checker prepares HTTP request with languageID parameter
+   ↓
+CLIENT: Sends text and language configuration to configured server URL
+   ↓
+HTTP Request (Text content + languageID sent to server)
+   ↓
+SERVER: Receives request and loads appropriate language dictionary
+   ↓
+SERVER: Compares each word against dictionary file
+   ↓
+SERVER: Identifies misspelled words not found in dictionary
+   ↓
+SERVER: Generates suggestions for each misspelled word
+   ↓
+SERVER: Returns JSON response with errors array and suggestions
+   ↓
+HTTP Response (Misspelled words and suggestions returned to client)
+   ↓
+CLIENT: Receives response data
+   ↓
+CLIENT: Applies squiggly underline to misspelled words (if removeUnderline is false)
+   ↓
+CLIENT: Document Editor displays marked words visually in document
+   ↓
+User Right-Clicks on Misspelled Word
+   ↓
+CLIENT: Context Menu displays suggestions from server response
+   ↓
+User Selects Action (Change, Ignore, Ignore All, Add to Dictionary, Change All)
+   ↓
+CLIENT: Updates document and re-triggers spell check if needed
+```
+
 ## Spell check settings
 
 ### Allow suggestions