Skip to content

Commit da52403

Browse files
PhilipinhoPhilipinho
committed
docs
1 parent 70adce0 commit da52403

3 files changed

Lines changed: 281 additions & 1 deletion

File tree

‎docs/user-guide/editor.md‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
---
2+
sidebar_position: 6
3+
---
4+
5+
# Editor
6+
7+
Docmost features a block-based rich text editor built on top of TipTap. The editor supports a wide range of content types, formatting options, and embeds to help you create rich documentation.
8+
9+
## Slash Commands
10+
11+
Type `/` on a new line to open the slash command menu. You can also type to filter commands by name. The following commands are available:
12+
13+
### Basic
14+
15+
| Command | Description |
16+
|---------|-------------|
17+
| **Text** | Plain paragraph text |
18+
| **To-do list** | Track tasks with a to-do list with checkboxes |
19+
| **Heading 1** | Large section heading |
20+
| **Heading 2** | Medium section heading |
21+
| **Heading 3** | Small section heading |
22+
| **Bullet list** | Create an unordered bullet list |
23+
| **Numbered list** | Create an ordered numbered list |
24+
| **Quote** | Create a block quote |
25+
| **Code** | Insert a code block with syntax highlighting |
26+
| **Divider** | Insert a horizontal rule divider |
27+
28+
### Media
29+
30+
| Command | Description |
31+
|---------|-------------|
32+
| **Image** | Upload an image from your device |
33+
| **Video** | Upload a video from your device |
34+
| **File attachment** | Upload any file from your device |
35+
36+
### Structure
37+
38+
| Command | Description |
39+
|---------|-------------|
40+
| **Table** | Insert a table |
41+
| **Table View** | Insert a database-style table view |
42+
| **Kanban Board** | Insert a Kanban board |
43+
| **Toggle block** | Insert a collapsible block |
44+
| **Callout** | Insert a callout notice block |
45+
| **Columns (2-5)** | Insert multi-column layouts |
46+
47+
### Advanced
48+
49+
| Command | Description |
50+
|---------|-------------|
51+
| **Math inline** | Insert an inline math equation (KaTeX) |
52+
| **Math block** | Insert a block-level math equation (KaTeX) |
53+
| **Mermaid diagram** | Insert a Mermaid diagram (flowcharts, sequence diagrams, etc.) |
54+
| **Draw.io** | Open the Draw.io diagram editor |
55+
| **Excalidraw** | Open the Excalidraw whiteboard editor |
56+
| **Date** | Insert a date with a calendar picker |
57+
| **Subpages** | List all child pages of the current page |
58+
| **Insert Link** | Link to pages or external URLs |
59+
| **Mention member** | Mention a workspace member |
60+
61+
### Embeds
62+
63+
| Command | Description |
64+
|---------|-------------|
65+
| **Iframe embed** | Embed content via an iframe URL |
66+
| **Airtable** | Embed an Airtable base |
67+
| **Loom** | Embed a Loom video |
68+
| **Figma** | Embed Figma files |
69+
| **Typeform** | Embed a Typeform |
70+
| **Miro** | Embed a Miro board |
71+
| **YouTube** | Embed a YouTube video |
72+
| **Vimeo** | Embed a Vimeo video |
73+
| **Framer** | Embed a Framer prototype |
74+
| **Google Drive** | Embed Google Drive content |
75+
| **Google Sheets** | Embed Google Sheets |
76+
| **Google Docs** | Embed Google Docs |
77+
78+
## Formatting Toolbar
79+
80+
Select text to reveal the floating formatting toolbar. The toolbar provides quick access to:
81+
82+
- **Ask AI** - Use the AI assistant to help with writing
83+
- **Block type** - Convert the block to a different type (Text, Heading 1-3, To-do List, Bullet List, Numbered List, Blockquote, Code, Callout, Toggle block)
84+
- **Alignment** - Align text left, center, right, or justify
85+
- **Bold** (`Ctrl/Cmd + B`)
86+
- **Italic** (`Ctrl/Cmd + I`)
87+
- **Underline** (`Ctrl/Cmd + U`)
88+
- **Strikethrough**
89+
- **Inline code** (`Ctrl/Cmd + E`)
90+
- **Link** - Insert or edit a hyperlink
91+
- **Text color** - Choose from a palette of text colors
92+
- **Highlight color** - Choose from a palette of background highlight colors
93+
- **Comment** - Add an inline comment on the selected text
94+
95+
## @ Mentions
96+
97+
Type `@` in the editor to open the mention menu. The menu shows two sections:
98+
99+
- **Users** - Mention workspace members by name. Mentioned users may receive notifications.
100+
- **Pages** - Link to existing pages in your workspace. Type to search for a specific page.
101+
102+
## Emoji
103+
104+
Type `:` followed by a keyword to search and insert emoji. For example, `:smile` shows matching emoji suggestions.
105+
106+
## Drag and Drop
107+
108+
Hover over any block to reveal a drag handle on the left. Click and drag the handle to reorder blocks within the page.
109+
110+
## Keyboard Shortcuts
111+
112+
### Text Formatting
113+
114+
| Shortcut | Action |
115+
|----------|--------|
116+
| `Ctrl/Cmd + B` | Bold |
117+
| `Ctrl/Cmd + I` | Italic |
118+
| `Ctrl/Cmd + U` | Underline |
119+
| `Ctrl/Cmd + E` | Inline code |
120+
| `Ctrl/Cmd + Shift + X` | Strikethrough |
121+
122+
### Blocks
123+
124+
| Shortcut | Action |
125+
|----------|--------|
126+
| `Ctrl/Cmd + Alt + 1-6` | Heading 1-6 |
127+
| `Ctrl/Cmd + Shift + B` | Block quote |
128+
| `Ctrl/Cmd + Alt + C` | Code block |
129+
| `Ctrl/Cmd + Shift + U` | Bullet list |
130+
| `Ctrl/Cmd + Shift + O` | Numbered list |
131+
| `Ctrl/Cmd + Shift + T` | Toggle task list |
132+
133+
### General
134+
135+
| Shortcut | Action |
136+
|----------|--------|
137+
| `Ctrl/Cmd + F` | Find and replace |
138+
| `Ctrl/Cmd + A` | Select all (within code block, selects code content only) |
139+
| `Tab` | Indent list item or navigate to next table cell |
140+
| `Shift + Tab` | Outdent list item or navigate to previous table cell |
141+
| `/` | Open slash command menu |
142+
| `@` | Open mention menu |
143+
| `:` | Open emoji picker |
144+
145+
### Markdown Shortcuts
146+
147+
The editor supports standard Markdown shortcuts as you type:
148+
149+
| Input | Result |
150+
|-------|--------|
151+
| `# ` | Heading 1 |
152+
| `## ` | Heading 2 |
153+
| `### ` | Heading 3 |
154+
| `- ` or `* ` | Bullet list |
155+
| `1. ` | Numbered list |
156+
| `[ ] ` | To-do list item |
157+
| `> ` | Block quote |
158+
| `` ``` `` | Code block |
159+
| `---` | Divider |
160+
| `**text**` | Bold |
161+
| `*text*` | Italic |
162+
| `` `text` `` | Inline code |
163+
| `~~text~~` | Strikethrough |
164+
165+
You can also paste Markdown content directly into the editor and it will be automatically converted to rich text.

‎docs/user-guide/pages.md‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
sidebar_position: 7
3+
---
4+
5+
# Pages
6+
7+
Pages are the core content units in Docmost. Each page lives within a space and supports rich text editing, nested sub-pages, comments, version history, and more.
8+
9+
## Creating a Page
10+
11+
To create a new page:
12+
13+
1. In the sidebar, click **New page** or click the **+** icon next to the **Pages** header.
14+
2. A new untitled page will open in the editor.
15+
3. Click the title area to give your page a name.
16+
4. Start writing in the body area. Type `/` to access slash commands.
17+
18+
### Creating a Sub-page
19+
20+
Pages can be nested to create a hierarchy. To create a sub-page:
21+
22+
1. Hover over a page in the sidebar to reveal a **+** icon.
23+
2. Click the **+** icon to create a child page under the selected page.
24+
25+
You can also drag and drop pages in the sidebar to rearrange or nest them under other pages.
26+
27+
## Page Toolbar
28+
29+
At the top of every page you will find:
30+
31+
- **Edit / Read** toggle - Switch between editing and read-only mode.
32+
- **Share** - Manage public sharing settings for the page (when enabled at the workspace level).
33+
- **Comments** - Open the comments panel to view, add, or resolve comments.
34+
- **Table of contents** - Open the table of contents sidebar, auto-generated from headings.
35+
- **Page menu (...)** - Access additional page actions.
36+
37+
## Page Menu
38+
39+
Click the **three-dot menu (...)** at the top right of a page to access:
40+
41+
| Action | Description |
42+
|--------|-------------|
43+
| **Copy link** | Copy the page URL to your clipboard |
44+
| **Copy as Markdown** | Copy the page content as Markdown text |
45+
| **Full width** | Toggle full-width layout for the page |
46+
| **Page history** | View and restore previous versions of the page |
47+
| **Move** | Move the page to a different space or parent page |
48+
| **Export** | Export the page in Markdown or HTML format |
49+
| **Print PDF** | Generate a PDF version of the page |
50+
| **Move to trash** | Delete the page by moving it to trash |
51+
52+
The menu footer also displays the **word count**, **creator name**, and **creation date**.
53+
54+
## Comments
55+
56+
Docmost supports inline comments on page content. To add a comment:
57+
58+
1. Select the text you want to comment on.
59+
2. Click the **comment icon** in the floating toolbar.
60+
3. Type your comment and submit it.
61+
62+
Comments appear in the comments panel on the right side of the page. The panel has two tabs:
63+
64+
- **Open** - Active comments that need attention.
65+
- **Resolved** - Comments that have been resolved.
66+
67+
## Page History
68+
69+
Docmost keeps a history of changes made to each page. To access page history:
70+
71+
1. Open the **page menu (...)**.
72+
2. Click **Page history**.
73+
3. Browse previous versions and restore if needed.
74+
75+
## Sharing
76+
77+
Pages can be shared publicly when public sharing is enabled at the workspace level. Click the **Share** button or the **globe icon** to manage sharing settings.
78+
79+
## Export
80+
81+
Individual pages can be exported in the following formats:
82+
83+
- **Markdown** - Exports the page as a `.md` file.
84+
- **HTML** - Exports the page as an `.html` file.
85+
86+
Export options include:
87+
88+
- **Include subpages** - Export the page along with all its child pages.
89+
- **Include attachments** - Bundle attached files into the export.
90+
91+
Multi-page exports are packaged as a ZIP file with a folder structure matching the page hierarchy.
92+
93+
To export a page:
94+
95+
1. Open the **page menu (...)**.
96+
2. Click **Export**.
97+
3. Select the export format and options.
98+
4. Click **Export** to download.
99+
100+
## Moving Pages
101+
102+
You can move a page to a different space or change its position in the hierarchy:
103+
104+
1. Open the **page menu (...)** and click **Move**, or
105+
2. Drag and drop the page in the sidebar to reorder or nest it.
106+
107+
## Deleting Pages
108+
109+
To delete a page:
110+
111+
1. Open the **page menu (...)**.
112+
2. Click **Move to trash**.
113+
114+
Deleted pages are moved to the trash and can be restored or permanently deleted from there.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,5 +44,6 @@
4444
},
4545
"engines": {
4646
"node": ">=18.0"
47-
}
47+
},
48+
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
4849
}

0 commit comments

Comments
 (0)