Markdown support with live preview for notes#36
Conversation
|
@MohanPrasathSece is attempting to deploy a commit to the Dhanush Nehru's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Hi @DhanushNehru, I implemented Markdown with a live preview while keeping plain text storage. It works on desktop and mobile and preserves the existing autosave/delete flows. Could you assign this to me and add the Hacktoberfest label? I’m happy to tweak styling or add a small rendered preview in the sidebar if you’d like. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
DhanushNehru
added
enhancement
There was a problem hiding this comment.
Pull Request Overview
Adds Markdown formatting support to the note editor with a live preview feature. Users can now toggle between Edit and Preview modes to write in Markdown and see the formatted output in real-time.
- Integrates react-markdown with GitHub Flavored Markdown (GFM) support
- Adds Edit/Preview toggle tabs to the note editor interface
- Implements typography styling with Tailwind CSS typography plugin
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| tailwind.config.ts | Adds @tailwindcss/typography plugin for prose styling |
| src/components/NoteEditor.tsx | Implements tabbed interface with Edit/Preview modes |
| src/components/MarkdownRenderer.tsx | Creates markdown rendering component with custom styling |
| package.json | Adds react-markdown and remark-gfm dependencies |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| className="flex-1 resize-none border-none shadow-none focus-visible:ring-0 text-base leading-relaxed" | ||
| placeholder="Start writing..." | ||
| /> | ||
| <Tabs value={mode} onValueChange={(v) => setMode(v as 'edit' | 'preview')} className="flex-1 flex flex-col"> |
There was a problem hiding this comment.
Duplicate Tabs component - the mode state and onValueChange logic is duplicated on lines 57 and 86. Consider consolidating into a single Tabs wrapper or extracting the mode switching logic.
| a: ({ node, ...props }) => ( | ||
| // Open links in new tab and add rel for security | ||
| <a {...props} target="_blank" rel="noopener noreferrer" /> | ||
| ), |
There was a problem hiding this comment.
[nitpick] Opening all links in new tabs without user consent may not be the best UX. Consider allowing users to control this behavior or only applying it to external links.
| a: ({ node, ...props }) => ( | |
| // Open links in new tab and add rel for security | |
| <a {...props} target="_blank" rel="noopener noreferrer" /> | |
| ), | |
| a: ({ node, ...props }) => { | |
| // Only open external links in a new tab | |
| const href = props.href || ''; | |
| let isExternal = false; | |
| try { | |
| // If href is absolute, check origin; if relative, it's internal | |
| const url = new URL(href, typeof window !== 'undefined' ? window.location.origin : 'http://localhost'); | |
| isExternal = url.origin !== (typeof window !== 'undefined' ? window.location.origin : 'http://localhost'); | |
| } catch (e) { | |
| // If URL parsing fails, treat as internal | |
| isExternal = false; | |
| } | |
| return isExternal ? ( | |
| <a {...props} target="_blank" rel="noopener noreferrer" /> | |
| ) : ( | |
| <a {...props} /> | |
| ); | |
| }, |
| // eslint-disable-next-line @next/next/no-img-element | ||
| <img {...props} className="max-w-full h-auto rounded" /> | ||
| ), | ||
| code({ inline, className, children, ...props }) { |
There was a problem hiding this comment.
Missing TypeScript types for the code component props. Consider adding proper typing for better type safety and IDE support.
|
Merge conflicts to be resolved and fixes to me made @MohanPrasathSece |
This adds Markdown formatting to the note editor (headings, bold/italic, strikethrough, lists, blockquotes, inline/code blocks, links, images) and an Edit/Preview toggle. Notes are still saved as raw Markdown. Includes react-markdown + remark-gfm and typography styling.