add customizing editor page

Author: 1ilit

docs/customizing-editor.md

@@ -1,4 +1,31 @@
 ---
 sidebar_position: 3
 ---
-# Customizing the editor
+
+import ThemedImage from '../src/components/ThemedImage';
+
+# Customizing the editor
+
+You can customize editor settings in the `View` menu.
+
+<ThemedImage lightImageSrc={require("./img/light/menu-view.png").default} darkImageSrc={require("./img/dark/menu-view.png").default} alt="New File" />
+
+## Settings
+
+| Setting | Description | Shortcut |
+| --- | --- | --- |
+| Menubar | Toggle the menubar (header section containing diagram name and menus) | N/A |
+| Sidebar | Toggle the sidebar (panel to the right) | N/A |
+| Issues | Toggle the issues section in the sidebar | N/A |
+| Strict mode | Disable error checking | Ctrl+Shift+M |
+| Presentation mode | Enter presentation mode | N/A |
+| Field details | Disable showing pop ups when you hover over tables | Ctrl+Shift+F |
+| Reset view | Set the canvas cooridantes and zoom to default | Ctrl+R |
+| Show grid | Toggle the canvas grid | Ctrl+Shift+G |
+| Show cardinality | Toggle showing cardinality labels(1, n) for relationships | N/A |
+| Show relationship labels | Toggle showing relationship names on the diagram | N/A |
+| Show debug coordinates | Display debug coordinate information | N/A |
+| Theme | Set the editor theme to dark or light | N/A |
+| Zoom in | Set editor zoom | Ctrl+(Wheel/Up) |
+| Zoom out | Set editor zoom | Ctrl+(Wheel/Down) |
+| Fullscreen | Enter fullscreen | N/A |

docs/how-it-works.md

@@ -1,4 +1,4 @@
 ---
-sidebar_position: 7
+sidebar_position: 8
 ---
 # How it works

docs/img/dark/menu-view.png

@@ -0,0 +1,4 @@
+---
+sidebar_position: 7
+---
+# Keyboard shortcuts