# Rich Text Email Editor - User Guide

## What's New? ✨

Email Explorer now has a **rich text editor** - just like Gmail, Outlook, and other modern email apps! You can format your emails with colors, fonts, links, and more. No more boring plain text emails!

## Getting Started

### Opening the Editor

1. Click the **"Compose"** button in the top navigation
2. Or click **"Reply"**, **"Reply All"**, or **"Forward"** on any email

The compose window will open with the new rich text editor ready to use.

## Basic Formatting

### Making Text Bold, Italic, or Underlined

**Method 1: Use the Toolbar**
1. Type your text
2. Select (highlight) the text you want to format
3. Click the toolbar button:
   - **B** button for bold
   - **I** button for italic
   - **U** button for underline

**Method 2: Use Keyboard Shortcuts**
- **Bold**: Press `Ctrl + B` (or `Cmd + B` on Mac)
- **Italic**: Press `Ctrl + I` (or `Cmd + I` on Mac)
- **Underline**: Press `Ctrl + U` (or `Cmd + U` on Mac)

**Example:**
```
Type: Hello World
Select "Hello"
Click Bold button
Result: **Hello** World
```

### Adding Strikethrough

1. Select your text
2. Click the strikethrough button (text with a line through it)
3. Your text will appear ~~crossed out~~

## Using Headings

Headings make your emails easier to read by creating clear sections.

1. Place your cursor on a new line
2. Click one of the heading buttons:
   - **H1** - Largest heading (use for main titles)
   - **H2** - Medium heading (use for sections)
   - **H3** - Small heading (use for subsections)
3. Type your heading text

**When to use headings:**
- H1: Main email subject/title
- H2: Important sections
- H3: Sub-sections

## Creating Lists

### Bullet Points

1. Click the bullet list button (three horizontal lines with dots)
2. Type your first item
3. Press `Enter` to add another item
4. Press `Enter` twice to exit the list

**Example:**
```
• First item
• Second item
• Third item
```

### Numbered Lists

1. Click the numbered list button (lines with numbers)
2. Type your first item
3. Press `Enter` for the next number
4. Press `Enter` twice to finish

**Example:**
```
1. First step
2. Second step
3. Third step
```

## Text Alignment

Center text, align to the right, or justify paragraphs:

1. Select your paragraph (or place cursor in it)
2. Click an alignment button:
   - **Left align** - Default, text starts from the left
   - **Center** - Text centered in the middle
   - **Right align** - Text aligned to the right
   - **Justify** - Text spreads evenly across the line

**When to use:**
- Center: Titles, signatures, special announcements
- Right: Date stamps, signatures
- Justify: Formal letters

## Adding Colors

### Text Color

1. Select the text you want to color
2. Click the **paint palette** icon
3. A color grid will appear
4. Click your favorite color
5. Your text changes to that color!

**Available colors:**
- Black, grays, and white
- Reds and pinks
- Oranges and yellows
- Greens
- Blues and purples

**Tip:** Use colors sparingly - too many colors can be distracting!

### Highlighting Text

Want to make text stand out? Add a background color:

1. Select your text
2. Click the **highlighter** icon
3. Choose a highlight color from the grid
4. Your text gets a colored background

**Great for:**
- Important deadlines
- Key action items
- Drawing attention to specific information

## Inserting Links

Turn text into clickable links:

1. Select the text you want to make clickable
   - Example: "Click here"
2. Click the **chain link** icon in the toolbar
3. A popup will ask for the URL
4. Type or paste the web address
   - Example: `https://example.com`
5. Click OK or press Enter

**To remove a link:**
1. Click on the linked text
2. Click the **broken chain** icon (X over the chain)
3. The link is removed but text remains

**Tips:**
- Always test your links before sending
- Use descriptive text like "View the report" instead of "Click here"
- Make sure URLs start with `http://` or `https://`

## Special Formatting

### Adding Quotes

Perfect for replying to messages or citing information:

1. Place cursor on the line you want to quote
2. Click the **quote** icon (speech bubble)
3. Type your quoted text
4. It will appear with a line on the left side

**Example:**
> This is a quoted section.
> It has a gray line on the left.

### Code Snippets

Need to share code or technical info?

