Merge pull request #6 from DHTMLX/next

[update] Styling changes and broken links

Author: serhiipylypchuk1991

docs/angular_integration.md

@@ -77,7 +77,7 @@ yarn add "./spreadsheet_5.1.0_enterprise"
 
 You can install the **trial** version of Spreadsheet using **npm** or **yarn** commands:
 
-~~~js {2,3,6,7}
+~~~jsx {2,3,6,7}
 // npm
 npm config set @dhx:registry https://npm.dhtmlx.com
 npm i @dhx/trial-spreadsheet
@@ -119,7 +119,7 @@ In this tutorial we will use the **trial** version of Spreadsheet.
 
 To display Spreadsheet on the page, we need to set the container to render the component inside. Use the code below:
 
-~~~js title="spreadsheet.component.ts"
+~~~jsx title="spreadsheet.component.ts"
 import { Spreadsheet } from '@dhx/trial-spreadsheet';
 import '@dhx/trial-spreadsheet/codebase/spreadsheet.min.css';
 import { Component, ElementRef, OnInit, ViewChild, OnDestroy} from '@angular/core';
@@ -137,7 +137,7 @@ export class SpreadsheetComponent implements OnInit {
 
 Then we need to render our Spreadsheet in the container. To do that, use the `ngOnInit()` method of Angular:
 
-~~~js {6-8} title="spreadsheet.component.ts"
+~~~jsx {6-8} title="spreadsheet.component.ts"
 export class SpreadsheetComponent implements OnInit, OnDestroy {
   @ViewChild('spreadsheetContainer', { static: true }) spreadsheetContainer!: ElementRef;
 
@@ -159,7 +159,7 @@ In the above code we've also specified the `ngOnDestroy()` method that contains
 
 To add data into the Spreadsheet, we need to provide a data set. Let's create the **data.ts** file in the **src/app/spreadsheet/** directory and add some data into it:
 
-~~~js title="data.ts"
+~~~jsx title="data.ts"
 export function getData(): any {
   return {
     styles: {
@@ -204,7 +204,7 @@ export function getData(): any {
 
 Then open the ***spreadsheet.component.ts*** file. Import the file with data and add the `spreadsheet.parse();` call into the `ngOnInit()` method, as shown below. It will reload data on each applied change.
 
-~~~js {2,7} title="spreadsheet.component.ts"
+~~~jsx {2,7} title="spreadsheet.component.ts"
 // importing the data file
 import { getData } from './data';
 
@@ -223,7 +223,7 @@ When a user makes some action in the Spreadsheet, it invokes an event. You can u
 
 Open the **spreadsheet.component.ts** file and complete the `ngOnInit()` method as in:
 
-~~~js {5-7} title="spreadsheet.component.ts"
+~~~jsx {5-7} title="spreadsheet.component.ts"
 ngOnInit() {
   this.spreadsheet = new Spreadsheet(this.spreadsheetContainer.nativeElement,{});
 
@@ -240,7 +240,7 @@ Replace `'ActionName'` with the actual name of the event you want to handle, and
 
 Now it's time to add the component into our app. Open ***src/app/app.component.ts*** and use *SpreadsheetComponent* instead of the default content by inserting the code below:
 
-~~~js title="app.component.ts"
+~~~jsx title="app.component.ts"
 import { Component } from "@angular/core";
 
 @Component({
@@ -254,7 +254,7 @@ export class AppComponent {
 
 Then create the ***app.module.ts*** file in the ***src/app/*** directory and insert the *SpreadsheetComponent* as provided below:
 
-~~~js title="app.module.ts"
+~~~jsx title="app.module.ts"
 import { NgModule } from "@angular/core";
 import { BrowserModule } from "@angular/platform-browser";
 
@@ -272,7 +272,7 @@ export class AppModule {}
 
 For correct rendering of fonts, open the ***angular.json*** file and complete the "assets" array in the following way (replace *spreadsheet_package* with the name of your local folder that contains Spreadsheet source files):
 
-~~~js {5-9} title="angular.json"
+~~~jsx {5-9} title="angular.json"
 ...
 "assets": [
   "src/favicon.ico",
@@ -288,7 +288,7 @@ For correct rendering of fonts, open the ***angular.json*** file and complete th
 
 The last step is to open the ***src/main.ts*** file and replace the existing code with the following one:
 
-~~~js title="main.ts"
+~~~jsx title="main.ts"
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
 import { AppModule } from "./app/app.module";
 platformBrowserDynamic()

docs/api/api_overview.md

@@ -8,7 +8,7 @@ description: You can have an API overview of the DHTMLX JavaScript Spreadsheet l
 
 ## Constructor
 
-~~~js
+~~~jsx
 const spreadsheet = new dhx.Spreadsheet("spreadsheet_container", {
     rowsCount: 20,
     colsCount: 20

docs/api/overview/actions_overview.md

@@ -10,7 +10,7 @@ This section is dedicated to a new conception of interaction with Spreadsheet ev
 
 Starting from v4.3, DHTMLX Spreadsheet includes a pair of the [beforeAction](api/spreadsheet_beforeaction_event.md)/[afterAction](api/spreadsheet_afteraction_event.md) events that are intended to make your code simple and concise. They will fire right before an action is executed and indicate which exactly action has been performed.
 
-~~~js
+~~~jsx
 spreadsheet.events.on("beforeAction", (actionName, config) => {
     if (actionName === "addColumn") {
         console.log(actionName, config);
@@ -32,12 +32,12 @@ spreadsheet.events.on("afterAction", (actionName, config) => {
 >It means, that you don't have to constantly add sets of paired [**before-** and **after-**](api/overview/events_overview.md) events anymore to track and handle the actions which you execute when changing something in the spreadsheet. 
 
 >But if needed you can use an **old approach** because all the existing events will continue work as before:
-~~~js
+~~~jsx
 spreadsheet.events.on("afterColumnAdd", function(cell){
     console.log("A new column is added", cell);
 });
 ~~~
-~~~js
+~~~jsx
 spreadsheet.events.on("beforeColumnAdd", function(cell){
     console.log("A new column will be added", cell);
     return true;

docs/api/spreadsheet_afterclear_event.md

@@ -9,7 +9,7 @@ description: You can learn about the afterClear event in the documentation of th
 :::caution
 The **afterClear** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
 
-~~~js
+~~~jsx
 spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "clear") {
         console.log(actionName, config);

docs/api/spreadsheet_aftercolumnadd_event.md

@@ -9,7 +9,7 @@ description: You can learn about the afterColumnAdd event in the documentation o
 :::caution
 The **afterColumnAdd** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
 
-~~~js
+~~~jsx
 spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "addColumn") {
         console.log(actionName, config)

docs/api/spreadsheet_aftercolumndelete_event.md

@@ -9,7 +9,7 @@ description: You can learn about the afterColumnDelete event in the documentatio
 :::caution
 The **afterColumnDelete** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
 
-~~~js
+~~~jsx
 spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "deleteColumn") {
         console.log(actionName, config)

docs/api/spreadsheet_afterformatchange_event.md

@@ -9,7 +9,7 @@ description: You can learn about the afterFormatChange event in the documentatio
 :::caution
 The **afterFormatChange** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
 
-~~~js
+~~~jsx
 spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "setCellFormat") {
         console.log(actionName, config);

docs/api/spreadsheet_afterrowadd_event.md

@@ -9,7 +9,7 @@ description: You can learn about the afterRowAdd event in the documentation of t
 :::caution
 The **afterRowAdd** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
 
-~~~js
+~~~jsx
 spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "addRow") {
         console.log(actionName, config);

docs/api/spreadsheet_afterrowdelete_event.md

@@ -9,7 +9,7 @@ description: You can learn about the afterRowDelete event in the documentation o
 :::caution
 The **afterRowDelete** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
 
-~~~js
+~~~jsx
 spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "deleteRow") {
         console.log(actionName, config);

docs/api/spreadsheet_aftersheetadd_event.md

@@ -9,7 +9,7 @@ description: You can learn about the afterSheetAdd event in the documentation of
 :::caution
 The **afterSheetAdd** event has been deprecated in v4.3. The event will continue work, but you'd better apply a new approach:
 
-~~~js
+~~~jsx
 spreadsheet.events.on("afterAction", (actionName, config) => {
     if (actionName === "addSheet") {
         console.log(actionName, config);