Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
28 changes: 14 additions & 14 deletions Document-Processing/Word/Word-Processor/react/paragraph-format.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
---
layout: post
title: Paragraph format in React Document editor component | Syncfusion
description: Learn here all about Paragraph format in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
title: Paragraph format in React DOCX Editor component | Syncfusion
description: Learn about paragraph formatting in the Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: Paragraph format
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# Paragraph format in React Document editor component
# Paragraph format in React Document Editor component

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) supports various paragraph formatting options such as text alignment, indentation, paragraph spacing, and more.

## Indentation

Expand All @@ -23,23 +23,23 @@ documenteditor.selection.paragraphFormat.rightIndent= 24;

## Special indentation

You can define special indent for first line of the paragraph using the following sample code.
You can define a special indent for the first line of the paragraph using the following sample code.

```ts
documenteditor.selection.paragraphFormat.firstLineIndent= 24;
```

## Increase indent

You can increase the left indent of selected paragraphs by a factor of 36 points using the following sample code.
You can increase the left indent of selected paragraphs by 36 points using the following sample code.

```ts
documenteditor.editor.increaseIndent()
```

## Decrease indent

You can decrease the left indent of selected paragraphs by a factor of 36 points using the following sample code.
You can decrease the left indent of selected paragraphs by 36 points using the following sample code.

```ts
documenteditor.editor.decreaseIndent()
Expand Down Expand Up @@ -87,11 +87,11 @@ documenteditor.selection.paragraphFormat.spaceBeforeAuto = true;
documenteditor.selection.paragraphFormat.spaceAfterAuto = true;
```

>Note: If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered.
N>: If auto spacing property is enabled, then value defined in the `beforeSpacing` and `afterSpacing` property will not be considered.

## Paragraph Border
## Paragraph border

You can apply borders to the paragraphs in a Word document. Using borders, decorate the paragraphs to set them apart from other paragraphs in the document.
You can apply borders to the paragraphs in a Word document. Using borders, you can decorate the paragraphs to set them apart from other paragraphs in the document.

The following example code illustrates how to apply box border for the selected paragraphs.

