The Editor
Full-featured markdown editing for notes, ticket descriptions, and project documentation.
Overview
Every note, ticket description, and document in AgentsInFlow uses a rich markdown editor built on TipTap (a ProseMirror framework). The editor provides live syntax highlighting, inline formatting, fenced code blocks with language detection, embedded diagrams, and media content. It works as a knowledge base where you write, reference, and visualize information within the context of your project.
The editor surfaces in two places: the Notes tab for standalone documents and the ticket description panel inside ticket inspectors. Both share the same feature set.
Markdown & Syntax Highlighting
The editor renders markdown in real time as you type. Fenced code blocks support syntax highlighting for over 50 languages. The language is auto-detected from the opening fence or can be set explicitly.
| Element | Syntax | Shortcut |
|---|---|---|
| Bold | **text** | Cmd+B |
| Italic | *text* | Cmd+I |
| Strikethrough | ~~text~~ | Cmd+Shift+S |
| Inline code | `code` | Cmd+E |
| Heading 1–6 | # ... ###### | — |
| Link | [text](url) | Cmd+K |
| Code block | ```lang | — |
| Task list | - [ ] item | — |
| Blockquote | > text | — |
| Table | | col | col | | — |
On Windows, replace Cmd with Ctrl for all keyboard shortcuts. See Keyboard Shortcuts for the full list.
Preview & Split View Modes
The editor supports three view modes, toggled from the toolbar or via keyboard shortcuts:
Edit Mode
DefaultFull editing surface with the formatting toolbar, slash commands, and real-time markdown rendering. This is the default when you open or create a note.
Preview Mode
Read-only rendered output. The toolbar is hidden and the content is displayed as final formatted output. Useful for reviewing or presenting notes.
Split Mode
Side-by-side editing and preview. The left pane is the live editor, the right pane shows the rendered output. Changes sync in real time.
Slash Commands
Type / on an empty line to open the command palette. Slash commands insert blocks without reaching for the toolbar. Start typing to filter the list.
| Command | Inserts |
|---|---|
| /heading | Heading block (select level 1–6) |
| /bullet | Bullet list |
| /numbered | Ordered list |
| /todo | Task list with checkboxes |
| /code | Fenced code block with language selector |
| /quote | Blockquote |
| /table | Table (configurable rows and columns) |
| /divider | Horizontal rule |
| /image | Image embed (paste URL or upload) |
| /diagram | Mermaid or Excalidraw diagram block |
| /chart | ECharts interactive chart widget |
Diagrams and charts are rendered inline. See Editor & Diagrams for detailed diagram authoring documentation.
Editor Tabs
Notes and ticket descriptions open in tabs along the top of the editor area. You can work with multiple documents simultaneously.
Open a tab — Click any note in the sidebar tree or open a ticket description from the inspector.
Reorder tabs — Drag a tab left or right to rearrange.
Close a tab — Click the close icon on the tab, or use Cmd+W.
Close other tabs — Right-click a tab to access "Close Others" and "Close All" actions.
Unsaved changes are indicated by a dot on the tab. Tabs persist across sessions — reopening a project restores the last set of open tabs.
File Management
Notes are organized in a tree structure within the sidebar. You manage them directly from the sidebar without leaving the editor.
| Action | How |
|---|---|
| Create note | Click the + button in the sidebar header or right-click a folder |
| Create folder | Right-click in the sidebar and select "New Folder" |
| Rename | Right-click a note or folder and select "Rename", or double-click the title |
| Move | Drag and drop within the sidebar tree |
| Delete | Right-click and select "Delete" (confirmation required) |
| Duplicate | Right-click and select "Duplicate" |
Notes are stored as part of your project data and are included when you export or back up a project.
Search & Replace
The editor includes built-in search and replace. Open it with Cmd+F (macOS) or Ctrl+F (Windows).
- Case-sensitive and whole-word match toggles
- Regex pattern support
- Replace one or replace all in a single action
- Match count displayed as you type
- Navigate between matches with arrow buttons or
Enter/Shift+Enter
Press Cmd+H to open search with the replace field expanded directly.
Themes & Configuration
The editor inherits the application's dark theme. You can fine-tune editor behavior from the project settings panel.
| Setting | Options | Default |
|---|---|---|
| Font size | 12–24 px | 14px |
| Font family | System, Inter, monospace | Inter |
| Line height | 1.4–2.0 | 1.6 |
| Tab size | 2 or 4 spaces | 2 |
| Word wrap | On / Off | On |
| Spell check | On / Off | On |
Code block syntax highlighting uses a VS Code-aligned dark palette that adapts automatically. No separate theme selection is needed. For engine and model settings, see Engine & Model Config.