HumanSignal / HumanSignal/label-studio

prd: Markdown Editing Support for TextArea Tag

Open
#9,207 4 comments 0 reactions 0 assignees View on GitHub
community_feature-request
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

![markdown-demonstrate](https://private-user-images.githubusercontent.com/200564889/537816320-1a254c74-5ec8-4396-8cb6-07471d3d410b.gif?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3Njg4ODA2NDksIm5iZiI6MTc2ODg4MDM0OSwicGF0aCI6Ii8yMDA1NjQ4ODkvNTM3ODE2MzIwLTFhMjU0Yzc0LTVlYzgtNDM5Ni04Y2I2LTA3NDcxZDNkNDEwYi5naWY_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjYwMTIwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI2MDEyMFQwMzM5MDlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kYmE5ZDMyOGEwYjMwMmViMzI0Y2NlM2QwZjA0M2ZiNzIxMmJmNjIwNjAyYWQ1MDIyZWFiOTRiZGY3YjQzMjZkJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.Ap8bPphAa7zH0iKyOhxa-JFnnt0XBolkBnCW1BEezHk)

*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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.