> ## Documentation Index
> Fetch the complete documentation index at: https://docs.parvej.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Rich Text Editor

> Advanced content editor with embeds, photo grids, and full formatting

# Rich Text Editor

A powerful content editor used throughout the admin panel for blogs, projects, and products.

## Text Formatting

| Feature   | How to Use                            |
| --------- | ------------------------------------- |
| Bold      | Select text → Click **B** or `Ctrl+B` |
| Italic    | Select text → Click **I** or `Ctrl+I` |
| Underline | Select text → Click **U** or `Ctrl+U` |
| Headings  | Select text → Click H1, H2, or H3     |
| Lists     | Click bullet or numbered list icon    |
| Alignment | Click align left/center/right/justify |

## Font & Color

### Change Font

1. Select text
2. Click **Font** button
3. Choose from Google Fonts or custom fonts
4. Font applies immediately

### Change Color

1. Select text
2. Click **Color** button
3. Pick from palette, use color picker, or enter hex code
4. Click **Apply**

### Change Size

1. Select text
2. Click **Size** button
3. Choose preset (Tiny to Huge) or enter custom size
4. Click **Apply**

## Images

### Insert Image

1. Click **Image** button (camera icon)
2. Choose method:
   * **URL**: Paste image URL
   * **Upload**: Select file from computer
3. Click **Insert**

### Resize Image

1. Click image to select (green border appears)
2. Drag handles:
   * **Corners**: Maintain aspect ratio
   * **Edges**: Resize one dimension

### Text Wrap

1. Select image
2. Align left or right
3. Click **Text Wrap** button
4. Adjust gap (0-50px)
5. Toggle wrap ON

## Embeds

Embed external content like YouTube videos, Google Maps, or any iframe.

### Insert Embed

1. Click **Embed** button
2. Switch to **Code View**
3. Paste embed code:
   ```html theme={null}
   <iframe src="https://www.youtube.com/embed/VIDEO_ID" 
           width="560" height="315"></iframe>
   ```
4. Switch to **Preview** to verify
5. Click **Insert Embed**

### Customize Embed

After inserting:

* **Resize**: Drag corner/edge handles
* **Border**: Click Border button to add/customize
* **Align**: Use alignment buttons
* **Edit Code**: Click Code button to modify

### Supported Embeds

* YouTube
* Vimeo
* Google Maps
* Twitter/X
* Instagram
* CodePen
* Any iframe

## Photo Grids

Insert beautiful image layouts with 24 pre-designed templates.

### Insert Photo Grid

1. Click **Grid** button (Grid3x3 icon)
2. Browse 24 layout options
3. Click preferred layout
4. Add images to each cell:
   * Click cell
   * Choose URL or Upload
   * Click **Add Image**
5. Click **Insert Grid**

### Layout Categories

| Category   | Layouts                      |
| ---------- | ---------------------------- |
| Simple     | 2-4 columns, 2x2, 3x2 grids  |
| Asymmetric | Large + small combinations   |
| Creative   | Masonry, featured layouts    |
| Gallery    | Portfolio-style arrangements |
| Special    | Hero + grid, collage styles  |

### Edit Grid

1. Hover over grid in editor
2. Click **Settings** icon to edit
3. Click **Delete** icon to remove

## Tables

### Insert Table

1. Click **Table** button
2. Select dimensions (rows × columns)
3. Table appears in editor

### Edit Table

* Click cells to edit content
* Use table controls to:
  * Add/remove rows
  * Add/remove columns
  * Merge cells
  * Set alignment

## Links

### Link Selected Text

1. Select text
2. Click **Link** button (chain icon)
3. Enter URL
4. Press Enter or click **Insert**

### Insert New Link

1. Click **Link** button (no selection)
2. Enter link title
3. Enter URL
4. Click **Insert**

### Edit Link

1. Click existing link
2. Modify URL or title
3. Click **Update** or **Remove Link**

## Blockquotes

### Insert Quote

1. Click **Quote** button
2. Enter quote text
3. Customize colors:
   * Background color
   * Border color
4. Click **Insert Quote**

### Edit Quote

1. Click existing quote
2. Modify text or colors
3. Click **Update Quote**

## Code Blocks

1. Click **Code** button
2. Enter code
3. Code appears with monospace formatting

## Keyboard Shortcuts

| Shortcut | Action                         |
| -------- | ------------------------------ |
| `Ctrl+B` | Bold                           |
| `Ctrl+I` | Italic                         |
| `Ctrl+U` | Underline                      |
| `Delete` | Delete selected image/embed    |
| `Enter`  | Quick insert/update in dialogs |

## Tips

<Tip>
  Use **Photo Grids** for showcasing multiple images instead of inserting them one by one.
</Tip>

<Tip>
  **Embed dimensions** in your code determine the display size everywhere (editor, cards, modals).
</Tip>

<Warning>
  Only embed content from trusted sources for security.
</Warning>