🛠️ [TASK] : User Input Component - Rich Text

[mike-mcnulty]

Summary

As a proposer, I need to be able to enter rich text responses, so that I can give long-form unstructured details about my proposal.

Use Cases:

• Solution Description
• Impact
• Value For Money

Acceptance Criteria

• Default values should be static placeholder that helps proposer provide answer (configured by admins)
• In Editing mode, default value should disappear when user starts editing field
• User can format text with Headers, Bold, Italic, Ordered List, Unordered List, Indent, Un-indent, Insert Image
• While editing is active, users can view their current character count vs the character limit
• User may enter characters beyond the character limit, but cannot save while char_count > char_limit
• Any text entered beyond the character limit should be shown to the user as red text to indicate the overflow to the user

Designs

https://www.figma.com/design/1e1MMDXyi0oL9sG9IunWL7/UI-Kit-Figma-for-catalyst?node-id=5271-49626&t=gTh3B1j2eYONQrjf-0

Default

Selected

Editing

Filled

[seankdesigns]

@mike-mcnulty Updated designs & added to ticket