Add Markdown Rendering and Preview to the Notes Editor

[rishabhx29]

Description

The Notes editor in Notes.tsx is a plain <textarea> that renders saved content as whitespace-pre-wrap text. Notes are primarily used to record algorithm insights, time complexities, and code snippets — all of which benefit greatly from markdown formatting. The project already has both react-markdown and remark-gfm installed in app/package.json.

Requirements

• Add an Edit / Preview toggle to the note editor header.
• In Edit mode, the existing <textarea> is shown.
• In Preview mode, content is rendered via <ReactMarkdown> with remark-gfm plugins.
• Code blocks in the preview should be syntax-highlighted.
• On lg: breakpoints, show both panels side-by-side.
• No new mandatory dependencies — use the already-installed react-markdown and remark-gfm.

Expected Behavior

Edit Mode — Raw markdown text input in the existing <textarea>.

Preview Mode — Rendered HTML with formatted headings, lists, code blocks, and bold/italic text. Code blocks are syntax-highlighted.

Large Screens (lg: and above) — Editor on the left, live preview on the right, no toggle needed.

Tasks

• Add an isPreview boolean state to the note editor.
• Add an "Edit / Preview" toggle button in the editor header.
• Replace the static whitespace-pre-wrap div in note view with <ReactMarkdown remarkPlugins={[remarkGfm]}>.
• Add syntax highlighting for code blocks (use prism or react-syntax-highlighter).
• On lg: screens, use a CSS grid to show editor and preview side-by-side.
• Ensure save/cancel flow is not disrupted by the new toggle state.

Acceptance Criteria

• Markdown content renders correctly: headings, lists, bold, italic, tables, and code blocks.
• Code blocks are syntax-highlighted in preview.
• Edit/Preview toggle works on all screen sizes.
• Notes saved in markdown display correctly when re-opened and viewed.

[arcgod-design]

Hi! @Rishabhworkspace I'd like to work on this issue as part of SSoC 2026. Could you please assign this issue to me? I can add markdown rendering and preview to the notes editor. Thank you!Hi! I'd like to work on this issue as part of SSoC 2026. Could you please assign this issue to @arcgod-design ? I can add markdown rendering and preview to the notes editor. Thank you!

[Itsssaksham]

hlo, i'd like to work on this issue under ssoc26

[StackFox]

Hi! @Rishabhworkspace👋

I'd like to work on this issue if it's still available. I have experience with React and TypeScript, and I'm comfortable implementing the markdown preview, responsive layout, and syntax highlighting while keeping the existing save/cancel flow intact.

Could you please assign this issue to me?

Thanks!

[AnushaRumi]

Hi @Rishabhworkspace can u plz assign this issue to me as it is still unassigned

[arcgod-design]

Hi @Rishabhworkspace! I'd love to work on this as part of SSoC '26.

My Approach:

• Add an Edit / Preview toggle button to the Notes.tsx editor header using an isPreview boolean state
• In Edit mode, display the existing <textarea> as-is
• In Preview mode, render content using <ReactMarkdown> with remark-gfm (already a dependency)
• Add syntax highlighting for code blocks using react-syntax-highlighter or prism
• On lg: breakpoints, show editor and live preview side-by-side without the toggle
• Maintain the existing save/cancel workflow without breaking it

Could you please assign this to me (@arcgod-design)? Thank you!