DHTMLX · serhiipylypchuk1991 · May 17, 2024 · Nov 16, 2023 · Nov 16, 2023 · Nov 17, 2023
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -18,13 +18,13 @@ jobs:
     # Steps represent a sequence of tasks that will be executed as part of the job
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - id: vars
         run: echo ::set-output name=short_ref::${GITHUB_REF#refs/*/}
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: '16.15.0'
+          node-version: '18.19.0'
 
       - run: yarn install
       - run: yarn build

diff --git a/docs/api/cell_manager/add_method.md b/docs/api/cell_manager/add_method.md
@@ -16,7 +16,7 @@ The **add()** method is automatically validated by the system. The cell won't be
 
 ### Usage
 
-~~~js
+~~~jsx
 add(
     cellIndex: number, 
     dir: string // "up" | "down" | "left" | "right"
@@ -30,7 +30,7 @@ add(
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options
@@ -44,4 +44,4 @@ diagram.cellManager.add(0, "down"); // adds cells as rows
 
 **Change log**: Added in v4.0
 
-**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
+**Related articles**: [Configuring Swimlanes](../../../swimlanes/)
diff --git a/docs/api/cell_manager/aftercellsadd_event.md b/docs/api/cell_manager/aftercellsadd_event.md
@@ -12,7 +12,7 @@ description: You can learn about the afterCellsAdd event of Cell Manager in the
 
 ### Usage
 
-~~~js
+~~~jsx
 afterCellsAdd: (swimlaneId: string | number) => void;
 ~~~
 
@@ -24,7 +24,7 @@ The callback of the event takes the following parameter:
 
 ### Example
 
-~~~js {9-11}
+~~~jsx {9-11}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"

diff --git a/docs/api/cell_manager/aftercellsmove_event.md b/docs/api/cell_manager/aftercellsmove_event.md
@@ -12,7 +12,7 @@ description: You can learn about the afterCellsMove event of Cell Manager in the
 
 ### Usage
 
-~~~js
+~~~jsx
 afterCellsMove: (swimlaneId: string | number) => void;
 ~~~
 
@@ -24,7 +24,7 @@ The callback of the event takes the following parameter:
 
 ### Example
 
-~~~js {9-11}
+~~~jsx {9-11}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"

diff --git a/docs/api/cell_manager/aftercellsremove_event.md b/docs/api/cell_manager/aftercellsremove_event.md
@@ -12,7 +12,7 @@ description: You can learn about the afterCellsRemove event of Cell Manager in t
 
 ### Usage
 
-~~~js
+~~~jsx
 afterCellsRemove: (swimlaneId: string | number) => void;
 ~~~
 
@@ -24,7 +24,7 @@ The callback of the event takes the following parameter:
 
 ### Example
 
-~~~js {9-11}
+~~~jsx {9-11}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"

diff --git a/docs/api/cell_manager/aftercellsvalidation_event.md b/docs/api/cell_manager/aftercellsvalidation_event.md
@@ -12,7 +12,7 @@ description: You can learn about the afterCellsValidation event of Cell Manager
 
 ### Usage
 
-~~~js
+~~~jsx
 afterCellsValidation: (
     swimlaneId: string | number, 
     validate: boolean, 
@@ -30,7 +30,7 @@ The callback of the event takes the following parameters:
 
 ### Example
 
-~~~js {9-11}
+~~~jsx {9-11}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"

diff --git a/docs/api/cell_manager/beforecellsadd_event.md b/docs/api/cell_manager/beforecellsadd_event.md
@@ -12,7 +12,7 @@ description: You can learn about the beforeCellsAdd event of Cell Manager in the
 
 ### Usage
 
-~~~js
+~~~jsx
 beforeCellsAdd: (swimlaneId: string | number) => boolean | void;
 ~~~
 
@@ -28,7 +28,7 @@ Return `false` to prevent adding of new cells, otherwise `true`
 
 ### Example
 
-~~~js {9-12}
+~~~jsx {9-12}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"

diff --git a/docs/api/cell_manager/beforecellsmove_event.md b/docs/api/cell_manager/beforecellsmove_event.md
@@ -12,7 +12,7 @@ description: You can learn about the beforeCellsMove event of Cell Manager in th
 
 ### Usage
 
-~~~js
+~~~jsx
 beforeCellsMove: (swimlaneId: string | number) => boolean | void;
 ~~~
 
@@ -28,7 +28,7 @@ Return `false` to prevent moving of the cells, otherwise `true`
 
 ### Example
 
-~~~js {9-12}
+~~~jsx {9-12}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"

diff --git a/docs/api/cell_manager/beforecellsremove_event.md b/docs/api/cell_manager/beforecellsremove_event.md
@@ -12,7 +12,7 @@ description: You can learn about the beforeCellsRemove event of Cell Manager in
 
 ### Usage
 
-~~~js
+~~~jsx
 beforeCellsRemove: (swimlaneId: string | number) => boolean | void;
 ~~~
 
@@ -28,7 +28,7 @@ Return `false` to prevent removing of the cells, otherwise `true`
 
 ### Example
 
-~~~js {9-12}
+~~~jsx {9-12}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"

diff --git a/docs/api/cell_manager/beforecellsvalidation_event.md b/docs/api/cell_manager/beforecellsvalidation_event.md
@@ -12,7 +12,7 @@ description: You can learn about the beforeCellsValidation event of Cell Manager
 
 ### Usage
 
-~~~js
+~~~jsx
 beforeCellsValidation: (
     swimlaneId: string | number, 
     action: "move" | "remove" | "add"
@@ -32,7 +32,7 @@ Return `false` to prevent validation of new cells, otherwise `true`
 
 ### Example
 
-~~~js {9-12}
+~~~jsx {9-12}
 // initializing Diagram
 const diagram = new dhx.Diagram("diagram_container", {
     type: "default"
@@ -50,4 +50,3 @@ diagram.events.on("beforeCellsValidation", (swimlaneId, action) => {
 **Change log**: Added in v4.0
 
 **Related articles**: [Configuring Swimlanes](../../../swimlanes/)
-
diff --git a/docs/api/cell_manager/getcellid_method.md b/docs/api/cell_manager/getcellid_method.md
@@ -12,7 +12,7 @@ description: You can learn about the getCellId method of Cell Manager in the doc
 
 ### Usage
 
-~~~js
+~~~jsx
 getCellId(
     cellIndex: number, 
     type: string // "row" | "col"
@@ -30,7 +30,7 @@ The method returns the id of the cell
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/getcellindex_method.md b/docs/api/cell_manager/getcellindex_method.md
@@ -12,7 +12,7 @@ description: You can learn about the getCellIndex method of Cell Manager in the
 
 ### Usage
 
-~~~js
+~~~jsx
 getCellIndex(
     cellId: string | number, 
     type: string // "row" | "col"
@@ -30,7 +30,7 @@ The method returns the index of the cell. The count of the index starts from 0
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/getsubheadercellid_method.md b/docs/api/cell_manager/getsubheadercellid_method.md
@@ -12,7 +12,7 @@ description: You can learn about the getSubHeaderCellId method of Cell Manager i
 
 ### Usage
 
-~~~js
+~~~jsx
 getSubHeaderCellId(subheaderId: string): string | number;
 ~~~
 
@@ -26,7 +26,7 @@ The method returns the id of the cell
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/getsubheadercellindex_method.md b/docs/api/cell_manager/getsubheadercellindex_method.md
@@ -12,7 +12,7 @@ description: You can learn about the getSubHeaderCellIndex method of Cell Manage
 
 ### Usage
 
-~~~js
+~~~jsx
 getSubHeaderCellIndex(subheaderId: string): number;
 ~~~
 
@@ -26,7 +26,7 @@ The method returns the index of the cell. The count of the index starts from 0
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/getsubheadertype_method.md b/docs/api/cell_manager/getsubheadertype_method.md
@@ -12,7 +12,7 @@ description: You can learn about the getSubHeaderType method of Cell Manager in
 
 ### Usage
 
-~~~js
+~~~jsx
 getSubHeaderType(subheaderId: string): "row" | "col" | undefined;
 ~~~
 
@@ -26,7 +26,7 @@ The method returns the type of the subheader of the swimlane: "row" | "col" | un
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/index.md b/docs/api/cell_manager/index.md
@@ -6,7 +6,7 @@ description: You can have an overview of CellManager in the documentation of the
 
 # CellManager overview
 
-The DHTMLX Diagram library provides you with a set of API to manipulate [a swimlane and its cells](../../swimlanes/) dynamically. The API can be used both in the diagram and in the editor.
+The DHTMLX Diagram library provides you with a set of APIs to manipulate [a swimlane and its cells](../../swimlanes/) dynamically. The API can be used both in the diagram and in the editor.
 
 ## Methods
 

diff --git a/docs/api/cell_manager/move_method.md b/docs/api/cell_manager/move_method.md
@@ -16,7 +16,7 @@ The **move()** method is automatically validated by the system. The cell won't b
 
 ### Usage
 
-~~~js
+~~~jsx
 move(
     cellIndex: number, 
     dir: string // "up" | "down" | "left" | "right"
@@ -30,7 +30,7 @@ move(
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/remove_method.md b/docs/api/cell_manager/remove_method.md
@@ -16,7 +16,7 @@ The **remove()** method is automatically validated by the system. The cell won't
 
 ### Usage
 
-~~~js
+~~~jsx
 remove(
     cellIndex: number, 
     type: string // "row" | "col"
@@ -30,7 +30,7 @@ remove(
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/resetswimlane_method.md b/docs/api/cell_manager/resetswimlane_method.md
@@ -12,13 +12,13 @@ description: You can learn about the resetSwimlane method of Cell Manager in the
 
 ### Usage
 
-~~~js
+~~~jsx
 resetSwimlane(): void;
 ~~~
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/setswimlane_method.md b/docs/api/cell_manager/setswimlane_method.md
@@ -12,7 +12,7 @@ description: You can learn about the setSwimlane method of Cell Manager in the d
 
 ### Usage
 
-~~~js
+~~~jsx
 setSwimlane(id: string | number): boolean;
 ~~~
 
@@ -26,7 +26,7 @@ The method returns `true` if the swimlane is set, otherwise `false`.
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options

diff --git a/docs/api/cell_manager/validation_method.md b/docs/api/cell_manager/validation_method.md
@@ -12,7 +12,7 @@ description: You can learn about the validation method of Cell Manager in the do
 
 ### Usage
 
-~~~js
+~~~jsx
 validation(
     cellIndex: number, 
     dir: string, // "up" | "down" | "left" | "right"
@@ -32,7 +32,7 @@ The method returns `true` if the cell is validated, otherwise `false`
 
 ### Example
 
-~~~js
+~~~jsx
 // initialization of the diagram
 const diagram = new dhx.Diagram("diagram_container", {
     // config options