Markdown Editor Frontend Component

[ElioNeto]

Markdown Editor Frontend Component

Build a full-featured Markdown editor as an Angular component for the ApexStore frontend.

Features

Editor Capabilities

• Syntax-highlighted Markdown editing (CodeMirror 6 or Monaco)
• Split pane: edit + live preview
• WYSIWYG toolbar (bold, italic, heading, list, link, image)
• [[wikilink]] autocomplete (suggest existing notes)
• #tag autocomplete
• Drag-and-drop image attachment upload
• Keyboard shortcuts (Ctrl+B bold, Ctrl+K link, etc.)
• Tab support (indent/unindent)
• Line numbers
• Word count / reading time

Preview

• Live Markdown rendering (marked/markdown-it)
• Code syntax highlighting (Prism.js or highlight.js)
• Math formula rendering (KaTeX)
• Mermaid diagram rendering
• Embedded ![[image]] rendering
• Checkbox rendering [ ] / [x]

Note Properties

• Frontmatter editor (YAML fields: title, aliases, tags, dates)
• Properties panel (toggle sidebar)
• Tags inline editing

Technical Requirements

• Angular 17 component (existing frontend at frontend/)
• RxJS for state management
• Lazy loading for editor bundle
• Auto-save on idle (debounced, ~2s after last change)
• WebSocket listener for real-time updates from sync
• Responsive design (desktop + tablet)

API Integration

PUT    /notes/{path}          — Save note content
GET    /notes/{path}          — Load note content
GET    /search?q={query}&type=prefix  — Autocomplete for [[links]]
GET    /tags                  — Autocomplete for #tags
POST   /notes/{path}/attachments — Upload images

Acceptance Criteria

• Editor loads existing note content from API
• Changes are auto-saved on idle
• Wikilink autocomplete shows note suggestions
• Preview renders Markdown correctly
• Image upload works via drag-and-drop
• Editor performs well with 100KB+ notes
• Keyboard shortcuts work
• Unit and e2e tests for editor component

Parent Epic

#275

[ElioNeto]

Resolved via feat/notes-engine-v2 branch (PR #321)