Text Formatting
Format your text with headings, fonts, spacing, and list styles using enhanced dropdown components.
Enhanced Dropdown Components
The editor includes four main dropdown components, each designed for optimal user experience:
Headings Dropdown
- • Shows current heading level (Normal, Heading 1, Heading 2, etc.)
- • Wide layout for better readability
- • Visual feedback for active selection
Font Family Dropdown
- • Displays current font selection (Arial, Times New Roman, etc.)
- • Font preview in dropdown items
- • Wide layout to accommodate font names
Line & Paragraph Spacing Dropdown
- • Shows current spacing setting (Single, 1.5, Double, etc.)
- • Includes paragraph spacing options
- • Clear visual representation of spacing values
Bullet List Style Dropdown
- • Displays current bullet style (● Disc, ○ Circle, ■ Square)
- • Visual bullet previews
- • Easy switching between list styles
Dropdown Benefits
Always Visible
Selected values are displayed directly on the dropdown button
Wide Layout
Increased width for better readability and longer text
Visual Feedback
Active selections are highlighted
Responsive Design
Adapts to different screen sizes
Consistent Styling
All dropdown components share a uniform appearance across the editor, providing a consistent user experience. The styling is part of the standalone CSS file and can be customized using the customClasses prop.