docs: add help for editor & toolbar

docs/help/contents/editor/markdown-shortcuts.md

@@ -1 +1,22 @@
 # Markdown shortcuts
+
+The following markdown shortcuts are supported in the editor.
+
+| Shortcut                                                                              | Block           |
+| ------------------------------------------------------------------------------------- | --------------- |
+| #                                                                                     | Heading 1       |
+| ##                                                                                    | Heading 2       |
+| ###                                                                                   | Heading 3       |
+| ####                                                                                  | Heading 4       |
+| #####                                                                                 | Heading 5       |
+| ######                                                                                | Heading 6       |
+| \*\*bold text\*\*                                                                     | Bold            |
+| \_italicized text\_                                                                   | Italic          |
+| > blockquote                                                                          | Blockquote      |
+| 1. First item<br>2. Second item<br>3. Third item                                      | Ordered list    |
+| - First item<br>- Second item<br>- Third item                                         | Unordered list  |
+| - \[x] Write the press release<br>- [ ] Update the website<br>- [ ] Contact the media | Task list       |
+| \`inline code\`                                                                       | Inline code     |
+| ---                                                                                   | Horizontal rule |
+| \[title](https://www.example.com)                                                     | Link            |
+| \`\`\`<br>some code<br>\`\`\`                                                         | Codeblock       |

docs/help/contents/editor/personalizing-editor.md

@@ -0,0 +1,41 @@
+# Personalizing editor
+
+Customize some common editor defaults to get a personalized editing experience.
+
+## Default font size and font family
+
+# [Desktop/Web](#/tab/web)
+
+The default font size and font family for all notes can be configured from `Settings > Editor Settings`.
+
+# [Mobile](#/tab/mobile)
+
+The default font size and font family for all notes can be configured from `Settings > Customization > Editor`.
+
+---
+
+> info
+>
+> Custom fonts are not supported yet.
+
+## Default note title format
+
+When you create a note, a default title `Note $date$ $time$` is automatically set. You can change the default title format to better fit your needs.
+
+Go to `Settings` > `Editor` > `Title format` to customize the title formatting.
+
+### Supported formatting templates
+
+**$date$**: Today's date
+
+**$time$**: The current time
+
+**$headline$**: Upto first 10 words of of a note headline
+
+**$count$**: Current note count + 1
+
+You can use a combination of these templates in the note title. For example `$headline$ - $date$` will become `Your note headline - 06-22-2023`.
+
+## Line spacing
+
+By default when you press enter on a line, a new paragraph is created and the spacing is double. You can go to `Settings` > `Customization` > `Editor` to turn of `Double spaced lines` so when you press enter, the space between the lines is normal.

docs/help/contents/editor/toolbar.md

@@ -0,0 +1,109 @@
+# Toolbar
+
+The editor toolbar has all the basic tools for rich formatting of your notes. It also let's you add various blocks to your notes like task lists, images, videos etc.
+
+## Adding blocks
+
+1. Focus inside the note where you want to insert a block.
+2. Click on the ![Toolbar plus](/toolbar-plus.png) button on the toolbar.
+3. Select the block you want to insert, for example a task list.
+
+## Customzing toolbar
+
+One of the great features of the editor is the ability to customize the editor toolbar to fit your own needs. There's usually many tools in an editor toolbar and being able to hide the tools you never use and just keep what you use more frequently on top helps focus on your note taking.
+
+# [Desktop/Web](#/tab/web)
+
+To customize the toolbar go to `Settings` > `Editor Settings` and click on `Configure Toolbar`.
+
+# [Mobile](#/tab/mobile)
+
+To customize the toolbar go to `Settings` > `Customization` > `Editor` and click on `Configure Toolbar`.
+
+---
+
+**Groups** - Tools are distrubted across groups. You can add, remove and reorder the groups in the toolbar. You can move tools between groups with drag and drop.
+
+**Subgroup** - Each group can have a single sub group. Tools in a subgroup are collapsed into a drop down menu in the toolbar.
+
+# [Desktop/Web](#/tab/web)
+
+**Disabled Items** - Tools that are hidden from the toolbar. You can drag and drop a tool into this section to remove it from the toolbar.
+
+# [Mobile](#/tab/mobile)
+
+**Disabled Items** - Tools that are hidden from the toolbar. Click on the `+` button on a group to view disabled tools and add them back to the toolbar.
+
+---
+
+### Add a new group
+
+# [Desktop/Web](#/tab/web)
+
+To add a new group to the toolbar, click on the `+` button in the header.
+
+# [Mobile](#/tab/mobile)
+
+Scroll down the bottom of all groups. Click on `Create a group` button to add a new group.
+
+---
+
+### Adding tools to a group
+
+# [Desktop/Web](#/tab/web)
+
+Drag and drop tools from other groups or the `Disabled item` section into a group to add them to the group.
+
+# [Mobile](#/tab/mobile)
+
+Click on the `+` button on a group header to add any disabled tools into the group. You can also drag and drop tools from other groups.
+
+### Creating a subgroup
+
+# [Desktop/Web](#/tab/web)
+
+1. Hover on a group header.
+2. Click on the `+` button to add a subgroup.
+3. Drag and drop tools into the subgroup.
+4. Tools in the subgroup will be collapsed into a drop down.
+
+# [Mobile](#/tab/mobile)
+
+You can create a subgroup by clicking on collapse button on a tool. Tools in the subgroup will be collapsed into a popup.
+
+---
+
+### Deleting a group
+
+# [Desktop/Web](#/tab/web)
+
+You can remove a group and all it's tools from the toolbar.
+
+1. Hover on a group header
+2. Click on the trash icon to delete the group.
+3. All the tools in the group will be moved to `Disabled items` section at the bottom.
+
+# [Mobile](#/tab/mobile)
+
+1. Click on the `-` button on a group header to remove the group
+2. Tools removed from a group can be added back with the `+` button on the group header.
+
+---
+
+### Disable a tool
+
+# [Desktop/Web](#/tab/web)
+
+1. Hover on a tool header
+2. Click on the trash icon to disable the tool.
+3. Deleted tools in the group will be moved to `Disabled items` section at the bottom.
+
+# [Mobile](#/tab/mobile)
+
+A tool can be disabled from the toolbar by clicking on the `-` button on the tool.
+
+---
+
+> info
+>
+> Toolbar configuration is automatically synced across all your devices.

docs/help/docgen.yaml

@@ -25,10 +25,9 @@ navigation:
       - path: organizing-notes/side-menu-shortcuts.md
   - path: editor
     children:
+      - path: editor/personalizing-editor.md
       - path: editor/markdown-shortcuts.md
-      - path: editor/customize-toolbar.md
-      - path: editor/default-note-title-format.md
-      - path: editor/default-font-size-and-font-family.md
+      - path: editor/toolbar.md
       - path: editor/outline-lists.md
       - path: editor/tables.md
       - path: editor/task-lists.md