HumanSignal / HumanSignal/label-studio
prd: Markdown Editing Support for TextArea Tag
- Dominant language
- TypeScript
- Stars
- 28.3k
- Forks
- 3.7k
- Avg merge
- 14h
- Merged PRs (30d)
- 15
Description
#8676
## Problem
1. Annotators cannot edit Markdown content directly in Label Studio.
2. They must copy content to external editors, make changes, and paste back—breaking the workflow and risking errors.
## Proof of Concept (PoC)
Working implementation: https://github.com/Zenobia2222/PR-LS/tree/feat/textarea-with-markdown
### Demo

*Watch the demo above to see: syntax highlighting, Edit/Split toggle, real-time stats. ☝️*
### Quick Start
Simply add `markdown="true"` to your TextArea tag:
```xml
</View>
```
## User Stories
**As an annotator**, I want to edit Markdown text directly with syntax highlighting, so I can refine content without switching to external tools.
**As an annotator**, I want to toggle between Edit and Split (preview) modes, so I can verify the rendered output before submitting.
## Acceptance Criteria
- [x] CodeMirror editor with Markdown syntax highlighting
- [x] Edit/Split view mode toggle preserves content
- [x] Real-time character and word count display
- [x] `Shift+Enter` submits (consistent with existing TextArea)
- [x] Works with existing TextArea attributes (`editable`, `perRegion`, `rows`, etc.)
- [x] Backward compatible (defaults to `false`)
- [x] Unit tests + E2E tests (192 lines, ≥80% coverage)
- [x] Documentation updated
## Technical Details
**Implementation**: Reuses existing Label Studio components (CodeMirror via `react-codemirror2`, existing Markdown renderer, MobX state management). No backend changes needed.
Contributor guide
Assessment
This issue has not been assessed yet.