Skip to content

1042347: Updated the collaborative, dialog feature and accessibility module #3853

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

1042347: Updated the collaborative, dialog feature and accessibility module #3853

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
26 changes: 15 additions & 11 deletions Document-Processing/Word/Word-Processor/react/accessibility.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Accessibility in React Document editor component | Syncfusion
description: Learn here all about Accessibility in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
control: Accessibility
title: Accessibility in React DOCX Editor component | Syncfusion
description: Learn here all about Accessibility in Syncfusion React Document Editor component of Essential JS 2 and more.
control: Accessibility
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Accessibility in React Document editor component
# Accessibility in React Document Editor component

The accessibility compliance for the [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) component is outlined below.
The accessibility compliance for the [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (also referred to as the Document Editor) component is outlined below.

| Accessibility Criteria | Compatibility |
| -- | -- |
Expand All @@ -24,30 +24,34 @@ The accessibility compliance for the [React DOCX Editor](https://www.syncfusion.
| [Accessibility Checker Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |
| [Axe-core Accessibility Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> |


<style>
.post .post-content img {
display: inline-block;
margin: 0.5em 0;
}
</style>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>

<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>

## Keyboard interaction
## Keyboard Accessibility

For keyboard accessibility, the Document Editor supports a range of [keyboard shortcuts](./keyboard-shortcut) for navigation and editing without a mouse, including tab navigation, cursor movement, and shortcut key combinations for common editing actions such as copy, paste, undo, and redo.

Document editor supports [keyboard shortcuts](./keyboard-shortcut).
The following accessibility compliance summary applies to the `@syncfusion/ej2-react-documenteditor` package.

## Ensuring accessibility
## Ensuring Accessibility

The Document editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
The Document Editor component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.

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

{% previewsample "/document-processing/code-snippet/document-editor/react/accessibility-cs1" %}

## See also
## See Also

- [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> React components](https://ej2.syncfusion.com/react/documentation/common/accessibility)
85 changes: 47 additions & 38 deletions Document-Processing/Word/Word-Processor/react/bookmark.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,95 +1,101 @@
---
layout: post
title: Bookmark in React Document editor component | Syncfusion
description: Learn here all about Bookmark in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
control: Bookmark
title: Bookmark in React DOCX Editor component | Syncfusion
description: Learn here all about Bookmark in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Bookmark
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Bookmark in React Document editor component
# Bookmark in React Document Editor component

Bookmark is a powerful tool that helps you to mark a place in the document to find again easily. You can enter many bookmarks in the document and give each one a unique name to identify easily.

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using built-in hyperlink dialog. You can also delete bookmarks from a document.
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides built-in dialog to add, delete, and navigate bookmarks within the document. To add a bookmark, select a portion of text in the document. After that, jump to the location or add links to it within the document using built-in hyperlink dialog. You can also delete bookmarks from a document.

>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.

## Add bookmark
## Add a Bookmark

Using [`insertBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertbookmark) method, Bookmark can be added to the selected text.
Use the [`insertBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#insertbookmark) method to add a bookmark to the selected text.

```csharp
>The following code snippet assumes that `container` is a reference to the `DocumentEditorContainerComponent` instance declared in your React component.

```typescript
this.container.documentEditor.editor.insertBookmark("Bookmark1");
```

## Select Bookmark

You can select the bookmark in the document using [`selectBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#selectbookmark) method by providing Bookmark name to select as shown in the following code snippet.
You can select the bookmark in the document using [`selectBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/selection#selectbookmark) method by providing the bookmark name to select as shown in the following code snippet.

```csharp
```typescript
this.container.documentEditor.selection.selectBookmark("Bookmark1", true);
```

>Note: Second parameter is optional parameter and it denotes is exclude bookmark start and end from selection. If true, excludes bookmark start and end from selection.
N> The second parameter is optional and it denotes whether to exclude the bookmark start and end from the selection. If true, excludes bookmark start and end from selection.

## Delete Bookmark

You can delete bookmark in the document using [`deleteBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#deletebookmark) method as shown in the following code snippet.
You can delete a bookmark in the document using [`deleteBookmark`](https://ej2.syncfusion.com/react/documentation/api/document-editor/editor#deletebookmark) method as shown in the following code snippet.

```csharp
```typescript
this.container.documentEditor.editor.deleteBookmark("Bookmark1");
```

## Get Bookmark from document
## Get Bookmark from Document

You can get all the bookmarks in the document using [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getbookmarks) method as shown in the following code snippet.
You can get all the bookmarks in the document using the [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getbookmarks) method on the `DocumentEditor` instance as shown in the following code snippet.

```csharp
```typescript
this.container.documentEditor.getBookmarks(false);
```

>Note: Parameter denotes is include hidden bookmarks. If false, ignore hidden bookmark.
N> The boolean parameter denotes whether to include hidden bookmarks. If false, hidden bookmarks are ignored.

## Get Bookmark from selection
## Get Bookmark from Selection

You can get bookmarks in current selection in the document using [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor#getbookmarks) method as shown in the following code snippet.
You can get bookmarks in the current selection in the document using the [`getBookmarks`](https://ej2.syncfusion.com/react/documentation/api/document-editor/index-default#getbookmarks) method on the `Selection` instance as shown in the following code snippet.

```csharp
```typescript
this.container.documentEditor.selection.getBookmarks(false);
```

## Replace bookmark content
## Show or Hide Bookmark

You can replace bookmark content without removing the bookmark start and end for backtracking the bookmark content.
You can show or hide the bookmark indicators around bookmarked items in Document Editor component.

```csharp
this.container.documentEditor.selection.selectBookmark("Bookmark1", true);
this.container.documentEditor.editor.insertText('Hello World')
The following example code illustrates how to show or hide the bookmark indicators around bookmarked items.

```typescript
this.container.documentEditor.documentEditorSettings.showBookmarks = true;
```

You can replace content by removing the bookmark start and end, thus the bookmark content can't be tracked in future.
## Replace Bookmark Content

```csharp
this.container.documentEditor.selection.selectBookmark("Bookmark1");
this.container.documentEditor.editor.insertText('Hello World')
```
### Preserve the Bookmark While Replacing Content

## Show or Hide bookmark
When you pass `true` for the `excludeStartEnd` parameter in `selectBookmark`, the bookmark start and end markers are preserved. The subsequent `insertText` call replaces only the content between the markers, so the bookmark remains intact and can be tracked later.

```typescript
this.container.documentEditor.selection.selectBookmark("Bookmark1", true);
this.container.documentEditor.editor.insertText('Hello World');
```

You can show or hide the show square brackets around bookmarked items in Document editor component.
### Remove the Bookmark While Replacing Content

The following example code illustrates how to show or hide square brackets around bookmarked items.
When you omit the `excludeStartEnd` parameter (or pass `false`), the bookmark start and end markers are included in the selection. The subsequent `insertText` call replaces both the content and the markers, so the bookmark is removed and cannot be tracked later.

```typescript
this.container.documentEditorSettings.showBookmarks = true;
this.container.documentEditor.selection.selectBookmark("Bookmark1");
this.container.documentEditor.editor.insertText('Hello World');
```

## Bookmark Dialog

The following example shows how to open bookmark dialog in document editor.
The following example shows how to open bookmark dialog in Document Editor.

```ts
import * as ReactDOM from 'react-dom';
Expand All @@ -101,6 +107,8 @@ import {
Editor,
BookmarkDialog,
} from '@syncfusion/ej2-react-documenteditor';
import { createRoot } from 'react-dom/client';

DocumentEditorComponent.Inject(SfdtExport, Selection, Editor, BookmarkDialog);
let documenteditor;
function App() {
Expand All @@ -123,11 +131,12 @@ function App() {
);
function showBookmarkDialog() {
//Open Bookmark dialog.
documenteditor.showDialog('Bookmark');
documenteditor.documentEditor.showDialog('Bookmark');
}
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
const root = createRoot(document.getElementById('sample')!);
root.render(<App />);
```

## Online Demo
Expand All @@ -137,4 +146,4 @@ Explore how to insert and manage bookmarks in Word documents using the React Doc
## See Also

* [Feature modules](./feature-module)
* [Bookmark dialog](./dialog#bookmark-dialog)
* [Bookmark dialog](./dialog#bookmark-dialog)
16 changes: 8 additions & 8 deletions Document-Processing/Word/Word-Processor/react/chart.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
---
layout: post
title: Chart in React Document editor component | Syncfusion
description: Learn here all about Chart in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
title: Chart in React DOCX Editor component | Syncfusion
description: Learn here all about Chart in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Chart
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Chart in React Document editor component
# Chart in React Document Editor component

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides chart preservation support. Using Document Editor, you can see the chart reports from your Word document.
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides chart preservation support. Using the Document Editor, you can view chart reports from your Word document.

The following example shows chart preservation in Document Editor.
The following example shows chart preservation in the Document Editor.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -25,12 +25,12 @@ The following example shows chart preservation in Document Editor.
{% include code-snippet/document-editor/react/chart-cs1/index.html %}
{% endhighlight %}
{% endtabs %}

{% previewsample "/document-processing/code-snippet/document-editor/react/chart-cs1" %}

## Supported Chart Types

The following chart types are supported in document editor
The following chart types are supported in the Document Editor:
* Scatter_Markers
* Bubble
* Area
Expand All @@ -53,4 +53,4 @@ The following chart types are supported in document editor

## Online Demo

Explore how to preserve charts in Word documents using the React Document Editor in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/chart).
Explore how to preserve charts in Word documents using the React Document Editor in this [live demo](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/chart).
Loading