Skip to content

1044483-Updated BlazorPlatform UG Changes #4047

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Vellaisamy5301 wants to merge 2 commits into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

1044483-Updated BlazorPlatform UG Changes #4047

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e50d5d1
1044483-changed text-wrapping-style,track-changes, ui-builder-skill, …
Vellaisamy5301 Jul 31, 2026
5bf5933
1044483-changed view file
Vellaisamy5301 Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 17 additions & 17 deletions Document-Processing/Word/Word-Processor/blazor/text-wrapping-style.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
---
layout: post
title: Text Wrapping Style in Blazor DocumentEditor Component | Syncfusion
description: Checkout and learn here all about Text Wrapping Style in Syncfusion Blazor DocumentEditor component and more.
title: Text Wrapping Style in Blazor DOCX Editor Component | Syncfusion
description: Learn here all about Text Wrapping Style in Syncfusion Blazor Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Text Wrapping Style in DocumentEditor
# Text Wrapping Style in Blazor Document Editor Component

Text wrapping refers to how images and shapes are fit with surrounding text in a document. Currently, [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) has only preservation support for image and textbox shape with below wrapping styles.
Text wrapping refers to how images and shapes are fit with surrounding text in a document. Currently, [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) has only preservation support for image and text box shapes with the following wrapping styles.

## In-Line with Text

In this option, the image or shape is placed on the same line surrounding with text like any other word or letter. This image or shape will be automatically moved along with the text while editing, whereas the other options denote that the image or shape stays in a fixed position while the text shifts and wraps around it.
In this option, the image or shape is placed inline with the surrounding text like any other word or letter. This image or shape will be automatically moved along with the text while editing, whereas the other options keep the image or shape in a fixed position while the text shifts and wraps around it.

![view of image with inline wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/inline-textwrapping.PNG)
![View of image with inline wrapping style in Document Editor](images/Text-Wrapping-Style_images/inline-textwrapping.PNG)

## In Front of Text

In this option, the image or shape is placed in front of the text. This can be used to place an image around some text or to add shape to highlight the part in a paragraph.
In this option, the image or shape is placed in front of the text. This can be used to place an image around some text or to add a shape to highlight a part in a paragraph.

![view of image with in front of text wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/infront-textwrapping.PNG)
![View of image with in front of text wrapping style in Document Editor](images/Text-Wrapping-Style_images/infront-textwrapping.PNG)

N> Starting from v18.2.0.x, the in front of wrapping styles are supported.
N> Starting from v18.2.0.x, the in-front-of-text wrapping style is supported.

## Top and Bottom

In this option, Text wraps above and below the image or shape. No text is to the left or right of the image or shape. This can be used for larger images or shapes that occupy most of the width in a document.
In this option, the text wraps above and below the image or shape. No text appears to the left or right of the image or shape. This can be used for large images or shapes that span most of the page width.

N> Starting from v19.1.0.x, the top and bottom wrapping style is supported.

![view of image with top and bottom wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/topandbottom-textwrapping.PNG)
![View of image with top and bottom wrapping style in Document Editor](images/Text-Wrapping-Style_images/topandbottom-textwrapping.PNG)

## Behind

In this option, the image or shape is placed behind the text. This can be used when you need to add a watermark or background image to a document.

![view of image with behind wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/behind-textwrapping.PNG)
![View of image with behind wrapping style in Document Editor](images/Text-Wrapping-Style_images/behind-textwrapping.PNG)

N> Starting from v19.2.0.x, behind text wrapping styles are supported.
N> Starting from v19.2.0.x, the behind text wrapping style is supported.

## Square

In this option, Text wraps around the image or text box in a square shape.
In this option, the text wraps around the image or text box in a square shape.

N> Tight and Through styles will be preserved as square wrapping style in DocumentEditor which is supported from v19.2.0.x.
N> Tight and Through styles will be preserved as the square wrapping style in Document Editor, which is supported from v19.2.0.x.

![view of shape with square wrapping style in DocumentEditor](images/Text-Wrapping-Style_images/square-textwrapping.PNG)
![View of shape with square wrapping style in Document Editor](images/Text-Wrapping-Style_images/square-textwrapping.PNG)
58 changes: 28 additions & 30 deletions Document-Processing/Word/Word-Processor/blazor/track-changes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Track Changes in Blazor DocumentEditor Component | Syncfusion
description: Checkout and learn here all about Track Changes in Syncfusion Blazor DocumentEditor component and more.
title: Track Changes in Blazor DOCX Editor Component | Syncfusion
description: Learn here all about Track Changes in Syncfusion Blazor Document Editor component of Syncfusion Essential JS 2 and more.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Track Changes in Blazor DocumentEditor Component
# Track Changes in Blazor Document Editor Component

Track Changes allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject the modifications. It is a useful tool for managing changes made by several reviewers to the same document. If track changes option is enabled, all editing operations are preserved as revisions in [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor).
Track Changes allows you to keep a record of changes or edits made to a document. You can then choose to accept or reject the modifications. It is a useful tool for managing changes made by several reviewers to the same document. If the track changes option is enabled, all editing operations are preserved as revisions in [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor).

## Enable track changes in Document Editor

