[update] grammar and API formatting in docs guides

docs/angular_integration.md

@@ -18,14 +18,14 @@ DHTMLX Spreadsheet is compatible with **Angular**. We have prepared code example
 Before you start to create a new project, install [**Angular CLI**](https://angular.dev/tools/cli) and [**Node.js**](https://nodejs.org/en/).
 :::
 
-Create a new **my-angular-spreadsheet-app** project using Angular CLI. Run the following command for this purpose:
+Create a new *my-angular-spreadsheet-app* project using Angular CLI. Run the following command:
 
 ~~~json
 ng new my-angular-spreadsheet-app
 ~~~
 
 :::note
-If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating new Angular app!
+If you want to follow this guide, disable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering) when creating a new Angular app.
 :::
 
 The command above installs all the necessary tools, so you don't need to run any additional commands.
@@ -45,25 +45,25 @@ yarn
 yarn start
 ~~~
 
-The app should run on a localhost (for instance `http://localhost:3000`).
+The app should run on localhost (for instance `http://localhost:3000`).
 
 ## Creating Spreadsheet
 
-Now you should get the DHTMLX Spreadsheet source code. First of all, stop the app and proceed with installing the Spreadsheet package.
+Now you should get the DHTMLX Spreadsheet source code. First, stop the app and install the Spreadsheet package.
 
 ### Step 1. Package installation
 
-Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow steps mentioned in the README file. Note that trial Spreadsheet is available 30 days only.
+Download the [**trial Spreadsheet package**](how_to_start.md#installing-spreadsheet-via-npm-or-yarn) and follow the steps in the README file. Note that trial Spreadsheet is available for 30 days only.
 
 ### Step 2. Component creation
 
-Now you need to create an Angular component, to add Spreadsheet into the application. Create  the **spreadsheet** folder in the **src/app/** directory, add a new file into it and name it **spreadsheet.component.ts**. Then complete the steps described below.
+Now you need to create an Angular component to add Spreadsheet into the application. Create the *spreadsheet* folder in the *src/app/* directory, add a new file into it and name it *spreadsheet.component.ts*. Then complete the steps described below.
 
 #### Importing source files
 
 Open the file and import Spreadsheet source files. Note that:
 
-- if you use PRO version and install the Spreadsheet package from a local folder, the imported path looks like this:
+- if you use the PRO version and install the Spreadsheet package from a local folder, the imported path looks like this:
 
 ~~~jsx
 import { Spreadsheet } from 'dhx-spreadsheet-package';
@@ -111,7 +111,7 @@ export class SpreadsheetComponent implements OnInit, OnDestroy {
 
 #### Adding styles
 
-To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the **spreadsheet.component.css** file in the **src/app/spreadsheet/** directory and specify important styles for Spreadsheet and its container:
+To display Spreadsheet correctly, you need to provide the corresponding styles. For this purpose, you can create the *spreadsheet.component.css* file in the *src/app/spreadsheet/* directory and specify important styles for Spreadsheet and its container:
 
 ~~~css title="spreadsheet.component.css"
 /* import Spreadsheet styles */
@@ -133,7 +133,7 @@ body {
 
 #### Loading data
 
-To add data into Spreadsheet, you need to provide a data set. You can create the **data.ts** file in the **src/app/spreadsheet/** directory and add some data into it:
+To add data into Spreadsheet, you need to provide a data set. You can create the *data.ts* file in the *src/app/spreadsheet/* directory and add some data into it:
 
 ~~~jsx title="data.ts"
 export function getData(): any {
@@ -178,7 +178,7 @@ export function getData(): any {
 }
 ~~~
 
-Then open the ***spreadsheet.component.ts*** file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below.
+Then open the *spreadsheet.component.ts* file. Import the file with data and apply it using the [`parse()`](api/spreadsheet_parse_method.md) method within the `ngOnInit()` method, as shown below.
 
 ~~~jsx {2,18,21} title="spreadsheet.component.ts"
 import { Spreadsheet } from "@dhx/trial-spreadsheet";
@@ -210,13 +210,13 @@ export class SpreadsheetComponent implements OnInit, OnDestroy {
 }
 ~~~
 
-Now the Spreadsheet component is ready to use. When the element will be added to the page, it will initialize the Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties.
+Now the Spreadsheet component is ready to use. When the element is added to the page, it initializes Spreadsheet with data. You can provide necessary configuration settings as well. Visit our [Spreadsheet API docs](api/overview/events_overview.md) to check the full list of available properties.
 
 #### Handling events
 
-When a user makes some action in the Spreadsheet, it invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
+When a user performs an action in Spreadsheet, the widget invokes an event. You can use these events to detect the action and run the desired code for it. See the [full list of events](api/overview/events_overview.md).
 
-Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method as in:
+Open the *spreadsheet.component.ts* file and complete the `ngOnInit()` method as in:
 
 ~~~jsx {5-8} title="spreadsheet.component.ts"
 // ...
@@ -236,7 +236,7 @@ ngOnDestroy() {
 
 ### Step 3. Adding Spreadsheet into the app
 
-To add the ***SpreadsheetComponent*** component into the app, open the ***src/app/app.component.ts*** file and replace the default code with the following one:
+To add the `SpreadsheetComponent` component into the app, open the *src/app/app.component.ts* file and replace the default code with the following one:
 
 ~~~jsx {5} title="app.component.ts"
 import { Component } from "@angular/core";
@@ -250,7 +250,7 @@ export class AppComponent {
 }
 ~~~
 
-Then create the ***app.module.ts*** file in the ***src/app/*** directory and specify the *SpreadsheetComponent* as shown below:
+Then create the *app.module.ts* file in the *src/app/* directory and specify the `SpreadsheetComponent` as shown below:
 
 ~~~jsx {4-5,8} title="app.module.ts"
 import { NgModule } from "@angular/core";
@@ -267,7 +267,7 @@ import { SpreadsheetComponent } from "./spreadsheet/spreadsheet.component";
 export class AppModule {}
 ~~~
 
-The last step is to open the ***src/main.ts*** file and replace the existing code with the following one:
+The last step is to open the *src/main.ts* file and replace the existing code with the following one:
 
 ~~~jsx title="main.ts"
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
@@ -281,4 +281,4 @@ After that, you can start the app to see Spreadsheet loaded with data on a page.
 
 ![DHTMLX Spreadsheet initialized with sample data in an Angular application](/img/integrations/trial_spreadsheet.png)
 
-Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. The final example you can find on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo).
+Now you know how to integrate DHTMLX Spreadsheet with Angular. You can customize the code according to your specific requirements. You can find the final example on [**GitHub**](https://github.com/DHTMLX/angular-spreadsheet-demo).

docs/awaitredraw.md

@@ -8,7 +8,7 @@ description: You can explore the AwaitRedraw helper in the documentation of the
 
 Some API methods of DHTMLX Spreadsheet take effect only after the component is rendered on the page. In some cases this can take a moment, so you need to wait until the browser completes rendering before running the next piece of code.
 
-For such cases, you can use the **dhx.awaitRedraw** helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering.
+For such cases, you can use the `dhx.awaitRedraw` helper. It tracks the rendering cycle and runs your code as soon as Spreadsheet completes its rendering.
 
 ~~~js
 dhx.awaitRedraw().then(() => {

docs/configuration.md

@@ -6,15 +6,15 @@ description: You can learn about the configuration of the DHTMLX JavaScript Spre
 
 # Configuration
 
-You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in the readonly mode, if needed. 
+You can adjust the desired settings of DHTMLX Spreadsheet to meet your needs. The available configuration options allow you to limit the number of rows and columns, change the toolbar appearance and control the visibility of the menu and the editing bar. You can also initialize Spreadsheet in read-only mode, if needed. 
 
 ## Toolbar
 
 The toolbar of the Spreadsheet consists of several blocks of controls that can be changed according to your needs. By default, there are the following blocks of controls in the toolbar: `"undo"`, `"colors"`, `"font"`, `"decoration"`, `"align"`, `"cell"`, `"format"`, `"actions"`. You can add more blocks from the list: `"lock"`, `"clear"`, `"rows"`, `"columns"`, `"file"`, `"help"`.
 
 <iframe src="https://snippet.dhtmlx.com/kpm017nx?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="450"></iframe>
 
-The structure of toolbar can be adjusted via the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls.
+The structure of the toolbar can be adjusted via the [`toolbarBlocks`](api/spreadsheet_toolbarblocks_config.md) configuration option of the component, which is an array with strings presenting the names of controls.
 
 You can also specify your own structure of the toolbar by enumerating necessary elements in the `toolbarBlocks` array in the desired order, for example: `"colors"`, `"align"`, `"cell"`, `"decoration"`, `"lock"`, `"clear"`.
 
@@ -24,7 +24,7 @@ const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
 });
 ~~~
 
-Toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack.
+The toolbar is [highly customizable](customization.md). You can add new controls, change the icons of controls and apply the desired icon pack.
 
 ## Editing bar
 
@@ -35,7 +35,7 @@ the editing bar.
 
 ## Number of rows and columns
 
-When Spreadsheet is initialized, it has the initial configuration of grid which consists of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose.  
+When Spreadsheet is initialized, it starts with a grid of 26 columns and 1000 rows. However, when this limit runs out, additional rows and columns are rendered automatically, so you don't need to add them. Nevertheless, you can specify the exact number of rows and columns in the grid, if you want to limit them. Use the [`colsCount`](api/spreadsheet_colscount_config.md) and [`rowsCount`](api/spreadsheet_rowscount_config.md) options for this purpose.  
 
 <iframe src="https://snippet.dhtmlx.com/vc3mstsw?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="400"></iframe>
 
@@ -47,25 +47,25 @@ The menu of the Spreadsheet is hidden by default. You can switch it on/off via t
 
 ## Read-only mode
 
-It is also possible to enable the read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option.
+You can also enable read-only mode to prevent editing of Spreadsheet cells via the [`readonly`](api/spreadsheet_readonly_config.md) configuration option.
 
-You can also [customize the readonly behavior of Spreadsheet](customization.md#custom-read-only-mode).
+You can also [customize the read-only behavior of Spreadsheet](customization.md#custom-read-only-mode).
 
 <iframe src="https://snippet.dhtmlx.com/2w959gx2?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="400"></iframe>
 
 ## Custom number formats for cells
 
-There are 7 default formats that can be applied to the values of cells: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text".
+You can apply 7 default formats to cell values: "Common", "Number", "Percent", "Currency", "Date", "Time", "Text".
 
 You can redefine configuration of default formats or specify your own number format via the [`formats`](api/spreadsheet_formats_config.md) config option. Check the details in the [Number Formatting](number_formatting.md) article.
 
 <iframe src="https://snippet.dhtmlx.com/4c0c0zm7?mode=js" frameborder="0" class="snippet_iframe" width="100%" height="550"></iframe>
 
 ## Path to export/import modules
 
-DHTMLX Spreadsheet provides the possibility to import/export data in the Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data.
+DHTMLX Spreadsheet can import and export data in Excel format. The component uses WebAssembly-based libraries: [Excel2Json](https://github.com/dhtmlx/excel2json) and [JSON2Excel](https://github.com/dhtmlx/json2excel) for import/export of data.
 
-After installing the necessary library, you need to set path to the **worker.js** file (either local or at CDN)
+After installing the necessary library, you need to set the path to the *worker.js* file (either local or at CDN)
 via the corresponding configuration option: [`importModulePath`](api/spreadsheet_importmodulepath_config.md) or [`exportModulePath`](api/spreadsheet_exportmodulepath_config.md).
 
 All the details are given in the [Data Loading and Export](loading_data.md) article.

docs/customization.md

@@ -6,7 +6,7 @@ description: You can learn about the customization of the DHTMLX JavaScript Spre
 
 # Customization
 
-You can customize the appearance, structure and functionality of toolbar, menu and context menu and define custom read-only behavior for Spreadsheet. 
+You can customize the appearance, structure and functionality of the toolbar, menu, and context menu and define custom read-only behavior for Spreadsheet. 
 
 ## Default and custom icons
 
@@ -23,44 +23,43 @@ For example, you can use the [Font Awesome](https://fontawesome.com/) icon pack
   crossorigin="anonymous">
 ~~~
 
-Then you can use the name of the icon as the value of the **icon** property in the object with the control parameters for toolbar, menu or context menu. See details below.
+Then you can use the name of the icon as the value of the `icon` property in the object with the control parameters for toolbar, menu or context menu. See details below.
 
 ## Controls types and operations
 
 ### Types
 
-There are the following types of controls you can add: *button*, *menuItem*, *separator* and *spacer*.
+You can add the following types of controls: `button`, `menuItem`, `separator`, and `spacer`.
 
-The **button** object has the following properties:
+The `button` object has the following properties:
 
-- **type** - the type of a button, set it to "button"
-- **id** - the id of a button
-- **icon** - the name of an icon from the used icon font
-- **hotkey** - the name of the hot key for a button
-- **value** - the value of a button
-- **tooltip** - the tooltip of a button
-- **twoState** -  the flag that defines whether a button can be used in two states
-- **active** - the state of a button: *true* - active, *false* - inactive
+- `type` - the type of a button, set it to "button"
+- `id` - the id of a button
+- `icon` - the name of an icon from the used icon font
+- `hotkey` - the name of the hot key for a button
+- `value` - the value of a button
+- `tooltip` - the tooltip of a button
+- `twoState` - the flag that defines whether a button can be used in two states
+- `active` - the state of a button: `true` - active, `false` - inactive
 
-The **menuItem** object has the properties below:
+The `menuItem` object has the properties below:
 
-- **type** - the type of a menu item, set it to "menuItem"
-- **id** - the id of a menu item
-- **icon** - the name of an icon from the used icon font
-- **hotkey** - the name of the hot key for a menu item
-- **value** - the value of a menu item
-- **childs** - an array of children controls (note that all the children should have the type **menuItem**)
+- `type` - the type of a menu item, set it to "menuItem"
+- `id` - the id of a menu item
+- `icon` - the name of an icon from the used icon font
+- `hotkey` - the name of the hot key for a menu item
+- `value` - the value of a menu item
+- `childs` - an array of children controls (note that all the children should have the type `menuItem`)
 
-The data collection API of the **toolbar**, **menu** and **context menu** allows you to manipulate the controls, namely to add custom controls, remove the controls you don't need, or update the controls,
-e.g. change their icons.
+The data collection API of the **toolbar**, **menu**, and **context menu** lets you manage controls: add custom ones, remove those you don't need, or update them — for example, change their icons.
 
 ### Adding controls
 
 To add a new control, apply the `spreadsheet.{name}.data.add()` method. It takes the parameters below:
 
-- **config** - (*object*) an object with the control config
-- **index** - (*number*) the index of the position to place the control into
-- **parent** - (*string*) the id of a parent control (for the *menuItem* type)
+- `config` - (`object`) an object with the control config
+- `index` - (`number`) the index of the position to place the control into
+- `parent` - (`string`) the id of a parent control (for the `menuItem` type)
 
 For a button:
 
@@ -435,7 +434,7 @@ spreadsheet.contextMenu.data.remove("lock");
 
 ## Custom read-only mode
 
-Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block certain operations via the events the name of which starts with **before**, e.g.:
+Besides applying the [read-only mode](configuration.md#read-only-mode) to the whole Spreadsheet, you can block specific operations with the events whose names start with `before`, for example:
 
 - [](api/spreadsheet_beforeeditstart_event.md)
 - [](api/spreadsheet_beforeaction_event.md)