Merge pull request #21 from DHTMLX/sp-next-hotkeys-4502

Draft: Hotkey list

docs/guides/diagram_editor/grid_area.md

@@ -143,22 +143,6 @@ From v5.0, the Grid area is equipped with snap lines which will simplify the pro
 
 If you need to change the width and color of the lines, or to hide them at all, use the [magnetic](api/editor/magnetic_property.md) property of Editor.
 
-## Using hotkeys
-
-There is a set of hotkeys you can use while creating a diagram in the editor:
-
-|Hotkey|Description|
-|---|---|
-|**Ctrl (Cmd) + C**|Copy an item(s) (*in the default mode only*)|
-|**Ctrl (Cmd) + V**|Paste an item(s) (*in the default mode only*)|
-|**Alt (Option) + Ctrl (Cmd) + С**|Copy styles of an item (added in v5.0)|
-|**Alt (Option) + Ctrl (Cmd) + V**|Paste styles of an item (added in v5.0)|
-|**Shift + Left Click**|Select several items|
-|**Ctrl (Cmd) + A**|Select all items|
-|**Ctrl + Z**|Revert the latest action|
-|**Del**|Delete an item(s)|
-|**Arrows**|Move an item(s) left/right/up/down|
-
 ## Manipulating multiple items
 
 It is possible to select several diagram items via hovering them over with the left mouse button pressed. You can also select necessary items using keyboard shortcuts - Shift+Left Click.

docs/guides/diagram_editor/hot_keys.md

@@ -0,0 +1,29 @@
+---
+sidebar_label: Hotkeys!!
+title: Editor Guides - Hotkey List 
+description: You can learn about the Hotkeys of editor in the documentation of the DHTMLX JavaScript Diagram library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Diagram.
+---
+
+# Hotkey list
+
+In this section you will find a set of hotkeys you can use while creating a diagram in the editor:
+
+|Hotkey|Description|
+|---|---|
+|**Alt+1**|Allows you to hide/show Shapebar (*default mode only*)|
+|**Alt+2**|Allows you to hide/show Editbar|
+|**Alt+2**|Allows you to hide/show Grid Area|
+|**Ctrl+Z (CMD+Z)**|Allows you to revert the latest action|
+|**Ctrl+Shift+Z (CMD+Shift+Z)**|Allows you to return to the canceled action|
+|**Ctrl+D (CMD+D)**|Allows you to duplicate a selected element|
+|**Ctrl+C (CMD+C)**|Allows you to copy a selected element (*default mode only*)|
+|**Ctrl+V (CMD+V)**|Allows you to paste a selected element (*default mode only*)|
+|**Ctrl+Alt+C (CMD+Alt+C)**|Allows you to copy the style of the selected item (applicable for elements of one essence)|
+|**Ctrl+Alt+V (CMD+Alt+V)**|Allows you to apply a copied style to the selected item (applicable for elements of one essence)|
+|**Ctrl+A (CMD+A)**|Allows you to select all items|
+|**Ctrl+Shift+A (CMD+Shift+A)**|Allows you to unselect all selected items|
+|**Ctrl+Mousewheel (CMD+Mousewheel)**|Allows you to increase/decrease the scale value|
+|**Shift+Left Click**|Allows you to add an item to the list of selected items|
+|**Alt+Left Click**|Allows you to unselect the selected item|
+|**Delete (Del)**|Allows you to delete an item(s)|
+|**Arrow-Top / Arrow-Bottom / Arrow-Left / Arrow-Right**|Allows you to move the selected items|

sidebars.js

@@ -839,6 +839,7 @@ module.exports = {
             "guides/diagram_editor/left_panel",
             "guides/diagram_editor/grid_area",
             "guides/diagram_editor/right_panel",
+            "guides/diagram_editor/hot_keys", // New
           ],
         },
         "guides/loading_data",