Expand All @@ -117,7 +117,7 @@ documenteditor.selection.paragraphFormat.borders.bottom.lineWidth = 3;
documenteditor.selection.paragraphFormat.borders.bottom.color = "#000000";
```

Note: At present, the Document editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document.
N> At present, the Document Editor component displays all the border styles as single line. But you can apply any border style and get the proper display in Microsoft Word app when opening the exported Word document.

## Pagination properties

Expand All @@ -137,7 +137,7 @@ documenteditor.selection.paragraphFormat.keepLinesTogether = true;

## Show or Hide Paragraph marks

You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document editor component. These marks help identify the start and end of a paragraph and all the hidden formatting symbols in a Word document.
You can show or hide the hidden formatting symbols like spaces, tab, paragraph marks, and breaks in Document Editor component. These marks indicate the start and end of a paragraph, as well as all the hidden formatting symbols in a Word document.

The following example code illustrates how to show or hide paragraph marks.

Expand All @@ -159,7 +159,7 @@ import {
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
import { DropDownButtonComponent, ItemModel } from '@syncfusion/ej2-react-splitbuttons';

//Inject require modules.
//Inject required modules.
DocumentEditorComponent.Inject(Selection, Editor, EditorHistory, ContextMenu);
function App() {
let documenteditor: DocumentEditorComponent;
Expand Down Expand Up @@ -315,7 +315,7 @@ ReactDOM.render(<App />, document.getElementById('sample'));

## Online Demo

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

## See Also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@ documentation: ug
domainurl: ##DomainURL##
---

# Unsupported Features in React DOCX Editor
# Unsupported features in React Document Editor

This section describes the unsupported elements in [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor)
This section describes the unsupported elements in [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor).

## Document formatting

Expand All @@ -19,25 +19,25 @@ This section describes the unsupported elements in [React DOCX Editor](https://w
| Paragraph Properties | Shading | No |
| | Mirror indent | No |
| | Suppress line numbers | No |
| | Dont hyphenate | No |
| | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
| Text Properties | Shading | No |
| | Position | No |
| | Font kerning | No |
| | Ligatures | No |
| | Number spacing | No |
| | Number forms | No |
| | Stylistic sets | No |
| | Contextual alternates| No |
| | Don't hyphenate | No |
| | Border styles (except dotted and dashed; other styles are rendered as solid) | Partial |
| Text Properties | Shading | No |
| | Position | No |
| | Font kerning | No |
| | Ligatures | No |
| | Number spacing | No |
| | Number forms | No |
| | Stylistic sets | No |
| | Contextual alternates | No |
| | Text Direction (Top to Bottom, Bottom to Top) | No |
| | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
| | Border styles (except dotted and dashed; other styles are rendered as solid) | Partial |
| Section Formatting | Mirror margins | No |
| | Gutter | No |
| | Line numbers | No |
| | Bi-direction | No |
| Page background | Page background color or image | No |
| Watermark | Text and Picture watermark| No |
| Table Format | Border styles (*Except dotted and dashed; other styles are rendered as solid*) | Partial |
| Watermark | Text and Picture watermark | No |
| Table Format | Border styles (except dotted and dashed; other styles are rendered as solid) | Partial |

## Word Document Elements

Expand All @@ -49,9 +49,9 @@ This section describes the unsupported elements in [React DOCX Editor](https://w
| Ink/Draw | No |
| Video or audio files | No |
| Macros | No |
| Models, Smart-Art, and Charts | [Supported Charts](https://help.syncfusion.com/document-processing/word/word-processor/react/chart) |
| Shapes, Textboxes, and WordArt | [Supported shapes](https://help.syncfusion.com/document-processing/word/word-processor/react/shapes#supported-shapes) *(Shape Properties: Fill types, borders, rotation and effects are not supported) |
| Models, SmartArt, and Charts | [Supported Charts](https://help.syncfusion.com/document-processing/word/word-processor/react/chart) |
| Shapes, Textboxes, and WordArt | [Supported shapes](https://help.syncfusion.com/document-processing/word/word-processor/react/shapes#supported-shapes) (Shape Properties: Fill types, borders, rotation, and effects are not supported) |
| Signature line | No |
| Special Characters, Symbols, Equations | No |
| Built-in and custom document properties | No |
| Comment reactions | No
| Comment reactions | No |
26 changes: 13 additions & 13 deletions Document-Processing/Word/Word-Processor/react/view.md
Original file line number Diff line number Diff line change
@@ -1,34 +1,34 @@
---
layout: post
title: View in React Document editor component | Syncfusion
description: Learn here all about View in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
title: View in the React DOCX Editor component | Syncfusion
description: Learn here all about view options in the Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
control: View
platform: document-processing
documentation: ug
domainurl: ##DomainURL##
---

# View in React Document Editor Component
# View in the React Document Editor component

## Web Layout
## Web layout

[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container component allows you to change the view to web layout and print using the [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/react/documentation/api/document-editor/layoutType/).
[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container component allows you to change the view to a web layout or print layout using the [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#layouttype) property with the supported [`LayoutType`](https://ej2.syncfusion.com/react/documentation/api/document-editor/layoutType).

```
<DocumentEditorContainerComponent id="container" layoutType={'Continuous'} enableToolbar={true}/>
```

>Note: Default value of [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#layouttype) in Document Editor Container component is [`Pages`](https://ej2.syncfusion.com/react/documentation/api/document-editor/layoutType/).
N> The default value of [`layoutType`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#layouttype) in the Document Editor Container component is [`Pages`](https://ej2.syncfusion.com/react/documentation/api/document-editor/layoutType).

### Online Demo

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

## Ruler

Using ruler we can refer to setting specific margins, tab stops, or indentations within a document to ensure consistent formatting in Document Editor.
The ruler helps you set specific margins, tab stops, and indentations within a document to ensure consistent formatting in the Document Editor.

The following example illustrates how to enable ruler in Document Editor
The following example illustrates how to enable the ruler in the Document Editor.

{% tabs %}
{% highlight js tabtitle="index.jsx" %}
Expand All @@ -48,11 +48,11 @@ The following example illustrates how to enable ruler in Document Editor

### Online Demo

Explore how to use the ruler in the React Document Editor for working with Word documents in this live demo [here](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/ruler).
Explore how to use the ruler in the React Document Editor for working with Word documents in this [live demo](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/ruler).

## Heading Navigation Pane
## Heading Navigation Pane

Using the heading navigation pane allows users to swiftly navigate documents by heading, enhancing their ability to move through the document efficiently.
The heading navigation pane allows users to quickly navigate documents by heading, making it easier to move through the document.

The following example demonstrates how to enable the heading navigation pane in a document editor.

Expand Down Expand Up @@ -85,4 +85,4 @@ ReactDOM.render(<App />, document.getElementById('root'));

### Online Demo

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