MyClub/DOCS/EDITOR_USER_GUIDE.md

# 📝 Custom Rich Text Editor - User Guide

## Quick Start

Your enhanced editor is now available on all admin pages that use text editing (Articles, About, Activities, etc.).

---

## 🎨 Basic Text Formatting

### Toolbar Features

| Icon/Button | Function | Shortcut |
|------------|----------|----------|
| **H1, H2, H3** | Headings (different sizes) | - |
| **B** | Bold text | Ctrl+B |
| **I** | Italic text | Ctrl+I |
| **U** | Underline | Ctrl+U |
| **S** | Strike-through | - |
| **🎨** | Text color | - |
| **🎨** | Background color | - |
| **≡** | Bulleted list | - |
| **1.** | Numbered list | - |
| **⬅️ ➡️** | Text alignment | - |
| **🔗** | Insert link | Ctrl+K |
| **🖼️** | Insert image | See below |
| **📹** | Insert video | - |
| **"** | Block quote | - |
| **</>** | Code block | - |
| **🧹** | Clear formatting | - |

---

## 📸 Image Management (The New Cool Features!)

### 1. **Inserting Images with Crop**

#### Step-by-Step:
1. Click the **purple "Vložit obrázek"** button (or image icon in toolbar)
2. **Select** an image file from your computer
3. A **crop modal** appears with your image

#### In the Crop Modal:
- **Drag the blue rectangle** corners/edges to select the area you want
- **Adjust settings**:
  - **Max. šířka (Max Width)**: Default 1500px - reduces large images
  - **Kvalita JPEG (Quality)**: Default 85% - good balance of quality/size
- Click **"Oříznout a vložit"** (Crop and Insert)

**Pro Tip**: Higher quality = larger file size. 85% is recommended!

---

### 2. **Resizing Images** ↔️

Once an image is in the editor:

1. **Click on the image** → It gets a **blue outline** and shows selected
2. Look for the **blue circular handle** at bottom-right corner (it pulses!)
3. **Click and drag** the handle to resize
4. **Release** to set the size

**Visual Cues**:
- Blue outline = Image selected
- Blue circle = Resize handle
- Cursor changes to ↘️ when hovering over handle

---

### 3. **Repositioning Images** (Align Left/Right)

Want to move an image to the left or right?

1. **Click on the image** to select it
2. **Click and drag** the image itself (not the handle):
   - Drag **RIGHT** → Image moves to right side
   - Drag **LEFT** → Image moves to left side
3. **Release** to set position

**Note**: Drag at least 20 pixels for the alignment to activate.

---

### 4. **Deleting Images** 🗑️

Super simple:

1. **Click on the image** to select it (blue outline appears)
2. Press **Delete** or **Backspace** key
3. Image is removed!

**Alternative**: You can also use the toolbar "Clean" button to remove selected content.

---

## 🎭 Editor Modes

### Visual Editor (Default)
- WYSIWYG (What You See Is What You Get)
- Toolbar with formatting options
- Click and edit like Word

### HTML Mode
- Direct HTML code editing
- For advanced users
- Perfect for custom styling

**Toggle**: Use the **"Editor"** / **"HTML"** buttons at the top.

---

## 💡 Pro Tips & Tricks

### Image Best Practices
1. **Optimize before upload**: Use 85% quality and 1500px max width
2. **Crop first**: Select only the important part of images
3. **Resize in editor**: Fine-tune size after insertion
4. **Use alignment**: Drag images left/right for better layouts

### Keyboard Shortcuts
- **Ctrl+B**: Bold
- **Ctrl+I**: Italic
- **Ctrl+U**: Underline
- **Ctrl+K**: Insert link
- **Delete/Backspace**: Remove selected image
- **Ctrl+Z**: Undo (browser default)
- **Ctrl+Y**: Redo (browser default)

### Text Formatting
- **Headings**: Use H1 for main titles, H2 for sections, H3 for subsections
- **Lists**: Great for organizing information
- **Block quotes**: Perfect for highlighting important statements
- **Code blocks**: For technical content or preserving formatting

