Skip to content

1044483-Updated UG Changes in BlazorPlatform- #4041 #4042

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 1 commit into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

1044483-Updated UG Changes in BlazorPlatform- #4041 #4042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 16 additions & 16 deletions Document-Processing/Word/Word-Processor/blazor/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
layout: post
title: Accessibility in Blazor DocumentEditor Component | Syncfusion
description: Checkout and learn here all about Accessibility in Syncfusion Blazor DocumentEditor component and more.
title: Accessibility in Blazor DOCX Editor Component | Syncfusion
description: Check out and learn all about accessibility in Syncfusion Blazor Document Editor component and more.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Accessibility in Blazor DocumentEditor Component
# Accessibility in Blazor Document Editor Component

The [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) that are commonly used to evaluate accessibility.
The [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) component follows the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria#roles) used to evaluate accessibility compliance.

The accessibility compliance for the Blazor Document Editor component is outlined below.

Expand Down Expand Up @@ -42,7 +42,7 @@ The Document Editor supports a wide range of keyboard shortcuts to facilitate co

### Text formatting

The following table lists the default keyboard shortcuts in document editor for formatting text:
The following table lists the default keyboard shortcuts in the Document Editor for formatting text:

| Windows | Mac | Description |
|-----------------|------|-------|
Expand Down Expand Up @@ -132,14 +132,14 @@ The following table lists the default keyboard shortcuts for formatting the para
|--------|-------|-----------|
|<kbd>Ctrl</kbd> + <kbd>P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the document.|

### Edit Operation
### Edit operations

| Windows | Mac | Description |
|---------|------|-----------|
|<kbd>Backspace</kbd> | <kbd>Backspace</kbd> | Deletes one character to the left.|
|<kbd>Delete</kbd> | <kbd>Delete</kbd> | Deletes one character to the right.|
|<kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Z</kbd> | Undo last performed action.|
|<kbd>Ctrl</kbd> + <kbd>Y</kbd> | <kbd>⌘</kbd> + <kbd>Y</kbd> | Redo last undo action.|
|<kbd>Backspace</kbd> | <kbd>Backspace</kbd> | Deletes the character to the left of the cursor.|
|<kbd>Delete</kbd> | <kbd>Delete</kbd> | Deletes the character to the right of the cursor.|
|<kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Z</kbd> | Undoes the last performed action.|
|<kbd>Ctrl</kbd> + <kbd>Y</kbd> | <kbd>⌘</kbd> + <kbd>Y</kbd> | Redoes the last undone action.|

### Insert special characters

Expand All @@ -152,15 +152,15 @@ The following table lists the default keyboard shortcuts for formatting the para

| Windows | Mac | Description |
|--------|-------|-----------|
|<kbd>Ctrl</kbd> + <kbd>F</kbd> | <kbd>⌘</kbd> + <kbd>F</kbd> | Opens options pane.|
|<kbd>Ctrl</kbd> + <kbd>D</kbd> | <kbd>⌘</kbd> + <kbd>D</kbd> | Opens font dialog.|
|<kbd>Ctrl</kbd> + <kbd>K</kbd> | <kbd>⌘</kbd> + <kbd>K</kbd> | Opens hyperlink dialog.|
|<kbd>Ctrl</kbd> + <kbd>F</kbd> | <kbd>⌘</kbd> + <kbd>F</kbd> | Opens the options pane.|
|<kbd>Ctrl</kbd> + <kbd>D</kbd> | <kbd>⌘</kbd> + <kbd>D</kbd> | Opens the font dialog.|
|<kbd>Ctrl</kbd> + <kbd>K</kbd> | <kbd>⌘</kbd> + <kbd>K</kbd> | Opens the hyperlink dialog.|

You can refer to our [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Word Processor example](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) to know how to render and configure the document editor.
Refer to the [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Word Processor example](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) to learn how to render and configure the Document Editor.

## Ensuring accessibility

The Blazor Document Editor component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
The Blazor Document Editor component accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.

The accessibility compliance of the Blazor Document Editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/document-editor) in a new window to evaluate the accessibility of the Document Editor component with accessibility tools.

Expand Down
21 changes: 10 additions & 11 deletions Document-Processing/Word/Word-Processor/blazor/bookmark.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,21 @@
---
layout: post
title: Bookmarks in Blazor DocumentEditor Component | Syncfusion
title: Bookmarks in Blazor DOCX Editor Component | Syncfusion
description: Learn how to add, navigate, and manage bookmarks in the Syncfusion Blazor Document Editor component both through the UI and programmatically.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Bookmarks in Blazor DocumentEditor Component
# Bookmarks in Blazor Document Editor Component

A bookmark is a powerful tool that marks a specific place in a document so you can easily find it again. You can insert multiple bookmarks in a document and give each one a unique name for easy identification.
A bookmark marks a specific place in a document so you can easily find it again. You can insert multiple bookmarks in a document and give each one a unique name for easy identification.

