Skip to content

Storybook: cover every enabled markdown feature in MarkdownPreview stories #64

Description

@Alimedhat000

Context

PR #60 (#49) introduced behavior specs for the markdown preview as Storybook browser tests (markdown-preview.stories.tsx): XSS sanitization, mermaid rendering (incl. label text), and a small safe-content sample (hljs, links, GFM task lists, KaTeX). That covers the security surface, but the preview enables many more features that have zero automated coverage — any pipeline/schema change could silently break them.

Enabled today (see MarkdownPreview.tsx + docs/client/markdown-preview-sanitization.md): remarkTypographer, remarkGfm, remarkMath, remarkEmoji, rehypeTextDecorations, rehypeSupSub, rehypeKatex, rehypeHighlight, rehypeSlug, mermaid (decoupled renderer).

Scope

One story per feature family (or a matrix story), each asserting the feature renders and survives sanitization:

  • GFM: tables, strikethrough, autolinks, footnotes (+ footnote backrefs), nested lists, blockquotes
  • Task lists (checked + unchecked states)
  • Typographer: smart quotes, dashes, ellipses
  • Emoji shortcodes
  • Inline math + display math ($$...$$) via KaTeX
  • Subscript/superscript (rehypeSupSub syntax)
  • Text decorations (rehypeTextDecorations — underline/marks/etc.)
  • Code fences in several languages → hljs + language-* classes present
  • Heading ids from rehypeSlug + MarkdownToc entries matching
  • Images (http[s] src allowed by schema) + relative-link handling
  • Mermaid: sequence, class, state, gantt, pie, mindmap — each renders svg with visible label text (flowchart already covered; other diagram families use different label paths — this is where htmlLabels/foreignObject regressions would hide)

Acceptance criteria

  • All stories green under pnpm exec vitest run --project storybook
  • Feature docs updated (docs/client/markdown-preview-sanitization.md testing section)
  • No story relies on implementation internals; assert rendered DOM behavior

Related: #49, PR #60

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions