Is documented
The component is fully documented
Not built or on roadmap
Show details
Overview
The WYSIWYG (What You See Is What You Get) input component is a powerful tool that enables marketers to create and edit content directly in a format that closely resembles its appearance when published
Important note: While this component has been styled as a part of Aurora. It uses TinyMCE as the underlying library. Some functionality and deisgn decisions have been dictated by the library provider.
Design
Structure
A WYSIWYG editor consists of:
- Toolbar: A set of icons or buttons that allow marketers to format text and insert elements (like images or links) without HTML knowledge.
- Editing Area: The space where marketers can compose and format their content.
Responsiveness
The WYSIWYG editor adapts to various screen sizes.
Guidelines
Use cases
- Crafting email or template content, or other inputs that require and accept rich formatting.
Examples
Do
- Provide a clean, intuitive toolbar with clearly recognizable icons for common formatting options.
- Ensure the editing area mimics the final output as closely as possible to reduce guesswork for marketers.
- Include undo and redo buttons to easily correct mistakes or changes.
Don't
- Avoid cluttering the toolbar with too many options, which can overwhelm users. Instead, opt for a modular approach where advanced tools can be accessed as needed.
- Do not sacrifice the editor's performance for features. A responsive, lag-free experience is crucial for maintaining the flow of content creation.
- Refrain from using technical jargon in the toolbar or options. Keep labels and tooltips straightforward and accessible to all skill levels.
Content
- Placeholder text within the editing area should guide marketers on how to start or suggest the type of content expected.
- Tooltips for toolbar icons are essential for clarity, especially for less obvious formatting options.
Accessibility
- Keyboard Navigation: Ensure all editing functions can be performed using the keyboard, including accessing the toolbar and navigating within the content.
- Screen Reader Support: Use appropriate roles and attributes (ARIA) to make the toolbar accessible, and ensure content within the editing area is readable by screen readers.
- Focus Management: Provide clear focus indicators for the active elements within the editor, especially for keyboard navigation.
- Contrast and Legibility: Adhere to WCAG guidelines to ensure text and icons within the toolbar and editing area have sufficient contrast against their backgrounds.
Health
Accessibile
Tested against WCAG 2.1 AAA accessibility guidelines
Tokens
This component uses tokens in both Figma and code
Figma component
Includes a link to a Figma component that has been imported to Supernova
Storybook
Includes a link to an external code repository
-
Status
The component has a health status indicated
Not built or on roadmap