Content Editor - Rich Text Editor + Color Picker

[ceyerkes]

Hello!

Although we're using Lexical for the rich text editor in the content editor, we recently learned that they don't provide the UI components for the toolbar like we initially thought. We're thinking this is a good opportunity to use all of the new editor-y Paste icons, and possibly start a convo around contributing the RTE back to Paste. Requirements below, looking forward to chatting more in office hours next week!

User has rich text editing options, including emojis, links, special characters, and all styling options (below)

Styling options for text:

• Bold, underline, italic, strikethrough, super&sub script
• Font family
• Font color
• Text highlighting
• Font size
• Alignment: L,R, Center, Justified
• Bulleted and Numeric lists
• Increase/decrease indent
• Adjust line height
• Insert links - indicate link type, target, and add URL
• Link styling
• Indicate style type - i.e. normal, heading (h) 1/h2/h3/etc.

Other styling options:

• Ability to clear styling
• Ability to add personalization/merge tags
• Allow the user to insert an image via URL
• Allow users to paste in formatted text from external sources and maintain that format (to the best of its default abilities)

Icon wish list:

• font color
• superscript
• subscript
• increase indent
• decrease indent
• line height
• clear styling

Open questions

• Does combobox/select require a label for this use case?
• Are there existing RTEs out there that you would recommend we look at that align to the direction Paste might take?

Figma link

cc: @shannoncawley, @cfree & @laurenfb

[laurenfb]

Does combobox/select require a label for this use case?

To expand on this question and add more details, we'd like to use a combobox or a select for the dropdowns shown in Colleen's screenshot. labelText is required on both components, so we are wondering if y'all have suggestions for another component to use that would meet the design brief, but does not use a label.

I understand that labels are important for accessibility, but unsure how that fits into the rich text editor toolbar scenario.

[laurenfb]

I did just try out an empty string for the label and that resolved. So I think we can go with that if there is not a better component to use.

[SiTaggart]

In a toolbar use case, it's OK to not have a visible label, but it's not OK to have no label at all. An empty string on its own would create an unlabeled input, which would be inaccessible to some users.

You can use the Screen Reader Only component to pass the combobox a hidden label. https://paste.twilio.design/components/screen-reader-only.

Alternatively, you can give the combobox an empty label string and apply aria-label="What ever you want the input label to be" as a prop instead.

[laurenfb]

Great, thank you for the update! That is super helpful. Will let you know if we have more questions.

[serifluous]

Hey @ceyerkes ! Thanks so much for signing up for office hours.

Just a note— I know you signed up for visual design feedback, but @libertycarlin will be OOO for office hours this week. She'll provide feedback in your Figma link async, and we'd still be super happy to see you in office hours regardless to talk through icon design + rich text editor questions.

[ceyerkes]

Awesome, that sounds great!

[SiTaggart]

Thanks for coming to Office Hours!

The recording is available and password can be found the help design system Slack channel.