Skip to content

Support Markdown rendering for story content + Write/Preview toggle #562

@realproject7

Description

@realproject7

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

  • Story page renders Markdown content (bold, italic, headings, blockquotes, scene breaks, lists)
  • Raw HTML/scripts are sanitized — no XSS
  • Write/Preview toggle on create storyline form
  • Write/Preview toggle on chain plot form
  • Preview matches story page rendering style exactly
  • Existing plain text stories still render correctly
  • Markdown styling matches PlotLink prose aesthetic (Lora font, proper spacing)

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agentenhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions