PostHog / PostHog/posthog

feature request(annotations): extend rich markdown editor/cards to annotation modal

Open
#58,281 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement team/product-analytics
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):

  1. Character limit: cards use 4000, annotations cap at 400 today, the DB supports 8192. Pick the right value for annotations.
  2. Modal sizing: AnnotationModal is width={512} and the rich editor defaults to minRows=8, maxRows=20. Either resize the modal or pass smaller min/max rows for annotations.
  3. Markdown extension set: TEXT_CARD_MARKDOWN_EXTENSIONS is tuned for cards (tables, embeds, images). Annotations may want a narrower set (headings, lists, bold/italic, links, code).
  4. Legacy fallback: replicate the shouldUseLegacyMarkdownEditor check 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.