feat: WordPress Media Modal Integration! 🎉

## ✅ Improvements 4-5 Complete - Respecting WordPress!

### 4. WordPress Media Modal for TipTap Images
**Before:**
- Prompt dialog for image URL
- Manual URL entry
- No media library access

**After:**
- Native WordPress Media Modal
- Browse existing uploads
- Upload new images
- Full media library features
- Alt text, dimensions included

**Implementation:**
- `wp-media.ts` helper library
- `openWPMediaImage()` function
- Integrates with TipTap Image extension
- Sets src, alt, title automatically

### 5. WordPress Media Modal for Store Logos/Favicon
**Before:**
- Only drag-and-drop or file picker
- No access to existing media

**After:**
- "Choose from Media Library" button
- Filtered by media type:
  - Logo: PNG, JPEG, SVG, WebP
  - Favicon: PNG, ICO
- Browse and reuse existing assets
- Professional WordPress experience

**Implementation:**
- Updated `ImageUpload` component
- Added `mediaType` prop
- Three specialized functions:
  - `openWPMediaLogo()`
  - `openWPMediaFavicon()`
  - `openWPMediaImage()`

## 📦 New Files:

**lib/wp-media.ts:**
```typescript
- openWPMedia() - Core function
- openWPMediaImage() - For general images
- openWPMediaLogo() - For logos (filtered)
- openWPMediaFavicon() - For favicons (filtered)
- WPMediaFile interface
- Full TypeScript support
```

## 🎨 User Experience:

**Email Builder:**
- Click image icon in RichTextEditor
- WordPress Media Modal opens
- Select from library or upload
- Image inserted with proper attributes

**Store Settings:**
- Drag-and-drop still works
- OR click "Choose from Media Library"
- Filtered by appropriate file types
- Reuse existing brand assets

## 🙏 Respect to WordPress:

**Why This Matters:**
1. **Familiar Interface** - Users know WordPress Media
2. **Existing Assets** - Access uploaded media
3. **Better UX** - No manual URL entry
4. **Professional** - Native WordPress integration
5. **Consistent** - Same as Posts/Pages

**WordPress Integration:**
- Uses `window.wp.media` API
- Respects user permissions
- Works with media library
- Proper nonce handling
- Full compatibility

## 📋 All 5 Improvements Complete:

✅ 1. Heading Selector (H1-H4, Paragraph)
✅ 2. Styled Buttons in Cards (matching standalone)
✅ 3. Variable Pills for Button Links
✅ 4. WordPress Media for TipTap Images
✅ 5. WordPress Media for Store Logos/Favicon

## 🚀 Ready for Production!

All user feedback implemented perfectly! 🎉

admin-spa/src/components/ui/image-upload.tsx

@@ -2,6 +2,7 @@ import React, { useState, useRef } from 'react';
 import { Upload, X, Image as ImageIcon } from 'lucide-react';
 import { Button } from './button';
 import { cn } from '@/lib/utils';
+import { openWPMediaImage, openWPMediaLogo, openWPMediaFavicon } from '@/lib/wp-media';
 
 interface ImageUploadProps {
   value?: string;
@@ -12,6 +13,7 @@ interface ImageUploadProps {
   accept?: string;
   maxSize?: number; // in MB
   className?: string;
+  mediaType?: 'image' | 'logo' | 'favicon'; // Type for WordPress Media Modal
 }
 
 export function ImageUpload({
@@ -23,6 +25,7 @@ export function ImageUpload({
   accept = 'image/*',
   maxSize = 2,
   className,
+  mediaType = 'image',
 }: ImageUploadProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
@@ -117,6 +120,16 @@ export function ImageUpload({
     fileInputRef.current?.click();
   };
 
+  const handleWPMedia = () => {
+    const openMedia = mediaType === 'logo' ? openWPMediaLogo :
+                      mediaType === 'favicon' ? openWPMediaFavicon :
+                      openWPMediaImage;
+    
+    openMedia((file) => {
+      onChange(file.url);
+    });
+  };
+
   return (
     <div className={cn('space-y-2 rounded-lg p-6 border border-muted-foreground/20', className)}>
       {label && (
@@ -191,6 +204,20 @@ export function ImageUpload({
                       Max size: {maxSize}MB
                     </p>
                   </div>
+                  <div className="pt-2">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleWPMedia();
+                      }}
+                    >
+                      <ImageIcon className="h-4 w-4 mr-2" />
+                      Choose from Media Library
+                    </Button>
+                  </div>
                 </>
               )}
             </div>

admin-spa/src/components/ui/rich-text-editor.tsx

@@ -6,6 +6,7 @@ import Link from '@tiptap/extension-link';
 import TextAlign from '@tiptap/extension-text-align';
 import Image from '@tiptap/extension-image';
 import { ButtonExtension } from './tiptap-button-extension';
+import { openWPMediaImage } from '@/lib/wp-media';
 import {
   Bold,
   Italic,
@@ -113,10 +114,13 @@ export function RichTextEditor({
   const [buttonStyle, setButtonStyle] = useState<'solid' | 'outline'>('solid');
 
   const addImage = () => {
-    const url = window.prompt(__('Enter image URL:'));
-    if (url) {
-      editor.chain().focus().setImage({ src: url }).run();
-    }
+    openWPMediaImage((file) => {
+      editor.chain().focus().setImage({ 
+        src: file.url,
+        alt: file.alt || file.title,
+        title: file.title,
+      }).run();
+    });
   };
 
   const openButtonDialog = () => {