From dff47a5961bc2e079a704c9f28039df9bdde51a8 Mon Sep 17 00:00:00 2001 From: SaranSF4541 Date: Thu, 18 Jun 2026 17:32:38 +0530 Subject: [PATCH 1/2] 1034712: Architecture diagram for document editor features --- .../Word/Word-Processor/react/import.md | 38 +++++++++++++++++++ .../Word/Word-Processor/react/spell-check.md | 22 +++++++++++ 2 files changed, 60 insertions(+) diff --git a/Document-Processing/Word/Word-Processor/react/import.md b/Document-Processing/Word/Word-Processor/react/import.md index c871032b45..265384f71b 100644 --- a/Document-Processing/Word/Word-Processor/react/import.md +++ b/Document-Processing/Word/Word-Processor/react/import.md @@ -28,6 +28,24 @@ 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 + ↓ +Document Editor Captures File Input (File picker triggered, .sfdt file selected) + ↓ +Client Validates File Format (Checks if file extension is .sfdt) + ↓ +File Read Directly (FileReader API reads file content without server call) + ↓ +Document Editor Opens SFDT (documenteditor.open() method called directly with file data) + ↓ +Document Rendered Immediately in Editor (User sees native SFDT document displayed in viewport) +``` + ## Import document from local machine The following example shows how to import document from local machine. @@ -46,6 +64,26 @@ 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 (DOCX, DOC, DOTX, DOTM, RTF, TXT, XML) + ↓ +Document Editor Captures File Input (File picker triggered, non-SFDT file selected) + ↓ +File Sent to Server (XMLHttpRequest POST to Import API endpoint with FormData) + ↓ +Server Converts Document (Detects format type, converts to SFDT, serializes to JSON) + ↓ +Server Returns SFDT JSON Response (Converted document data sent back as response) + ↓ +Document Editor Opens SFDT (documenteditor.open() method called with converted SFDT) + ↓ +Document Rendered in Editor (User sees converted document displayed in viewport) +``` + ## Convert word documents into SFDT You can convert word documents into SFDT format using the .NET Standard library [`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. diff --git a/Document-Processing/Word/Word-Processor/react/spell-check.md b/Document-Processing/Word/Word-Processor/react/spell-check.md index ca67eebd09..36bb4f1dc2 100644 --- a/Document-Processing/Word/Word-Processor/react/spell-check.md +++ b/Document-Processing/Word/Word-Processor/react/spell-check.md @@ -79,6 +79,28 @@ 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 + ↓ +Document Editor Captures Input (enableSpellCheck enabled, text detected) + ↓ +Spell Check Service Request (Text sent to configured server URL with languageID) + ↓ +Server Validates Against Dictionary (Dictionary lookup, misspelled words identified) + ↓ +Returns Misspelled Words & Suggestions (JSON response with errors and suggestions) + ↓ +Client Marks Words with Underline (Squiggly line applied unless removeUnderline is true) + ↓ +User Right-Clicks → Context Menu or Opens Spell Check Dialog + ↓ +User Applies Correction (Change, Ignore, Ignore All, Add to Dictionary, Change All) +``` + ## Spell check settings ### Allow suggestions From 560b63db3bbd3c846b6f33acd54b8141007a8ad8 Mon Sep 17 00:00:00 2001 From: SaranSF4541 Date: Thu, 18 Jun 2026 19:08:48 +0530 Subject: [PATCH 2/2] 1034712: Updating architecture diagram for document editor modules --- .../Word/Word-Processor/react/clipboard.md | 31 ++++++++++ .../using-redis-cache-asp-net-core.md | 43 +++++++++++++ .../perform-mail-merge-in-document-editor.md | 31 ++++++++++ .../Word/Word-Processor/react/import.md | 62 +++++++++++++++---- .../Word-Processor/react/restrict-editing.md | 38 ++++++++++++ .../saving-documents/server-side-export.md | 26 ++++++++ .../Word/Word-Processor/react/spell-check.md | 38 +++++++++--- 7 files changed, 248 insertions(+), 21 deletions(-) diff --git a/Document-Processing/Word/Word-Processor/react/clipboard.md b/Document-Processing/Word/Word-Processor/react/clipboard.md index 96aa0313f3..be7eb73f3a 100644 --- a/Document-Processing/Word/Word-Processor/react/clipboard.md +++ b/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`]() 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. 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 a6f9d99a20..cf460153f8 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 @@ -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 diff --git a/Document-Processing/Word/Word-Processor/react/how-to/perform-mail-merge-in-document-editor.md b/Document-Processing/Word/Word-Processor/react/how-to/perform-mail-merge-in-document-editor.md index 3504049c5a..32a82d0355 100644 --- a/Document-Processing/Word/Word-Processor/react/how-to/perform-mail-merge-in-document-editor.md +++ b/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. diff --git a/Document-Processing/Word/Word-Processor/react/import.md b/Document-Processing/Word/Word-Processor/react/import.md index 265384f71b..d8352fbc60 100644 --- a/Document-Processing/Word/Word-Processor/react/import.md +++ b/Document-Processing/Word/Word-Processor/react/import.md @@ -33,17 +33,27 @@ The following example shows how to open SFDT data in Document Editor. 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 +User Selects SFDT File (.sfdt format) ↓ -Document Editor Captures File Input (File picker triggered, .sfdt file selected) +CLIENT: File picker dialog opens to select native SFDT format file ↓ -Client Validates File Format (Checks if file extension is .sfdt) +CLIENT: Document Editor validates file extension is .sfdt ↓ -File Read Directly (FileReader API reads file content without server call) +CLIENT: FileReader API reads SFDT file content from local machine ↓ -Document Editor Opens SFDT (documenteditor.open() method called directly with file data) +CLIENT: Parses file content as JSON string ↓ -Document Rendered Immediately in Editor (User sees native SFDT document displayed in viewport) +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 @@ -69,19 +79,45 @@ The following example shows how to import document from local machine. 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 (DOCX, DOC, DOTX, DOTM, RTF, TXT, XML) +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 ↓ -Document Editor Captures File Input (File picker triggered, non-SFDT file selected) +HTTP Response (SFDT JSON string sent back to client) ↓ -File Sent to Server (XMLHttpRequest POST to Import API endpoint with FormData) +CLIENT: Receives HTTP response with SFDT JSON data ↓ -Server Converts Document (Detects format type, converts to SFDT, serializes to JSON) +CLIENT: Parses JSON response to extract SFDT document object ↓ -Server Returns SFDT JSON Response (Converted document data sent back as response) +CLIENT: Calls documentEditor.open() method with converted SFDT data ↓ -Document Editor Opens SFDT (documenteditor.open() method called with converted SFDT) +CLIENT: Document Editor loads and renders SFDT in viewport ↓ -Document Rendered in Editor (User sees converted document displayed in viewport) +USER: Views imported document fully formatted in Document Editor ``` ## Convert word documents into SFDT diff --git a/Document-Processing/Word/Word-Processor/react/restrict-editing.md b/Document-Processing/Word/Word-Processor/react/restrict-editing.md index c1386140dd..16e8837797 100644 --- a/Document-Processing/Word/Word-Processor/react/restrict-editing.md +++ b/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.  diff --git a/Document-Processing/Word/Word-Processor/react/saving-documents/server-side-export.md b/Document-Processing/Word/Word-Processor/react/saving-documents/server-side-export.md index 9e7be33d57..daf27b6cec 100644 --- a/Document-Processing/Word/Word-Processor/react/saving-documents/server-side-export.md +++ b/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 diff --git a/Document-Processing/Word/Word-Processor/react/spell-check.md b/Document-Processing/Word/Word-Processor/react/spell-check.md index 36bb4f1dc2..f3a334e9a1 100644 --- a/Document-Processing/Word/Word-Processor/react/spell-check.md +++ b/Document-Processing/Word/Word-Processor/react/spell-check.md @@ -84,21 +84,43 @@ For more information on configuring the spell check service, refer to the follow 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 +User Types Text in Document Editor ↓ -Document Editor Captures Input (enableSpellCheck enabled, text detected) +CLIENT: enableSpellCheck property validates text is captured ↓ -Spell Check Service Request (Text sent to configured server URL with languageID) +CLIENT: Document Editor extracts text content for validation ↓ -Server Validates Against Dictionary (Dictionary lookup, misspelled words identified) +CLIENT: Spell Checker prepares HTTP request with languageID parameter ↓ -Returns Misspelled Words & Suggestions (JSON response with errors and suggestions) +CLIENT: Sends text and language configuration to configured server URL ↓ -Client Marks Words with Underline (Squiggly line applied unless removeUnderline is true) +HTTP Request (Text content + languageID sent to server) ↓ -User Right-Clicks → Context Menu or Opens Spell Check Dialog +SERVER: Receives request and loads appropriate language dictionary ↓ -User Applies Correction (Change, Ignore, Ignore All, Add to Dictionary, Change All) +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