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! 🎉
This commit is contained in:
@@ -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 = () => {
|
||||
|
||||
Reference in New Issue
Block a user