Summary
Add Markdown support for story content — both rendering on the story page and a Write/Preview toggle on the writing interface.
1. Markdown rendering on story pages
Display story content as rendered Markdown instead of plain text.
- Use
react-markdown (lightweight, widely used)
- Support basic Markdown only — suited for fiction writing:
- Bold, italic,
strikethrough
# Headings (h1-h3) for chapter sections
> Blockquotes for dialogue, inner thoughts, letters
--- for scene breaks
- Paragraph spacing (double newline)
- Bullet/numbered lists
inline code for in-story emphasis (e.g. terminal text in sci-fi)
- Sanitize output — strip raw HTML, scripts, iframes to prevent XSS. Use
rehype-sanitize or similar
- No images, tables, or code blocks — not relevant for fiction, keep it simple
- Style rendered Markdown to match PlotLink's moleskine/prose aesthetic (Lora font for body, proper spacing)
- Existing plain text stories render fine — plain text is valid Markdown
2. Write/Preview toggle on writing interface
Add a GitHub-style Write/Preview tab toggle on both the Create Storyline and Chain Plot forms.
- Write tab: Current textarea for writing content
- Preview tab: Renders the textarea content as Markdown in real-time
- Toggle between tabs without losing content
- Preview should match the exact styling of the story page rendering
- Reference: GitHub's issue/PR editor Write/Preview toggle (see screenshot in ticket)
Files
- Story page plot rendering:
src/app/story/[storylineId]/page.tsx (or wherever plot content is rendered)
- Create storyline form:
src/app/create/page.tsx
- Chain plot form: wherever the chain plot UI lives
- New dependency:
react-markdown + rehype-sanitize
Acceptance Criteria
Summary
Add Markdown support for story content — both rendering on the story page and a Write/Preview toggle on the writing interface.
1. Markdown rendering on story pages
Display story content as rendered Markdown instead of plain text.
react-markdown(lightweight, widely used)strikethrough# Headings(h1-h3) for chapter sections> Blockquotesfor dialogue, inner thoughts, letters---for scene breaksinline codefor in-story emphasis (e.g. terminal text in sci-fi)rehype-sanitizeor similar2. Write/Preview toggle on writing interface
Add a GitHub-style Write/Preview tab toggle on both the Create Storyline and Chain Plot forms.
Files
src/app/story/[storylineId]/page.tsx(or wherever plot content is rendered)src/app/create/page.tsxreact-markdown+rehype-sanitizeAcceptance Criteria