✨ Enhancement: Refactor StyledMarkdown.tsx for Modular Markdown Rendering

[idanidan29]

Description

The StyledMarkdown component is the cornerstone for rendering all markdown content on the JSON Schema website. It converts markdown syntax into styled HTML, handles link transformation, tab group parsing, and generates a dynamic Table of Contents. Refactor it to improve maintainability, testability, and integrate ShadCN/UI primitives while preserving existing behaviors.

---

Tasks

1. Modularization

• Extract Utilities:
  • Move link transformation logic into utils/transformLinks.ts
  • Move regex-based tab group parsing into utils/parseTabGroups.ts
• Decompose Components:
  • Create <MarkdownBlock> to render standard markdown sections
  • Create <TabsGroup> to encapsulate tab parsing & switching
  • Create <TableOfContents> using React Context for navigable outlines

2. UI Library Integration

• Headers & Text: Replace custom heading overrides with ShadCN’s <Heading> and <Typography>
• Alerts & Callouts: Swap custom alert blocks for ShadCN’s <Alert> or <Callout>
• Code Blocks: Render code fences with ShadCN’s <Code> component
• Tables: Use ShadCN’s <Table> suite for all markdown tables
• Tabs: Render dynamic tabs via ShadCN’s <Tabs> primitives within <TabsGroup>

Are you working on this?

Yes