Skip to content

feat(frontend): add rich text editor for project descriptions (#795) - #984

Merged
github-actions[bot] merged 1 commit into
Smartdevs17:mainfrom
sandrawillow001-afk:feat/795-rich-text-editor
Sep 28, 2026
Merged

github-actions[bot] merged 1 commit into
Smartdevs17:mainfrom
sandrawillow001-afk:feat/795-rich-text-editor

Conversation

@sandrawillow001-afk

Copy link
Copy Markdown
Contributor

Summary

Replaces the plain description input on the Create Project form with a markdown-backed rich text editor.

Closes #795

Changes

  • New RichTextEditor (frontend/components/markdown/RichTextEditor.tsx):
    • formatting toolbar — bold, italic, strikethrough, headings, bullet/numbered lists, quote, code block, link
    • keyboard shortcuts — Cmd/Ctrl+B, Cmd/Ctrl+I, Cmd/Ctrl+K
    • image support — insert by URL, paste, or drag & drop (≤ 5MB)
    • live sanitized preview that reuses MarkdownContent
    • character counter and limit via maxLength
  • Wired into both project creation pages (localized + non-localized) via react-hook-form Controller.
  • Fixed an unclosed <SyntaxHighlighter> tag in MarkdownContent.tsx that broke markdown rendering.
  • Docs: docs/frontend/rich-text-editor.md.

Why markdown

Descriptions are persisted on-chain as part of workDescription; a portable plain-text format avoids HTML escaping issues, and rendering already sanitizes with rehype-sanitize.

Testing

  • cd frontend && npx vitest run components/markdown/__tests__/RichTextEditor.test.tsx → 9 passed
  • npx eslint on all changed files → clean

| No regressions in existing frontend build/type checks for the touched files. |

…evs17#795)

Replace the plain description input on the project creation form with a
markdown-backed rich text editor so contributors can add formatting, links,
lists, code, and images while keeping descriptions portable and sanitized.

- Add RichTextEditor with a formatting toolbar, keyboard shortcuts, live
  sanitized preview, and URL/paste/drag-drop image insertion
- Wire the editor into the localized and non-localized project forms via
  react-hook-form Controller
- Fix an unclosed SyntaxHighlighter tag in MarkdownContent that broke the
  markdown renderer
- Document the component and add unit tests

Generated with Codebuff 🤖
Co-Authored-By: Codebuff <noreply@codebuff.com>
@vercel

vercel Bot commented Sep 28, 2026

Copy link
Copy Markdown

@sandrawillow001-afk is attempting to deploy a commit to the smartdevs17's projects Team on Vercel.

A member of the Team first needs to authorize it.

@drips-wave

drips-wave Bot commented Sep 28, 2026

Copy link
Copy Markdown

@sandrawillow001-afk Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@github-actions
github-actions Bot merged commit aa442cd into Smartdevs17:main Sep 28, 2026
2 of 3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Frontend: Add rich text editor for project descriptions

1 participant