Files

dwindown 1211430011 feat: Code Mode Button Position & Markdown Support! 📝

## ✅ 3. Code Mode Button Moved to Left
**Problem:** Inconsistent layout, tabs on right should be Editor/Preview only
**Solution:**
- Moved Code Mode button next to "Message Body" label
- Editor/Preview tabs stay on the right
- Consistent, logical layout

**Before:**
```
Message Body                [Editor|Preview] [Code Mode]
```

**After:**
```
Message Body [Code Mode]                [Editor|Preview]
```

## ✅ 4. Markdown Support in Code Mode! 🎉
**Problem:** HTML is verbose, not user-friendly for tech-savvy users
**Solution:**
- Added Markdown parser with ::: syntax for cards
- Toggle between HTML and Markdown modes
- Full bidirectional conversion

**Markdown Syntax:**
```markdown
:::card
# Heading
Your content here
:::

:::card[success]
✅ Success message
:::

[button](https://example.com){Click Here}
[button style="outline"](url){Secondary Button}
```

**Features:**
- Standard Markdown: headings, bold, italic, lists, links
- Card blocks: :::card or :::card[type]
- Button blocks: [button](url){text}
- Variables: {order_url}, {customer_name}
- Bidirectional conversion (HTML ↔ Markdown)

**Files:**
- `lib/markdown-parser.ts` - Parser implementation
- `components/ui/code-editor.tsx` - Mode toggle
- `routes/Settings/Notifications/EditTemplate.tsx` - Enable support
- `DEPENDENCIES.md` - Add @codemirror/lang-markdown

**Note:** Requires `npm install @codemirror/lang-markdown`

Ready for remaining improvements (5-6)!

2025-11-13 11:50:38 +07:00

2.9 KiB

Raw Permalink Blame History

Required Dependencies for Email Builder

🚀 Quick Install (Recommended)

Install all dependencies at once:

cd admin-spa
npm install @tiptap/extension-text-align @tiptap/extension-image codemirror @codemirror/lang-html @codemirror/lang-markdown @codemirror/theme-one-dark @radix-ui/react-radio-group

📦 Individual Packages

TipTap Extensions (for RichTextEditor)

npm install @tiptap/extension-text-align @tiptap/extension-image

What they do:

@tiptap/extension-text-align: Text alignment (left, center, right)
@tiptap/extension-image: Image insertion with WordPress Media Modal

CodeMirror (for Code Mode)

npm install codemirror @codemirror/lang-html @codemirror/lang-markdown @codemirror/theme-one-dark

What they do:

codemirror: Core editor with professional features
@codemirror/lang-html: HTML syntax highlighting & auto-completion
@codemirror/lang-markdown: Markdown syntax highlighting & auto-completion
@codemirror/theme-one-dark: Professional dark theme

Radix UI (for UI Components)

npm install @radix-ui/react-radio-group

What it does:

@radix-ui/react-radio-group: Radio button component for button style selection

✅ After Installation

Start Development Server

npm run dev

Verify Installation

All these features should work:

✅ Heading selector in RichTextEditor
✅ Text alignment buttons
✅ Image insertion via WordPress Media
✅ Styled buttons in cards
✅ Code mode with syntax highlighting
✅ Button style selection dialog

🎯 What's New

All 5 User-Requested Improvements:

Heading Selector - H1-H4 and Paragraph dropdown
Styled Buttons in Cards - Custom TipTap extension
Variable Pills - Click to insert variables
WordPress Media for Images - Native WP Media Modal
WordPress Media for Logos - Store settings integration

New Files Created:

lib/wp-media.ts - WordPress Media Modal helper
components/ui/tiptap-button-extension.ts - Custom button node
components/ui/code-editor.tsx - CodeMirror wrapper

Files Modified:

components/ui/rich-text-editor.tsx - Added heading selector, alignment, buttons, WP Media
components/ui/image-upload.tsx - Added WP Media Modal option
components/EmailBuilder/EmailBuilder.tsx - Added variable pills
routes/Settings/Store.tsx - Added mediaType props

📚 Documentation

See EMAIL_BUILDER_IMPROVEMENTS.md for:

Detailed feature descriptions
Implementation details
User experience improvements
Testing checklist
Complete feature list

🙏 WordPress Integration

No additional WordPress plugins required! Uses native WordPress APIs:

window.wp.media - Media Modal
WordPress REST API - File uploads
Built-in nonce handling
Respects user permissions

All features work seamlessly with WordPress! 🎉

2.9 KiB Raw Permalink Blame History