Rich Text Notes Editor for Invoice Description

[Kingsman-99]

Description

The invoice description field is a plain <textarea> that cannot format text, embed links, or organize long notes, limiting the usefulness of invoice descriptions for complex engagements. A lightweight rich text editor that serializes to a safe HTML or Markdown string should replace the plain textarea.

Technical Context

src/components/invoice/NotesEditor.tsx (new) integrates the @tiptap/react editor with the StarterKit extension for bold, italic, lists, and links. The editor stores its output as a sanitized HTML string using DOMPurify before saving to the API via src/hooks/useInvoiceForm.ts. The public invoice status page renders the notes as sanitized HTML using dangerouslySetInnerHTML with the same DOMPurify sanitization. Toolbar buttons use accessible aria-label attributes and role="toolbar".

Acceptance Criteria

• The notes field on the invoice creation and edit forms renders a toolbar with bold, italic, bullet list, and link buttons
• Editor output is sanitized with DOMPurify before storage and before rendering on the public page
• Pasting HTML from an external source strips disallowed tags and attributes
• The editor is keyboard-navigable: Tab moves to the toolbar, Enter activates toolbar buttons
• The saved notes render as formatted HTML on src/app/invoice/[id]/page.tsx and the public status page
• All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

---

[chidumebiodoh123-cloud]

@chidumebiodoh123-cloud has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

I have experience and I have reviewed the code. I will implement a rich text editor for invoice notes. Scope: Integrate TipTap with DOMPurify sanitization, accessible toolbar controls, and formatted rendering across invoice creation, editing, and public pages. Plan: Build the editor, enforce secure HTML sanitization on save and render, and ensure full acceptance criteria coverage.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @chidumebiodoh123-cloud to this issue.

[Almikefred]

@Almikefred has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer assign me this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Almikefred to this issue.

[drips-wave]

Congratulations, @Almikefred! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on July 30, 2026.

🧑‍💻 @Almikefred: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