feature request(annotations): extend rich markdown editor/cards to annotation modal
Nobody has claimed this yet.
- Dominant language
- Python
- Stars
- 39.9k
- Forks
- 3.4k
- Avg merge
- 6h 51m
- Merged PRs (30d)
- 232
Description
Is your feature request related to a problem?
Annotations support markdown today: the content already renders through the same TextContent component used by dashboard text cards (see frontend/src/lib/components/AnnotationsOverlay/AnnotationsOverlay.tsx:459), and the input is LemonTextAreaMarkdown with a Preview tab. What's missing is the new TipTap-based WYSIWYG editing experience that text cards got with #51361 and #51681. A customer plans to use annotations extensively to track correlations with product activity and reported that, without the rich editor, the input experience does not match what they get on text tiles.
Describe the solution you'd like
Use RichMarkdownEditor (frontend/src/lib/components/MarkdownEditor/rich/RichMarkdownEditor.tsx) inside AnnotationModal.tsx, following the same lazy-load + legacy-fallback pattern used by TextCardModalBodyField.tsx so that existing annotations with non-roundtrippable markdown keep working.
Four decisions to make as part of the implementation (which are why I've raised this as a feature rather than doing it myself):
- Character limit: cards use 4000, annotations cap at 400 today, the DB supports 8192. Pick the right value for annotations.
- Modal sizing:
AnnotationModaliswidth={512}and the rich editor defaults tominRows=8, maxRows=20. Either resize the modal or pass smaller min/max rows for annotations. - Markdown extension set:
TEXT_CARD_MARKDOWN_EXTENSIONSis tuned for cards (tables, embeds, images). Annotations may want a narrower set (headings, lists, bold/italic, links, code). - Legacy fallback: replicate the
shouldUseLegacyMarkdownEditorcheck from text cards so existing 400-char content that does not round-trip through TipTap is not corrupted on edit.
Describe alternatives you've considered
Customers can already author markdown in the existing input (it has a Preview tab and image upload), but it is a textarea, not the WYSIWYG editor they expect after seeing the changelog.
Additional context
Requested by customer here: https://posthoghelp.zendesk.com/agent/tickets/57891 (moved to PostHog: https://us.posthog.com/project/2/support/tickets/58902)
Debug info
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing AnnotationModal.tsx with TextCardModalBodyField.tsx and inspect RichMarkdownEditor.tsx, including the legacy-fallback logic and extension configuration. Decide the annotation character limit, modal sizing, and supported markdown extensions, then verify that new annotations use the rich editor while existing non-roundtrippable content remains editable without corruption.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100