Skip to content

feat(NotePreview): add NotePreview component for rendering truncated note content #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Arnab-Mandal1 wants to merge 8 commits into
base: main
Choose a base branch
from
Open

feat(NotePreview): add NotePreview component for rendering truncated note content #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cd0c0fc
feat(NotePreview): add NotePreview component for rendering truncated …
Arnab-Mandal1 Dec 24, 2025
2ae7ee6
fix(NotePreviewProps): make content prop optional
Arnab-Mandal1 Dec 24, 2025
df154b4
fix(NotePreview): display full content instead of truncated preview
Arnab-Mandal1 Dec 25, 2025
412af6d
Merge branch 'main' into feature/note-preview
Arnab-Mandal1 Jan 6, 2026
6aa9c09
Merge branch 'main' into feature/note-preview
Arnab-Mandal1 Jan 13, 2026
7b212f3
Merge branch 'main' into feature/note-preview
Arnab-Mandal1 Jan 15, 2026
85e09ec
refactor(NotePreview): remove unused maxLength prop
Arnab-Mandal1 Jan 15, 2026
3749bb5
Merge remote-tracking branch 'origin/feature/note-preview' into featu…
Arnab-Mandal1 Jan 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/components/notes/NotePreview/NotePreview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import type {NotePreviewProps} from "./NotePreviewProps.ts";

/**
* Renders a preview of the note content.
*
* This component processes the note content by truncating it to a specified length
* and wrapping it in a container with line-clamping styles to ensure it fits within the UI.
*
* @param props - The component properties.
* @param props.content - The text content of the note. Defaults to an empty string if null or undefined.
* @returns The rendered note preview element.
*/
export function NotePreview(props: Readonly<NotePreviewProps>) {
const contents = props.content ?? "";

return (
<div className="line-clamp-3 text-base-content">
<p>
{contents}
</p>
</div>
);
Comment on lines 16 to 22
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Resolve conflicting truncation strategies.

The component uses both character-based truncation (lines 16-18: slice(0, maxLength)) and CSS line-clamping (line-clamp-3). These two approaches can conflict:

  • Character slicing truncates at an exact character count, potentially mid-word
  • Line clamping truncates at line boundaries after 3 lines of text

If maxLength allows text that spans more than 3 lines, both truncations apply, which may produce unexpected results. Conversely, if maxLength produces only 1-2 lines, line-clamp-3 is redundant.

Choose one truncation strategy:

  • Option 1: Keep only line-clamp-3 for visual line-based truncation (remove maxLength prop and slicing logic)
  • Option 2: Keep only character slicing (remove line-clamp-3 class)
  • Option 3: If both are intentional, clarify the behavior in JSDoc
🔎 Example fix for Option 1 (line-based only)

In NotePreviewProps.ts:

 export interface NotePreviewProps {
     content?: string;
-    maxLength: number;
 }

In NotePreview.tsx:

-    const contents = props.content ?? "";
-    const previewText = contents.length > props.maxLength
-        ? contents.slice(0, props.maxLength)
-        : contents;
+    const previewText = props.content ?? "";

     return (
         <div className="line-clamp-3 text-base-content">

Committable suggestion skipped: line range outside the PR's diff.

✅ Addressed in commit df154b4

Copy link
Owner

@dbc2201 dbc2201 Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Arnab-Mandal1

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!

Copy link
Collaborator Author

@Arnab-Mandal1 Arnab-Mandal1 Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@coderabbitai recheck

Copy link
Contributor

@coderabbitai coderabbitai bot Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Fetch the current state of the NotePreview component files
cat src/components/notes/NotePreview/NotePreview.tsx
echo "---NotePreviewProps---"
cat src/components/notes/NotePreview/NotePreviewProps.ts

Length of output: 957

@Arnab-Mandal1, good progress! The conflicting truncation strategies have been resolved—the component now uses only CSS line-clamping (line-clamp-3), and the character-based slicing logic has been removed. ✅

However, there's a cleanup issue remaining:

The maxLength prop is still declared in NotePreviewProps but is no longer used in the component.

This creates confusion for anyone using this component, as they'll see maxLength as a required prop but it won't have any effect. Additionally, the JSDoc still documents @param props.maxLength, which is now misleading.

To complete the fix:

  1. Remove maxLength from NotePreviewProps.ts:
export interface NotePreviewProps {
    content?: string;
}
  1. Remove the @param props.maxLength line from the JSDoc in NotePreview.tsx:
/**
 * Renders a preview of the note content.
 *
 * This component processes the note content by wrapping it in a container 
 * with line-clamping styles to ensure it fits within the UI.
 *
 * `@param` props - The component properties.
 * `@param` props.content - The text content of the note. Defaults to an empty string if null or undefined.
 * `@returns` The rendered note preview element.
 */

Would you like me to create an issue to track this cleanup, or will you address it in this PR?

🧠 Learnings used 
Learnt from: CR
Repo: dbc2201/class-notes PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-12-23T08:13:56.218Z
Learning: Applies to src/components/**/*.tsx : Use JSDoc comments for component documentation with `example` tags

Copy link
Collaborator Author

@Arnab-Mandal1 Arnab-Mandal1 Jan 15, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

check

}
3 changes: 3 additions & 0 deletions src/components/notes/NotePreview/NotePreviewProps.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export interface NotePreviewProps {
content?: string;
}