style: Added placeholder to EmailEditor.tsx

apps/web/package.json

@@ -19,6 +19,7 @@
     "@tiptap/extension-image": "^3.11.0",
     "@tiptap/extension-link": "^3.11.0",
     "@tiptap/extension-mention": "^3.11.0",
+    "@tiptap/extension-placeholder": "^3.11.0",
     "@tiptap/extension-table": "^3.11.0",
     "@tiptap/extension-table-cell": "^3.11.0",
     "@tiptap/extension-table-header": "^3.11.0",

apps/web/src/components/EmailEditor/EmailEditor.tsx

@@ -5,6 +5,7 @@ import {TextAlign} from '@tiptap/extension-text-align';
 import {Color} from '@tiptap/extension-color';
 import {TextStyle} from '@tiptap/extension-text-style';
 import {Link} from '@tiptap/extension-link';
+import Placeholder from '@tiptap/extension-placeholder';
 import {Variable} from './VariableExtension';
 import {setAvailableVariables, VariableMention} from './VariableMention';
 import {Toolbar} from './Toolbar';
@@ -25,7 +26,7 @@ import {
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
+  SelectValue
 } from '@plunk/ui';
 import {Code2, Eye, Monitor, Smartphone, Tablet, Upload, X} from 'lucide-react';
 import {network} from '../../lib/network';
@@ -153,6 +154,9 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
       ResizableImage,
       Variable,
       VariableMention,
+      Placeholder.configure({
+        placeholder: placeholder || 'Your next email starts here!',
+      }),
     ],
     // Only initialize with content if starting in visual mode
     // If starting in HTML mode (due to custom HTML), keep editor empty
@@ -556,7 +560,7 @@ export function EmailEditor({value, onChange, placeholder, subject, from, replyT
             <textarea
               value={htmlContent}
               onChange={e => handleHtmlChange(e.target.value)}
-              placeholder={placeholder || '<h1>Welcome!</h1><p>Your email content here...</p>'}
+              placeholder={placeholder || 'Your next email starts here!'}
               className="w-full h-full px-4 py-3 text-sm font-mono resize-none min-h-[400px] focus:outline-none"
             />
           </div>

apps/web/src/pages/templates/[id].tsx

@@ -288,7 +288,6 @@ export default function TemplateEditorPage() {
                 <EmailEditor
                   value={editedTemplate.body || ''}
                   onChange={body => setEditedTemplate({...editedTemplate, body})}
-                  placeholder="<h1>Welcome!</h1><p>Thanks for subscribing to our newsletter.</p>"
                 />
               </CardContent>
             </Card>

apps/web/src/pages/templates/create.tsx

@@ -185,11 +185,7 @@ export default function CreateTemplatePage() {
                 <CardDescription>Create your email using the visual editor or paste custom HTML</CardDescription>
               </CardHeader>
               <CardContent>
-                <EmailEditor
+                <EmailEditor value={body} onChange={setBody} />
-                  value={body}
-                  onChange={setBody}
-                  placeholder="<h1>Welcome!</h1><p>Thanks for subscribing to our newsletter.</p>"
-                />
               </CardContent>
             </Card>
           </form>