diff --git a/apps/web/package.json b/apps/web/package.json index a2a4a12..760c688 100644 --- a/apps/web/package.json +++ b/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", diff --git a/apps/web/src/components/EmailEditor/EmailEditor.tsx b/apps/web/src/components/EmailEditor/EmailEditor.tsx index b808887..150bac1 100644 --- a/apps/web/src/components/EmailEditor/EmailEditor.tsx +++ b/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