Skip to content

feat: add MarkdownToolbar with format buttons, character counter, and image paste support (#399) - #532

Open
waterWang wants to merge 1 commit into
BountyOnChain:mainfrom
waterWang:feat/markdown-editor-enhancements
Open

feat: add MarkdownToolbar with format buttons, character counter, and image paste support (#399)#532
waterWang wants to merge 1 commit into
BountyOnChain:mainfrom
waterWang:feat/markdown-editor-enhancements

Conversation

@waterWang

Copy link
Copy Markdown

Summary

Enhances the Markdown editor on the bounty creation form with a formatting toolbar, live character counter, and image paste support.

Changes

  1. New MarkdownToolbar component (components/MarkdownToolbar.tsx):

    • Format buttons: Bold, Italic, Link, Code, Heading, Bullet List, Numbered List
    • Insert Image button with file picker (accepts PNG, JPG, GIF, WebP)
    • Live character counter with color-coded warning near limit (10,000 char cap)
    • Keyboard shortcut hint (Ctrl+P to toggle preview)
    • Image paste from clipboard (paste -> upload to /api/v1/upload -> fallback to base64 data URL)
    • Drag and drop image support
    • Dark mode compatible
  2. Updated CreateBountyPage (app/bounties/new/page.tsx):

    • Integrated MarkdownToolbar into the Write tab
    • Added Ctrl+P keyboard shortcut to toggle Write/Preview tabs
    • Refactored textarea to use controlled component with setValue for toolbar integration
    • Improved editor border styling (rounded border wraps the entire editor group)
  3. New tests (components/MarkdownToolbar.spec.tsx):

    • 9 unit tests covering button rendering, character count, formatting actions (bold, italic, link, code), and placeholder insertion

Acceptance Criteria

  • Counter reflects text length as user types
  • Toolbar: Bold, Italic, Link, Code buttons available
  • Pasting a PNG uploads and inserts image markdown line (with API fallback to data URL)
  • All existing tests pass (9/9)

Closes #399

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.

[S-B] Add Markdown editor enhancements: live character counter, image paste, drag-drop

1 participant