The [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) provides two ways to manage bookmarks: through a built-in dialog or programmatically using API methods. Once a bookmark is added, you can jump to its location or create hyperlinks to it.
The [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) provides two ways to manage bookmarks: through a built-in dialog or programmatically using API methods. Once a bookmark is added, you can jump to its location or create hyperlinks to it.

N>Bookmark names need to begin with a letter. They can include both numbers and letters, but not spaces. To separate the words, use an underscore. Bookmark names starting with an underscore are called hidden bookmarks. For example, bookmarks generated for table of contents.

The bookmark dialog can be opened using the Bookmark option in the toolbar. For more details on bookmark functionality, refer to the [`Blazor Word Processor - Bookmark`](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/hyperlinks-and-bookmarks) example.
N> Bookmark names need to begin with a letter. They can include letters and numbers, but not spaces. To separate words in a name, use an underscore. Bookmark names starting with an underscore are called hidden bookmarks. For example, bookmarks generated for the table of contents.

Open the bookmark dialog using the Bookmark option in the toolbar. For more details on bookmark functionality, refer to the [`Blazor Word Processor - Bookmark`](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/hyperlinks-and-bookmarks) example.

## Add a bookmark

Expand All @@ -34,7 +33,7 @@ Use the [`SelectBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion
await container.DocumentEditor.Selection.SelectBookmarkAsync("Bookmark1");
```

## Delete a Bookmark
## Delete a bookmark

Use the [`DeleteBookmarkAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_DeleteBookmarkAsync_System_String_) method to delete a bookmark by its name.

Expand All @@ -53,6 +52,6 @@ await container.DocumentEditor.Selection.GetBookmarksAsync(true);

N> The boolean parameter of `GetBookmarksAsync` specifies whether to include hidden bookmarks in the result. If `false`, hidden bookmarks are excluded.

## Online Demo
## Online demo

Explore how to insert and manage bookmarks in Word documents using the Blazor Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/hyperlinks-and-bookmarks?theme=fluent2).
Explore how to insert and manage bookmarks in Word documents using the Blazor Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/hyperlinks-and-bookmarks?theme=fluent2).
18 changes: 9 additions & 9 deletions Document-Processing/Word/Word-Processor/blazor/clipboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,28 +1,28 @@
---
layout: post
title: Clipboard in Blazor DocumentEditor Component | Syncfusion
title: Clipboard in Blazor DOCX Editor Component | Syncfusion
description: Learn how to perform cut, copy, and paste clipboard operations in the Syncfusion Blazor Document Editor component, both programmatically and through the UI.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Clipboard in Blazor DocumentEditor Component
# Clipboard in Blazor Document Editor Component

The [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) provides built-in support for clipboard operations, including cut, copy, and paste. These actions can be performed through the toolbar, context menus, standard keyboard shortcuts, or programmatically via the component's APIs.
The [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) provides built-in support for clipboard operations, including cut, copy, and paste. These actions can be performed through the toolbar, context menus, standard keyboard shortcuts, or programmatically via the component's APIs.

## Local vs. System Clipboard

The Document Editor supports two clipboard modes to handle content transfer:

To copy or paste contents from other applications, the system clipboard should be used. To copy or paste the contents within the Word processor component, use local clipboard.
To copy or paste content from other applications, use the system clipboard. To copy or paste content within the Document Editor component, use the local clipboard.

Let’s see how to invoke each clipboard operations using code.
Let’s see how to invoke each clipboard operation using code.

* **Local Clipboard (Default)**: This is a built-in clipboard that is optimized for performance when cutting, copying, and pasting content **within** the editor itself. It is enabled by default.
* **System Clipboard**: This is the operating system's standard clipboard, which allows for transferring content between the Document Editor and other applications.

To use the system clipboard, set the [`EnableLocalPaste`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_EnableLocalPaste) property to `false`. When this property is false, all clipboard operations will use the system clipboard.
To use the system clipboard, set the [`EnableLocalPaste`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.SfDocumentEditor.html#Syncfusion_Blazor_DocumentEditor_SfDocumentEditor_EnableLocalPaste) property to `false`. When this property is `false`, all clipboard operations will use the system clipboard.

## Programmatic Clipboard Operations

Expand All @@ -34,7 +34,7 @@ You can programmatically invoke clipboard operations using the editor's API meth
<button @onclick="CopyClick">Copy</button>
<button @onclick="CutClick">Cut</button>
<button @onclick="PasteClick">Paste</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar=true>
<SfDocumentEditorContainer @ref="container" EnableToolbar="true">
</SfDocumentEditorContainer>

@code {
Expand Down Expand Up @@ -71,6 +71,6 @@ The [`PasteAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Docum
* If `true` (default), it pastes from the editor's local clipboard.
* If `false`, it pastes from the system clipboard.

N> When you paste content from an external source into the Document Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer [here](./unsupported-features) to learn more about unsupported elements.
N> When you paste content from an external source into the Document Editor, some formatting or elements may not appear as expected because certain elements are not supported. Refer to the [unsupported features](./unsupported-features) documentation to learn more about unsupported elements.

Explore the [Blazor Word Processor example](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/default-functionalities) to see how to render and configure the Document Editor.
34 changes: 17 additions & 17 deletions Document-Processing/Word/Word-Processor/blazor/comments.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
layout: post
title: Comments in Blazor DocumentEditor Component | Syncfusion
title: Comments in Blazor DOCX Editor Component | Syncfusion
description: Learn how to add, navigate, reply to, and manage comments in the Syncfusion Blazor Document Editor component, including how to use comments-only protection.
platform: document-processing
control: DocumentEditor
control: Document Editor
documentation: ug
---

# Comments in Blazor DocumentEditor Component
# Comments in Blazor Document Editor Component

The [Blazor DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) provides comprehensive support for adding, navigating, and managing comments within a document. These features facilitate collaborative review and feedback cycles. Operations can be performed both through the built-in user interface and programmatically using APIs.
The [Blazor Document Editor](https://www.syncfusion.com/docx-editor-sdk/blazor-docx-editor) (Document Editor) provides comprehensive support for adding, navigating, and managing comments within a document. These features facilitate collaborative review and feedback cycles. Operations can be performed both through the built-in user interface and programmatically using APIs.

## Add a new comment

Using [`InsertCommentAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertCommentAsync_System_String_) method, comments can be inserted to the selected text.
Use the [`InsertCommentAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_InsertCommentAsync_System_String_) method to insert a comment for the selected text.

```csharp
await container.DocumentEditor.Editor.InsertCommentAsync("Test comment");
```

## Comment navigation

Next and previous comments can be navigated using the below code snippet.
Navigate to the next or previous comment using the following code snippet.

```csharp
//Navigate to next comment
Expand All @@ -33,33 +33,33 @@ await container.DocumentEditor.Selection.NavigatePreviousCommentAsync();

## Delete comment

You can delete current comment in the document using [`DeleteCommentsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_DeleteCommentAsync) method as shown in the following code snippet.
You can delete the current comment in the document using the [`DeleteCommentAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_DeleteCommentAsync) method as shown in the following code snippet.

```csharp
await container.DocumentEditor.Editor.DeleteCommentAsync();
```

## Delete all comment
## Delete all comments

You can delete all the comments in the document using [`DeleteAllCommentsAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DocumentEditor.EditorModule.html#Syncfusion_Blazor_DocumentEditor_EditorModule_DeleteAllCommentsAsync) method as shown in the following code snippet.

```csharp
await container.DocumentEditor.Editor.DeleteAllCommentsAsync();
```

## Protect the Document in Comments-Only Mode
## Protect the document in comments-only mode

The Document Editor supports a special protection mode that restricts user actions to only adding or editing comments. When `CommentsOnly` protection is active, users cannot make changes to the document's content.
The Document Editor supports a special protection mode that restricts user actions to adding or editing comments only. When `CommentsOnly` protection is active, users cannot change the document content.

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.
The Document Editor provides APIs 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_).

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 the Document Editor container.

```csharp
@using Syncfusion.Blazor.DocumentEditor

<button @onclick="protectDocument">Protection</button>
<SfDocumentEditorContainer @ref="container" EnableToolbar=true></SfDocumentEditorContainer>
<SfDocumentEditorContainer @ref="container" EnableToolbar="true"></SfDocumentEditorContainer>

@code {
SfDocumentEditorContainer container;
Expand All @@ -75,10 +75,10 @@ The following example code illustrates how to enforce and stop protection in Doc

Comment only protection can be enabled in UI by using `Restrict Editing pane`

![Enable comment only protection](images/commentsonly.png)
![Enable comments-only protection](images/commentsonly.png)

N> In enforce Protection method, first parameter denotes password and second parameter denotes protection type. Possible values of protection type are `NoProtection |ReadOnly |FormFieldsOnly |CommentsOnly`. In stop protection method, parameter denotes the password.
N> In the `EnforceProtection` method, the first parameter is the password and the second parameter is the protection type. Possible values of protection type are `NoProtection | ReadOnly | FormFieldsOnly | CommentsOnly`. In the `StopProtection` method, the parameter is the password.

## Online Demo
## Online demo

Explore how to add, view, and manage comments in Word documents using the Blazor Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/comments?theme=fluent2).
Explore how to add, view, and manage comments in Word documents using the Blazor Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/blazor-server/document-editor/comments?theme=fluent2).
Loading