AgentsInFlow
AgentsInFlow

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.

[Screenshot: Editor open in a note tab showing markdown content with syntax-highlighted code block, toolbar, and sidebar tree]

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.

ElementSyntaxShortcut
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

Default

Full 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.

[Screenshot: Split view mode showing editor on the left and rendered preview on the right]

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.

CommandInserts
/headingHeading block (select level 1–6)
/bulletBullet list
/numberedOrdered list
/todoTask list with checkboxes
/codeFenced code block with language selector
/quoteBlockquote
/tableTable (configurable rows and columns)
/dividerHorizontal rule
/imageImage embed (paste URL or upload)
/diagramMermaid or Excalidraw diagram block
/chartECharts interactive chart widget
[Screenshot: Slash command palette open with filtered results showing /diagram and /divider]

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.

1

Open a tab — Click any note in the sidebar tree or open a ticket description from the inspector.

2

Reorder tabs — Drag a tab left or right to rearrange.

3

Close a tab — Click the close icon on the tab, or use Cmd+W.

4

Close other tabs — Right-click a tab to access "Close Others" and "Close All" actions.

[Screenshot: Multiple editor tabs open with one active tab highlighted and context menu visible]

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.

ActionHow
Create noteClick the + button in the sidebar header or right-click a folder
Create folderRight-click in the sidebar and select "New Folder"
RenameRight-click a note or folder and select "Rename", or double-click the title
MoveDrag and drop within the sidebar tree
DeleteRight-click and select "Delete" (confirmation required)
DuplicateRight-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).

[Screenshot: Search and replace bar open at the top of the editor with match highlights in the content]
  • 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.

SettingOptionsDefault
Font size12–24 px14px
Font familySystem, Inter, monospaceInter
Line height1.4–2.01.6
Tab size2 or 4 spaces2
Word wrapOn / OffOn
Spell checkOn / OffOn

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.