Conversation
Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Updates timesheet comment/description inputs to use the TextEditor component from @rtcamp/frappe-ui-react, aiming to improve editing behavior for time entry comments.
Changes:
- Replaced
TextareawithTextEditorin team weekly approval entry editing. - Replaced
TextareawithTextEditorin the “Add time” dialog comment field. - Replaced
TextareawithTextEditorin the inline time-entry form comment field.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/packages/app/src/pages/timesheet/team/weekly-approval/entryRow.tsx | Swaps comment editing UI from Textarea to TextEditor for weekly approval entries. |
| frontend/packages/app/src/pages/timesheet/components/add-time/index.tsx | Uses TextEditor for the “Add time” comment field. |
| frontend/packages/app/src/components/timesheet-row/components/inline-time-entry/timeEntryForm.tsx | Uses TextEditor for inline entry comments in add/edit flows. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
frontend/packages/app/src/pages/timesheet/team/weekly-approval/entryRow.tsx
Outdated
Show resolved
Hide resolved
...end/packages/app/src/components/timesheet-row/components/inline-time-entry/timeEntryForm.tsx
Show resolved
Hide resolved
Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
Signed-off-by: ayushnirwal <53055971+ayushnirwal@users.noreply.github.com>
| {!isExpanded ? ( | ||
| <span | ||
| className={cn( | ||
| "w-full min-w-0 text-base truncate text-ink-gray-6", | ||
| { | ||
| "group-hover:pr-4 group-focus-within:pr-4": | ||
| !disabled, | ||
| }, | ||
| )} | ||
| > | ||
| {entry.description} | ||
| </span> |
There was a problem hiding this comment.
This is shown when the time entry is minimized. I think we should strip any HTML from the description and display only plain text here.
We can add a simple stripTags utility function I think.
Screen.Recording.2026-04-07.at.2.25.03.PM.mov
| onChange={(val) => setDescription(val)} | ||
| fixedMenu={false} | ||
| placeholder="Comment" | ||
| editorClass="h-24 overflow-scroll bg-white border rounded-md border-outline-gray-2" |
There was a problem hiding this comment.
Wherever overflow-scroll is used, replace it with overflow-auto so the scrollbar is only visible when the content exceeds the container height. At the same time, add scrollbar or scrollbar-thin classes to maintain consistent scrollbar styling across the application.
There was a problem hiding this comment.
Current:
With overflow-auto:
| <TextEditor | ||
| content={field.state.value} | ||
| onChange={(value) => field.handleChange(value)} | ||
| fixedMenu={false} | ||
| editorClass="h-24 overflow-scroll bg-white border rounded-md border-outline-gray-2" |
There was a problem hiding this comment.
| content={field.state.value} | ||
| onChange={(value) => field.handleChange(value)} | ||
| fixedMenu={false} | ||
| editorClass="h-24 overflow-scroll bg-white border rounded-md border-outline-gray-2" |
There was a problem hiding this comment.
Add px-2 padding to the TextEditor when in edit mode so the text is not close to the container border.
Current:
With Padding:
There was a problem hiding this comment.
Apply everywhere where TextEditor component is used with edit mode.
Description
frappe-ui-reactinstead of textarea.Screenshot/Screencast
Checklist
Fixes #916