feat: add makdown preview

[misterioso013]

This pull request adds markdown preview functionality to the editor, allowing users to view markdown content with enhanced formatting and syntax highlighting. It introduces new dependencies for markdown rendering and syntax highlighting, updates the Preview component to support a selectedTab prop for switching between preview modes, and customizes the markdown rendering for better readability and style.

Markdown Preview Feature:

• Added support for rendering markdown in the Preview component using the react-markdown and remark-gfm libraries. The markdown tab now displays formatted content, including tables, lists, and blockquotes.
• Implemented syntax highlighting for code blocks in markdown using react-syntax-highlighter and the dracula theme.
• Customized markdown elements (headings, paragraphs, links, lists, tables, etc.) with Tailwind CSS classes for improved styling and readability in the preview.
• Added a utility function getIdFromHeading to generate anchor IDs for heading elements in markdown, supporting anchor navigation.

Component and Prop Updates:

• Updated the Preview component to accept a selectedTab prop, enabling conditional rendering between markdown and regular preview modes. Adjusted all usages of Preview in MEditor to pass the correct tab.

Dependency Additions:

• Added react-markdown, remark-gfm, react-syntax-highlighter, and their type definitions to package.json to support markdown rendering and code syntax highlighting.

preview and test:

• Copy this markdown and paste it into the 'MD' tab
• See:
  

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
fronteditorv2	Ready	Preview	Comment	Sep 29, 2025 3:11pm