### Links
- Always use full URLs for external links (https://example.com)
- Internal links can use relative paths (/about, /contact)
- Links to external sites automatically get ↗ indicator

---

## 🎯 Common Tasks

### Creating a Blog Post with Images

1. **Write your text** using the editor
2. **Add headings** (H2 for sections)
3. **Insert image**:
   - Click "Vložit obrázek"
   - Select file
   - Crop to desired area
   - Adjust quality if needed
   - Insert
4. **Resize if needed**: Click image → drag handle
5. **Position**: Drag image left or right
6. **Continue writing** around the image
7. **Save** your post

### Editing Existing Content

1. **Click in the editor**
2. **Select text** to format
3. **Use toolbar** for formatting
4. **Click images** to resize/reposition
5. **Switch to HTML mode** if needed for advanced edits
6. **Save** when done

### Fixing Image Issues

**Image too large?**
- Click image → drag resize handle smaller

**Image in wrong position?**
- Click image → drag left or right

**Need to re-crop?**
- Delete image (select + Delete key)
- Re-insert with new crop

**Image quality poor?**
- Delete and re-insert with higher quality setting

---

## 🎨 Visual Indicators

### Image States

| State | Visual Cue |
|-------|-----------|
| **Normal** | Rounded corners, subtle shadow |
| **Hover** | Slight scale up, darker shadow |
| **Selected** | Blue outline, cursor changes to move |
| **Resizing** | Resize cursor (↘️), handle visible |

### Editor States

| State | Visual Cue |
|-------|-----------|
| **Active tool** | Blue background on toolbar button |
| **Hover** | Light blue background |
| **Focus** | Blue outline around entire editor |
| **Empty** | Placeholder text in gray |

---

## 🔧 Troubleshooting

### "I can't see the resize handle!"
- **Make sure** you clicked on the image
- **Look** for the blue outline (means selected)
- **Check** bottom-right corner for pulsing blue circle

### "My image won't move!"
- **Click** the image first to select it
- **Drag** (don't just click) for at least 20 pixels
- **Try again** if it didn't register the drag

### "Crop modal won't appear!"
- **Verify** you have upload permissions
- **Check** browser console for errors
- **Try** a different image format (JPG, PNG)

### "Image looks blurry after upload!"
- **Increase quality** in crop modal (try 90-95%)
- **Increase max width** (try 2000-2500px)
- **Use higher quality** source images

### "I deleted an image by mistake!"
- **Press Ctrl+Z** to undo
- Or **re-insert** the image

---

## 📱 Mobile/Tablet Usage

The editor works great on mobile devices:

- **Toolbar adapts** to smaller screens
- **Touch gestures** work for image manipulation
- **Tap** image to select
- **Pinch/drag** the resize handle
- **Swipe** to scroll through long content

---

## 🎓 Advanced Features

### Custom HTML
Switch to HTML mode to:
- Add custom CSS classes
- Insert iframes (for embeds)
- Fine-tune spacing and layout
- Add custom attributes

### Paste from Word/Google Docs
The editor automatically:
- Strips unwanted formatting
- Preserves basic styles (bold, italic, lists)
- Cleans up messy HTML

### Block Quotes
Great for:
- Highlighting quotes
- Important announcements
- Callout sections

Just select text and click the quote button (")

---

## ✨ What's New (Compared to TinyMCE)

### Better
- ✅ **Faster loading** - No external dependencies
- ✅ **Better image controls** - Drag, resize, crop all in one
- ✅ **Cleaner interface** - Modern, minimal design
- ✅ **Dark mode support** - Automatic theme detection
- ✅ **Keyboard shortcuts** - Delete images with Del key
- ✅ **Visual feedback** - Clear selected/hover states

### Same
- ✅ **All formatting options** - Bold, italic, lists, etc.
- ✅ **Link management** - Easy link insertion
- ✅ **Image uploads** - Same workflow
- ✅ **HTML editing** - Direct code access

### New
- ✅ **Image cropping** - Built-in crop tool
- ✅ **Drag positioning** - Move images easily
- ✅ **Resize handles** - Visual resize controls
- ✅ **Quality controls** - Optimize file sizes
- ✅ **Pulsing handles** - Easy to find resize points

---

## 🎯 Summary

Your new editor is **more powerful**, **easier to use**, and **looks better** than before!

**Key Features**:
- 📸 Advanced image editing (crop, resize, reposition, delete)
- ✨ Beautiful, modern interface
- ⚡ Fast and responsive
- 🎨 Full text formatting
- 📱 Mobile-friendly

**Remember**:
1. **Click** images to select
2. **Drag handle** to resize
3. **Drag image** to reposition
4. **Press Delete** to remove

Happy editing! 🚀