Merge pull request #3892 from syncfusion-content/1043289-documentUpdate

1043289-Update  Documentation in React Platform

Author: Suriya-Murugan

Document-Processing/Word/Word-Processor/react/how-to/customize-font-family-drop-down.md

@@ -1,16 +1,16 @@
 ---
 layout: post
-title: Customize font dropdown in React Document Editor | Syncfusion
-description: Learn here all about Customize font family drop down in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
+title: Customize font dropdown in React DOCX Editor | Syncfusion
+description: Learn here all about Customize font family drop down in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
 control: Customize font family drop down 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize font family drop down in React Document editor component
+# Customize font family drop down in React Document Editor component
 
-[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides an options to customize the font family drop down list values using [`fontfamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts which are added in fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed on font drop down list of text properties pane and font dialog.
+[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides options to customize the font family drop-down list values using [`fontFamilies`](https://ej2.syncfusion.com/react/documentation/api/document-editor/documentEditorSettingsModel#fontfamilies) in Document editor settings. Fonts added in the fontFamilies of [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#documenteditorsettings) will be displayed in the font drop-down list of the Text Properties pane and the Font dialog.
 
 Similarly, you can use [`documentEditorSettings`](https://ej2.syncfusion.com/react/documentation/api/document-editor#documenteditorsettings) property for DocumentEditor also.
 
@@ -25,7 +25,7 @@ import {
 } from '@syncfusion/ej2-react-documenteditor';
 DocumentEditorContainerComponent.Inject(Toolbar);
 function App() {
-  // Add required font families to list it in font drop down
+  // Add the required font families to list them in the font drop-down
   let fontFamilies = {
     fontFamilies: ['Algerian', 'Arial', 'Calibri', 'Cambria'],
   };
@@ -43,8 +43,8 @@ export default App;
 ReactDOM.render(<App />, document.getElementById('sample'));
 ```
 
-> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
+N> The Web API hosted link `https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/` utilized in the Document Editor's serviceUrl property is intended solely for demonstration and evaluation purposes. For production deployment, please host your own web service with your required server configurations. You can refer and reuse the [GitHub Web Service example](https://github.com/SyncfusionExamples/EJ2-DocumentEditor-WebServices) or [Docker image](https://hub.docker.com/r/syncfusion/word-processor-server) for hosting your own web service and use for the serviceUrl property.
 
-Output will be like below:
+The output will be as shown below:
 
 ![Font](../images/font-family.png)

Document-Processing/Word/Word-Processor/react/how-to/customize-ribbon.md

@@ -1,16 +1,16 @@
 ---
 layout: post
-title: Customize Ribbon in React Document Editor | Syncfusion
+title: Customize Ribbon in React DOCX Editor | Syncfusion
 description: Learn how to customize the ribbon in Syncfusion React Document Editor - file menu, backstage, tabs, groups, and items.
 platform: document-processing
 control: Ribbon Customization
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize Ribbon in React Document editor component
+# Customize Ribbon in React Document Editor component
 
-The [React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides an extensive and flexible API to customize the built-in ribbon UI. You can:
+The [React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) provides a rich and flexible API to customize the built-in ribbon UI. You can:
 
 - Customize the File menu.
 - Add the Backstage menu instead of File menu.
@@ -22,7 +22,7 @@ Below are detailed examples for each ribbon customization scenario.
 
 ## File Menu Customization
 
-Document Editor provides APIs to remove existing File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#filemenuitems) property.
+Document Editor provides APIs to remove existing built-in File menu items and add new custom items based on your requirements. You can modify the File menu using the [`fileMenuItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#filemenuitems) property.
 
 In the example below, the "Open" and "Export" items have been removed from the File Menu Items, and new custom items have been added.
 
@@ -116,17 +116,17 @@ root.render(<Default />);
 ```
 {% endraw %}
 
-Refer this documentation know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
+Refer to this documentation to know more about [`backstage items`](https://ej2.syncfusion.com/documentation/ribbon/backstage)
 
 ## Tab Customization
 
 You can customize the ribbon tabs in the Document Editor by showing, hiding, or adding tabs according to your application's requirements.
 
 ### Show/Hide Tab
 
-Document editor provides the [`showTab`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using existing `RibbonTabType` and `tabId`.
+Document editor provides the [`showTab`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showtab) API to show and hide the existing tab using a `RibbonTabType` and `tabId`.
 
-The following code example how to show/hide existing tab using existing tab type and tab id.
+The following code example shows how to show/hide an existing tab using the existing tab type and tab id.
 
 ```ts
 // To hide the Home tab using the built-in `RibbonTabType`
@@ -302,9 +302,9 @@ You can customize individual items within ribbon groups. This includes showing,
 
 ### Show/Hide Item
 
-Using [`showItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showitems) API in Document editor ribbon to enable/disable the existing item. Here, you can specify the item Id or [`RibbonItemInfo`].
+Using the [`showItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#showitems) API in the Document Editor ribbon to show/hide the existing item. Here, you can specify the item Id or [`RibbonItemInfo`].
 
-The following code example show how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#ribboniteminfo).
+The following code example shows how to show/hide the item using item Id or [`RibbonItemInfo`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#ribboniteminfo).
 
 ```ts
 // To hide the Bold and Italic items using ribbon item information
@@ -319,7 +319,7 @@ container.current.ribbon.showItems('custom_item', false);
 
 ### Enable/Disable Item
 
-Using [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#enableitems) API in Document editor ribbon to enable/disable the existing item.
+Using the [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/ribbon#enableitems) API in the Document Editor ribbon to enable/disable the existing item.
 
 ```ts
 // To disable the underline using ribbon item info
@@ -402,4 +402,4 @@ Explore how to customize the ribbon in the React Document Editor for working wit
 
 ## Related Links
 
-- [File menu Customization Demo](https://ej2.syncfusion.com/demos#/material/document-editor/ribbon-customization)
+- [File Menu Customization Demo](https://document.syncfusion.com/demos/docx-editor/react/#/tailwind3/document-editor/ribbon-customization)

Document-Processing/Word/Word-Processor/react/how-to/customize-tool-bar.md

@@ -1,24 +1,24 @@
 ---
 layout: post
-title: Customize tool bar in React Document editor component | Syncfusion
-description: Learn here all about Customize tool bar in Syncfusion React Document editor component of Syncfusion Essential JS 2 and more.
+title: Customize tool bar in React DOCX Editor component | Syncfusion
+description: Learn here all about Customize tool bar in Syncfusion React Document Editor component of Syncfusion Essential JS 2 and more.
 control: Customize tool bar 
 platform: document-processing
 documentation: ug
 domainurl: ##DomainURL##
 ---
 
-# Customize tool bar in React Document editor component
+# Customize tool bar in React Document Editor component
 
 ## How to customize existing toolbar in DocumentEditorContainer
 
-[React DOCX Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container allows you to customize(add, show, hide, enable, and disable) existing items in a toolbar.
+[React Document Editor](https://www.syncfusion.com/docx-editor-sdk/react-docx-editor) (Document Editor) Container allows you to customize (add, show, hide, enable, and disable) existing items in a toolbar.
 
-* Add - New items can defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel/) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs/).
+* Add - New items can be defined by [`CustomToolbarItemModel`](https://ej2.syncfusion.com/react/documentation/api/document-editor/customToolbarItemModel) and with existing items in [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Newly added item click action can be defined in [`toolbarClick`](https://ej2.syncfusion.com/react/documentation/api/toolbar/clickEventArgs).
 
-* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/document-editor/toolbarItem/).
+* Show, Hide - Existing items can be shown or hidden using the [`toolbarItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container#toolbaritems) property. Pre-defined toolbar items are available with [`ToolbarItem`](https://ej2.syncfusion.com/react/documentation/api/document-editor/toolbarItem).
 
-* Enable, Disable -  Toolbar items can be enabled or disable using [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/toolbar#enableItems)
+* Enable, Disable -  Toolbar items can be enabled or disabled using [`enableItems`](https://ej2.syncfusion.com/react/documentation/api/document-editor-container/toolbar#enableItems)
 
 {% raw %}
 ```ts
@@ -74,16 +74,9 @@ function App() {
   function onToolbarClick(args) {
     switch (args.item.id) {
       case 'save':
-        //Save the document(Download the document)
+        //Save the document (Download the document)
         container.documentEditor.save('sample', 'Docx');
         break;
-      default:
-        break;
-    }
-  }
-
-  function onToolbarClick(args) {
-    switch (args.item.id) {
       case 'Custom':
         //Disable image toolbar item.
         container.toolbar.enableItems(4, false);
@@ -116,7 +109,7 @@ function App() {
         height={'590px'}
         serviceUrl="https://ej2services.syncfusion.com/production/web-services/api/documenteditor/"
         toolbarItems={items}
-        toolbarClick={onToolbarClick.bind(this)}
+        toolbarClick={onToolbarClick}
         enableToolbar={true}
       />
     </div>
@@ -128,7 +121,7 @@ createRoot(document.getElementById('sample')).render(<App />);
 ```
 {% endraw %}
 
->Note: Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
+N> Default value of `toolbarItems` is `['New', 'Open', 'Separator', 'Undo', 'Redo', 'Separator', 'Image', 'Table', 'Hyperlink', 'Bookmark', 'TableOfContents', 'Separator', 'Header', 'Footer', 'PageSetup', 'PageNumber', 'Break', 'InsertFootnote', 'InsertEndnote', 'Separator', 'Find', 'Separator', 'Comments', 'TrackChanges', 'Separator', 'LocalClipboard', 'RestrictEditing', 'Separator', 'FormFields', 'UpdateFields','ContentControl']`.
 
 ## Online Demo