Expand All @@ -19,7 +19,7 @@ The following example demonstrates how to enable track changes.
<SfDocumentEditorContainer ID="cont" @ref="container" EnableTrackChanges="true" EnableToolbar="true">
</SfDocumentEditorContainer>
```
>Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then enableTrackChanges will be disabled even if we set EnableTrackChanges="true" in the initial rendering. If you want to enable track changes for all the documents, then we recommend enabling track changes during the document change event. The following example demonstrates how to enable Track changes for the all the Document while Opening.
N> Track changes are document level settings. When opening a document, if the document does not have track changes enabled, then `EnableTrackChanges` is reset to `false` even if we set `EnableTrackChanges="true"` in the initial rendering. If you want to enable track changes for all the documents, we recommend enabling track changes inside the `DocumentChanged` event. The following example demonstrates how to enable Track Changes for all the documents while opening.

```csharp
<SfDocumentEditorContainer @ref="container" Height="590px" EnableToolbar=true>
Expand All @@ -38,14 +38,13 @@ The following example demonstrates how to enable track changes.
};
```

## Show/Hide Revisions Pane

The Show/Hide Revisions Pane feature in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document.

The following example code illustrates how to show/hide the revisions pane.
## Show or Hide Revisions Pane

```typescript
The Show or Hide Revisions Pane feature in the Document Editor allows users to toggle the visibility of the revisions pane, providing flexibility in managing tracked changes within the document.

The following example code illustrates how to show or hide the revisions pane.

```csharp
@using Syncfusion.Blazor.DocumentEditor
<SfDocumentEditorContainer @ref="container" EnableToolbar=true EnableTrackChanges=true>
<DocumentEditorContainerEvents Created="OnLoad"></DocumentEditorContainerEvents>
Expand All @@ -59,13 +58,12 @@ The following example code illustrates how to show/hide the revisions pane.
container.DocumentEditor.ShowRevisions=false; // To hide revisions pane
}
}

```


## Navigate between the tracked changes
## Navigate Between Tracked Changes

The following example demonstrates how to navigate tracked revision programmatically.
The following example demonstrates how to navigate tracked revisions programmatically.

```csharp
/**
Expand All @@ -79,47 +77,47 @@ await container.DocumentEditor.Selection.NavigateNextRevisionAsync();
await container.DocumentEditor.Selection.NavigatePreviousRevisionAsync();
```

## Filtering changes based on user
## Filter Changes by User

In DocumentEditor, we have built-in review panel in which we have provided support for filtering changes based on the user.
In the Document Editor, we have a built-in review panel in which we have provided support for filtering changes based on the user.

![Track changes in Blazor DocumentEditor](images/track-changes.png)
![Track changes in Blazor Document Editor](images/track-changes.png)

## Custom metadata along with author
## Add Custom Metadata with the Author

The Document Editor provides options to customize revisions using [`RevisionSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.DocumentEditorSettingsModel.html#Syncfusion_Blazor_DocumentEditor_DocumentEditorSettingsModel_RevisionSettings). The `CustomData` property allows you to attach additional metadata to tracked revisions in the Word Processor. This metadata can represent roles, tags, or any custom identifier for the revision. To display this metadata along with the author name in the Track Changes pane, you must enable the `ShowCustomDataWithAuthor` property.

The following example code illustrates how to enable and update custom metadata for track changes revisions.

```ts
```csharp
@using Syncfusion.Blazor.DocumentEditor

<SfDocumentEditorContainer @ref="container" Height="590px" DocumentEditorSettings="@settings" EnableTrackChanges="true"></SfDocumentEditorContainer>

@code {
SfDocumentEditorContainer container;
DocumentEditorSettingsModel settings = new DocumentEditorSettingsModel()
{ RevisionSettings= { CustomData = "Developer", ShowCustomDataWithAuthor = true}};
{ RevisionSettings= { CustomData = "Developer", ShowCustomDataWithAuthor = true }};
}
```

The Track Changes pane will display the author name along with the custom metadata, as shown in the screenshot below.

![Custom metadata along with author](images/track-changes-customData.png)

>Note:
* When you export the document as SFDT, the customData value is stored in the revision collection. When you reopen the SFDT, the custom data is automatically restored and displayed in the Track Changes pane.
* Other than SFDT export (e.g. DOCX and other), the customData is not preserved, as it is specific to the Document Editor component.
N> When you export the document as SFDT, the customData value is stored in the revision collection. When you reopen the SFDT, the custom data is automatically restored and displayed in the Track Changes pane.

## Protect the document in track changes only mode
N> Other than SFDT export (e.g., DOCX and others), the customData is not preserved, as it is specific to the Document Editor component.

Document Editor provides support for protecting the document with `RevisionsOnly` protection. In this protection, all the users are allowed to view the document and do their corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes.
## Protect the Document in Track Changes Only Mode

Document editor provides an option to protect and unprotect document using [`EnforceProtectionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_EnforceProtectionAsync_System_String_Syncfusion_Blazor_DocumentEditor_ProtectionType_) and [`StopProtectionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_StopProtectionAsync_System_String_) API.
Document Editor provides support for protecting the document with `RevisionsOnly` protection. In this protection, users can view the document and make their corrections, but they cannot accept or reject any tracked changes in the document. Later, the author can view their corrections and accept or reject the changes.

The following example code illustrates how to enforce and stop protection in Document editor container.
Document Editor provides an option to protect and unprotect the document using [`EnforceProtectionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_EnforceProtectionAsync_System_String_Syncfusion_Blazor_DocumentEditor_ProtectionType_) and [`StopProtectionAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_StopProtectionAsync_System_String_) APIs.

```typescript
The following example code illustrates how to enforce and stop protection in the Document Editor container.

```csharp
@using Syncfusion.Blazor.DocumentEditor

<button @onclick="protectDocument">Protection</button>
Expand All @@ -145,4 +143,4 @@ N> In enforce Protection method, first parameter denotes password and second par

## Online Demo

Explore how to track and review changes in Word documents using the Blazor Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/track-changes?theme=fluent2).
Explore how to track and review changes in Word documents using the Blazor Document Editor in this live [Blazor Track Changes demo](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/track-changes?theme=fluent2).
Loading