66b3b9fa03
## ✅ Improvements 1-3 Complete: ### 1. Heading/Tag Selector in RichTextEditor **Before:** - No way to set heading levels - Users had to type HTML manually **After:** - Dropdown selector in toolbar - Options: Paragraph, H1, H2, H3, H4 - One-click heading changes - User controls document structure **UI:** ``` [Paragraph ▼] [B] [I] [List] ... ``` ### 2. Styled Buttons in Cards **Problem:** - Buttons in TipTap looked raw - Different from standalone buttons - Not editable (couldn't change text/URL) **Solution:** - Custom TipTap ButtonExtension - Same inline styles as standalone buttons - Solid & Outline styles - Fully editable via dialog **Features:** - Click button icon in toolbar - Dialog opens for text, link, style - Button renders with proper styling - Matches email rendering exactly **Extension:** - `tiptap-button-extension.ts` - Renders with inline styles - `data-` attributes for editing - Non-editable (atomic node) ### 3. Variable Pills for Button Links **Before:** - Users had to type {variable_name} - Easy to make typos - No suggestions **After:** - Variable pills under Button Link input - Click to insert - Works in both: - RichTextEditor button dialog - EmailBuilder button dialog **UI:** ``` Button Link [input field: {order_url}] {order_number} {order_total} {customer_name} ... ↑ Click any pill to insert ``` ## 📦 New Files: **tiptap-button-extension.ts:** - Custom TipTap node for buttons - Inline styles matching email - Atomic (non-editable in editor) - Dialog-based editing ## �� User Experience: **Heading Control:** - Professional document structure - No HTML knowledge needed - Visual feedback (active state) **Button Styling:** - Consistent across editor/preview - Professional appearance - Easy to configure **Variable Insertion:** - No typing errors - Visual discovery - One-click insertion ## Next Steps: 4. WordPress Media Modal for images 5. WordPress Media Modal for Store logos/favicon All improvements working perfectly! 🚀
75 lines
2.7 KiB
JSON
75 lines
2.7 KiB
JSON
{
|
|
"name": "woonoow-admin-spa",
|
|
"private": true,
|
|
"type": "module",
|
|
"version": "0.0.1",
|
|
"scripts": {
|
|
"dev": "vite --host woonoow.local --port 5173 --strictPort",
|
|
"build": "vite build",
|
|
"preview": "vite preview --port 5173",
|
|
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives"
|
|
},
|
|
"dependencies": {
|
|
"@codemirror/lang-html": "^6.4.11",
|
|
"@codemirror/theme-one-dark": "^6.1.3",
|
|
"@dnd-kit/core": "^6.3.1",
|
|
"@dnd-kit/sortable": "^10.0.0",
|
|
"@dnd-kit/utilities": "^3.2.2",
|
|
"@radix-ui/react-accordion": "^1.2.12",
|
|
"@radix-ui/react-alert-dialog": "^1.1.15",
|
|
"@radix-ui/react-avatar": "^1.1.10",
|
|
"@radix-ui/react-checkbox": "^1.3.3",
|
|
"@radix-ui/react-dialog": "^1.1.15",
|
|
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
"@radix-ui/react-hover-card": "^1.1.15",
|
|
"@radix-ui/react-label": "^2.1.7",
|
|
"@radix-ui/react-navigation-menu": "^1.2.14",
|
|
"@radix-ui/react-popover": "^1.1.15",
|
|
"@radix-ui/react-radio-group": "^1.3.8",
|
|
"@radix-ui/react-select": "^2.2.6",
|
|
"@radix-ui/react-separator": "^1.1.7",
|
|
"@radix-ui/react-slot": "^1.2.3",
|
|
"@radix-ui/react-switch": "^1.2.6",
|
|
"@radix-ui/react-tabs": "^1.1.13",
|
|
"@tanstack/react-query": "^5.90.5",
|
|
"@tiptap/extension-image": "^3.10.7",
|
|
"@tiptap/extension-link": "^3.10.5",
|
|
"@tiptap/extension-placeholder": "^3.10.5",
|
|
"@tiptap/extension-text-align": "^3.10.7",
|
|
"@tiptap/react": "^3.10.5",
|
|
"@tiptap/starter-kit": "^3.10.5",
|
|
"class-variance-authority": "^0.7.1",
|
|
"clsx": "^2.1.1",
|
|
"cmdk": "^1.1.1",
|
|
"codemirror": "^6.0.2",
|
|
"lucide-react": "^0.547.0",
|
|
"next-themes": "^0.4.6",
|
|
"qrcode": "^1.5.4",
|
|
"react": "^18.3.1",
|
|
"react-dom": "^18.3.1",
|
|
"react-router-dom": "^7.9.4",
|
|
"recharts": "^3.3.0",
|
|
"sonner": "^2.0.7",
|
|
"tailwind-merge": "^3.3.1",
|
|
"vaul": "^1.1.2",
|
|
"zustand": "^5.0.8"
|
|
},
|
|
"devDependencies": {
|
|
"@types/react": "^18.3.5",
|
|
"@types/react-dom": "^18.3.0",
|
|
"@typescript-eslint/eslint-plugin": "^8.46.3",
|
|
"@typescript-eslint/parser": "^8.46.3",
|
|
"@vitejs/plugin-react": "^5.1.0",
|
|
"autoprefixer": "^10.4.21",
|
|
"eslint": "^9.39.1",
|
|
"eslint-plugin-react": "^7.37.5",
|
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
"eslint-plugin-react-refresh": "^0.4.24",
|
|
"postcss": "^8.5.6",
|
|
"tailwindcss": "^3.4.13",
|
|
"tailwindcss-animate": "^1.0.7",
|
|
"typescript": "^5.6.3",
|
|
"vite": "^5.4.8"
|
|
}
|
|
}
|