feat: Rich text editor and email system integration

## ✅ Step 4-5: Rich Text Editor & Integration

### RichTextEditor Component (TipTap)
- ✅ Modern WYSIWYG editor for React
- ✅ Toolbar: Bold, Italic, Lists, Links, Undo/Redo
- ✅ Variable insertion with buttons
- ✅ Placeholder support
- ✅ Clean, minimal UI

### TemplateEditor Updated
- ✅ Replaced Textarea with RichTextEditor
- ✅ Variables shown as clickable buttons
- ✅ Better UX for content editing
- ✅ HTML output for email templates

### Bootstrap Integration
- ✅ EmailManager initialized on plugin load
- ✅ Hooks into WooCommerce events automatically
- ✅ Disables WC emails to prevent duplicates

### Plugin Constants
- ✅ WOONOOW_PATH for template paths
- ✅ WOONOOW_URL for assets
- ✅ WOONOOW_VERSION for versioning

### Dependencies
- ✅ @tiptap/react
- ✅ @tiptap/starter-kit
- ✅ @tiptap/extension-placeholder
- ✅ @tiptap/extension-link

---

**Status:** Core email system complete!
**Next:** Test and create content templates 🚀

admin-spa/src/routes/Settings/Notifications/TemplateEditor.tsx

@@ -3,7 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
-import { Textarea } from '@/components/ui/textarea';
+import { RichTextEditor } from '@/components/ui/rich-text-editor';
 import { Label } from '@/components/ui/label';
 import {
   Dialog,
@@ -90,24 +90,8 @@ export default function TemplateEditor({
     },
   });
 
-  const insertVariable = (variable: string) => {
-    const textarea = document.querySelector('textarea[name="body"]') as HTMLTextAreaElement;
-    if (textarea) {
-      const start = textarea.selectionStart;
-      const end = textarea.selectionEnd;
-      const text = body;
-      const before = text.substring(0, start);
-      const after = text.substring(end);
-      const newText = before + `{${variable}}` + after;
-      setBody(newText);
-
-      // Set cursor position after inserted variable
-      setTimeout(() => {
-        textarea.focus();
-        textarea.setSelectionRange(start + variable.length + 2, start + variable.length + 2);
-      }, 0);
-    }
-  };
+  // Get variable keys for the rich text editor
+  const variableKeys = Object.keys(variables);
 
   return (
     <Dialog open={open} onOpenChange={onClose}>
@@ -141,30 +125,26 @@ export default function TemplateEditor({
           {/* Body */}
           <div className="space-y-2">
             <Label htmlFor="body">{__('Message Body')}</Label>
-            <Textarea
-              id="body"
-              name="body"
-              value={body}
-              onChange={(e) => setBody(e.target.value)}
+            <RichTextEditor
+              content={body}
+              onChange={setBody}
               placeholder={__('Enter notification message')}
-              rows={10}
-              className="font-mono text-sm"
+              variables={variableKeys}
             />
             <p className="text-xs text-muted-foreground">
-              {__('Use variables from the list below to personalize your message')}
+              {__('Click variables below to insert them into your message')}
             </p>
           </div>
 
-          {/* Variables */}
+          {/* Variable Reference */}
           <div className="space-y-3">
-            <Label>{__('Available Variables')}</Label>
+            <Label>{__('Variable Reference')}</Label>
             <div className="flex flex-wrap gap-2">
               {Object.entries(variables).map(([key, label]) => (
                 <Badge
                   key={key}
                   variant="secondary"
-                  className="cursor-pointer hover:bg-primary hover:text-primary-foreground transition-colors"
-                  onClick={() => insertVariable(key)}
+                  className="cursor-default"
                 >
                   <Plus className="h-3 w-3 mr-1" />
                   {`{${key}}`}