diff --git a/docs/help/contents/_include/cell-properties.png b/docs/help/contents/_include/cell-properties.png new file mode 100644 index 000000000..d2a5b893c Binary files /dev/null and b/docs/help/contents/_include/cell-properties.png differ diff --git a/docs/help/contents/_include/clear-task-icon.png b/docs/help/contents/_include/clear-task-icon.png new file mode 100644 index 000000000..71fb9610b Binary files /dev/null and b/docs/help/contents/_include/clear-task-icon.png differ diff --git a/docs/help/contents/_include/config-toolbar-desktop.png b/docs/help/contents/_include/config-toolbar-desktop.png new file mode 100644 index 000000000..72358d806 Binary files /dev/null and b/docs/help/contents/_include/config-toolbar-desktop.png differ diff --git a/docs/help/contents/_include/create-table.png b/docs/help/contents/_include/create-table.png new file mode 100644 index 000000000..f3bdbf5c0 Binary files /dev/null and b/docs/help/contents/_include/create-table.png differ diff --git a/docs/help/contents/_include/delete-table.png b/docs/help/contents/_include/delete-table.png new file mode 100644 index 000000000..3e177727b Binary files /dev/null and b/docs/help/contents/_include/delete-table.png differ diff --git a/docs/help/contents/_include/drag-drop.gif b/docs/help/contents/_include/drag-drop.gif new file mode 100644 index 000000000..f66c9f459 Binary files /dev/null and b/docs/help/contents/_include/drag-drop.gif differ diff --git a/docs/help/contents/_include/insert-row-table.gif b/docs/help/contents/_include/insert-row-table.gif new file mode 100644 index 000000000..b22792020 Binary files /dev/null and b/docs/help/contents/_include/insert-row-table.gif differ diff --git a/docs/help/contents/_include/markdown-editing.gif b/docs/help/contents/_include/markdown-editing.gif new file mode 100644 index 000000000..97e6f60d7 Binary files /dev/null and b/docs/help/contents/_include/markdown-editing.gif differ diff --git a/docs/help/contents/_include/resize-table.gif b/docs/help/contents/_include/resize-table.gif new file mode 100644 index 000000000..fedcf0277 Binary files /dev/null and b/docs/help/contents/_include/resize-table.gif differ diff --git a/docs/help/contents/_include/sort-task-icon.png b/docs/help/contents/_include/sort-task-icon.png new file mode 100644 index 000000000..3b1e68031 Binary files /dev/null and b/docs/help/contents/_include/sort-task-icon.png differ diff --git a/docs/help/contents/_include/table-delete-column.png b/docs/help/contents/_include/table-delete-column.png new file mode 100644 index 000000000..d71a3eabc Binary files /dev/null and b/docs/help/contents/_include/table-delete-column.png differ diff --git a/docs/help/contents/_include/table-example-22.png b/docs/help/contents/_include/table-example-22.png new file mode 100644 index 000000000..f96e3c17d Binary files /dev/null and b/docs/help/contents/_include/table-example-22.png differ diff --git a/docs/help/contents/_include/table-insert-column.gif b/docs/help/contents/_include/table-insert-column.gif new file mode 100644 index 000000000..e04ece352 Binary files /dev/null and b/docs/help/contents/_include/table-insert-column.gif differ diff --git a/docs/help/contents/_include/table-merge-cells.gif b/docs/help/contents/_include/table-merge-cells.gif new file mode 100644 index 000000000..41b21e8cc Binary files /dev/null and b/docs/help/contents/_include/table-merge-cells.gif differ diff --git a/docs/help/contents/_include/table-move-column.gif b/docs/help/contents/_include/table-move-column.gif new file mode 100644 index 000000000..0bd303d0e Binary files /dev/null and b/docs/help/contents/_include/table-move-column.gif differ diff --git a/docs/help/contents/_include/table-move-row.gif b/docs/help/contents/_include/table-move-row.gif new file mode 100644 index 000000000..d7f2857b2 Binary files /dev/null and b/docs/help/contents/_include/table-move-row.gif differ diff --git a/docs/help/contents/_include/table-row-delete.png b/docs/help/contents/_include/table-row-delete.png new file mode 100644 index 000000000..ccaa3c314 Binary files /dev/null and b/docs/help/contents/_include/table-row-delete.png differ diff --git a/docs/help/contents/_include/table-split-cell.gif b/docs/help/contents/_include/table-split-cell.gif new file mode 100644 index 000000000..e255142f6 Binary files /dev/null and b/docs/help/contents/_include/table-split-cell.gif differ diff --git a/docs/help/contents/_include/task-drag-drop.png b/docs/help/contents/_include/task-drag-drop.png new file mode 100644 index 000000000..252072924 Binary files /dev/null and b/docs/help/contents/_include/task-drag-drop.png differ diff --git a/docs/help/contents/_include/task-header-title.png b/docs/help/contents/_include/task-header-title.png new file mode 100644 index 000000000..50df61165 Binary files /dev/null and b/docs/help/contents/_include/task-header-title.png differ diff --git a/docs/help/contents/_include/toolbar-blocks.png b/docs/help/contents/_include/toolbar-blocks.png new file mode 100644 index 000000000..c77be82d5 Binary files /dev/null and b/docs/help/contents/_include/toolbar-blocks.png differ diff --git a/docs/help/contents/_include/toolbar-editor.png b/docs/help/contents/_include/toolbar-editor.png new file mode 100644 index 000000000..c9dc8d758 Binary files /dev/null and b/docs/help/contents/_include/toolbar-editor.png differ diff --git a/docs/help/contents/editor/markdown-shortcuts.md b/docs/help/contents/editor/markdown-shortcuts.md index b18528dea..e5ed494df 100644 --- a/docs/help/contents/editor/markdown-shortcuts.md +++ b/docs/help/contents/editor/markdown-shortcuts.md @@ -1,5 +1,7 @@ # Markdown shortcuts +![Markdown editing](/markdown-editing.gif) + The following markdown shortcuts are supported in the editor. | Shortcut | Block | diff --git a/docs/help/contents/editor/outline-lists.md b/docs/help/contents/editor/outline-lists.md deleted file mode 100644 index 942b55b3c..000000000 --- a/docs/help/contents/editor/outline-lists.md +++ /dev/null @@ -1 +0,0 @@ -# Outline lists diff --git a/docs/help/contents/editor/tables.md b/docs/help/contents/editor/tables.md index afb1b4c41..4804658c2 100644 --- a/docs/help/contents/editor/tables.md +++ b/docs/help/contents/editor/tables.md @@ -1 +1,100 @@ # Tables + +![Table](/table-example-22.png) + +Tables in Notesnook provide all the basic to advanced functionality. On the left size are the `Row properties` and `Insert a new row` buttons while on top of the table are `Table properties` and `Insert a new column` buttons. + +The first row of a table is always a header however you can always delete this row. + +## Insert a table + +1. Click on the ![Toolbar plus](/toolbar-plus.png) and select the table block. +2. Select the size of the table grid. + +![Create a table](/create-table.png) + +## Resizing table columns + +Table columns on desktop and web apps are resizable. + +1. Hover on the seperator between two columns, it will turn green +2. Click and hold the move to resize the column + +![Resize a table](/resize-table.gif) + +> info +> +> Tablec column resizing is not supported on mobile editor yet. + +## Insert a row + +1. Click on a cell below which you want to insert a new row. +2. Click on the `Insert row below` button to insert a new row. + +![Insert row table](/insert-row-table.gif) + +## Delete a row + +1. Click on the cell of the row you want to delete +2. Click on the cell properties button and select `Delete row` + +![Insert row table](/table-row-delete.png) + +## Move row + +1. Click on the cell of the row you move. +2. Click on the cell properties button and select `Move row up` to move the row up or `Move row down` to move the row down. + +![Move table row](/table-move-row.gif) + +## Insert a column + +1. Click on a cell after which you want to insert a new column. +2. Click on the `Insert column right` button to insert a new column. + +![Move table row](/table-insert-column.gif) + +## Delete a column + +1. Click on the cell of the column you want to delete +2. Click on the table properties button and select `Delete column` + +![Delete table column](/table-delete-column.png) + +## Move column + +1. Click on the cell of the column you move. +2. Click on the table properties button on top and select `Move column right` to move the column right or `Move column left` to move the column right. + +![Move table row](/table-move-column.gif) + +## Merge cells + +1. Drag and select the cells you want to merge +2. Click on table properties on top of table and select `Merge cells` + +![Merge table cells](/table-merge-cells.gif) + +## Split cells + +1. Double click to select the cell you want to split +2. Click on table properties on top of table and select `Split cells` + +![Slipt table cells](/table-split-cell.gif) + +## Cell Properties + +1. Select the cell you want to customize +2. Click on table properties button on top +3. Select Cell properties +4. You can now change cell background, text color and border color. + +![Cell properties](/cell-properties.png) + +## Delete table + +1. Select the table +2. Click on table properties button top. +3. Select `Delete table` from drop down menu + +![Delete table](/delete-table.png) diff --git a/docs/help/contents/editor/task-lists.md b/docs/help/contents/editor/task-lists.md index 4d63a4693..d16bfaa2f 100644 --- a/docs/help/contents/editor/task-lists.md +++ b/docs/help/contents/editor/task-lists.md @@ -1 +1,23 @@ # Task lists + +Manage your task in Notesnook with ease using task lists. + +## Adding a title to a task list + +When you add a task list to a note, a header is added on top of each task list. You can add a title to the task list. + +![task header title](/task-header-title.png) + +## Sort completed tasks + +Sort completed tasks at the bottom of task list by clicking on the ![sort completed task icon](/sort-task-icon.png) button on the task list header. + +## Clear completed tasks + +Clear completed tasks by clicking on the ![Clear completed task button](/sort-task-icon.png) button on the task list header. + +## Moving tasks with drag and drop + +You can move tasks and change the order by drag and drop using the drag handle at the start of each task item. + +![Moving tasks](/drag-drop.gif) diff --git a/docs/help/contents/editor/toolbar.md b/docs/help/contents/editor/toolbar.md index 4f1dd27e7..fe1c4868d 100644 --- a/docs/help/contents/editor/toolbar.md +++ b/docs/help/contents/editor/toolbar.md @@ -2,12 +2,16 @@ 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. +![Toolbar](/toolbar-editor.png) + ## 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. +![Toolbar](/toolbar-blocks.png) + ## 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. @@ -16,6 +20,8 @@ One of the great features of the editor is the ability to customize the editor t To customize the toolbar go to `Settings` > `Editor Settings` and click on `Configure Toolbar`. +![Configure editor toolbar](/config-toolbar-desktop.png) + # [Mobile](#/tab/mobile) To customize the toolbar go to `Settings` > `Customization` > `Editor` and click on `Configure Toolbar`. diff --git a/docs/help/docgen.yaml b/docs/help/docgen.yaml index 6ec1c6bb6..c9fc00170 100644 --- a/docs/help/docgen.yaml +++ b/docs/help/docgen.yaml @@ -28,7 +28,6 @@ navigation: - path: editor/personalizing-editor.md - path: editor/markdown-shortcuts.md - path: editor/toolbar.md - - path: editor/outline-lists.md - path: editor/tables.md - path: editor/task-lists.md - path: importing-notes