feat: add markdown rendering and preview to notes editor#66
feat: add markdown rendering and preview to notes editor#66arcgod-design wants to merge 2 commits into
Conversation
|
Someone is attempting to deploy a commit to the rishabhjtripathi2903-3434's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
Important Review skippedReview was skipped due to path filters ⛔ Files ignored due to path filters (1)
CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including ⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
📝 WalkthroughWalkthroughThis PR adds an Edit/Preview markdown mode to the Notes editor using react-markdown, remark-gfm, and prism-react-renderer for syntax-highlighted code blocks, and introduces optional page/limit pagination support to getAllProblems in both the backend controller and frontend API client. ChangesNotes Markdown Editor Preview
Problems List Pagination
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant NotesUI as Notes.tsx
participant ReactMarkdown
participant Highlight
User->>NotesUI: Click Edit/Preview toggle
NotesUI->>NotesUI: Set isPreview state
alt isPreview true
NotesUI->>ReactMarkdown: Render editForm.content with remarkGfm
ReactMarkdown->>Highlight: Render code blocks with themes.nightOwl
Highlight-->>NotesUI: Highlighted code HTML
ReactMarkdown-->>NotesUI: Rendered markdown HTML
else isPreview false
NotesUI-->>User: Show raw textarea
end
sequenceDiagram
participant Frontend as content.ts
participant Backend as contentController.ts
participant DB as Database
Frontend->>Backend: GET /api/content/problems?page&limit
alt page and limit provided
Backend->>Backend: Clamp page/limit values
Backend->>DB: Fetch paged problems (skip/take) and total count
DB-->>Backend: Problems page + total count
Backend-->>Frontend: {problems, total, page, limit, totalPages}
else no pagination params
Backend->>DB: Fetch all problems ordered by order_index
DB-->>Backend: All problems
Backend-->>Frontend: Array of problems
end
Possibly related issues
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
arcgod-design
force-pushed
the
feat/issue-11-markdown-preview
branch
from
9dde333 to
d0b592f
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
app/src/sections/Notes.tsx (1)
409-470: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExtract the shared markdown renderer and register typography styles.
ReactMarkdown+ customcoderendering is duplicated in the editor preview and read-only note view; move it into a shared component to keep both render paths in sync.prose prose-invert prose-smdepends on@tailwindcss/typography, butapp/tailwind.config.jsdoesn’t include that plugin, so the markdown styling won’t apply.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/src/sections/Notes.tsx` around lines 409 - 470, The markdown preview rendering is duplicated in the Notes view, including the ReactMarkdown setup and custom code block handling, so extract that into a shared markdown renderer component and reuse it for both the editor preview and the read-only note display. Also update the Tailwind setup in the app config to register the typography plugin so the prose/prose-invert/prose-sm classes used by the markdown renderer actually apply.app/src/api/content.ts (1)
54-61: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winFunction has no explicit return type despite a shape that changes based on args.
getAllProblemsreturns either a plain array or a paginated object depending on whetherpage/limitare passed, but the function signature is untyped (implicitanyviaresponse.data). Nothing prevents a future caller from passingpage/limitand mistakenly treating the result as an array (or vice versa), which would only surface as a runtime bug.♻️ Suggested typed overloads
+interface PaginatedProblems { + problems: Problem[]; + total: number; + page: number; + limit: number; + totalPages: number; +} + +export function getAllProblems(): Promise<Problem[]>; +export function getAllProblems(page: number, limit?: number): Promise<PaginatedProblems>; export const getAllProblems = async (page?: number, limit?: number) => { const params = new URLSearchParams(); if (page) params.set('page', String(page)); if (limit) params.set('limit', String(limit)); const qs = params.toString(); const response = await axios.get(`${API_BASE_URL}/api/content/problems${qs ? `?${qs}` : ''}`); return response.data; };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/src/api/content.ts` around lines 54 - 61, getAllProblems currently returns different shapes depending on whether page/limit are provided, but its signature is untyped and lets callers assume the wrong result shape. Add explicit typed overloads (or a discriminated union return type) on getAllProblems so the no-args case and paginated case are each represented correctly, and make the axios response typed instead of relying on response.data inference.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/src/api/content.ts`:
- Around line 54-61: getAllProblems currently returns different shapes depending
on whether page/limit are provided, but its signature is untyped and lets
callers assume the wrong result shape. Add explicit typed overloads (or a
discriminated union return type) on getAllProblems so the no-args case and
paginated case are each represented correctly, and make the axios response typed
instead of relying on response.data inference.
In `@app/src/sections/Notes.tsx`:
- Around line 409-470: The markdown preview rendering is duplicated in the Notes
view, including the ReactMarkdown setup and custom code block handling, so
extract that into a shared markdown renderer component and reuse it for both the
editor preview and the read-only note display. Also update the Tailwind setup in
the app config to register the typography plugin so the
prose/prose-invert/prose-sm classes used by the markdown renderer actually
apply.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 8ae71c85-ba03-4188-99b5-295a0db1dc26
⛔ Files ignored due to path filters (1)
app/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (4)
app/package.jsonapp/src/api/content.tsapp/src/sections/Notes.tsxbackend/src/controllers/contentController.ts
|
Closes #11 |
|
Hey @Rishabhworkspace, this PR has been ready for review for a while -- offering this friendly bump. The implementation matches the issue's specified behavior and CI is passing. PR: #66 When you have a moment, a review would be much appreciated. I am happy to iterate on any feedback. If the timing is not right, no worries at all -- just a gentle nudge from a contributor who has been waiting patiently. � |
2 participants
Description
Adds markdown rendering and preview to the Notes editor, allowing users to write and preview markdown-formatted notes with syntax highlighting.
Changes
lg:screens, editor and preview are shown side-by-side using CSS gridReactMarkdownwithremark-gfmfor tables, strikethrough, and task listsprism-react-rendererwith the Night Owl themegetAllProblemsAPI returns all problems when no pagination params are providedFiles Changed
app/src/sections/Notes.tsx— Added preview toggle, side-by-side layout, ReactMarkdown + syntax highlightingapp/src/api/content.ts— Made pagination params optional for backward compatbackend/src/controllers/contentController.ts— Made pagination optional (returns all when no params)app/package.json— Addedprism-react-rendererdependencyTesting
Closes #11
Summary by CodeRabbit
New Features
Bug Fixes