**Inline Code (short snippets):**
1. Select the text
2. Click the **code** icon (`</>`)
3. Text appears in monospace font with gray background

**Code Blocks (multiple lines):**
1. Place cursor where you want the code
2. Click the **code block** icon
3. Type or paste your code
4. Great for sharing scripts, commands, or structured data

### Horizontal Lines

Add a visual separator between sections:

1. Click where you want the line
2. Click the **horizontal line** icon (—)
3. A line appears across your email

**Good for:**
- Separating email signature from content
- Dividing different topics
- Creating visual breaks in long emails

## Undo & Redo

Made a mistake? No problem!

- **Undo**: Click the ↶ button or press `Ctrl + Z` (Cmd + Z on Mac)
- **Redo**: Click the ↷ button or press `Ctrl + Y` (Cmd + Y on Mac)

You can undo/redo multiple times to go back through your changes.

## Advanced: View HTML Source

For advanced users who know HTML:

1. Click the **< >** button (code icon) at the end of the toolbar
2. You'll see the raw HTML of your email
3. You can edit it directly if needed
4. Click the button again to return to visual mode

**Warning:** Only edit HTML if you know what you're doing! Invalid HTML can break your email formatting.

## Tips & Tricks

### Making Professional Emails

**Do:**
- ✓ Use headings to organize long emails
- ✓ Use bold for important points
- ✓ Add lists for clear action items
- ✓ Use one or two colors maximum
- ✓ Add links instead of long URLs

**Don't:**
- ✗ Use too many colors (looks unprofessional)
- ✗ Make everything bold (defeats the purpose)
- ✗ Use ALL CAPS (considered shouting)
- ✗ Mix too many font sizes

### Quick Formatting Workflow

1. Write your entire email first (don't format while writing)
2. Go back and add bold to key points
3. Convert lists to bullet points
4. Add links where appropriate
5. Review and send!

### Keyboard Shortcuts Summary

| Action | Windows/Linux | Mac |
|--------|--------------|-----|
| Bold | Ctrl + B | Cmd + B |
| Italic | Ctrl + I | Cmd + I |
| Underline | Ctrl + U | Cmd + U |
| Undo | Ctrl + Z | Cmd + Z |
| Redo | Ctrl + Y | Cmd + Y |

### Common Questions

**Q: Will my formatting work on all email clients?**  
A: Yes! Emails are sent with both HTML (formatted) and plain text versions. Modern email clients show the formatted version, while older ones show plain text.

**Q: Can I paste formatted text from Word or Google Docs?**  
A: Yes, but some complex formatting may be simplified. It's best to use the editor's built-in formatting tools.

**Q: How do I remove all formatting?**  
A: Select your text, then click the formatting buttons again to toggle them off. Or paste as plain text using Ctrl+Shift+V.

**Q: Can I add images?**  
A: Image upload is coming in a future update! For now, you can add image links using the hyperlink feature.

**Q: Does the editor work on mobile?**  
A: Yes! All features work on mobile browsers, though the interface may be slightly different.

## Troubleshooting

### Editor Not Showing Up
- Refresh the page
- Clear your browser cache
- Make sure you're using a modern browser (Chrome, Firefox, Safari, Edge)

### Formatting Not Working
- Make sure you've selected text before clicking formatting buttons
- Try clicking the button after selecting text
- Use keyboard shortcuts as an alternative

### Colors Not Saving
- Make sure to click a color from the palette
- The color picker should close automatically when you select
- If issues persist, try switching to HTML view and back

### Undo Not Working
- Undo only works for changes made in the current session
- Once you close the compose window, undo history is lost
- Save important emails as drafts to be safe

## What's Coming Next

Future updates will add:
- 📎 **Image uploads** - Drag and drop images directly into emails
- 😀 **Emoji picker** - Quick emoji insertion
- 📋 **Email templates** - Save frequently used formats
- 📊 **Tables** - Create structured data tables
- 🎨 **More colors** - Extended color palette

## Need Help?

If you run into any issues or have questions:
1. Check this guide first
2. Try the common troubleshooting steps
3. Report bugs on GitHub
4. Share feedback for improvements

---

**Happy emailing with your new rich text editor!** 🎉