Skip to content

Commit 6b826e4

Browse files
devvaannshdevvaannsh
committed
feat: markdown editor initial docs
1 parent 206d21f commit 6b826e4

2 files changed

Lines changed: 235 additions & 0 deletions

File tree

‎docs/07-Pro Features/05-markdown-editor.md‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
title: Markdown Editor
3+
---
4+
5+
:::info Pro Feature
6+
[Upgrade to Phoenix Code Pro](https://phcode.io/pricing) to access this feature.
7+
:::
8+
9+
The **Markdown Editor** lets you edit Markdown files directly in the Live Preview using a rich text editor. You can format text, add images, create tables, insert links, and more -- all without writing Markdown syntax by hand. Your changes are automatically synced back to the source code.
10+
11+
<!-- Add an image here showing the Markdown Editor in edit mode with the toolbar visible -->
12+
13+
---
14+
15+
## Enabling Edit Mode
16+
17+
To start editing, click the **Edit** button in the preview toolbar. The toolbar expands to show formatting options, and you can start making changes right away.
18+
19+
To go back to the read-only view, click **Reader** (or **Done**) in the toolbar.
20+
21+
<!-- Add an image here showing the Edit button in the toolbar -->
22+
23+
> Pro users start in Edit Mode by default when opening Markdown files.
24+
25+
---
26+
27+
## Toolbar
28+
29+
The toolbar appears at the top of the preview when you enter Edit Mode. It gives you quick access to all the formatting and editing tools described below.
30+
31+
On smaller screens, some toolbar buttons collapse into dropdown menus to save space.
32+
33+
<!-- Add an image here showing the full toolbar with all formatting options visible -->
34+
35+
---
36+
37+
## Text Formatting
38+
39+
Select the text you want to format and click a formatting button, or use the keyboard shortcut. If no text is selected, the formatting applies to the word at your cursor.
40+
41+
- **Bold** (`Ctrl/Cmd + B`)
42+
- **Italic** (`Ctrl/Cmd + I`)
43+
- **Underline** (`Ctrl/Cmd + U`)
44+
- **Strikethrough** (`Ctrl/Cmd + Shift + X`)
45+
- **Inline Code** (`Ctrl/Cmd + E`)
46+
47+
You can also select text and use the **floating format bar** that appears near your selection.
48+
49+
<!-- Add an image here showing the floating format bar appearing above selected text -->
50+
51+
---
52+
53+
## Block Types
54+
55+
Use the **block type dropdown** in the toolbar to change the type of the current block. Options include:
56+
57+
- Paragraph
58+
- Heading 1 through Heading 5
59+
60+
<!-- Add an image here showing the block type dropdown with heading options -->
61+
62+
---
63+
64+
## Lists
65+
66+
The toolbar has buttons for three types of lists:
67+
68+
- **Bullet list** -- unordered list
69+
- **Numbered list** -- ordered list
70+
- **Task list** -- checklist with checkboxes
71+
72+
Click a list button to turn the current line into a list item, or to convert an existing list to a different type.
73+
74+
---
75+
76+
## Block Elements
77+
78+
You can insert these block-level elements from the toolbar:
79+
80+
- **Blockquote** -- a quoted block of text
81+
- **Divider** -- a horizontal line
82+
- **Code block** -- a fenced code block with an optional language picker
83+
- **Table** -- inserts a new table (see [Table Editing](#table-editing))
84+
85+
---
86+
87+
## Slash Menu
88+
89+
Type `/` at the start of an empty line to open the **Slash Menu**. This gives you a quick way to insert any block type without reaching for the toolbar.
90+
91+
<!-- Add an image here showing the Slash Menu with the list of available items -->
92+
93+
The menu shows all available block types: paragraphs, headings, lists, blockquotes, code blocks, tables, dividers, mermaid diagrams, and images. Start typing to filter the list. Use the arrow keys to navigate and press `Enter` to insert.
94+
95+
> The Slash Menu learns from your usage and shows your most-used items first.
96+
97+
### Markdown Shortcuts
98+
99+
You can also use standard Markdown shortcuts as you type:
100+
101+
- `# ` through `##### ` for headings
102+
- `- ` or `* ` for bullet lists
103+
- `1. ` for numbered lists
104+
- `- [ ] ` for task lists
105+
- `> ` for blockquotes
106+
- ` ``` ` for code blocks
107+
- `---` for dividers
108+
109+
---
110+
111+
## Table Editing
112+
113+
When you insert a table, you can edit it directly in the preview. Click any cell to start typing in it. Use `Tab` to move to the next cell.
114+
115+
Right-click a cell to open a context menu with options to:
116+
117+
- Insert or delete rows
118+
- Insert or delete columns
119+
- Copy, cut, and paste rows or columns
120+
- Delete the entire table
121+
122+
You can also click the **+ New row** button below the table to add a row.
123+
124+
<!-- Add an image here showing the table context menu with row and column options -->
125+
126+
---
127+
128+
## Images
129+
130+
You can add images in two ways:
131+
132+
- **From a URL**: Enter the image URL and alt text in a dialog
133+
- **Upload from your computer**: Pick an image file from your device
134+
135+
Both options are available from the **Image** button in the toolbar or through the [Slash Menu](#slash-menu).
136+
137+
Click an image in the editor to see a popover with **Edit** and **Delete** buttons.
138+
139+
<!-- Add an image here showing the image popover with Edit and Delete buttons -->
140+
141+
---
142+
143+
## Links
144+
145+
To add a link, select some text and click the **Link** button in the toolbar (or press `Ctrl/Cmd + K`). Enter the URL in the floating input that appears and press `Enter`.
146+
147+
Click an existing link to see a popover showing the URL, with options to **Edit** or **Remove** the link.
148+
149+
<!-- Add an image here showing the link popover with the URL, Edit button, and Remove button -->
150+
151+
---
152+
153+
## Mermaid Diagrams
154+
155+
You can insert Mermaid diagram blocks through the toolbar or the [Slash Menu](#slash-menu). In Edit Mode, Mermaid blocks show a syntax editor where you write the diagram code, with a live preview of the rendered diagram. Click **Edit** or **Done** to toggle between the code and the preview.
156+
157+
<!-- Add an image here showing a Mermaid diagram block in edit mode with the syntax editor and rendered preview -->
158+
159+
---
160+
161+
## Keyboard Shortcuts
162+
163+
| Action | Shortcut |
164+
|--------|----------|
165+
| Bold | `Ctrl/Cmd + B` |
166+
| Italic | `Ctrl/Cmd + I` |
167+
| Underline | `Ctrl/Cmd + U` |
168+
| Strikethrough | `Ctrl/Cmd + Shift + X` |
169+
| Inline Code | `Ctrl/Cmd + E` |
170+
| Link | `Ctrl/Cmd + K` |
171+
| Undo | `Ctrl/Cmd + Z` |
172+
| Redo | `Ctrl/Cmd + Y` or `Ctrl/Cmd + Shift + Z` |
173+
| Search | `Ctrl/Cmd + F` |
174+
| Select All | `Ctrl/Cmd + A` |
175+

‎docs/08-Features/06-Live Preview/04-markdown-live-preview.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Markdown Live Preview
3+
---
4+
5+
When you open a Markdown file (`.md`), **Live Preview** shows a nicely formatted version of your document. As you type in the editor, the preview updates in real-time so you can see exactly how your Markdown will look.
6+
7+
<!-- Add an image here showing a Markdown file in the editor with its rendered Live Preview side by side -->
8+
9+
---
10+
11+
## Scroll and Cursor Sync
12+
13+
The editor and preview stay in sync as you work. When you scroll or move your cursor in the editor, the preview follows along to show the same section. This also works the other way around -- clicking a section in the preview scrolls the editor to the matching line.
14+
15+
You can turn sync on or off using the **cursor sync toggle** *(link icon)* in the preview toolbar.
16+
17+
<!-- Add an image here showing the cursor sync toggle button in the toolbar -->
18+
19+
---
20+
21+
## Search
22+
23+
Press `Ctrl/Cmd + F` to open a search bar in the preview. Type your search term and use the arrow buttons to jump between matches. The preview highlights all matching text and shows a count of results.
24+
25+
Press `Esc` or click the close button to close the search bar.
26+
27+
---
28+
29+
## Theme Toggle
30+
31+
Click the **theme toggle** button *(sun/moon icon)* in the preview toolbar to switch between light and dark themes. Your choice is remembered across sessions.
32+
33+
<!-- Add an image here showing the theme toggle button and the preview in dark theme -->
34+
35+
---
36+
37+
## Code Blocks
38+
39+
Fenced code blocks are displayed with syntax highlighting. A **Copy** button appears on each code block so you can quickly copy the code.
40+
41+
---
42+
43+
## Mermaid Diagrams
44+
45+
Mermaid diagram blocks (` ```mermaid `) are rendered as visual diagrams in the preview.
46+
47+
---
48+
49+
## Print
50+
51+
Click the **Print** button in the preview toolbar to print your rendered Markdown document.
52+
53+
> Print is not available on macOS desktop apps.
54+
55+
---
56+
57+
## Editing Markdown
58+
59+
On **Phoenix Pro Edition**, you can edit your Markdown directly in the Live Preview using a rich text editor. See [Markdown Editor](../../Pro%20Features/markdown-editor) for details.
60+

0 commit comments

Comments
 (0)